From 18e4f72b1dedb242dbff78778dce42bf4e4128a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kamil=20Og=C3=B3rek?= <kamil.ogorek@gmail.com>
Date: Thu, 20 Jun 2024 14:43:40 +0200
Subject: [PATCH] ref: Do not disable branching when removing GitHub connection
 (#27412)

---
 .../BranchManagement/BranchManagement.tsx     | 35 ++++++++-------
 .../BranchManagement/BranchPanels.tsx         | 43 +++++++++++--------
 .../Integrations/IntegrationConnection.tsx    |  4 ++
 .../GithubIntegration/GithubSection.tsx       | 28 ++----------
 4 files changed, 53 insertions(+), 57 deletions(-)

diff --git a/apps/studio/components/interfaces/BranchManagement/BranchManagement.tsx b/apps/studio/components/interfaces/BranchManagement/BranchManagement.tsx
index 9ea6f8a0a47..4389287d2fa 100644
--- a/apps/studio/components/interfaces/BranchManagement/BranchManagement.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/BranchManagement.tsx
@@ -214,27 +214,32 @@ const BranchManagement = () => {
                     <div className="w-8 h-8 bg-scale-300 border rounded-md flex items-center justify-center">
                       <IconGitHub size={18} strokeWidth={2} />
                     </div>
-                    <p className="text-sm">GitHub branch workflow</p>
+                    <p className="text-sm">
+                      {repo ? 'GitHub branch workflow' : 'No GitHub integration connected'}
+                    </p>
                     <Button asChild type="default" iconRight={<IconExternalLink />}>
                       <Link passHref href={`/project/${ref}/settings/integrations`}>
                         Settings
                       </Link>
                     </Button>
-                    <Button
-                      type="text"
-                      size="small"
-                      className="text-light hover:text py-1 px-1.5"
-                      iconRight={<IconExternalLink size={14} strokeWidth={1.5} />}
-                    >
-                      <Link
-                        passHref
-                        target="_blank"
-                        rel="noreferrer"
-                        href={`https://github.com/${repo}`}
+                    {repo && (
+                      <Button
+                        type="text"
+                        size="small"
+                        className="text-light hover:text py-1 px-1.5"
+                        iconRight={<IconExternalLink size={14} strokeWidth={1.5} />}
+                        asChild
                       >
-                        {repo}
-                      </Link>
-                    </Button>
+                        <Link
+                          passHref
+                          target="_blank"
+                          rel="noreferrer"
+                          href={`https://github.com/${repo}`}
+                        >
+                          {repo}
+                        </Link>
+                      </Button>
+                    )}
                   </div>
                   <Button type="default" onClick={() => setShowDisableBranching(true)}>
                     Disable branching
diff --git a/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx b/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx
index ad1b2fff215..a9a003d6e22 100644
--- a/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx
@@ -210,23 +210,32 @@ export const BranchRow = ({
       <div className="flex items-center gap-x-8">
         {isMain ? (
           <div className="flex items-center gap-x-2">
-            <Button asChild type="default" iconRight={<IconExternalLink />}>
-              <Link target="_blank" rel="noreferrer" passHref href={`https://github.com/${repo}`}>
-                View Repository
-              </Link>
-            </Button>
-            <DropdownMenu modal={false}>
-              <DropdownMenuTrigger asChild>
-                <Button type="text" icon={<IconMoreVertical />} className="px-1" />
-              </DropdownMenuTrigger>
-              <DropdownMenuContent className="p-0 w-56" side="bottom" align="end">
-                <Link passHref href={`/project/${projectRef}/settings/integrations`}>
-                  <DropdownMenuItem asChild className="gap-x-2">
-                    <a>Change production branch</a>
-                  </DropdownMenuItem>
-                </Link>
-              </DropdownMenuContent>
-            </DropdownMenu>
+            {repo && (
+              <>
+                <Button asChild type="default" iconRight={<IconExternalLink />}>
+                  <Link
+                    target="_blank"
+                    rel="noreferrer"
+                    passHref
+                    href={`https://github.com/${repo}`}
+                  >
+                    View Repository
+                  </Link>
+                </Button>
+                <DropdownMenu modal={false}>
+                  <DropdownMenuTrigger asChild>
+                    <Button type="text" icon={<IconMoreVertical />} className="px-1" />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent className="p-0 w-56" side="bottom" align="end">
+                    <Link passHref href={`/project/${projectRef}/settings/integrations`}>
+                      <DropdownMenuItem asChild className="gap-x-2">
+                        <a>Change production branch</a>
+                      </DropdownMenuItem>
+                    </Link>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </>
+            )}
           </div>
         ) : (
           <div className="flex items-center gap-x-2">
diff --git a/apps/studio/components/interfaces/Integrations/IntegrationConnection.tsx b/apps/studio/components/interfaces/Integrations/IntegrationConnection.tsx
index d9854888486..155a6c070c7 100644
--- a/apps/studio/components/interfaces/Integrations/IntegrationConnection.tsx
+++ b/apps/studio/components/interfaces/Integrations/IntegrationConnection.tsx
@@ -39,14 +39,17 @@ const IntegrationConnectionItem = forwardRef<HTMLLIElement, IntegrationConnectio
     const isBranchingEnabled = project?.is_branch_enabled === true
 
     const [isOpen, setIsOpen] = useState(false)
+    const [isDeleting, setIsDeleting] = useState(false)
     const [dropdownVisible, setDropdownVisible] = useState(false)
 
     const onConfirm = useCallback(async () => {
       try {
+        setIsDeleting(true)
         await onDeleteConnection(connection)
       } catch (error) {
         // [Joshen] No need for error handler
       } finally {
+        setIsDeleting(false)
         setIsOpen(false)
       }
     }, [connection, onDeleteConnection])
@@ -141,6 +144,7 @@ const IntegrationConnectionItem = forwardRef<HTMLLIElement, IntegrationConnectio
           confirmLabel="Delete connection"
           onCancel={onCancel}
           onConfirm={onConfirm}
+          loading={isDeleting}
           alert={
             type === 'GitHub' && isBranchingEnabled
               ? {
diff --git a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GithubSection.tsx b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GithubSection.tsx
index a0c94649e28..42c92930fc5 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GithubSection.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GithubSection.tsx
@@ -11,8 +11,6 @@ import {
   ScaffoldSectionContent,
   ScaffoldSectionDetail,
 } from 'components/layouts/Scaffold'
-import { useBranchesDisableMutation } from 'data/branches/branches-disable-mutation'
-import { useBranchesQuery } from 'data/branches/branches-query'
 import { useGitHubConnectionDeleteMutation } from 'data/integrations/github-connection-delete-mutation'
 import { useGitHubConnectionsQuery } from 'data/integrations/github-connections-query'
 import type {
@@ -45,22 +43,16 @@ const GitHubSection = () => {
   const sidePanelsStateSnapshot = useSidePanelsStateSnapshot()
 
   const { data: allConnections } = useGitHubConnectionsQuery({ organizationId: org?.id })
-  const { data: branches } = useBranchesQuery({ projectRef })
 
-  const { mutate: deleteGitHubConnection } = useGitHubConnectionDeleteMutation({
+  const { mutateAsync: deleteGitHubConnection } = useGitHubConnectionDeleteMutation({
     onSuccess: () => {
       toast.success('Successfully deleted Github connection')
     },
   })
 
-  const { mutate: disableBranching } = useBranchesDisableMutation()
-
   const hasAccessToBranching = useFlag<boolean>('branchManagement')
 
-  const previewBranches = (branches ?? []).filter((branch) => !branch.is_default)
   const isBranch = project?.parent_project_ref !== undefined
-  const isBranchingEnabled =
-    project?.is_branch_enabled === true || project?.parent_project_ref !== undefined
 
   const connections =
     allConnections?.filter((connection) =>
@@ -75,27 +67,13 @@ const GitHubSection = () => {
 
   const onDeleteGitHubConnection = useCallback(
     async (connection: IntegrationProjectConnection) => {
-      if (isBranchingEnabled) {
-        if (!projectRef) {
-          toast.error('Project ref not found')
-          return
-        }
-        disableBranching({ projectRef, branchIds: previewBranches?.map((branch) => branch.id) })
-      }
       if (!org?.id) {
         toast.error('Organization not found')
         return
       }
-      deleteGitHubConnection({ connectionId: connection.id, organizationId: org.id })
+      await deleteGitHubConnection({ connectionId: connection.id, organizationId: org.id })
     },
-    [
-      deleteGitHubConnection,
-      disableBranching,
-      isBranchingEnabled,
-      org?.id,
-      previewBranches,
-      projectRef,
-    ]
+    [deleteGitHubConnection, org?.id]
   )
 
   return (