-
Notifications
You must be signed in to change notification settings - Fork 64
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Move Vercel integration page to client (#1236)
* Move Vercel integration page to client * Cleanup debugging, type * Rename file * Fix loading flash * Cleanup unused deps * Refactor to use FetchResult * Regen GQL
- Loading branch information
1 parent
678d85e
commit 753c530
Showing
9 changed files
with
228 additions
and
96 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
50 changes: 0 additions & 50 deletions
50
...pp/(organization-active)/(dashboard)/settings/integrations/vercel/getVercelIntegration.ts
This file was deleted.
Oops, something went wrong.
37 changes: 37 additions & 0 deletions
37
.../(organization-active)/(dashboard)/settings/integrations/vercel/mergeVercelProjectData.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { type VercelApp } from '@/gql/graphql'; | ||
| import { type VercelProject, type VercelProjectViaAPI } from './VercelIntegration'; | ||
|
|
||
| export default function mergeVercelProjectData({ | ||
| vercelProjects = [], | ||
| savedProjects = [], | ||
| }: { | ||
| vercelProjects: VercelProjectViaAPI[]; | ||
| savedProjects: VercelApp[]; | ||
| }): VercelProject[] { | ||
| const projects: VercelProject[] = vercelProjects.map((project) => { | ||
| const savedProject = savedProjects.find( | ||
| (savedProject) => savedProject.projectID === project.id | ||
| ); | ||
| const isProjectEnabled = savedProject !== undefined; | ||
| return { | ||
| id: project.id, | ||
| name: project.name, | ||
| servePath: savedProject?.path ?? undefined, | ||
| isEnabled: isProjectEnabled, | ||
| ssoProtection: project.ssoProtection, | ||
| }; | ||
| }); | ||
|
|
||
| // We need to sort the projects alphabetically so that the order is consistent | ||
| const alphabeticallySortedProjects = projects.sort((a, b) => { | ||
| if (a.name < b.name) { | ||
| return -1; | ||
| } | ||
| if (a.name > b.name) { | ||
| return 1; | ||
| } | ||
| return 0; | ||
| }); | ||
|
|
||
| return alphabeticallySortedProjects; | ||
| } |
22 changes: 17 additions & 5 deletions
22
...dashboard/src/app/(organization-active)/(dashboard)/settings/integrations/vercel/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,20 @@ | ||
| import VercelIntegrationForm from './VercelIntegrationForm'; | ||
| import getVercelIntegration from './getVercelIntegration'; | ||
| 'use client'; | ||
|
|
||
| export default async function VercelIntegrationPage() { | ||
| const vercelIntegration = await getVercelIntegration(); | ||
| import LoadingIcon from '@/icons/LoadingIcon'; | ||
| import VercelIntegrationForm from './VercelIntegrationForm'; | ||
| import { useVercelIntegration } from './useVercelIntegration'; | ||
|
|
||
| return <VercelIntegrationForm vercelIntegration={vercelIntegration} />; | ||
| export default function VercelIntegrationPage() { | ||
| const { data, fetching, error } = useVercelIntegration(); | ||
| if (fetching) { | ||
| return ( | ||
| <div className="flex h-full w-full items-center justify-center"> | ||
| <LoadingIcon /> | ||
| </div> | ||
| ); | ||
| } | ||
| if (error) { | ||
| throw error; | ||
| } | ||
| return <VercelIntegrationForm vercelIntegration={data} />; | ||
| } |
14 changes: 14 additions & 0 deletions
14
...shboard/src/app/(organization-active)/(dashboard)/settings/integrations/vercel/queries.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import { graphql } from '@/gql'; | ||
|
|
||
| export const GetSavedVercelProjectsDocument = graphql(` | ||
| query GetSavedVercelProjects($environmentID: ID!) { | ||
| environment: workspace(id: $environmentID) { | ||
| savedVercelProjects: vercelApps { | ||
| id | ||
| projectID | ||
| path | ||
| workspaceID | ||
| } | ||
| } | ||
| } | ||
| `); |
78 changes: 78 additions & 0 deletions
78
...pp/(organization-active)/(dashboard)/settings/integrations/vercel/useVercelIntegration.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| 'use client'; | ||
|
|
||
| import { useMemo } from 'react'; | ||
| import { useQuery } from 'urql'; | ||
|
|
||
| import { useEnvironments } from '@/queries'; | ||
| import { getProductionEnvironment } from '@/utils/environments'; | ||
| import { useRestAPIRequest } from '@/utils/useRestAPIRequest'; | ||
| import { type VercelIntegration, type VercelProjectAPIResponse } from './VercelIntegration'; | ||
| import mergeVercelProjectData from './mergeVercelProjectData'; | ||
| import { GetSavedVercelProjectsDocument } from './queries'; | ||
|
|
||
| const notEnabledVercelIntegration: VercelIntegration = { | ||
| id: 'not-enabled', | ||
| name: 'Vercel', | ||
| slug: 'vercel', | ||
| projects: [], | ||
| enabled: false, | ||
| }; | ||
|
|
||
| export function useVercelIntegration(): { | ||
| data: VercelIntegration; | ||
| fetching: boolean; | ||
| error: Error | undefined; | ||
| } { | ||
| const [{ data: environments, fetching, error: environmentError }] = useEnvironments(); | ||
|
|
||
| const productionEnvironmentId = useMemo(() => { | ||
| if (!environments) return null; | ||
| const env = getProductionEnvironment(environments); | ||
| return env?.id; | ||
| }, [environments]); | ||
|
|
||
| // Use memo as the URL object will change on every render | ||
| const url = useMemo(() => { | ||
| if (!productionEnvironmentId) { | ||
| return null; | ||
| } | ||
| const url = new URL('/v1/integrations/vercel/projects', process.env.NEXT_PUBLIC_API_URL); | ||
| url.searchParams.set('workspaceID', productionEnvironmentId); | ||
| return url; | ||
| }, [productionEnvironmentId]); | ||
|
|
||
| // Fetch data from REST and GQL and merge | ||
| const { | ||
| data, | ||
| isLoading: isLoadingSavedProjects, | ||
| error, | ||
| } = useRestAPIRequest<VercelProjectAPIResponse>({ url, method: 'GET' }); | ||
| const [{ data: savedVercelProjects }] = useQuery({ | ||
| query: GetSavedVercelProjectsDocument, | ||
| variables: { | ||
| environmentID: productionEnvironmentId || '', | ||
| }, | ||
| pause: !productionEnvironmentId, | ||
| }); | ||
|
|
||
| const projects = mergeVercelProjectData({ | ||
| vercelProjects: data?.projects || [], | ||
| savedProjects: savedVercelProjects?.environment.savedVercelProjects || [], | ||
| }); | ||
|
|
||
| const vercelIntegration = data | ||
| ? { | ||
| id: 'enabled-integration-id', | ||
| name: 'Vercel', | ||
| slug: 'vercel', | ||
| projects, | ||
| enabled: true, | ||
| } | ||
| : notEnabledVercelIntegration; | ||
|
|
||
| return { | ||
| data: vercelIntegration, | ||
| fetching: fetching || isLoadingSavedProjects, | ||
| error: environmentError || error, | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.