dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-16 06:39:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: add check for integration installation on marketplace flow

Browse Source
This commit is contained in:
Jonathan Summers-Muir committed 2023-07-18 19:12:48 +08:00
1 parent c927239704
commit d594849554
2 files changed
+346 -263
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

package-lock.json
Generated
+180 -180
View File
@@ -4362,6 +4362,36 @@
"@mdx-js/react": "*"
}
},
"node_modules/@next/swc-android-arm-eabi": {
"version": "12.3.2",
"resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.3.2.tgz",
"integrity": "sha512-r2rrz+DZ8YYGqzVrbRrpP6GKzwozpOrnFbErc4k36vUTSFMag9yQahZfaBe06JYdqu/e5yhm/saIDEaSVPRP4g==",
"cpu": [
"arm"
],
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-android-arm64": {
"version": "12.3.2",
"resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.3.2.tgz",
"integrity": "sha512-B+TINJhCf+CrY1+b3/JWQlkecv53rAGa/gA7gi5B1cnBa/2Uvoe+Ue0JeCefTjfiyl1ScsyNx+NcESY8Ye2Ngg==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-darwin-arm64": {
"version": "12.3.2",
"cpu": [
@@ -4376,6 +4406,156 @@
"node": ">= 10"
}
},
"node_modules/@next/swc-darwin-x64": {
"version": "12.3.2",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.3.2.tgz",
"integrity": "sha512-1HkjmS9awwlaeEY8Y01nRSNkSv3y+qnC/mjMPe/W66hEh3QKa/LQHqHeS7NOdEs19B2mhZ7w+EgMRXdLQ0Su8w==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-freebsd-x64": {
"version": "12.3.2",
"resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.3.2.tgz",
"integrity": "sha512-h5Mx0BKDCJ5Vu/U8e07esF6PjPv1EJgmRbYWTUZMAflu13MQpCJkKEJir7+BeRfTXRfgFf+llc7uocrpd7mcrg==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"freebsd"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm-gnueabihf": {
"version": "12.3.2",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.3.2.tgz",
"integrity": "sha512-EuRZAamoxfe/WoWRaC0zsCAoE4gs/mEhilcloNM4J5Mnb3PLY8PZV394W7t5tjBjItMCF7l2Ebwjwtm46tq2RA==",
"cpu": [
"arm"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm64-gnu": {
"version": "12.3.2",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.3.2.tgz",
"integrity": "sha512-T9GCFyOIb4S3acA9LqflUYD+QZ94iZketHCqKdoO0Nx0OCHIgGJV5rotDe8TDXwh/goYpIfyHU4j1qqw4w4VnA==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm64-musl": {
"version": "12.3.2",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.3.2.tgz",
"integrity": "sha512-hxNVZS6L3c2z3l9EH2GP0MGQ9exu6O8cohYNZyqC9WUl6C03sEn8xzDH1y+NgD3fVurvYkGU5F0PDddJJLfDIw==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-x64-gnu": {
"version": "12.3.2",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.3.2.tgz",
"integrity": "sha512-fCPkLuwDwY8/QeXxciJJjDHG09liZym/Bhb4A+RLFQ877wUkwFsNWDUTSdUx0YXlYK/1gf67BKauqKkOKp6CYw==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-x64-musl": {
"version": "12.3.2",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.3.2.tgz",
"integrity": "sha512-o+GifBIQ2K+/MEFxHsxUZoU3bsuVFLXZYWd3idimFHiVdDCVYiKsY6mYMmKDlucX+9xRyOCkKL9Tjf+3tuXJpw==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-arm64-msvc": {
"version": "12.3.2",
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.3.2.tgz",
"integrity": "sha512-crii66irzGGMSUR0L8r9+A06eTv7FTXqw4rgzJ33M79EwQJOdpY7RVKXLQMurUhniEeQEEOfamiEdPIi/qxisw==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-ia32-msvc": {
"version": "12.3.2",
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.3.2.tgz",
"integrity": "sha512-5hRUSvn3MdQ4nVRu1rmKxq5YJzpTtZfaC/NyGw6wa4NSF1noUn/pdQGUr+I5Qz3CZkd1gZzzC0eaXQHlrk0E2g==",
"cpu": [
"ia32"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-x64-msvc": {
"version": "12.3.2",
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.3.2.tgz",
"integrity": "sha512-tpQJYUH+TzPMIsdVl9fH8uDg47iwiNjKY+8e9da3dXqlkztKzjSw0OwSADoqh3KrifplXeKSta+BBGLdBqg3sg==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
"license": "MIT",
@@ -42261,186 +42441,6 @@
"engines": {
"node": ">=14.17"
}
},
"node_modules/@next/swc-android-arm-eabi": {
"version": "12.3.2",
"resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.3.2.tgz",
"integrity": "sha512-r2rrz+DZ8YYGqzVrbRrpP6GKzwozpOrnFbErc4k36vUTSFMag9yQahZfaBe06JYdqu/e5yhm/saIDEaSVPRP4g==",
"cpu": [
"arm"
],
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-android-arm64": {
"version": "12.3.2",
"resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.3.2.tgz",
"integrity": "sha512-B+TINJhCf+CrY1+b3/JWQlkecv53rAGa/gA7gi5B1cnBa/2Uvoe+Ue0JeCefTjfiyl1ScsyNx+NcESY8Ye2Ngg==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-darwin-x64": {
"version": "12.3.2",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.3.2.tgz",
"integrity": "sha512-1HkjmS9awwlaeEY8Y01nRSNkSv3y+qnC/mjMPe/W66hEh3QKa/LQHqHeS7NOdEs19B2mhZ7w+EgMRXdLQ0Su8w==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-freebsd-x64": {
"version": "12.3.2",
"resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.3.2.tgz",
"integrity": "sha512-h5Mx0BKDCJ5Vu/U8e07esF6PjPv1EJgmRbYWTUZMAflu13MQpCJkKEJir7+BeRfTXRfgFf+llc7uocrpd7mcrg==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"freebsd"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm-gnueabihf": {
"version": "12.3.2",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.3.2.tgz",
"integrity": "sha512-EuRZAamoxfe/WoWRaC0zsCAoE4gs/mEhilcloNM4J5Mnb3PLY8PZV394W7t5tjBjItMCF7l2Ebwjwtm46tq2RA==",
"cpu": [
"arm"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm64-gnu": {
"version": "12.3.2",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.3.2.tgz",
"integrity": "sha512-T9GCFyOIb4S3acA9LqflUYD+QZ94iZketHCqKdoO0Nx0OCHIgGJV5rotDe8TDXwh/goYpIfyHU4j1qqw4w4VnA==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm64-musl": {
"version": "12.3.2",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.3.2.tgz",
"integrity": "sha512-hxNVZS6L3c2z3l9EH2GP0MGQ9exu6O8cohYNZyqC9WUl6C03sEn8xzDH1y+NgD3fVurvYkGU5F0PDddJJLfDIw==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-x64-gnu": {
"version": "12.3.2",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.3.2.tgz",
"integrity": "sha512-fCPkLuwDwY8/QeXxciJJjDHG09liZym/Bhb4A+RLFQ877wUkwFsNWDUTSdUx0YXlYK/1gf67BKauqKkOKp6CYw==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-x64-musl": {
"version": "12.3.2",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.3.2.tgz",
"integrity": "sha512-o+GifBIQ2K+/MEFxHsxUZoU3bsuVFLXZYWd3idimFHiVdDCVYiKsY6mYMmKDlucX+9xRyOCkKL9Tjf+3tuXJpw==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-arm64-msvc": {
"version": "12.3.2",
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.3.2.tgz",
"integrity": "sha512-crii66irzGGMSUR0L8r9+A06eTv7FTXqw4rgzJ33M79EwQJOdpY7RVKXLQMurUhniEeQEEOfamiEdPIi/qxisw==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-ia32-msvc": {
"version": "12.3.2",
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.3.2.tgz",
"integrity": "sha512-5hRUSvn3MdQ4nVRu1rmKxq5YJzpTtZfaC/NyGw6wa4NSF1noUn/pdQGUr+I5Qz3CZkd1gZzzC0eaXQHlrk0E2g==",
"cpu": [
"ia32"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-x64-msvc": {
"version": "12.3.2",
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.3.2.tgz",
"integrity": "sha512-tpQJYUH+TzPMIsdVl9fH8uDg47iwiNjKY+8e9da3dXqlkztKzjSw0OwSADoqh3KrifplXeKSta+BBGLdBqg3sg==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
}
}
}
studio/pages/integrations/vercel/install.tsx
+166 -83
View File
@@ -8,10 +8,33 @@ import { useVercelIntegrationCreateMutation } from 'data/integrations/vercel-int
import { useOrganizationsQuery } from 'data/organizations/organizations-query'
import { useStore } from 'hooks'
import { useRouter } from 'next/router'
import { useState } from 'react'
import { useEffect, useRef, useState } from 'react'
import { useVercelIntegrationInstallationState } from 'state/vercel-integration-installation'
import { NextPageWithLayout, Organization } from 'types'
import { Alert, Badge, Button, IconBook, IconHexagon, IconLifeBuoy, Listbox, LoadingLine } from 'ui'
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,
Listbox,
LoadingLine,
PopoverContent_Shadcn_,
PopoverTrigger_Shadcn_,
Popover_Shadcn_,
} from 'ui'
/**
* Organization type with `installationInstalled` added
@@ -34,7 +57,9 @@ const VercelIntegration: NextPageWithLayout = () => {
const router = useRouter()
const { ui } = useStore()
const { code, configurationId, next, teamId, source, externalId } = useParams()
const [selectedOrg, setSelectedOrg] = useState<Organization | null>(null)
const [selectedOrg, setSelectedOrg] = useState<OrganizationsResponseWithInstalledData | null>(
null
)
const [organizationIntegrationId, setOrganizationIntegrationId] = useState<string | null>(null)
const snapshot = useVercelIntegrationInstallationState()
@@ -48,27 +73,44 @@ const VercelIntegration: NextPageWithLayout = () => {
*/
const { data: integrationData, isLoading: integrationDataLoading } = 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
}
},
const { data: organizationsData, isLoading: isLoadingOrganizationsQuery } =
useOrganizationsQuery()
useEffect(() => {
if (organizationsData !== undefined && integrationData !== undefined) {
const firstOrg = organizationsWithInstalls(organizationsData)?.[0]
console.log('firstOrg', firstOrg)
if (firstOrg && selectedOrg === null) {
setSelectedOrg(firstOrg)
snapshot.setSelectedOrganizationSlug(firstOrg.slug)
router.query.organizationSlug = firstOrg.slug
}
}
)
}, [organizationsData, integrationData])
/**
* Flat array of org slugs that have integration installed
*
* Find installedConnections
*/
const flatInstalledConnectionsIds: string[] | [] =
integrationData && integrationData.length > 0
? integrationData?.map((x) => x.organization.slug)
function organizationsWithInstalls(organizations?: OrganizationsResponseWithInstalledData[]) {
/**
* Flat array of org slugs that have integration installed
*
*/
const flatInstalledConnectionsIds: string[] | [] =
integrationData && integrationData.length > 0
? integrationData?.map((x) => x.organization.slug)
: []
return organizations
? organizations?.map((org) => {
return {
...org,
installationInstalled: flatInstalledConnectionsIds.includes(org.slug) ? true : false,
}
})
: []
}
/**
* Organizations with extra `installationInstalled` attribute
@@ -76,14 +118,8 @@ const VercelIntegration: NextPageWithLayout = () => {
* 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 organizationsWithInstalledData: OrganizationsResponseWithInstalledData[] =
organizationsWithInstalls(organizationsData)
/**
* Handle the correct route change based on whether the vercel integration
@@ -168,6 +204,13 @@ const VercelIntegration: NextPageWithLayout = () => {
const dataLoading = isLoadingVercelIntegrationCreateMutation || isLoadingOrganizationsQuery
const disableInstallationForm =
isLoadingVercelIntegrationCreateMutation ||
// disables installation button if integration is already installed and it is Marketplace flow
(selectedOrg?.installationInstalled && source === 'marketplace')
console.log('selectedOrg', selectedOrg)
return (
<>
<main className="overflow-auto flex flex-col h-full">
@@ -181,17 +224,36 @@ const VercelIntegration: NextPageWithLayout = () => {
<OrganizationPicker
integrationName="Vercel"
organizationsWithInstalledData={organizationsWithInstalledData}
onSelectedOrgChange={(e) => {
router.query.organizationSlug = e.slug
setSelectedOrg(e)
onSelectedOrgChange={(e: string) => {
console.log('e:', e)
const org = organizationsWithInstalledData?.find((org) => org.slug === e)
console.log('const:', org)
if (org) {
setSelectedOrg(org)
router.query.organizationSlug = org.slug
}
}}
selectedOrg={selectedOrg}
dataLoading={dataLoading}
/>
{disableInstallationForm && (
<Alert_Shadcn_ variant="warning">
<IconAlertTriangle className="h-4 w-4" strokeWidth={2} />
<AlertTitle_Shadcn_>
Vercel 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={isLoadingVercelIntegrationCreateMutation}
disabled={disableInstallationForm}
loading={isLoadingVercelIntegrationCreateMutation}
onClick={onInstall}
>
@@ -201,15 +263,15 @@ const VercelIntegration: NextPageWithLayout = () => {
</>
</ScaffoldContainer>
<ScaffoldContainer className="flex flex-col gap-6 py-3">
<Alert
withIcon
variant="info"
title="You can uninstall this Integration at any time."
>
<Markdown
content={`Remove this integration at any time via Vercel or the Supabase dashboard.`}
/>
</Alert>
<Alert_Shadcn_ variant="default">
<IconInfo className="h-4 w-4" strokeWidth={2} />
<AlertTitle_Shadcn_>
You can uninstall this Integration at any time.
</AlertTitle_Shadcn_>
<AlertDescription_Shadcn_>
Remove this integration at any time via Vercel or the Supabase dashboard.
</AlertDescription_Shadcn_>
</Alert_Shadcn_>
</ScaffoldContainer>
</>
)}
@@ -232,40 +294,22 @@ VercelIntegration.getLayout = (page) => <IntegrationWindowLayout>{page}</Integra
export interface OrganizationPickerProps {
label?: string
onSelectedOrgChange?: (org: Organization) => void
onSelectedOrgChange: (slug: string) => void
integrationName: IntegrationName
dataLoading: boolean
organizationsWithInstalledData: OrganizationsResponseWithInstalledData[]
selectedOrg: OrganizationsResponseWithInstalledData | null
}
const OrganizationPicker = ({
label = 'Choose an organization',
onSelectedOrgChange,
integrationName,
selectedOrg,
dataLoading,
organizationsWithInstalledData,
}: OrganizationPickerProps) => {
const { ui } = useStore()
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)
}
}
const [open, setOpen] = useState(false)
const ref = useRef<HTMLButtonElement>(null)
if (dataLoading) {
return (
@@ -278,27 +322,66 @@ const OrganizationPicker = ({
}
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 />}
<>
<Popover_Shadcn_ open={open} onOpenChange={setOpen}>
<PopoverTrigger_Shadcn_ asChild>
<Button
ref={ref}
type="default"
size="medium"
block
className="justify-start"
icon={<IconHexagon />}
iconRight={
<span className="grow flex justify-end">
<IconChevronDown className={''} />
</span>
}
>
{label}
</Listbox.Option>
)
})}
</Listbox>
<span className="flex gap-2">
{selectedOrg?.name}
{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>{org.name}</span>{' '}
{org?.installationInstalled && (
<Badge color="scale">Integration Installed</Badge>
)}
</CommandItem_Shadcn_>
)
})}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
</PopoverContent_Shadcn_>
</Popover_Shadcn_>
</>
)
}