Skip to content

Fix image loader for PAT-token and pagination of fetching org-repos for search #356

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
May 15, 2024
Merged

Fix image loader for PAT-token and pagination of fetching org-repos for search #356

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c167126
fixed the image loader for PAT-token
e-for-eshaan May 15, 2024
7072456
fixes the pagination of fetching org-repos for search
e-for-eshaan May 15, 2024
a025a67
adds limit to the pagination requests
e-for-eshaan May 15, 2024
9c7afbe
removes redundant variables
e-for-eshaan May 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions web-server/pages/api/internal/[org_id]/git_provider_org.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,8 @@ const providerOrgBrandingMap = {
gitlab: 'groups'
};

const THRESHOLD = 300;

export const getProviderOrgs = (
org_id: ID,
provider: CodeSourceProvidersIntegration
Expand Down Expand Up @@ -101,6 +103,9 @@ async function getRepos(
let response: Response;

do {
if (allRepos.length >= THRESHOLD) {
break;
}
response = await fetch(url, {
headers: {
Authorization: `token ${token}`
Expand All @@ -116,9 +121,10 @@ async function getRepos(

const nextLink = response.headers.get('Link');
if (nextLink) {
// @ts-ignore
const nextUrl = nextLink.split(',').find((link) => link?.rel === 'next');
url = nextUrl ? nextUrl.slice(1, -1) : ''; // Extract URL from link header
const nextUrl = nextLink
.split(',')
.find((link) => link.includes('rel="next"'));
url = nextUrl ? nextUrl.trim().split(';')[0].slice(1, -1) : '';
} else {
url = '';
}
Expand Down
51 changes: 21 additions & 30 deletions web-server/src/content/Dashboards/useIntegrationHandlers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,12 +70,11 @@ const ConfigureGithubModalBody: FC<{
};

const handleSubmission = useCallback(async () => {

if (!token.value) {
setError('Please enter a valid token');
return;
}
isLoading.true();
depFn(isLoading.true);
checkGitHubValidity(token.value)
.then(async (isValid) => {
if (!isValid) throw new Error('Invalid token');
Expand All @@ -84,9 +83,7 @@ const ConfigureGithubModalBody: FC<{
try {
const res = await getMissingPATScopes(token.value);
if (res.length) {
throw new Error(
`Token is missing scopes: ${res.join(', ')}`
);
throw new Error(`Token is missing scopes: ${res.join(', ')}`);
}
} catch (e) {
// @ts-ignore
Expand All @@ -95,16 +92,10 @@ const ConfigureGithubModalBody: FC<{
})
.then(async () => {
try {
return await linkProvider(
token.value,
orgId,
Integration.GITHUB
);
return await linkProvider(token.value, orgId, Integration.GITHUB);
} catch (e: any) {
throw new Error(
`Failed to link Github${
e?.message ? `: ${e?.message}` : ''
}`,
`Failed to link Github${e?.message ? `: ${e?.message}` : ''}`,
e
);
}
Expand All @@ -127,9 +118,7 @@ const ConfigureGithubModalBody: FC<{
setError(e.message);
console.error(`Error while linking token: ${e.message}`, e);
})
.finally(() => {
isLoading.false();
});
.finally(isLoading.false);
}, [
dispatch,
enqueueSnackbar,
Expand Down Expand Up @@ -219,14 +208,15 @@ const TokenPermissions = () => {
}, [position, positionArray.length]);

const expand = useBoolState(false);
const isLoading = useBoolState(false);
const imageLoaded = useBoolState(false);

// change position every second
useEffect(() => {
if (!imageLoaded.value) return;
if (expand.value) return depFn(position.set, 0);
const interval = setInterval(changePosition, 2000);
return () => clearInterval(interval);
}, [changePosition, expand.value, position.set]);
}, [changePosition, expand.value, imageLoaded.value, position.set]);

const styles: SxProps[] = useMemo(() => {
const baseStyles = {
Expand Down Expand Up @@ -297,39 +287,40 @@ const TokenPermissions = () => {
return (
<FlexBox col gap1 maxWidth={'100%'} overflow={'auto'}>
<div
onMouseEnter={expand.true}
onMouseEnter={!imageLoaded.value ? null : expand.true}
onMouseLeave={expand.false}
style={{
overflow: 'hidden',
borderRadius: '12px',
height: expand.value ? '1257px' : '240px',
transition: 'all 0.8s ease',
position: 'relative',
maxWidth: '100%'
maxWidth: '100%',
background: '#0D1017'
}}
>
<Image
onLoadStart={isLoading.true}
onLoad={isLoading.false}
onLoadingComplete={imageLoaded.true}
style={{
position: 'relative',
bottom: expand.value ? 0 : positionArray[position.value],
transition: 'all 0.8s ease',
opacity: isLoading.value ? 0 : 1
opacity: !imageLoaded.value ? 0 : 1
}}
src="/assets/PAT_permissions.png"
width={816}
height={1257}
alt="PAT_permissions"
/>

<FlexBox sx={styles[position.value]} />
{imageLoaded.value && <FlexBox sx={styles[position.value]} />}

{expandedStyles.map((style, index) => (
<FlexBox key={index} sx={style} />
))}
{imageLoaded.value &&
expandedStyles.map((style, index) => (
<FlexBox key={index} sx={style} />
))}

{isLoading.value && (
{!imageLoaded.value && (
<FlexBox
sx={{
position: 'absolute',
Expand All @@ -338,11 +329,11 @@ const TokenPermissions = () => {
transform: 'translate(-50%, -50%)'
}}
>
Loading...
<Line secondary>Loading...</Line>
</FlexBox>
)}
</div>
<Line tiny secondary>
<Line tiny secondary sx={{ opacity: imageLoaded.value ? 1 : 0 }}>
Hover to expand
</Line>
</FlexBox>
Expand Down