Braching fixes 06/03 (supabase#21800)

* branching fixes 06/03 * fix width in project linker * add space * Fix --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

Author: alaister

apps/studio/components/interfaces/Integrations/IntegrationPanels.tsx

@@ -165,46 +165,56 @@ const IntegrationConnection = React.forwardRef<HTMLLIElement, IntegrationConnect
  <div
  className={cn(
  orientation === 'horizontal'
- ? 'flex items-center justify-between'
+ ? 'flex items-center justify-between gap-2'
  : 'flex flex-col gap-3',
  'bg-surface-100 border shadow-sm px-6 py-4 rounded-lg',
  className
  )}
  >
- <div className={'flex flex-col gap-1'}>
- <div className="flex gap-2 items-center">
- <HandleIcon type={'Supabase'} />
- <span title={project?.name} className="text-sm truncate">
- {project?.name}
- </span>
- <IconArrowRight size={14} className="text-foreground-lighter" strokeWidth={1.5} />
- {!connection?.metadata?.framework ? (
- <div className="bg-black text-white w-4 h-4 rounded flex items-center justify-center">
- <HandleIcon type={type} className={'!w-2.5'} />
- </div>
- ) : (
- <img
- src={`${BASE_PATH}/img/icons/frameworks/${connection.metadata.framework}.svg`}
- width={21}
- height={21}
- alt={`icon`}
- />
- )}
- {type === 'GitHub' ? (
- <a
- title={connection.metadata.name}
- href={`https://github.com/${connection.metadata?.name}`}
- className="text-sm truncate"
- target="_blank"
- rel="noreferrer"
- >
- {connection.metadata?.name}
- </a>
- ) : (
- <span title={connection.metadata.name} className="text-sm truncate">
- {connection.metadata?.name}
+ <div className="flex flex-col gap-1 min-w-0">
+ <div className="flex items-center gap-2">
+ <div className="flex-shrink-0 flex gap-x-2 items-center max-w-40 ">
+ <HandleIcon type={'Supabase'} />
+ <span title={project?.name} className="text-sm truncate">
+ {project?.name}
  </span>
- )}
+ </div>
+
+ <IconArrowRight
+ size={14}
+ className="flex-shrink-0 text-foreground-lighter"
+ strokeWidth={1.5}
+ />
+
+ <div className="flex-1 min-w-0 flex gap-2 items-center">
+ {!connection?.metadata?.framework ? (
+ <div className="bg-black text-white w-4 h-4 rounded flex items-center justify-center">
+ <HandleIcon type={type} className={'!w-2.5'} />
+ </div>
+ ) : (
+ <img
+ src={`${BASE_PATH}/img/icons/frameworks/${connection.metadata.framework}.svg`}
+ width={21}
+ height={21}
+ alt={`icon`}
+ />
+ )}
+ {type === 'GitHub' ? (
+ <a
+ title={connection.metadata.name}
+ href={`https://github.com/${connection.metadata?.name}`}
+ className="text-sm truncate"
+ target="_blank"
+ rel="noreferrer"
+ >
+ {connection.metadata?.name}
+ </a>
+ ) : (
+ <span title={connection.metadata.name} className="text-sm truncate">
+ {connection.metadata?.name}
+ </span>
+ )}
+ </div>
  </div>
 
  <div className="flex flex-col gap-0">
@@ -217,7 +227,7 @@ const IntegrationConnection = React.forwardRef<HTMLLIElement, IntegrationConnect
  </div>
  </div>
 
- <div>{actions}</div>
+ <div className="flex-shrink-0">{actions}</div>
  </div>
  </li>
  )

apps/studio/components/interfaces/Integrations/ProjectLinker.tsx

@@ -1,6 +1,17 @@
 import { PlusIcon } from 'lucide-react'
+import { useRouter } from 'next/router'
 import { ReactNode, useEffect, useRef, useState } from 'react'
 import { toast } from 'react-hot-toast'
+
+import ShimmerLine from 'components/ui/ShimmerLine'
+import {
+ IntegrationConnectionsCreateVariables,
+ IntegrationProjectConnection,
+} from 'data/integrations/integrations.types'
+import { useSelectedOrganization } from 'hooks'
+import { BASE_PATH } from 'lib/constants'
+import { openInstallGitHubIntegrationWindow } from 'lib/github'
+import { EMPTY_ARR } from 'lib/void'
 import {
  Button,
  CommandEmpty_Shadcn_,
@@ -16,16 +27,6 @@ import {
  Popover_Shadcn_,
  cn,
 } from 'ui'
-import { useRouter } from 'next/router'
-
-import ShimmerLine from 'components/ui/ShimmerLine'
-import {
- IntegrationConnectionsCreateVariables,
- IntegrationProjectConnection,
-} from 'data/integrations/integrations.types'
-import { useSelectedOrganization } from 'hooks'
-import { BASE_PATH } from 'lib/constants'
-import { openInstallGitHubIntegrationWindow } from 'lib/github'
 
 export interface Project {
  id: string
@@ -63,7 +64,7 @@ const ProjectLinker = ({
  foreignProjects,
  supabaseProjects,
  onCreateConnections: _onCreateConnections,
- installedConnections = [],
+ installedConnections = EMPTY_ARR,
  isLoading,
  integrationIcon,
  getForeignProjectIcon,
@@ -147,7 +148,7 @@ const ProjectLinker = ({
  return (
  <div
  className={cn(
- 'flex flex-col grow gap-6 px-5 mx-auto w-full justify-center items-center',
+ 'flex-1 min-w-0 flex flex-col grow gap-6 px-5 mx-auto w-full justify-center items-center',
  className
  )}
  {...props}
@@ -282,7 +283,7 @@ const ProjectLinker = ({
  </Popover_Shadcn_>
  </Panel>
 
- <div className="border border-foreground-lighter h-px w-16 border-dashed self-end mb-4" />
+ <div className="border border-foreground-lighter h-px w-8 border-dashed self-end mb-4" />
 
  <Panel>
  <div className="bg-black shadow rounded p-1 w-12 h-12 flex justify-center items-center">
@@ -302,9 +303,11 @@ const ProjectLinker = ({
  loading={loadingForeignProjects}
  className="justify-start"
  icon={
- selectedForeignProject
- ? getForeignProjectIcon?.(selectedForeignProject)
- : integrationIcon
+ <div>
+ {selectedForeignProject
+ ? getForeignProjectIcon?.(selectedForeignProject) ?? integrationIcon
+ : integrationIcon}
+ </div>
  }
  iconRight={
  <span className="grow flex justify-end">

apps/studio/components/interfaces/Organization/IntegrationSettings/SidePanelGitHubRepoLinker.tsx

@@ -1,18 +1,20 @@
 import { useMemo } from 'react'
 import toast from 'react-hot-toast'
-import { Button, SidePanel } from 'ui'
 
 import ProjectLinker from 'components/interfaces/Integrations/ProjectLinker'
 import { Markdown } from 'components/interfaces/Markdown'
 import { useGitHubAuthorizationQuery } from 'data/integrations/github-authorization-query'
 import { useGitHubConnectionCreateMutation } from 'data/integrations/github-connection-create-mutation'
+import { useGitHubConnectionsQuery } from 'data/integrations/github-connections-query'
 import { useGitHubRepositoriesQuery } from 'data/integrations/github-repositories-query'
 import type { IntegrationConnectionsCreateVariables } from 'data/integrations/integrations.types'
 import { useProjectsQuery } from 'data/projects/projects-query'
 import { useSelectedOrganization } from 'hooks'
 import { openInstallGitHubIntegrationWindow } from 'lib/github'
 import { EMPTY_ARR } from 'lib/void'
 import { useSidePanelsStateSnapshot } from 'state/side-panels'
+import { Button, SidePanel } from 'ui'
+import { useGitHubConnectionDeleteMutation } from 'data/integrations/github-connection-delete-mutation'
 
 const GITHUB_ICON = (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 96" className="w-6">
@@ -64,14 +66,20 @@ const SidePanelGitHubRepoLinker = ({ projectRef }: SidePanelGitHubRepoLinkerProp
  [githubReposData]
  )
 
- const { mutate: createConnections, isLoading: isCreatingConnection } =
+ const { data: connections } = useGitHubConnectionsQuery({
+ organizationId: selectedOrganization?.id,
+ })
+
+ const { mutate: createConnection, isLoading: isCreatingConnection } =
  useGitHubConnectionCreateMutation({
  onSuccess() {
  toast.success('Successfully linked project to repository!')
  sidePanelStateSnapshot.setGithubConnectionsOpen(false)
  },
  })
 
+ const { mutateAsync: deleteConnection } = useGitHubConnectionDeleteMutation()
+
  const createGithubConnection = async (variables: IntegrationConnectionsCreateVariables) => {
  if (!selectedOrganization?.id) {
  throw new Error('No organization id')
@@ -80,7 +88,23 @@ const SidePanelGitHubRepoLinker = ({ projectRef }: SidePanelGitHubRepoLinkerProp
  throw new Error('No new connection')
  }
 
- createConnections({
+ const existingConnection = connections?.find(
+ (connection) => connection.project.ref === projectRef
+ )
+
+ if (existingConnection) {
+ // remove existing connection so we can recreate it or update it
+ try {
+ await deleteConnection({
+ organizationId: selectedOrganization.id,
+ connectionId: existingConnection.id,
+ })
+ } catch (error) {
+ // ignore the error to let createConnection handle it
+ }
+ }
+
+ createConnection({
  organizationId: selectedOrganization.id,
  connection: variables.new,
  })
@@ -95,7 +119,7 @@ const SidePanelGitHubRepoLinker = ({ projectRef }: SidePanelGitHubRepoLinkerProp
  onCancel={() => sidePanelStateSnapshot.setGithubConnectionsOpen(false)}
  >
  <div className="py-10 flex flex-col gap-6 bg-studio h-full">
- <SidePanel.Content>
+ <SidePanel.Content className="flex flex-col gap-4">
  <Markdown
  content={`
 ### Choose repository to connect to

apps/studio/lib/github.tsx

@@ -3,7 +3,7 @@ const GITHUB_INTEGRATION_INSTALLATION_URL =
  ? `https://github.com/apps/supabase/installations/new`
  : process.env.NEXT_PUBLIC_ENVIRONMENT === 'staging'
  ? `https://github.com/apps/supabase-staging/installations/new`
- : `https://github.com/apps/supabase-github-v2-migration-test/installations/new`
+ : `https://github.com/apps/supabase-local-testing/installations/new`
 
 const GITHUB_INTEGRATION_CLIENT_ID =
  process.env.NEXT_PUBLIC_ENVIRONMENT === 'prod'