From 0e977ebddf9a8cf11a67b1ac613d9676a08e87ae Mon Sep 17 00:00:00 2001 From: Jonathan Summers-Muir Date: Thu, 10 Aug 2023 11:24:49 +0800 Subject: [PATCH 1/5] chore: fix empty states for Vercel Integration --- .../Integrations/OrganizationPicker.tsx | 19 +- .../interfaces/Integrations/ProjectLinker.tsx | 291 +++++++++--------- .../IntegrationWindowLayout.tsx | 33 +- .../VercelIntegrationWindowLayout.tsx | 10 +- .../layouts/VercelIntegrationLayout.tsx | 5 +- ...ions-vercel-connections-create-mutation.ts | 3 + .../[slug]/marketplace/choose-project.tsx | 96 +++--- studio/pages/integrations/vercel/install.tsx | 156 +++++----- studio/state/integration-installation.ts | 13 + 9 files changed, 353 insertions(+), 273 deletions(-) create mode 100644 studio/state/integration-installation.ts diff --git a/studio/components/interfaces/Integrations/OrganizationPicker.tsx b/studio/components/interfaces/Integrations/OrganizationPicker.tsx index 5b6f3fe4d7c..bbf831193be 100644 --- a/studio/components/interfaces/Integrations/OrganizationPicker.tsx +++ b/studio/components/interfaces/Integrations/OrganizationPicker.tsx @@ -6,6 +6,9 @@ import { useMemo, useRef, useState } from 'react' import { Organization } from 'types' import { + AlertDescription_Shadcn_, + AlertTitle_Shadcn_, + Alert_Shadcn_, Badge, Button, CommandEmpty_Shadcn_, @@ -14,11 +17,13 @@ import { CommandItem_Shadcn_, CommandList_Shadcn_, Command_Shadcn_, + IconAlertCircle, IconChevronDown, IconHexagon, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_, Popover_Shadcn_, + cn, } from 'ui' export interface OrganizationPickerProps { @@ -26,6 +31,7 @@ export interface OrganizationPickerProps { configurationId?: string selectedOrg: Organization | null onSelectedOrgChange: (organization: Organization) => void + disabled?: boolean } const OrganizationPicker = ({ @@ -33,6 +39,7 @@ const OrganizationPicker = ({ configurationId, selectedOrg, onSelectedOrgChange, + disabled, }: OrganizationPickerProps) => { const [open, setOpen] = useState(false) const ref = useRef(null) @@ -63,21 +70,22 @@ const OrganizationPicker = ({ size="medium" block className="justify-start" - icon={} loading={isLoadingOrganization} - disabled={isLoadingOrganization} + disabled={disabled} iconRight={ } > - - {selectedOrg?.name} +
+ + {selectedOrg?.name ? selectedOrg?.name : 'Choose an organization'} + {selectedOrg && configurationId && installed[selectedOrg.slug] && ( Integration Installed )} - +
- {org.name}{' '} {configurationId && installed[org.slug] && ( diff --git a/studio/components/interfaces/Integrations/ProjectLinker.tsx b/studio/components/interfaces/Integrations/ProjectLinker.tsx index 2bebe5af4b7..1ce22bc28bf 100644 --- a/studio/components/interfaces/Integrations/ProjectLinker.tsx +++ b/studio/components/interfaces/Integrations/ProjectLinker.tsx @@ -139,151 +139,162 @@ const ProjectLinker = ({ className="absolute inset-0 bg-grid-black/5 [mask-image:linear-gradient(0deg,#fff,rgba(255,255,255,0.6))] dark:bg-grid-white/5 dark:[mask-image:linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.5))]" style={{ backgroundPosition: '10px 10px' }} > -
- -
- Supabase -
+ {supabaseProjects.length === 0 ? ( +
+
No Supabase projects found
+

+ You will need to create a Supabase Project to link to a Vercel Project. +
+ You can skip this and link a project later. +

+
+ ) : ( +
+ +
+ Supabase +
- - -
- } - iconRight={ - defaultSupabaseProjectRef === undefined ? ( + + +
+ } + iconRight={ + defaultSupabaseProjectRef === undefined ? ( + + + + ) : null + } + > + {selectedSupabaseProject ? selectedSupabaseProject.name : 'Choose Project'} + + + + + + + No results found. + + {supabaseProjects.map((project, i) => { + return ( + { + if (project.ref) setSupabaseProjectRef(project.ref) + setSupabaseProjectsComboboxOpen(false) + }} + > +
+ Supabase +
+ {project.name} + + ) + })} + + + + + + +
+ +
+ {integrationIcon} +
+ + + + + + - {selectedSupabaseProject ? selectedSupabaseProject.name : 'Choose Project'} - - - - - - - No results found. - - {supabaseProjects.map((project, i) => { - return ( - { - if (project.ref) setSupabaseProjectRef(project.ref) - setSupabaseProjectsComboboxOpen(false) - }} - > -
- Supabase -
- {project.name} - - ) - })} - - - - - - -
- -
- {integrationIcon} -
- - - - - - - - - - No results found. - - {foreignProjects.map((project, i) => { - return ( - { - if (project.id) setForeignProjectId(project.id) - setForeignProjectsComboboxOpen(false) - }} - > - {getForeignProjectIcon?.(project) ?? integrationIcon} - {project.name} - - ) - })} - - - - - - - + + + + No results found. + + {foreignProjects.map((project, i) => { + return ( + { + if (project.id) setForeignProjectId(project.id) + setForeignProjectsComboboxOpen(false) + }} + > + {getForeignProjectIcon?.(project) ?? integrationIcon} + {project.name} + + ) + })} + + + + + + + + )}
{onSkip !== undefined && ( diff --git a/studio/components/layouts/IntegrationsLayout/IntegrationWindowLayout.tsx b/studio/components/layouts/IntegrationsLayout/IntegrationWindowLayout.tsx index 4aa3e3a6a81..fe9ba66122c 100644 --- a/studio/components/layouts/IntegrationsLayout/IntegrationWindowLayout.tsx +++ b/studio/components/layouts/IntegrationsLayout/IntegrationWindowLayout.tsx @@ -2,18 +2,23 @@ import { useParams } from 'common' import { useFlag, withAuth } from 'hooks' import { BASE_PATH } from 'lib/constants' import { PropsWithChildren, ReactNode, forwardRef } from 'react' -import { IconX, cn } from 'ui' +import { IconX, cn, LoadingLine, IconBook, IconLifeBuoy } from 'ui' import { ScaffoldContainer } from '../Scaffold' +import Link from 'next/link' export type IntegrationWindowLayoutProps = { title: string integrationIcon: ReactNode + loading?: boolean + docsHref?: string } const IntegrationWindowLayout = ({ title, integrationIcon, children, + loading = false, + docsHref, }: PropsWithChildren) => { const ongoingIncident = useFlag('ongoingIncident') const maxHeight = ongoingIncident ? 'calc(100vh - 44px)' : '100vh' @@ -21,8 +26,30 @@ const IntegrationWindowLayout = ({ return (
- - {children} + +
{children}
+ + {docsHref && ( + + + Docs + + + )} + + + Support + + +
) } diff --git a/studio/components/layouts/IntegrationsLayout/VercelIntegrationWindowLayout.tsx b/studio/components/layouts/IntegrationsLayout/VercelIntegrationWindowLayout.tsx index a70e1ef9bae..88a6b30251a 100644 --- a/studio/components/layouts/IntegrationsLayout/VercelIntegrationWindowLayout.tsx +++ b/studio/components/layouts/IntegrationsLayout/VercelIntegrationWindowLayout.tsx @@ -3,6 +3,7 @@ import { PropsWithChildren } from 'react' import { useParams } from 'common' import { BASE_PATH } from 'lib/constants' import IntegrationWindowLayout from './IntegrationWindowLayout' +import { useIntegrationInstallationSnapshot } from 'state/integration-installation' const VERCEL_ICON = (
@@ -13,12 +14,19 @@ const VERCEL_ICON = ( const VercelIntegrationWindowLayout = ({ children }: PropsWithChildren<{}>) => { const { externalId } = useParams() + const snapshot = useIntegrationInstallationSnapshot() + const title = externalId ? 'Supabase + Vercel Deploy Button' : 'Supabase + Vercel Integration Marketplace Connector' return ( - + {children} ) diff --git a/studio/components/layouts/VercelIntegrationLayout.tsx b/studio/components/layouts/VercelIntegrationLayout.tsx index 7390fe53152..8c42daffedb 100644 --- a/studio/components/layouts/VercelIntegrationLayout.tsx +++ b/studio/components/layouts/VercelIntegrationLayout.tsx @@ -10,8 +10,7 @@ const VercelIntegrationLayout = ({ children }: PropsWithChildren<{}>) => { Supabase + Vercel - -
+
@@ -29,7 +28,7 @@ const VercelIntegrationLayout = ({ children }: PropsWithChildren<{}>) => {
-
+
{children}
diff --git a/studio/data/integrations/integrations-vercel-connections-create-mutation.ts b/studio/data/integrations/integrations-vercel-connections-create-mutation.ts index 9ea64f86836..63c3c1fb309 100644 --- a/studio/data/integrations/integrations-vercel-connections-create-mutation.ts +++ b/studio/data/integrations/integrations-vercel-connections-create-mutation.ts @@ -5,6 +5,7 @@ import { post } from 'data/fetchers' import { ResponseError } from 'types' import { integrationKeys } from './keys' import { IntegrationConnectionsCreateVariables } from './types' +import { useIntegrationInstallationSnapshot } from 'state/integration-installation' export async function createIntegrationVercelConnections({ organizationIntegrationId, @@ -44,6 +45,7 @@ export const useIntegrationVercelConnectionsCreateMutation = ({ 'mutationFn' > = {}) => { const queryClient = useQueryClient() + const snapshot = useIntegrationInstallationSnapshot() return useMutation< IntegrationVercelConnectionsCreateData, ResponseError, @@ -63,6 +65,7 @@ export const useIntegrationVercelConnectionsCreateMutation = ({ await onSuccess?.(data, variables, context) }, async onError(data, variables, context) { + snapshot.setLoading(false) if (onError === undefined) { toast.error(`Failed to create connection: ${data.message}`) } else { diff --git a/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx b/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx index 9e302c67622..68249a498ff 100644 --- a/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx +++ b/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx @@ -19,6 +19,8 @@ import { BASE_PATH } from 'lib/constants' import { EMPTY_ARR } from 'lib/void' import { NextPageWithLayout, Organization } from 'types' import { IconBook, IconLifeBuoy, LoadingLine } from 'ui' +import VercelIntegrationWindowLayout from 'components/layouts/IntegrationsLayout/VercelIntegrationWindowLayout' +import { useIntegrationInstallationSnapshot } from 'state/integration-installation' const VERCEL_ICON = ( Vercel Icon @@ -93,6 +95,8 @@ const VercelIntegration: NextPageWithLayout = () => { [vercelProjectsById] ) + const snapshot = useIntegrationInstallationSnapshot() + const { mutateAsync: syncEnvs } = useIntegrationsVercelConnectionSyncEnvsMutation() const { mutate: createConnections, isLoading: isCreatingConnection } = useIntegrationVercelConnectionsCreateMutation({ @@ -100,13 +104,22 @@ const VercelIntegration: NextPageWithLayout = () => { try { await syncEnvs({ connectionId: id }) } catch (error: any) { + snapshot.setLoading(false) toast.error('Failed to sync environment variables: ', error.message) } if (next) { + snapshot.setLoading(false) window.location.href = next } }, + onMutate() { + snapshot.setLoading(true) + }, + onError(error) { + snapshot.setLoading(true) + toast.error(`Creating connection failed: ${error.message}`) + }, }) const onCreateConnections = useCallback( @@ -131,43 +144,38 @@ const VercelIntegration: NextPageWithLayout = () => { return ( <> - -
- <> - - -
-

- Link a Supabase project to a Vercel project -

- + +
+

Link a Supabase project to a Vercel project

+ -
+ /> +
- { - if (next) { - window.location.href = next - } - }} - loadingForeignProjects={isLoadingVercelProjectsData} - loadingSupabaseProjects={isLoadingSupabaseProjectsData} - /> - { + if (next) { + window.location.href = next + } + }} + loadingForeignProjects={isLoadingVercelProjectsData} + loadingSupabaseProjects={isLoadingSupabaseProjectsData} + /> + { @@ -177,25 +185,15 @@ ${ENV_VAR_RAW_KEYS.map((x) => { ` })} `} - /> - - - - - -
- -
- Docs -
-
- Support -
+ /> + ) } -VercelIntegration.getLayout = (page) => {page} +VercelIntegration.getLayout = (page) => ( + {page} +) export default VercelIntegration diff --git a/studio/pages/integrations/vercel/install.tsx b/studio/pages/integrations/vercel/install.tsx index 95419081f5b..d531def52cc 100644 --- a/studio/pages/integrations/vercel/install.tsx +++ b/studio/pages/integrations/vercel/install.tsx @@ -7,11 +7,12 @@ import OrganizationPicker from 'components/interfaces/Integrations/OrganizationP import { Markdown } from 'components/interfaces/Markdown' import { getHasInstalledObject } from 'components/layouts/IntegrationsLayout/Integrations.utils' import VercelIntegrationWindowLayout from 'components/layouts/IntegrationsLayout/VercelIntegrationWindowLayout' -import { ScaffoldColumn, ScaffoldContainer, ScaffoldDivider } from 'components/layouts/Scaffold' +import { ScaffoldColumn, ScaffoldContainer } from 'components/layouts/Scaffold' import { useIntegrationsQuery } from 'data/integrations/integrations-query' import { useVercelIntegrationCreateMutation } from 'data/integrations/vercel-integration-create-mutation' import { useOrganizationsQuery } from 'data/organizations/organizations-query' import { useStore } from 'hooks' +import Link from 'next/link' import { NextPageWithLayout, Organization } from 'types' import { AlertDescription_Shadcn_, @@ -19,11 +20,9 @@ import { Alert_Shadcn_, Button, IconAlertTriangle, - IconBook, IconInfo, - IconLifeBuoy, - LoadingLine, } from 'ui' +import { useIntegrationInstallationSnapshot } from 'state/integration-installation' /** * Variations of the Vercel integration flow. @@ -42,6 +41,8 @@ const VercelIntegration: NextPageWithLayout = () => { const [selectedOrg, setSelectedOrg] = useState(null) const [organizationIntegrationId, setOrganizationIntegrationId] = useState(null) + const snapshot = useIntegrationInstallationSnapshot() + /** * Fetch the list of organization based integration installations for Vercel. * @@ -49,8 +50,11 @@ const VercelIntegration: NextPageWithLayout = () => { */ const { data: integrationData } = useIntegrationsQuery() - const { data: organizationsData, isLoading: isLoadingOrganizationsQuery } = - useOrganizationsQuery() + const { + data: organizationsData, + isLoading: isLoadingOrganizationsQuery, + isSuccess: isOrganizationsDataSuccess, + } = useOrganizationsQuery() useEffect(() => { if (organizationsData !== undefined && integrationData !== undefined) { @@ -105,9 +109,12 @@ const VercelIntegration: NextPageWithLayout = () => { const { mutate, isLoading: isLoadingVercelIntegrationCreateMutation } = useVercelIntegrationCreateMutation({ + onMutate() { + snapshot.setLoading(true) + }, onSuccess({ id }) { setOrganizationIntegrationId(id) - + snapshot.setLoading(false) handleRouteChange() }, onError(error) { @@ -158,81 +165,88 @@ const VercelIntegration: NextPageWithLayout = () => { const dataLoading = isLoadingVercelIntegrationCreateMutation || isLoadingOrganizationsQuery + const noOrganizations = useMemo(() => { + return isOrganizationsDataSuccess && organizationsData?.length === 0 ? true : false + }, [isOrganizationsDataSuccess, organizationsData]) + + const alreadyInstalled = useMemo(() => { + return selectedOrg && installed[selectedOrg.slug] && source === 'marketplace' && !dataLoading + ? true + : false + }, [installed, selectedOrg, source, dataLoading]) + const disableInstallationForm = (isLoadingVercelIntegrationCreateMutation && !dataLoading) || // disables installation button if integration is already installed and it is Marketplace flow - (selectedOrg && installed[selectedOrg.slug] && source === 'marketplace' && !dataLoading) - ? true - : false + alreadyInstalled || + noOrganizations + + const isLoading = useMemo(() => { + return isLoadingVercelIntegrationCreateMutation || isLoadingOrganizationsQuery + }, [isLoadingVercelIntegrationCreateMutation, isLoadingOrganizationsQuery]) return ( <> -
- - {organizationIntegrationId === null && ( + + +

Choose organization

<> - - -

Choose organization

- <> - - { - setSelectedOrg(org) - router.query.organizationSlug = org.slug - }} - configurationId={configurationId} - /> - {disableInstallationForm && ( - - - - Vercel Integration is already installed. - - - You will need to choose another organization to install the integration. - - - )} -
- -
- - - - - - - - You can uninstall this Integration at any time. - + + { + setSelectedOrg(org) + router.query.organizationSlug = org.slug + }} + configurationId={configurationId} + /> + {alreadyInstalled && ( + + + Vercel Integration is already installed. - Remove this integration at any time via Vercel or the Supabase dashboard. + You will need to choose another organization to install the integration. - + )} + {noOrganizations && ( + + + There are no Supabase Organizations + + You will need to create a Supabase Organization before you can install the Vercel + Integration. You can create a new organization{' '} + + here + + . + + + )} +
+ +
- )} - - -
- -
- Docs -
-
- Support -
+ + + + + + You can uninstall this Integration at any time. + + Remove this integration at any time via Vercel or the Supabase dashboard. + + ) diff --git a/studio/state/integration-installation.ts b/studio/state/integration-installation.ts new file mode 100644 index 00000000000..af049f84baf --- /dev/null +++ b/studio/state/integration-installation.ts @@ -0,0 +1,13 @@ +import { proxy, snapshot, useSnapshot } from 'valtio' + +export const integrationInstallationState = proxy({ + loading: false as boolean, + setLoading: (boolean: boolean) => { + integrationInstallationState.loading = boolean + }, +}) + +export const getIntegrationInstallation = () => snapshot(integrationInstallationState) + +export const useIntegrationInstallationSnapshot = (options?: Parameters[1]) => + useSnapshot(integrationInstallationState, options) From 36a0899266f879b9cac1201fb715f815f7e37e12 Mon Sep 17 00:00:00 2001 From: Jonathan Summers-Muir Date: Thu, 10 Aug 2023 11:41:40 +0800 Subject: [PATCH 2/5] issues with 'first project' picker --- .../interfaces/Integrations/ProjectLinker.tsx | 17 +++++++++++++---- .../SidePanelVercelProjectLinker.tsx | 7 ++----- .../[slug]/marketplace/choose-project.tsx | 8 ++------ 3 files changed, 17 insertions(+), 15 deletions(-) diff --git a/studio/components/interfaces/Integrations/ProjectLinker.tsx b/studio/components/interfaces/Integrations/ProjectLinker.tsx index 1ce22bc28bf..9ac75b97b1d 100644 --- a/studio/components/interfaces/Integrations/ProjectLinker.tsx +++ b/studio/components/interfaces/Integrations/ProjectLinker.tsx @@ -19,6 +19,8 @@ import { Popover_Shadcn_, cn, } from 'ui' +import { useProjectsQuery } from 'data/projects/projects-query' +import { useVercelProjectsQuery } from 'data/integrations/integrations-vercel-projects-query' export interface Project { id: string @@ -132,6 +134,11 @@ const ProjectLinker = ({ ) } + const noSupabaseProjects = supabaseProjects.length === 0 + const noForeignProjects = foreignProjects.length === 0 + const missingEntityString = noSupabaseProjects ? 'Supabase' : 'Vercel' + const oppositeEntityString = noSupabaseProjects ? 'Vercel' : 'Supabase' + return (
@@ -139,13 +146,15 @@ const ProjectLinker = ({ className="absolute inset-0 bg-grid-black/5 [mask-image:linear-gradient(0deg,#fff,rgba(255,255,255,0.6))] dark:bg-grid-white/5 dark:[mask-image:linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.5))]" style={{ backgroundPosition: '10px 10px' }} >
- {supabaseProjects.length === 0 ? ( + {(supabaseProjects.length === 0 || foreignProjects.length === 0) && + (!loadingForeignProjects || !loadingSupabaseProjects) ? (
-
No Supabase projects found
+
No {missingEntityString} Projects found

- You will need to create a Supabase Project to link to a Vercel Project. + You will need to create a {missingEntityString} Project to link to a{' '} + {oppositeEntityString} Project.
- You can skip this and link a project later. + You can skip this and create a Project Connection later.

) : ( diff --git a/studio/components/interfaces/Organization/IntegrationSettings/SidePanelVercelProjectLinker.tsx b/studio/components/interfaces/Organization/IntegrationSettings/SidePanelVercelProjectLinker.tsx index f2b092bf758..e4fb4d93012 100644 --- a/studio/components/interfaces/Organization/IntegrationSettings/SidePanelVercelProjectLinker.tsx +++ b/studio/components/interfaces/Organization/IntegrationSettings/SidePanelVercelProjectLinker.tsx @@ -120,7 +120,7 @@ const SidePanelVercelProjectLinker = ({ return ( { - return ` - \n - - \`${x}\` -` + return `\n - \`${x}\`` })} `} /> diff --git a/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx b/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx index 68249a498ff..3b66c7ebb13 100644 --- a/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx +++ b/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx @@ -147,7 +147,7 @@ const VercelIntegration: NextPageWithLayout = () => {
-

Link a Supabase project to a Vercel project

+

Create your first Project Connection

- { - return ` - \n - - \`${x}\` -` + return `\n - \`${x}\`` })} `} /> From 31175bba07c76b122e00d4fda7548acc460c1462 Mon Sep 17 00:00:00 2001 From: Jonathan Summers-Muir Date: Thu, 10 Aug 2023 11:48:54 +0800 Subject: [PATCH 3/5] update consts --- .../interfaces/Integrations/ProjectLinker.tsx | 12 ++++++------ studio/pages/integrations/vercel/install.tsx | 6 ++++-- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/studio/components/interfaces/Integrations/ProjectLinker.tsx b/studio/components/interfaces/Integrations/ProjectLinker.tsx index 9ac75b97b1d..e8abddfd9f6 100644 --- a/studio/components/interfaces/Integrations/ProjectLinker.tsx +++ b/studio/components/interfaces/Integrations/ProjectLinker.tsx @@ -136,8 +136,8 @@ const ProjectLinker = ({ const noSupabaseProjects = supabaseProjects.length === 0 const noForeignProjects = foreignProjects.length === 0 - const missingEntityString = noSupabaseProjects ? 'Supabase' : 'Vercel' - const oppositeEntityString = noSupabaseProjects ? 'Vercel' : 'Supabase' + const missingEntity = noSupabaseProjects ? 'Supabase' : 'Vercel' + const oppositeMissingEntity = noSupabaseProjects ? 'Vercel' : 'Supabase' return (
@@ -146,13 +146,13 @@ const ProjectLinker = ({ className="absolute inset-0 bg-grid-black/5 [mask-image:linear-gradient(0deg,#fff,rgba(255,255,255,0.6))] dark:bg-grid-white/5 dark:[mask-image:linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.5))]" style={{ backgroundPosition: '10px 10px' }} >
- {(supabaseProjects.length === 0 || foreignProjects.length === 0) && + {(noSupabaseProjects || noForeignProjects) && (!loadingForeignProjects || !loadingSupabaseProjects) ? (
-
No {missingEntityString} Projects found
+
No {missingEntity} Projects found

- You will need to create a {missingEntityString} Project to link to a{' '} - {oppositeEntityString} Project. + You will need to create a {missingEntity} Project to link to a {oppositeMissingEntity}{' '} + Project.
You can skip this and create a Project Connection later.

diff --git a/studio/pages/integrations/vercel/install.tsx b/studio/pages/integrations/vercel/install.tsx index d531def52cc..2b023802ef0 100644 --- a/studio/pages/integrations/vercel/install.tsx +++ b/studio/pages/integrations/vercel/install.tsx @@ -114,8 +114,8 @@ const VercelIntegration: NextPageWithLayout = () => { }, onSuccess({ id }) { setOrganizationIntegrationId(id) - snapshot.setLoading(false) handleRouteChange() + snapshot.setLoading(false) }, onError(error) { toast.error(`Creating Vercel integration failed: ${error.message}`) @@ -214,7 +214,9 @@ const VercelIntegration: NextPageWithLayout = () => { {noOrganizations && ( - There are no Supabase Organizations + + No Supabase Organizations to install Integration. + You will need to create a Supabase Organization before you can install the Vercel Integration. You can create a new organization{' '} From b248a5b1c68eb507719dc890c5d88b0ba58befe5 Mon Sep 17 00:00:00 2001 From: Jonathan Summers-Muir Date: Thu, 10 Aug 2023 11:53:26 +0800 Subject: [PATCH 4/5] href update --- .../layouts/IntegrationsLayout/IntegrationWindowLayout.tsx | 2 +- .../IntegrationsLayout/VercelIntegrationWindowLayout.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/studio/components/layouts/IntegrationsLayout/IntegrationWindowLayout.tsx b/studio/components/layouts/IntegrationsLayout/IntegrationWindowLayout.tsx index fe9ba66122c..7db53f8073e 100644 --- a/studio/components/layouts/IntegrationsLayout/IntegrationWindowLayout.tsx +++ b/studio/components/layouts/IntegrationsLayout/IntegrationWindowLayout.tsx @@ -30,7 +30,7 @@ const IntegrationWindowLayout = ({
{children}
{docsHref && ( - + ) => { title={title} integrationIcon={VERCEL_ICON} loading={snapshot.loading} - docsHref="/docs/vercel" + docsHref="https://supabase.com/partners/integrations/vercel" > {children} From 2a55e0da121e22cf804833c11d153d8f2f547954 Mon Sep 17 00:00:00 2001 From: Jonathan Summers-Muir Date: Thu, 10 Aug 2023 13:15:19 +0800 Subject: [PATCH 5/5] Update studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx Co-authored-by: Alaister Young --- .../integrations/vercel/[slug]/marketplace/choose-project.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx b/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx index 3b66c7ebb13..e7d4723d40c 100644 --- a/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx +++ b/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx @@ -117,7 +117,7 @@ const VercelIntegration: NextPageWithLayout = () => { snapshot.setLoading(true) }, onError(error) { - snapshot.setLoading(true) + snapshot.setLoading(false) toast.error(`Creating connection failed: ${error.message}`) }, })