Fix: added check to ensure github is connected before showing the logo on branch (supabase#40687)

added check to ensure github is connected before showing the logo on branch

Author: awaseem

apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx

@@ -62,13 +62,15 @@ interface BranchRowProps {
   repo: string
   label?: string | ReactNode
   branch: Branch
+  isGithubConnected: boolean
   rowLink?: string
   external?: boolean
   rowActions?: ReactNode
 }
 
 export const BranchRow = ({
   branch,
+  isGithubConnected,
   label,
   repo,
   rowLink,
@@ -87,7 +89,7 @@ export const BranchRow = ({
   return (
     <div className="w-full flex items-center justify-between px-4 py-2.5 hover:bg-surface-100">
       <div className="flex items-center gap-x-3">
-        {branch.git_branch && (
+        {branch.git_branch && isGithubConnected && (
           <ButtonTooltip
             asChild
             type="default"

apps/studio/components/interfaces/BranchManagement/Overview.tsx

@@ -38,6 +38,7 @@ import { EditBranchModal } from './EditBranchModal'
 import { PreviewBranchesEmptyState } from './EmptyStates'
 
 interface OverviewProps {
+  isGithubConnected: boolean
   isLoading: boolean
   isSuccess: boolean
   repo: string
@@ -49,6 +50,7 @@ interface OverviewProps {
 }
 
 export const Overview = ({
+  isGithubConnected,
   isLoading,
   isSuccess,
   repo,
@@ -71,6 +73,7 @@ export const Overview = ({
         {isSuccess && mainBranch !== undefined && (
           <BranchRow
             branch={mainBranch}
+            isGithubConnected={isGithubConnected}
             label={
               <div className="flex items-center gap-x-2">
                 <Shield size={14} strokeWidth={1.5} className="text-warning" />
@@ -109,6 +112,7 @@ export const Overview = ({
           persistentBranches.map((branch) => {
             return (
               <BranchRow
+                isGithubConnected={isGithubConnected}
                 key={branch.id}
                 repo={repo}
                 branch={branch}
@@ -135,6 +139,7 @@ export const Overview = ({
           ephemeralBranches.map((branch) => {
             return (
               <BranchRow
+                isGithubConnected={isGithubConnected}
                 key={branch.id}
                 repo={repo}
                 branch={branch}

apps/studio/pages/project/[ref]/branches/index.tsx

@@ -77,6 +77,8 @@ const BranchesPage: NextPageWithLayout = () => {
   const isLoading = isLoadingConnections || isLoadingBranches
   const isSuccess = isSuccessConnections && isSuccessBranches
 
+  const isGithubConnected = githubConnection !== undefined
+
   const { mutate: deleteBranch, isPending: isDeleting } = useBranchDeleteMutation({
     onSuccess: () => {
       toast.success('Successfully deleted branch')
@@ -145,6 +147,7 @@ const BranchesPage: NextPageWithLayout = () => {
 
                   {!isError && (
                     <Overview
+                      isGithubConnected={isGithubConnected}
                       isLoading={isLoading}
                       isSuccess={isSuccess}
                       repo={repo}

apps/studio/pages/project/[ref]/branches/merge-requests.tsx

@@ -89,6 +89,8 @@ const MergeRequestsPage: NextPageWithLayout = () => {
 
   const isError = isErrorConnections || isErrorBranches
 
+  const isGithubConnected = githubConnection !== undefined
+
   const { mutate: sendEvent } = useSendEventMutation()
 
   const { mutate: updateBranch, isPending: isUpdating } = useBranchUpdateMutation({
@@ -228,6 +230,7 @@ const MergeRequestsPage: NextPageWithLayout = () => {
                             : `/project/${branch.project_ref}/merge`
                           return (
                             <BranchRow
+                              isGithubConnected={isGithubConnected}
                               key={branch.id}
                               label={
                                 <div className="flex items-center gap-x-4">