From b5561cc413cbcb1dbd097c8dcf3b199355e0e8af Mon Sep 17 00:00:00 2001 From: Jonathan Summers-Muir Date: Tue, 20 Jun 2023 20:54:39 +0800 Subject: [PATCH] update picker UI --- package-lock.json | 1 + packages/config/package.json | 3 +- packages/config/ui.config.js | 35 ++-- .../interfaces/Integrations/ProjectLinker.tsx | 193 ++++++++++-------- .../IntegrationSettings/Integration.tsx | 14 +- .../layouts/IntegrationWindowLayout.tsx | 2 +- ...el-installed-connection-delete-mutation.ts | 13 +- studio/data/integrations/keys.ts | 6 +- 8 files changed, 156 insertions(+), 111 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4fdc32b163d..2c815be09f9 100644 --- a/package-lock.json +++ b/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" } }, diff --git a/packages/config/package.json b/packages/config/package.json index 45901f19411..b9fb4a06dab 100644 --- a/packages/config/package.json +++ b/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" } } diff --git a/packages/config/ui.config.js b/packages/config/ui.config.js index 96cf6ae71a7..856f8ff436a 100644 --- a/packages/config/ui.config.js +++ b/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( + `` + )}")`, + }), + }, + { values: flattenColorPalette(theme('backgroundColor')), type: 'color' } + ) }, require('tailwindcss-radix')(), forms, diff --git a/studio/components/interfaces/Integrations/ProjectLinker.tsx b/studio/components/interfaces/Integrations/ProjectLinker.tsx index 8b8ac5f5758..8f183b8b7c8 100644 --- a/studio/components/interfaces/Integrations/ProjectLinker.tsx +++ b/studio/components/interfaces/Integrations/ProjectLinker.tsx @@ -86,7 +86,10 @@ const ProjectLinker = ({ const Panel = ({ children, className, ...props }: React.HTMLAttributes) => { return (
{children} @@ -96,91 +99,97 @@ const ProjectLinker = ({ return (
-
- -
- Supabase -
- setSupabaseProjectId(e)} - > - - Choose a Supabase project - - {supabaseProjects.map((project) => ( - { - return ( - <> -
- Supabase -
- - ) - }} - > - {project.name} - - ))} - - -
- -
- {/* integration icon */} - +
+
+ +
+ Supabase +
+ setSupabaseProjectId(e)} > - - -
- setVercelProjectId(e)} - > - - Choose a Vercel project - - {foreignProjects.map((project) => ( - { - return ( - <> - {!project?.framework ? ( - vercelIcon - ) : ( - {`icon`} - )} - - ) - }} - > - {project.name} + + Choose a Supabase project - ))} - - + {supabaseProjects.map((project) => ( + { + return ( + <> +
+ Supabase +
+ + ) + }} + > + {project.name} + + ))} + + +
+ +
+ {/* integration icon */} + + + +
+ setVercelProjectId(e)} + > + + Choose a Vercel project + + {foreignProjects.map((project) => ( + { + return ( + <> + {!project?.framework ? ( + vercelIcon + ) : ( + {`icon`} + )} + + ) + }} + > + {project.name} + + ))} + + +
-
+ {/*

The following enviroment variables will be added:

@@ -206,7 +215,19 @@ const ProjectLinker = ({ ) })}

-
+
*/} + { + return ` + \n + - \`${x}\` - ${(This is the URL for the Project)} +` +})} +`} + />
) } diff --git a/studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx b/studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx index ecbd6751ea2..cf4a11985df 100644 --- a/studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx +++ b/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 ( diff --git a/studio/components/layouts/IntegrationWindowLayout.tsx b/studio/components/layouts/IntegrationWindowLayout.tsx index 98adc94be52..9b4fb43bf86 100644 --- a/studio/components/layouts/IntegrationWindowLayout.tsx +++ b/studio/components/layouts/IntegrationWindowLayout.tsx @@ -29,7 +29,7 @@ const Header: FC = ({ organization, project }) => { let stepNumber = organization ? 1 : project ? 2 : 0 return (
- +
diff --git a/studio/data/integrations/integrations-vercel-installed-connection-delete-mutation.ts b/studio/data/integrations/integrations-vercel-installed-connection-delete-mutation.ts index 5c9825553b4..fa6d74522a8 100644 --- a/studio/data/integrations/integrations-vercel-installed-connection-delete-mutation.ts +++ b/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, 'mutationFn'> = {}) => { + const queryClient = useQueryClient() return useMutation( (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, diff --git a/studio/data/integrations/keys.ts b/studio/data/integrations/keys.ts index be833c0d307..b25c9329d41 100644 --- a/studio/data/integrations/keys.ts +++ b/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, }