Implement updated pull requests and preview branches UIO

studio/components/interfaces/BranchManagement/BranchManagement.tsx

@@ -12,6 +12,8 @@ import { useSelectedProject, useStore } from 'hooks'
 import { Button, IconSearch, Input } from 'ui'
 import { BranchHeader, BranchPanel, MainBranchPanel } from './BranchPanels'
 import UpdateBranchSidePanel from './UpdateBranchSidePanel'
+import PullRequests from './PullRequests'
+import PreviewBranches from './PreviewBranches'
 
 const BranchManagement = () => {
   const { ui } = useStore()
@@ -59,15 +61,12 @@ const BranchManagement = () => {
               {isSuccess && (
                 <>
                   <MainBranchPanel branch={mainBranch} onSelectUpdate={() => {}} />
-                  <BranchHeader markdown={`#### Preview branches`} />
-                  {previewBranches.map((branch) => (
-                    <BranchPanel
-                      key={branch.id}
-                      branch={branch}
-                      onSelectUpdate={() => setSelectedBranchToUpdate(branch)}
-                      onSelectDelete={() => setSelectedBranchToDelete(branch)}
-                    />
-                  ))}
+                  <PullRequests previewBranches={previewBranches} />
+                  <PreviewBranches
+                    previewBranches={previewBranches}
+                    onSelectUpdateBranch={setSelectedBranchToUpdate}
+                    onSelectDeleteBranch={setSelectedBranchToDelete}
+                  />
                 </>
               )}
             </div>

studio/components/interfaces/BranchManagement/BranchPanels.tsx

@@ -1,5 +1,7 @@
+import clsx from 'clsx'
 import dayjs from 'dayjs'
-import { forwardRef, useState } from 'react'
+import { noop } from 'lodash'
+import { PropsWithChildren, forwardRef, useState } from 'react'
 import {
   Badge,
   Button,
@@ -16,10 +18,9 @@ import {
   cn,
 } from 'ui'
 
+import { useParams } from 'common'
 import { Markdown } from 'components/interfaces/Markdown'
 import { Branch } from 'data/branches/branches-query'
-import { noop } from 'lodash'
-import { useParams } from 'common'
 
 interface BranchPanelProps {
   branch?: Branch
@@ -71,6 +72,22 @@ const MainBranchPanel = ({ branch, onSelectUpdate = noop }: BranchPanelProps) =>
   )
 }
 
+const BranchContainer = ({ className, children }: PropsWithChildren<{ className?: string }>) => {
+  return (
+    <div className="list-none ml-6 pl-8 pb-4 border-l border-scale-600 dark:border-scale-400 relative last:!border-transparent">
+      <div className="absolute w-[33px] rounded-bl-full border-b border-l border-scale-600 dark:border-scale-400 h-10 -left-px" />
+      <div
+        className={clsx(
+          'border shadow-sm flex justify-between items-center pl-8 pr-6 py-4 rounded-lg text-sm',
+          className
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
 const BranchPanel = ({
   branch,
   onSelectUpdate = noop,
@@ -85,40 +102,35 @@ const BranchPanel = ({
   const formattedCreatedAt = dayjs(branch?.created_at).format('DD MMM YYYY, HH:mm:ss (ZZ)')
 
   return (
-    <li className="list-none ml-6 pl-8 pb-4 border-l border-scale-600 dark:border-scale-400 relative last:!border-transparent">
-      <div className="absolute w-[33px] rounded-bl-full border-b border-l border-scale-600 dark:border-scale-400 h-10 -left-px" />
-      <div className="bg-surface-100 border shadow-sm flex justify-between items-center pl-8 pr-6 py-4 rounded-lg text-sm">
-        <div className="flex items-center space-x-4">
-          <IconGitBranch className="text-brand-900" size={16} strokeWidth={2} />
-          <p>{branch?.name}</p>
-          {isActive && <Badge color="green">Selected</Badge>}
-          <p className="text-scale-1000">
-            {daysFromNow > 1
-              ? `Created on ${formattedCreatedAt}`
-              : `Created ${formattedTimeFromNow}`}
-          </p>
-        </div>
-        <div>
-          <DropdownMenu_Shadcn_ open={open} onOpenChange={() => setOpen(!open)} modal={false}>
-            <DropdownMenuTrigger_Shadcn_>
-              <Button asChild type="text" className="px-1" icon={<IconMoreVertical size={14} />}>
-                <span></span>
-              </Button>
-            </DropdownMenuTrigger_Shadcn_>
-            <DropdownMenuContent_Shadcn_ side="bottom" align="end">
-              <DropdownMenuItem_Shadcn_ className="flex gap-2" onSelect={() => onSelectUpdate()}>
-                <IconEdit size={14} />
-                Edit branch
-              </DropdownMenuItem_Shadcn_>
-              <DropdownMenuItem_Shadcn_ className="flex gap-2" onSelect={() => onSelectDelete()}>
-                <IconTrash size={14} />
-                Delete branch
-              </DropdownMenuItem_Shadcn_>
-            </DropdownMenuContent_Shadcn_>
-          </DropdownMenu_Shadcn_>
-        </div>
+    <BranchContainer className="bg-surface-100">
+      <div className="flex items-center space-x-4">
+        <IconGitBranch className="text-brand-900" size={16} strokeWidth={2} />
+        <p>{branch?.name}</p>
+        {isActive && <Badge color="green">Selected</Badge>}
+        <p className="text-scale-1000">
+          {daysFromNow > 1 ? `Created on ${formattedCreatedAt}` : `Created ${formattedTimeFromNow}`}
+        </p>
       </div>
-    </li>
+      <div>
+        <DropdownMenu_Shadcn_ open={open} onOpenChange={() => setOpen(!open)} modal={false}>
+          <DropdownMenuTrigger_Shadcn_>
+            <Button asChild type="text" className="px-1" icon={<IconMoreVertical size={14} />}>
+              <span></span>
+            </Button>
+          </DropdownMenuTrigger_Shadcn_>
+          <DropdownMenuContent_Shadcn_ side="bottom" align="end">
+            <DropdownMenuItem_Shadcn_ className="flex gap-2" onSelect={() => onSelectUpdate()}>
+              <IconEdit size={14} />
+              Edit branch
+            </DropdownMenuItem_Shadcn_>
+            <DropdownMenuItem_Shadcn_ className="flex gap-2" onSelect={() => onSelectDelete()}>
+              <IconTrash size={14} />
+              Delete branch
+            </DropdownMenuItem_Shadcn_>
+          </DropdownMenuContent_Shadcn_>
+        </DropdownMenu_Shadcn_>
+      </div>
+    </BranchContainer>
   )
 }
 
@@ -145,4 +157,4 @@ const BranchHeader = forwardRef<HTMLDivElement, BranchHeader>(
 )
 
 BranchHeader.displayName = 'BranchHeader'
-export { BranchHeader, MainBranchPanel, BranchPanel }
+export { BranchHeader, BranchContainer, BranchPanel, MainBranchPanel }

studio/components/interfaces/BranchManagement/PreviewBranches.tsx

@@ -0,0 +1,61 @@
+import { Branch } from 'data/branches/branches-query'
+import { BranchContainer, BranchHeader, BranchPanel } from './BranchPanels'
+import { Button, IconExternalLink, IconGitBranch } from 'ui'
+
+interface PreviewBranchesProps {
+  previewBranches: Branch[]
+  onSelectUpdateBranch: (branch: Branch) => void
+  onSelectDeleteBranch: (branch: Branch) => void
+}
+
+const PreviewBranches = ({
+  previewBranches,
+  onSelectUpdateBranch,
+  onSelectDeleteBranch,
+}: PreviewBranchesProps) => {
+  return (
+    <>
+      <BranchHeader markdown={previewBranches.length > 0 ? `#### Preview branches` : undefined} />
+      {previewBranches.length === 0 ? (
+        <BranchContainer>
+          <div className="flex items-center flex-col justify-center w-full py-8">
+            <p>No database preview branches</p>
+            <p className="text-scale-1000">Database preview branches will be shown here</p>
+            <div className="w-[500px] border rounded-md mt-4">
+              <div className="px-5 py-3 bg-surface-100 flex items-center justify-between">
+                <div className="flex items-center space-x-4">
+                  <IconGitBranch strokeWidth={2} className="text-scale-1100" />
+                  <div>
+                    <p>Create a preview branch</p>
+                    <p className="text-scale-1000">Start developing in preview</p>
+                  </div>
+                </div>
+                <Button type="default">Create preview branch</Button>
+              </div>
+              <div className="px-5 py-3 border-t flex items-center justify-between">
+                <div>
+                  <p>Not sure what to do?</p>
+                  <p className="text-scale-1000">Browse our documentation</p>
+                </div>
+                <Button type="default" iconRight={<IconExternalLink />}>
+                  Docs
+                </Button>
+              </div>
+            </div>
+          </div>
+        </BranchContainer>
+      ) : (
+        previewBranches.map((branch) => (
+          <BranchPanel
+            key={branch.id}
+            branch={branch}
+            onSelectUpdate={() => onSelectUpdateBranch(branch)}
+            onSelectDelete={() => onSelectDeleteBranch(branch)}
+          />
+        ))
+      )}
+    </>
+  )
+}
+
+export default PreviewBranches

studio/components/interfaces/BranchManagement/PullRequests.tsx

@@ -0,0 +1,59 @@
+import { Branch } from 'data/branches/branches-query'
+import { BranchContainer, BranchHeader } from './BranchPanels'
+import { Button, IconExternalLink, IconGitBranch } from 'ui'
+
+interface PullRequestsProps {
+  previewBranches: Branch[]
+}
+
+const PullRequests = ({ previewBranches }: PullRequestsProps) => {
+  const pullRequests = []
+
+  return (
+    <>
+      <BranchHeader
+        markdown={
+          pullRequests.length > 0 && previewBranches.length > 0
+            ? `#### Open pull requests`
+            : undefined
+        }
+      />
+      {previewBranches.length === 0 || pullRequests.length === 0 ? (
+        <BranchContainer>
+          <div className="flex items-center flex-col justify-center w-full py-8">
+            <p>No pull requests made yet for this repository</p>
+            <p className="text-scale-1000">
+              Only pull requests with the ./migration directory changes will show here.
+            </p>
+            {previewBranches.length > 0 && (
+              <div className="w-96 border rounded-md mt-4">
+                <div className="px-5 py-3 bg-surface-100 flex items-center justify-between">
+                  <div className="flex items-center space-x-4">
+                    <IconGitBranch strokeWidth={2} className="text-scale-1100" />
+                    <p>Create a pull request</p>
+                  </div>
+                  <Button type="default" iconRight={<IconExternalLink />}>
+                    Github
+                  </Button>
+                </div>
+                <div className="px-5 py-3 border-t flex items-center justify-between">
+                  <div>
+                    <p>Not sure what to do?</p>
+                    <p className="text-scale-1000">Browse our documentation</p>
+                  </div>
+                  <Button type="default" iconRight={<IconExternalLink />}>
+                    Docs
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
+        </BranchContainer>
+      ) : (
+        <BranchContainer>State 3</BranchContainer>
+      )}
+    </>
+  )
+}
+
+export default PullRequests