update picker UI

package-lock.json

@@ -42860,6 +42860,7 @@
         "eslint-config-next": "^13.3.0",
         "eslint-config-prettier": "^8.3.0",
         "eslint-plugin-react": "7.28.0",
+        "mini-svg-data-uri": "^1.4.3",
         "tailwindcss-radix": "^2.0.0"
       }
     },

packages/config/package.json

@@ -15,6 +15,7 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "7.28.0",
     "tailwindcss-radix": "^2.0.0",
-    "@tailwindcss/typography": "^0.5.9"
+    "@tailwindcss/typography": "^0.5.9",
+    "mini-svg-data-uri": "^1.4.3"
   }
 }

packages/config/ui.config.js

@@ -3,6 +3,7 @@ const forms = require('@tailwindcss/forms')
 const plugin = require('tailwindcss/plugin')
 const radixUiColors = require('@radix-ui/colors')
 const brandColors = require('./default-colors')
+const svgToDataUri = require('mini-svg-data-uri')
 
 const { default: flattenColorPalette } = require('tailwindcss/lib/util/flattenColorPalette')
 
@@ -371,18 +372,28 @@ const uiConfig = {
           highlight: (value) => ({ boxShadow: `inset 0 1px 0 0 ${value}` }),
         },
         { values: flattenColorPalette(theme('backgroundColor')), type: 'color' }
-      ),
-        matchUtilities(
-          {
-            subhighlight: (value) => ({
-              boxShadow: `inset 0 -1px 0 0 ${value}`,
-            }),
-          },
-          {
-            values: flattenColorPalette(theme('backgroundColor')),
-            type: 'color',
-          }
-        )
+      )
+      matchUtilities(
+        {
+          subhighlight: (value) => ({
+            boxShadow: `inset 0 -1px 0 0 ${value}`,
+          }),
+        },
+        {
+          values: flattenColorPalette(theme('backgroundColor')),
+          type: 'color',
+        }
+      )
+      matchUtilities(
+        {
+          'bg-grid': (value) => ({
+            backgroundImage: `url("${svgToDataUri(
+              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
+            )}")`,
+          }),
+        },
+        { values: flattenColorPalette(theme('backgroundColor')), type: 'color' }
+      )
     },
     require('tailwindcss-radix')(),
     forms,

studio/components/interfaces/Integrations/ProjectLinker.tsx

@@ -86,7 +86,10 @@ const ProjectLinker = ({
   const Panel = ({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
     return (
       <div
-        className={cn('bg border rounded shadow px-6 py-5 flex flex-col gap-6 w-full', className)}
+        className={cn(
+          'flex flex-col gap-6 px-5 mx-auto w-full justify-center items-center',
+          className
+        )}
         {...props}
       >
         {children}
@@ -96,91 +99,97 @@ const ProjectLinker = ({
 
   return (
     <div className="flex flex-col gap-4">
-      <div className="flex items-center gap-0 w-full">
-        <Panel>
-          <div className="bg-white shadow border rounded p-1 w-8 h-8 flex justify-center items-center">
-            <img src={`${BASE_PATH}/img/supabase-logo.svg`} alt="Supabase" className="w-4" />
-          </div>
-          <Listbox
-            label="Supabase project"
-            value={supabaseProjectId ?? UNDEFINED_SELECT_VALUE}
-            onChange={(e) => setSupabaseProjectId(e)}
-          >
-            <Listbox.Option value={UNDEFINED_SELECT_VALUE} label="Choose a project" disabled>
-              Choose a Supabase project
-            </Listbox.Option>
-            {supabaseProjects.map((project) => (
-              <Listbox.Option
-                key={project.id}
-                value={project.id}
-                label={project.name}
-                addOnBefore={() => {
-                  return (
-                    <>
-                      <div className="bg-white shadow border rounded p-1 w-6 h-6 flex justify-center items-center">
-                        <img
-                          src={`${BASE_PATH}/img/supabase-logo.svg`}
-                          alt="Supabase"
-                          className="w-4"
-                        />
-                      </div>
-                    </>
-                  )
-                }}
-              >
-                {project.name}
-              </Listbox.Option>
-            ))}
-          </Listbox>
-        </Panel>
-        <div className="border h-px w-16 border-dashed"></div>
-        <Panel>
-          <div className="bg-black shadow rounded p-1 w-8 h-8 flex justify-center items-center">
-            {/* <img src="/img/icons/vercel.svg" style={{ height: 21 }} alt="integration icon" /> */}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="var(--colors-scale12)"
-              viewBox="0 0 512 512"
-              className="w-4"
+      <div className="relative border rounded-lg p-12 bg border-body">
+        <div
+          className="absolute inset-0 bg-grid-white/5 [mask-image:linear-gradient(0deg,#fff,rgba(255,255,255,0.6))] dark:bg-grid-slate-700/25 dark:[mask-image:linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.5))]"
+          style={{ backgroundPosition: '10px 10px' }}
+        ></div>
+        <div className="flex gap-0 w-full relative">
+          <Panel>
+            <div className="bg-white shadow border rounded p-1 w-12 h-12 flex justify-center items-center">
+              <img src={`${BASE_PATH}/img/supabase-logo.svg`} alt="Supabase" className="w-6" />
+            </div>
+            <Listbox
+              className="w-full"
+              value={supabaseProjectId ?? UNDEFINED_SELECT_VALUE}
+              onChange={(e) => setSupabaseProjectId(e)}
             >
-              <path fill-rule="evenodd" d="M256,48,496,464H16Z" />
-            </svg>
-          </div>
-          <Listbox
-            label="Vercel project"
-            value={vercelProjectId ?? UNDEFINED_SELECT_VALUE}
-            onChange={(e) => setVercelProjectId(e)}
-          >
-            <Listbox.Option value={UNDEFINED_SELECT_VALUE} label="Choose a project" disabled>
-              Choose a Vercel project
-            </Listbox.Option>
-            {foreignProjects.map((project) => (
-              <Listbox.Option
-                key={project.id}
-                value={project.id}
-                label={project.name}
-                addOnBefore={() => {
-                  return (
-                    <>
-                      {!project?.framework ? (
-                        vercelIcon
-                      ) : (
-                        <img
-                          src={`/img/icons/frameworks/${project.framework}.svg`}
-                          width={21}
-                          height={21}
-                          alt={`icon`}
-                        />
-                      )}
-                    </>
-                  )
-                }}
-              >
-                {project.name}
+              <Listbox.Option value={UNDEFINED_SELECT_VALUE} label="Choose a project" disabled>
+                Choose a Supabase project
               </Listbox.Option>
-            ))}
-          </Listbox>
-        </Panel>
+              {supabaseProjects.map((project) => (
+                <Listbox.Option
+                  key={project.id}
+                  value={project.id}
+                  label={project.name}
+                  addOnBefore={() => {
+                    return (
+                      <>
+                        <div className="bg-white shadow border rounded p-1 w-6 h-6 flex justify-center items-center">
+                          <img
+                            src={`${BASE_PATH}/img/supabase-logo.svg`}
+                            alt="Supabase"
+                            className="w-4"
+                          />
+                        </div>
+                      </>
+                    )
+                  }}
+                >
+                  {project.name}
+                </Listbox.Option>
+              ))}
+            </Listbox>
+          </Panel>
+          <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">
+              {/* <img src="/img/icons/vercel.svg" style={{ height: 21 }} alt="integration icon" /> */}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="var(--colors-scale12)"
+                viewBox="0 0 512 512"
+                className="w-6"
+              >
+                <path fill-rule="evenodd" d="M256,48,496,464H16Z" />
+              </svg>
+            </div>
+            <Listbox
+              className="w-full"
+              value={vercelProjectId ?? UNDEFINED_SELECT_VALUE}
+              onChange={(e) => setVercelProjectId(e)}
+            >
+              <Listbox.Option value={UNDEFINED_SELECT_VALUE} label="Choose a project" disabled>
+                Choose a Vercel project
+              </Listbox.Option>
+              {foreignProjects.map((project) => (
+                <Listbox.Option
+                  key={project.id}
+                  value={project.id}
+                  label={project.name}
+                  addOnBefore={() => {
+                    return (
+                      <>
+                        {!project?.framework ? (
+                          vercelIcon
+                        ) : (
+                          <img
+                            src={`/img/icons/frameworks/${project.framework}.svg`}
+                            width={21}
+                            height={21}
+                            alt={`icon`}
+                          />
+                        )}
+                      </>
+                    )
+                  }}
+                >
+                  {project.name}
+                </Listbox.Option>
+              ))}
+            </Listbox>
+          </Panel>
+        </div>
       </div>
       <div className="flex w-full justify-end">
         <Button
@@ -193,7 +202,7 @@ const ProjectLinker = ({
           Connect project
         </Button>
       </div>
-      <div>
+      {/* <div>
         <p className="text-scale-900 text-sm mb-3">
           The following enviroment variables will be added:
         </p>
@@ -206,7 +215,19 @@ const ProjectLinker = ({
             )
           })}
         </p>
-      </div>
+      </div> */}
+      <Markdown
+        content={`
+The following enviroment variables will be added:
+
+${ENV_VAR_RAW_KEYS.map((x, idx) => {
+  return `
+  \n
+  - \`${x}\` - ${(<span>This is the URL for the Project</span>)}
+`
+})}
+`}
+      />
     </div>
   )
 }

studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx

@@ -18,6 +18,7 @@ import {
   useIntegrationsQuery,
 } from 'data/integrations/integrations-query'
 import { useIntegrationsVercelInstalledConnectionDeleteMutation } from 'data/integrations/integrations-vercel-installed-connection-delete-mutation'
+import { useStore } from 'hooks'
 import { pluralize } from 'lib/helpers'
 import { EMPTY_ARR } from 'lib/void'
 import { useMemo } from 'react'
@@ -42,11 +43,11 @@ const Integration = ({
   integrations = EMPTY_ARR,
 }: IntegrationProps) => {
   const githubConnectionConfigPanelShotshot = useGithubConnectionConfigPanelSnapshot()
-  const deleteMutation = useIntegrationsVercelInstalledConnectionDeleteMutation({
-    onSuccess: (data, variables, context) => {
-      // Handle the success case
-    },
-  })
+
+  const { ui } = useStore()
+
+  const { mutate: deleteMutate, isLoading: isDeleteLoading } =
+    useIntegrationsVercelInstalledConnectionDeleteMutation()
 
   const ConnectionHeading = ({ integration }: { integration: TIntegration }) => {
     return (
@@ -66,9 +67,10 @@ Repository connections for ${title?.toLowerCase()}
     const variables = {
       organization_integration_id: organizationIntegrationId,
       id: projectIntegrationId,
+      orgId: ui.selectedOrganization?.id,
     }
 
-    deleteMutation.mutate(variables)
+    deleteMutate(variables)
   }
 
   return (

studio/components/layouts/IntegrationWindowLayout.tsx

@@ -29,7 +29,7 @@ const Header: FC<any> = ({ organization, project }) => {
   let stepNumber = organization ? 1 : project ? 2 : 0
   return (
     <div className="bg">
-      <ScaffoldContainer className={cn('py-3', INTEGRATION_LAYOUT_MAX_WIDTH)}>
+      <ScaffoldContainer className={cn('py-3 border-b', INTEGRATION_LAYOUT_MAX_WIDTH)}>
         <div className="flex items-center gap-6 w-full">
           <div className="flex gap-2 items-center">
             <div className="bg-white shadow border rounded p-1 w-8 h-8 flex justify-center items-center">

studio/data/integrations/integrations-vercel-installed-connection-delete-mutation.ts

@@ -1,9 +1,14 @@
-import { useMutation, UseMutationOptions } from '@tanstack/react-query'
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
 import { delete_ } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
 import { UserContent } from 'types'
+import { integrationKeys } from './keys'
 
-type DeleteVariables = { organization_integration_id: string; id: string }
+type DeleteVariables = {
+  organization_integration_id: string
+  id: string
+  orgId: number | undefined
+}
 
 export async function deleteConnection(
   { organization_integration_id, id }: DeleteVariables,
@@ -29,10 +34,14 @@ export const useIntegrationsVercelInstalledConnectionDeleteMutation = ({
   onSuccess,
   ...options
 }: Omit<UseMutationOptions<DeleteContentData, unknown, DeleteVariables>, 'mutationFn'> = {}) => {
+  const queryClient = useQueryClient()
   return useMutation<DeleteContentData, unknown, DeleteVariables>(
     (args) => deleteConnection(args),
     {
       async onSuccess(data, variables, context) {
+        console.log('variables in mutate delete onSuccess', variables)
+        await Promise.all([queryClient.invalidateQueries(integrationKeys.list(variables.orgId))])
+
         await onSuccess?.(data, variables, context)
       },
       ...options,

studio/data/integrations/keys.ts

@@ -1,7 +1,7 @@
 export const integrationKeys = {
-  list: (orgSlug: string | undefined) => ['organizations', orgSlug, 'integrations'] as const,
-  vercelProjectList: (orgSlug: string | undefined) =>
-    ['organizations', orgSlug, 'vercel-projects'] as const,
+  list: (orgId: number | undefined) => ['organizations', orgId, 'integrations'] as const,
+  vercelProjectList: (organization_integration_id: string | undefined) =>
+    ['organizations', organization_integration_id, 'vercel-projects'] as const,
   vercelConnectionsList: (organization_integration_id: string | undefined) =>
     ['organizations', organization_integration_id, 'vercel-connections'] as const,
 }