From db3c4a48bcf404cf9b0cfcbda48c6e4f67a04729 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Wed, 6 Nov 2024 10:58:07 +0800 Subject: [PATCH] Fix integration settings being editable while in a branch (#30290) * Fix integration settings being editable while in a branch * Fix * Fix downgrade modal * Fix warning --- .../Subscription/DowngradeModal.tsx | 48 ++++++++----------- .../GitHubIntegrationConnectionForm.tsx | 6 +-- .../GithubIntegration/GithubSection.tsx | 7 ++- .../VercelIntegrationConnectionForm.tsx | 2 + .../VercelIntegration/VercelSection.tsx | 9 ++-- packages/ui/src/components/Modal/Modal.tsx | 3 +- 6 files changed, 33 insertions(+), 42 deletions(-) diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/DowngradeModal.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/DowngradeModal.tsx index e817d9075f9..4d547f3857e 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/DowngradeModal.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/DowngradeModal.tsx @@ -1,8 +1,10 @@ +import { AlertOctagon, MinusCircle, PauseCircle } from 'lucide-react' + import type { ProjectInfo } from 'data/projects/projects-query' import type { OrgSubscription, ProjectAddon } from 'data/subscriptions/types' -import { AlertOctagon, MinusCircle, PauseCircle } from 'lucide-react' import { PricingInformation } from 'shared-data' -import { Alert, Modal } from 'ui' +import { Modal } from 'ui' +import { Admonition } from 'ui-patterns' export interface DowngradeModalProps { visible: boolean @@ -76,6 +78,7 @@ const DowngradeModal = ({
- -

- If you're already past the limits of the Free Plan, your projects could become - unresponsive or enter read only mode. -

- + description="If you're already past the limits of the Free Plan, your projects could become + unresponsive or enter read only mode." + /> {((previousProjectAddons.length ?? 0) > 0 || (hasInstancesOnMicro && downgradingToNano)) && ( - +
    {previousProjectAddons.map((project) => ( @@ -111,39 +110,32 @@ const DowngradeModal = ({ ))}
- + )}
    -
  • -
    - -
    +
  • + Projects will be paused after a week of inactivity
    • -
  • -
    -
    - -
    - Add ons from all projects under this organization will be removed. -
    +
  • + + Add ons from all projects under this organization will be removed.
  • -
    Before you downgrade to the {selectedPlan?.name} plan, consider:
      -
    • +
    • Your projects no longer require their respective add ons.
      • -
    • +
    • Your resource consumption are well within the {selectedPlan?.name} plan's quota.
      • -
    • +
    • Alternatively, you may also transfer projects across organizations.
    diff --git a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx index dbf91418e86..fd7295905f6 100644 --- a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx +++ b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx @@ -248,7 +248,7 @@ const GitHubIntegrationConnectionForm = ({ { if (event.key === 'Escape') form.reset() }} @@ -301,7 +301,7 @@ const GitHubIntegrationConnectionForm = ({
    { if (event.key === 'Escape') form.reset() @@ -349,7 +349,7 @@ const GitHubIntegrationConnectionForm = ({ { field.onChange(e) diff --git a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GithubSection.tsx b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GithubSection.tsx index 43f1c74139a..e5430310967 100644 --- a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GithubSection.tsx +++ b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GithubSection.tsx @@ -45,6 +45,7 @@ const GitHubSection = () => { const project = useSelectedProject() const org = useSelectedOrganization() const sidePanelsStateSnapshot = useSidePanelsStateSnapshot() + const isBranch = project?.parent_project_ref !== undefined const canReadGitHubConnection = useCheckPermissions( PermissionAction.READ, @@ -67,8 +68,6 @@ const GitHubSection = () => { }, }) - const isBranch = project?.parent_project_ref !== undefined - const connections = allConnections?.filter((connection) => isBranch @@ -138,7 +137,7 @@ const GitHubSection = () => {
    { onClick={onAddGitHubConnection} orgSlug={org?.slug} showNode={false} - disabled={!canCreateGitHubConnection} + disabled={isBranch || !canCreateGitHubConnection} > Add new project connection diff --git a/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx b/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx index 515a5ba6f7d..b94cc93b20c 100644 --- a/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx +++ b/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx @@ -175,6 +175,7 @@ const VercelIntegrationConnectionForm = ({ @@ -228,6 +229,7 @@ const VercelIntegrationConnectionForm = ({ )} { const org = useSelectedOrganization() const { data } = useOrgIntegrationsQuery({ orgSlug: org?.slug }) const sidePanelsStateSnapshot = useSidePanelsStateSnapshot() + const isBranch = project?.parent_project_ref !== undefined const canReadVercelConnection = useCheckPermissions( PermissionAction.READ, @@ -54,8 +55,6 @@ const VercelSection = ({ isProjectScoped }: { isProjectScoped: boolean }) => { 'integrations.vercel_connections' ) - const isBranch = project?.parent_project_ref !== undefined - const { mutate: deleteVercelConnection } = useIntegrationsVercelInstalledConnectionDeleteMutation( { onSuccess: () => { @@ -187,7 +186,7 @@ You can change the scope of the access for Supabase by configuring >
    @@ -216,7 +215,7 @@ You can change the scope of the access for Supabase by configuring )} onAddVercelConnection(vercelIntegration.id)} > Add new project connection diff --git a/packages/ui/src/components/Modal/Modal.tsx b/packages/ui/src/components/Modal/Modal.tsx index b32f81a4a17..d6c61ba6a5b 100644 --- a/packages/ui/src/components/Modal/Modal.tsx +++ b/packages/ui/src/components/Modal/Modal.tsx @@ -97,7 +97,6 @@ const Modal = forwardRef< ref ) => { const [open, setOpen] = React.useState(visible ? visible : false) - const __styles = styleHandler('modal') useEffect(() => { setOpen(visible) @@ -121,7 +120,7 @@ const Modal = forwardRef< onClick={onConfirm} disabled={loading} loading={loading} - type={variant === 'danger' ? 'danger' : 'primary'} + type={variant === 'danger' ? 'danger' : variant === 'warning' ? 'warning' : 'primary'} > {confirmText}