update already installed states

studio/components/interfaces/Integrations/OrganizationPicker.tsx

@@ -0,0 +1,130 @@
+import { getHasInstalledObject } from 'components/layouts/IntegrationsLayout/Integrations.utils'
+import { useIntegrationsQuery } from 'data/integrations/integrations-query'
+import { IntegrationName } from 'data/integrations/integrations.types'
+import { useOrganizationsQuery } from 'data/organizations/organizations-query'
+import { useMemo, useRef, useState } from 'react'
+
+import { Organization } from 'types'
+import {
+  Badge,
+  Button,
+  CommandEmpty_Shadcn_,
+  CommandGroup_Shadcn_,
+  CommandInput_Shadcn_,
+  CommandItem_Shadcn_,
+  CommandList_Shadcn_,
+  Command_Shadcn_,
+  IconChevronDown,
+  IconHexagon,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
+  Popover_Shadcn_,
+} from 'ui'
+
+export interface OrganizationPickerProps {
+  integrationName: IntegrationName
+  configurationId?: string
+  selectedOrg: Organization | null
+  onSelectedOrgChange: (organization: Organization) => void
+}
+
+const OrganizationPicker = ({
+  integrationName,
+  configurationId,
+  selectedOrg,
+  onSelectedOrgChange,
+}: OrganizationPickerProps) => {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLButtonElement>(null)
+
+  const { data: integrationData } = useIntegrationsQuery()
+  const { data: organizationsData, isLoading: isLoadingOrganization } = useOrganizationsQuery()
+
+  const installed = useMemo(
+    () =>
+      integrationData && organizationsData
+        ? getHasInstalledObject({
+            integrationName,
+            integrationData,
+            organizationsData,
+            installationId: configurationId,
+          })
+        : {},
+    [configurationId, integrationData, integrationName, organizationsData]
+  )
+
+  return (
+    <>
+      <Popover_Shadcn_ open={open} onOpenChange={setOpen}>
+        <PopoverTrigger_Shadcn_ asChild>
+          <Button
+            ref={ref}
+            type="default"
+            size="medium"
+            block
+            className="justify-start"
+            icon={<IconHexagon />}
+            loading={isLoadingOrganization}
+            disabled={isLoadingOrganization}
+            iconRight={
+              <span className="grow flex justify-end">
+                <IconChevronDown className={''} />
+              </span>
+            }
+          >
+            <span className="flex gap-2">
+              <span className="truncate">{selectedOrg?.name}</span>
+              {selectedOrg && configurationId && installed[selectedOrg.slug] && (
+                <Badge color="scale">Integration Installed</Badge>
+              )}
+            </span>
+          </Button>
+        </PopoverTrigger_Shadcn_>
+        <PopoverContent_Shadcn_
+          className="p-0 w-full"
+          side="bottom"
+          align="center"
+          style={{ width: ref.current?.offsetWidth }}
+        >
+          <Command_Shadcn_>
+            <CommandInput_Shadcn_ placeholder="Search organizations..." />
+            <CommandList_Shadcn_>
+              <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
+              <CommandGroup_Shadcn_>
+                {organizationsData?.map((org) => {
+                  return (
+                    <CommandItem_Shadcn_
+                      value={org.slug}
+                      key={org.slug}
+                      className="flex gap-2 items-center"
+                      onSelect={(slug) => {
+                        const org = organizationsData?.find(
+                          (org) => org.slug.toLowerCase() === slug.toLowerCase()
+                        )
+                        if (org) {
+                          onSelectedOrgChange(org)
+                        }
+
+                        setOpen(false)
+                      }}
+                    >
+                      <IconHexagon />
+                      <span className="truncate">{org.name}</span>{' '}
+                      {configurationId && installed[org.slug] && (
+                        <Badge color="scale" className="!flex-none">
+                          Integration Installed
+                        </Badge>
+                      )}
+                    </CommandItem_Shadcn_>
+                  )
+                })}
+              </CommandGroup_Shadcn_>
+            </CommandList_Shadcn_>
+          </Command_Shadcn_>
+        </PopoverContent_Shadcn_>
+      </Popover_Shadcn_>
+    </>
+  )
+}
+
+export default OrganizationPicker

studio/components/interfaces/Integrations/ProjectLinker.tsx

@@ -205,14 +205,7 @@ const ProjectLinker = ({
           <div className="border border-scale-1000 h-px w-16 border-dashed self-end mb-5"></div>
           <Panel>
             <div className="bg-black shadow rounded p-1 w-12 h-12 flex justify-center items-center">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="white"
-                viewBox="0 0 512 512"
-                className="w-6"
-              >
-                <path fillRule="evenodd" d="M256,48,496,464H16Z" />
-              </svg>
+              {integrationIcon}
             </div>
 
             <Popover_Shadcn_

studio/components/layouts/IntegrationsLayout/Integrations.utils.ts

@@ -0,0 +1,54 @@
+import { IntegrationsResponse } from 'data/integrations/integrations-query'
+import { IntegrationName } from 'data/integrations/integrations.types'
+import { Organization } from 'types'
+
+export function getHasInstalledObject({
+  integrationName,
+  integrationData,
+  organizationsData,
+  installationId,
+}: {
+  integrationName: IntegrationName
+  integrationData: IntegrationsResponse
+  organizationsData: Organization[]
+  installationId?: string | number
+}): { [orgSlug: string]: boolean } {
+  if (integrationName === 'Vercel') {
+    return Object.fromEntries(
+      organizationsData
+        .map((org) => [
+          org.slug,
+          Boolean(
+            integrationData.find(
+              (integration) =>
+                integration.organization.slug === org.slug &&
+                integration.integration.name === 'Vercel'
+            )
+          ),
+        ])
+        .filter(([, v]) => Boolean(v))
+    )
+  }
+
+  if (integrationName === 'GitHub') {
+    return Object.fromEntries(
+      organizationsData
+        .map((org) => [
+          org.slug,
+          Boolean(
+            integrationData.find(
+              (integration) =>
+                integration.organization.slug === org.slug &&
+                integration.integration.name === 'GitHub' &&
+                integration.metadata !== undefined &&
+                'installation_id' in integration.metadata &&
+                String(integration.metadata.installation_id) === String(installationId)
+            )
+          ),
+        ])
+        .filter(([, v]) => Boolean(v))
+    )
+  }
+
+  return {}
+}

studio/components/ui/OrganizationPicker.tsx

@@ -1,115 +0,0 @@
-import { useIntegrationsQuery } from 'data/integrations/integrations-query'
-import { IntegrationName } from 'data/integrations/integrations.types'
-import { useOrganizationsQuery } from 'data/organizations/organizations-query'
-import { useState } from 'react'
-import { Organization } from 'types'
-import { Badge, IconHexagon, Listbox } from 'ui'
-
-export interface OrganizationPickerProps {
-  label?: string
-  onSelectedOrgChange?: (org: Organization) => void
-  integrationName: IntegrationName
-}
-
-const OrganizationPicker = ({
-  label = 'Choose an organization',
-  onSelectedOrgChange,
-  integrationName,
-}: OrganizationPickerProps) => {
-  const [selectedOrg, setSelectedOrg] = useState<Organization | null>(null)
-
-  /**
-   * array of integrations installed on all
-   */
-  const { data: integrationData, isLoading: integrationDataLoading } = useIntegrationsQuery()
-
-  /**
-   * filter integrations to match integrationName
-   */
-  const vercelIntegrationsInstalled = integrationData?.filter(
-    (integration) => integration.integration.name === 'Vercel'
-  )
-
-  const { data, isLoading } = useOrganizationsQuery({
-    onSuccess(organizations) {
-      const firstOrg = organizations?.[0]
-      if (firstOrg && selectedOrg === null) {
-        setSelectedOrg(firstOrg)
-        onSelectedOrgChange?.(firstOrg)
-      }
-    },
-  })
-
-  function _onSelectedOrgChange(slug: string) {
-    const org = data?.find((org) => org.slug === slug)
-
-    if (org) {
-      setSelectedOrg(org)
-      onSelectedOrgChange?.(org)
-    }
-  }
-
-  if (isLoading || integrationDataLoading) {
-    return (
-      <Listbox label={label} value="loading" disabled>
-        <Listbox.Option key="loading" value="loading" label="Loading...">
-          Loading...
-        </Listbox.Option>
-      </Listbox>
-    )
-  }
-
-  /**
-   * Organization type with `installationInstalled` added
-   */
-  interface OrganizationsResponseWithInstalledData extends Organization {
-    installationInstalled?: boolean
-  }
-
-  /**
-   * A flat array of org slugs that have integration installed
-   */
-  const flatInstalledConnectionsIds =
-    integrationData && integrationData.length > 0
-      ? integrationData?.map((x) => x.organization.slug)
-      : []
-
-  /**
-   * Organizations with extra `installationInstalled` attribute
-   * Used to show label/badge and allow/disallow installing
-   */
-  const organizationsWithInstalledData: OrganizationsResponseWithInstalledData[] = data
-    ? data.map((org) => {
-        return {
-          ...org,
-          installationInstalled: !flatInstalledConnectionsIds.includes(org.slug) ? true : false,
-        }
-      })
-    : []
-
-  return (
-    <Listbox label={label} value={selectedOrg?.slug} onChange={_onSelectedOrgChange}>
-      {organizationsWithInstalledData?.map((org) => {
-        const label = (
-          <div className="flex gap-3 items-center">
-            {org.name}
-            {org.installationInstalled && <Badge color="scale">Integration Installed</Badge>}
-          </div>
-        )
-        return (
-          <Listbox.Option
-            key={org.id}
-            value={org.slug}
-            // @ts-expect-error
-            label={label}
-            addOnBefore={({ active, selected }: any) => <IconHexagon />}
-          >
-            {label}
-          </Listbox.Option>
-        )
-      })}
-    </Listbox>
-  )
-}
-
-export default OrganizationPicker

studio/pages/integrations/github/install.tsx

@@ -1,18 +1,28 @@
 import { useRouter } from 'next/router'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 
 import { useParams } from 'common'
+import OrganizationPicker from 'components/interfaces/Integrations/OrganizationPicker'
 import { Markdown } from 'components/interfaces/Markdown'
 import GitHubIntegrationWindowLayout from 'components/layouts/IntegrationsLayout/GitHubIntegrationWindowLayout'
+import { getHasInstalledObject } from 'components/layouts/IntegrationsLayout/Integrations.utils'
 import { ScaffoldColumn, ScaffoldContainer, ScaffoldDivider } from 'components/layouts/Scaffold'
 import { useGitHubIntegrationCreateMutation } from 'data/integrations/github-integration-create-mutation'
 import { useIntegrationsQuery } from 'data/integrations/integrations-query'
-import { IntegrationName } from 'data/integrations/integrations.types'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { useStore } from 'hooks'
-import { useGitHubIntegrationInstallationState } from 'state/github-integration-installation'
 import { NextPageWithLayout, Organization } from 'types'
-import { Alert, Badge, Button, IconBook, IconHexagon, IconLifeBuoy, Listbox, LoadingLine } from 'ui'
+import {
+  Alert,
+  AlertDescription_Shadcn_,
+  AlertTitle_Shadcn_,
+  Alert_Shadcn_,
+  Button,
+  IconAlertTriangle,
+  IconBook,
+  IconLifeBuoy,
+  LoadingLine,
+} from 'ui'
 
 /**
  * Organization type with `installationInstalled` added
@@ -28,8 +38,6 @@ const GitHubIntegration: NextPageWithLayout = () => {
   const [selectedOrg, setSelectedOrg] = useState<Organization | null>(null)
   const [organizationIntegrationId, setOrganizationIntegrationId] = useState<string | null>(null)
 
-  const snapshot = useGitHubIntegrationInstallationState()
-
   /**
    * Fetch the list of organization based integration installations for GitHub.
    *
@@ -37,44 +45,15 @@ const GitHubIntegration: NextPageWithLayout = () => {
    */
   const { data: integrationData } = useIntegrationsQuery()
 
-  const { data: organizationsData, isLoading: isLoadingOrganizationsQuery } = useOrganizationsQuery(
-    {
-      onSuccess(organizations) {
-        const firstOrg = organizations?.[0]
-        if (firstOrg && selectedOrg === null) {
-          setSelectedOrg(firstOrg)
-          snapshot.setSelectedOrganizationSlug(firstOrg.slug)
-          router.query.organizationSlug = firstOrg.slug
-        }
-      },
-    }
-  )
-
-  /**
-   * Flat array of org slugs that have integration installed
-   *
-   */
-  const flatInstalledConnectionsIds: string[] | [] =
-    integrationData && integrationData.length > 0
-      ? integrationData
-          .filter((x) => x.integration.name === 'Vercel')
-          .map((x) => x.organization.slug)
-      : []
-
-  /**
-   * Organizations with extra `installationInstalled` attribute
-   *
-   * Used to show label/badge and allow/disallow installing
-   *
-   */
-  const organizationsWithInstalledData: OrganizationsResponseWithInstalledData[] = organizationsData
-    ? organizationsData.map((org) => {
-        return {
-          ...org,
-          installationInstalled: flatInstalledConnectionsIds.includes(org.slug) ? true : false,
-        }
-      })
-    : []
+  const { data: organizationsData } = useOrganizationsQuery({
+    onSuccess(organizations) {
+      const firstOrg = organizations?.[0]
+      if (firstOrg && selectedOrg === null) {
+        setSelectedOrg(firstOrg)
+        router.query.organizationSlug = firstOrg.slug
+      }
+    },
+  })
 
   const { mutate, isLoading: isLoadingGitHubIntegrationCreateMutation } =
     useGitHubIntegrationCreateMutation({
@@ -94,6 +73,19 @@ const GitHubIntegration: NextPageWithLayout = () => {
       },
     })
 
+  const installed = useMemo(
+    () =>
+      integrationData && organizationsData
+        ? getHasInstalledObject({
+            integrationName: 'GitHub',
+            integrationData,
+            organizationsData,
+            installationId,
+          })
+        : {},
+    [installationId, integrationData, organizationsData]
+  )
+
   function onInstall() {
     const orgSlug = selectedOrg?.slug
 
@@ -131,7 +123,7 @@ const GitHubIntegration: NextPageWithLayout = () => {
     }
   }
 
-  const dataLoading = isLoadingGitHubIntegrationCreateMutation || isLoadingOrganizationsQuery
+  const disableInstallationForm = Boolean(selectedOrg && installed[selectedOrg.slug])
 
   return (
     <>
@@ -146,18 +138,29 @@ const GitHubIntegration: NextPageWithLayout = () => {
                   <Markdown content={`Choose the Supabase organization you wish to install in`} />
                   <OrganizationPicker
                     integrationName="GitHub"
-                    organizationsWithInstalledData={organizationsWithInstalledData}
-                    onSelectedOrgChange={(e) => {
-                      router.query.organizationSlug = e.slug
-                      setSelectedOrg(e)
+                    selectedOrg={selectedOrg}
+                    onSelectedOrgChange={(org) => {
+                      router.query.organizationSlug = org.slug
+                      setSelectedOrg(org)
                     }}
-                    dataLoading={dataLoading}
+                    configurationId={installationId}
                   />
+                  {disableInstallationForm && (
+                    <Alert_Shadcn_ variant="warning">
+                      <IconAlertTriangle className="h-4 w-4" strokeWidth={2} />
+                      <AlertTitle_Shadcn_>
+                        GitHub Integration is already installed.
+                      </AlertTitle_Shadcn_>
+                      <AlertDescription_Shadcn_>
+                        You will need to choose another organization to install the integration.
+                      </AlertDescription_Shadcn_>
+                    </Alert_Shadcn_>
+                  )}
                   <div className="flex flex-row w-full justify-end">
                     <Button
                       size="medium"
                       className="self-end"
-                      disabled={isLoadingGitHubIntegrationCreateMutation}
+                      disabled={isLoadingGitHubIntegrationCreateMutation || disableInstallationForm}
                       loading={isLoadingGitHubIntegrationCreateMutation}
                       onClick={onInstall}
                     >
@@ -199,74 +202,4 @@ GitHubIntegration.getLayout = (page) => (
   <GitHubIntegrationWindowLayout>{page}</GitHubIntegrationWindowLayout>
 )
 
-export interface OrganizationPickerProps {
-  label?: string
-  onSelectedOrgChange?: (org: Organization) => void
-  integrationName: IntegrationName
-  dataLoading: boolean
-  organizationsWithInstalledData: OrganizationsResponseWithInstalledData[]
-}
-
-const OrganizationPicker = ({
-  label = 'Choose an organization',
-  onSelectedOrgChange,
-  dataLoading,
-  organizationsWithInstalledData,
-}: OrganizationPickerProps) => {
-  const [selectedOrg, setSelectedOrg] = useState<Organization | null>(null)
-
-  const { data, isLoading } = useOrganizationsQuery({
-    onSuccess(organizations) {
-      const firstOrg = organizations?.[0]
-      if (firstOrg && selectedOrg === null) {
-        setSelectedOrg(firstOrg)
-        onSelectedOrgChange?.(firstOrg)
-      }
-    },
-  })
-
-  function _onSelectedOrgChange(slug: string) {
-    const org = data?.find((org) => org.slug === slug)
-
-    if (org) {
-      setSelectedOrg(org)
-      onSelectedOrgChange?.(org)
-    }
-  }
-
-  if (dataLoading) {
-    return (
-      <Listbox label={label} value="loading" disabled>
-        <Listbox.Option key="loading" value="loading" label="Loading...">
-          Loading...
-        </Listbox.Option>
-      </Listbox>
-    )
-  }
-
-  return (
-    <Listbox label={label} value={selectedOrg?.slug} onChange={_onSelectedOrgChange}>
-      {organizationsWithInstalledData?.map((org) => {
-        const label = (
-          <div className="flex gap-3 items-center">
-            {org.name}
-            {org.installationInstalled && <Badge color="scale">Integration Installed</Badge>}
-          </div>
-        )
-        return (
-          <Listbox.Option
-            key={org.id}
-            value={org.slug}
-            // @ts-expect-error
-            label={label}
-            addOnBefore={({ active, selected }: any) => <IconHexagon />}
-          >
-            {label}
-          </Listbox.Option>
-        )
-      })}
-    </Listbox>
-  )
-}
-
 export default GitHubIntegration

studio/pages/integrations/vercel/install.tsx

@@ -1,12 +1,13 @@
 import { useRouter } from 'next/router'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 
 import { useParams } from 'common'
+import OrganizationPicker from 'components/interfaces/Integrations/OrganizationPicker'
 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 { useIntegrationsQuery } from 'data/integrations/integrations-query'
-import { IntegrationName } from 'data/integrations/integrations.types'
 import { useVercelIntegrationCreateMutation } from 'data/integrations/vercel-integration-create-mutation'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { useStore } from 'hooks'
@@ -15,33 +16,14 @@ import {
   AlertDescription_Shadcn_,
   AlertTitle_Shadcn_,
   Alert_Shadcn_,
-  Badge,
   Button,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
-  Command_Shadcn_,
   IconAlertTriangle,
   IconBook,
-  IconChevronDown,
-  IconHexagon,
   IconInfo,
   IconLifeBuoy,
   LoadingLine,
-  PopoverContent_Shadcn_,
-  PopoverTrigger_Shadcn_,
-  Popover_Shadcn_,
 } from 'ui'
 
-/**
- * Organization type with `installationInstalled` added
- */
-interface OrganizationsResponseWithInstalledData extends Organization {
-  installationInstalled?: boolean
-}
-
 /**
  * Variations of the Vercel integration flow.
  * They require different UI and logic.
@@ -56,9 +38,7 @@ const VercelIntegration: NextPageWithLayout = () => {
   const router = useRouter()
   const { ui } = useStore()
   const { code, configurationId, teamId, source, externalId } = useParams()
-  const [selectedOrg, setSelectedOrg] = useState<OrganizationsResponseWithInstalledData | null>(
-    null
-  )
+  const [selectedOrg, setSelectedOrg] = useState<Organization | null>(null)
   const [organizationIntegrationId, setOrganizationIntegrationId] = useState<string | null>(null)
 
   /**
@@ -73,7 +53,7 @@ const VercelIntegration: NextPageWithLayout = () => {
 
   useEffect(() => {
     if (organizationsData !== undefined && integrationData !== undefined) {
-      const firstOrg = organizationsWithInstalls(organizationsData)?.[0]
+      const firstOrg = organizationsData[0]
 
       if (firstOrg && selectedOrg === null) {
         setSelectedOrg(firstOrg)
@@ -82,39 +62,24 @@ const VercelIntegration: NextPageWithLayout = () => {
     }
   }, [organizationsData, integrationData])
 
-  /**
-   * Find installedConnections
-   */
-  function organizationsWithInstalls(organizations?: OrganizationsResponseWithInstalledData[]) {
-    /**
-     * Flat array of org slugs that have integration installed
-     *
-     */
-    const flatInstalledConnectionsIds: string[] | [] =
-      integrationData && integrationData.length > 0
-        ? integrationData
-            .filter((x) => x.integration.name === 'Vercel')
-            .map((x) => x.organization.slug)
-        : []
-
-    return organizations
-      ? organizations?.map((org) => {
-          return {
-            ...org,
-            installationInstalled: flatInstalledConnectionsIds.includes(org.slug) ? true : false,
-          }
-        })
-      : []
-  }
-
   /**
    * Organizations with extra `installationInstalled` attribute
    *
    * Used to show label/badge and allow/disallow installing
    *
    */
-  const organizationsWithInstalledData: OrganizationsResponseWithInstalledData[] =
-    organizationsWithInstalls(organizationsData)
+  const installed = useMemo(
+    () =>
+      integrationData && organizationsData
+        ? getHasInstalledObject({
+            integrationName: 'Vercel',
+            integrationData,
+            organizationsData,
+            installationId: configurationId,
+          })
+        : {},
+    [configurationId, integrationData, organizationsData]
+  )
 
   /**
    * Handle the correct route change based on whether the vercel integration
@@ -155,9 +120,7 @@ const VercelIntegration: NextPageWithLayout = () => {
   function onInstall() {
     const orgSlug = selectedOrg?.slug
 
-    const isIntegrationInstalled = organizationsWithInstalledData.some(
-      (x) => x.slug === orgSlug && x.installationInstalled
-    )
+    const isIntegrationInstalled = orgSlug ? installed[orgSlug] : false
 
     if (!orgSlug) {
       return ui.setNotification({ category: 'error', message: 'Please select an organization' })
@@ -200,7 +163,7 @@ const VercelIntegration: NextPageWithLayout = () => {
   const disableInstallationForm =
     (isLoadingVercelIntegrationCreateMutation && !dataLoading) ||
     // disables installation button if integration is already installed and it is Marketplace flow
-    (selectedOrg && selectedOrg?.installationInstalled && source === 'marketplace' && !dataLoading)
+    (selectedOrg && installed[selectedOrg.slug] && source === 'marketplace' && !dataLoading)
       ? true
       : false
 
@@ -217,17 +180,12 @@ const VercelIntegration: NextPageWithLayout = () => {
                   <Markdown content={`Choose the Supabase organization you wish to install in`} />
                   <OrganizationPicker
                     integrationName="Vercel"
-                    organizationsWithInstalledData={organizationsWithInstalledData}
-                    onSelectedOrgChange={(e: string) => {
-                      const org = organizationsWithInstalledData?.find((org) => org.slug === e)
-
-                      if (org) {
-                        setSelectedOrg(org)
-                        router.query.organizationSlug = org.slug
-                      }
-                    }}
                     selectedOrg={selectedOrg}
-                    dataLoading={dataLoading}
+                    onSelectedOrgChange={(org) => {
+                      setSelectedOrg(org)
+                      router.query.organizationSlug = org.slug
+                    }}
+                    configurationId={configurationId}
                   />
                   {disableInstallationForm && (
                     <Alert_Shadcn_ variant="warning">
@@ -286,91 +244,4 @@ VercelIntegration.getLayout = (page) => (
   <VercelIntegrationWindowLayout>{page}</VercelIntegrationWindowLayout>
 )
 
-export interface OrganizationPickerProps {
-  label?: string
-  onSelectedOrgChange: (slug: string) => void
-  integrationName: IntegrationName
-  dataLoading: boolean
-  organizationsWithInstalledData: OrganizationsResponseWithInstalledData[]
-  selectedOrg: OrganizationsResponseWithInstalledData | null
-}
-
-const OrganizationPicker = ({
-  label = 'Choose an organization',
-  onSelectedOrgChange,
-  selectedOrg,
-  dataLoading,
-  organizationsWithInstalledData,
-}: OrganizationPickerProps) => {
-  const [open, setOpen] = useState(false)
-  const ref = useRef<HTMLButtonElement>(null)
-
-  return (
-    <>
-      <Popover_Shadcn_ open={open} onOpenChange={setOpen}>
-        <PopoverTrigger_Shadcn_ asChild>
-          <Button
-            ref={ref}
-            type="default"
-            size="medium"
-            block
-            className="justify-start"
-            icon={<IconHexagon />}
-            loading={dataLoading}
-            disabled={dataLoading}
-            iconRight={
-              <span className="grow flex justify-end">
-                <IconChevronDown className={''} />
-              </span>
-            }
-          >
-            <span className="flex gap-2">
-              <span className="truncate">{selectedOrg?.name}</span>
-              {selectedOrg?.installationInstalled && (
-                <Badge color="scale">Integration Installed</Badge>
-              )}
-            </span>
-          </Button>
-        </PopoverTrigger_Shadcn_>
-        <PopoverContent_Shadcn_
-          className="p-0 w-full"
-          side="bottom"
-          align="center"
-          style={{ width: ref.current?.offsetWidth }}
-        >
-          <Command_Shadcn_>
-            <CommandInput_Shadcn_ placeholder="Search organization..." />
-            <CommandList_Shadcn_>
-              <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
-              <CommandGroup_Shadcn_>
-                {organizationsWithInstalledData?.map((org) => {
-                  return (
-                    <CommandItem_Shadcn_
-                      value={org.slug}
-                      key={org.slug}
-                      className="flex gap-2 items-center"
-                      onSelect={(slug) => {
-                        if (slug) onSelectedOrgChange(slug)
-                        setOpen(false)
-                      }}
-                    >
-                      <IconHexagon />
-                      <span className="truncate">{org.name}</span>{' '}
-                      {org?.installationInstalled && (
-                        <Badge color="scale" className="!flex-none">
-                          Integration Installed
-                        </Badge>
-                      )}
-                    </CommandItem_Shadcn_>
-                  )
-                })}
-              </CommandGroup_Shadcn_>
-            </CommandList_Shadcn_>
-          </Command_Shadcn_>
-        </PopoverContent_Shadcn_>
-      </Popover_Shadcn_>
-    </>
-  )
-}
-
 export default VercelIntegration

studio/state/github-integration-installation.ts

@@ -1,15 +0,0 @@
-import { proxy, snapshot, useSnapshot } from 'valtio'
-
-export const githubIntegrationInstallationState = proxy({
-  selectedOrganizationSlug: '' as string,
-  setSelectedOrganizationSlug: (selectedOrganizationSlug: string) => {
-    githubIntegrationInstallationState.selectedOrganizationSlug = selectedOrganizationSlug
-  },
-})
-
-export const getGitHubIntegrationInstallationState = () =>
-  snapshot(githubIntegrationInstallationState)
-
-export const useGitHubIntegrationInstallationState = (
-  options?: Parameters<typeof useSnapshot>[1]
-) => useSnapshot(githubIntegrationInstallationState, options)