Overview() — supabase Function Reference

Source Code

apps/studio/components/interfaces/BranchManagement/Overview.tsx lines 57–226

export const Overview = ({
  isGithubConnected,
  isLoading,
  isSuccess,
  repo,
  mainBranch,
  previewBranches,
  onSelectCreateBranch,
  onSelectDeleteBranch,
  generateCreatePullRequestURL,
}: OverviewProps) => {
  const [scheduledForDeletionBranches, aliveBranches] = partition(
    previewBranches,
    (branch) => branch.deletion_scheduled_at !== undefined
  )
  const [persistentBranches, ephemeralBranches] = partition(
    aliveBranches,
    (branch) => branch.persistent
  )
  const { ref: projectRef } = useParams()
  const { data: selectedOrg } = useSelectedOrganizationQuery()

  const { hasAccess: hasAccessToPersistentBranching, isLoading: isLoadingEntitlement } =
    useCheckEntitlements('branching_persistent')

  return (
    <>
      <BranchManagementSection header="Production branch">
        {isLoading && <BranchRowLoader />}
        {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" />
                {mainBranch.name}
              </div>
            }
            repo={repo}
            rowActions={<MainBranchActions branch={mainBranch} repo={repo} />}
          />
        )}
        {isSuccess && mainBranch === undefined && (
          <div className="w-full flex items-center justify-between px-4 py-2.5 hover:bg-surface-100">
            <Link href={`/project/${projectRef}`} className="text-foreground block w-full">
              <div className="flex items-center gap-x-3">
                <Shield size={14} strokeWidth={1.5} className="text-warning" />
                main
              </div>
            </Link>
          </div>
        )}
      </BranchManagementSection>

      {/* Persistent Branches Section */}
      <BranchManagementSection header="Persistent branches">
        {(isLoading || isLoadingEntitlement) && <BranchLoader />}
        {isSuccess &&
          !isLoadingEntitlement &&
          !hasAccessToPersistentBranching &&
          IS_PLATFORM &&
          persistentBranches.length === 0 && (
            <div className="px-6 py-10 flex items-center justify-between">
              <div className="flex flex-col gap-0.5">
                <p className="text-sm">Upgrade to unlock persistent branches</p>
                <p className="text-sm text-foreground-lighter text-balance">
                  Persistent branches are long-lived, cannot be reset, and are ideal for staging
                  environments.
                </p>
              </div>
              <Button type="primary" asChild>
                <Link href={`/org/${selectedOrg?.slug}/billing?panel=subscriptionPlan`}>
                  Upgrade
                </Link>
              </Button>
            </div>
          )}
        {isSuccess &&
          !isLoadingEntitlement &&
          hasAccessToPersistentBranching &&
          persistentBranches.length === 0 && (
            <div className="flex items-center flex-col gap-0.5 justify-center w-full py-10">
              <p>No persistent branches</p>
              <p className="text-foreground-lighter text-center text-balance">
                Persistent branches are long-lived, cannot be reset, and are ideal for staging
                environments.
              </p>
            </div>
          )}
        {isSuccess &&
          !isLoadingEntitlement &&
          persistentBranches.map((branch) => {
            return (
              <BranchRow
                isGithubConnected={isGithubConnected}
                key={branch.id}
                repo={repo}
                branch={branch}
                rowActions={
                  <PreviewBranchActions
                    branch={branch}
                    repo={repo}
                    onSelectDeleteBranch={() => onSelectDeleteBranch(branch)}
                    generateCreatePullRequestURL={generateCreatePullRequestURL}
                  />
                }
              />
            )
          })}
      </BranchManagementSection>

      {/* Ephemeral/Preview Branches Section */}
      <BranchManagementSection header="Preview branches">
        {isLoading && <BranchLoader />}
        {isSuccess && ephemeralBranches.length === 0 && (
          <PreviewBranchesEmptyState onSelectCreateBranch={onSelectCreateBranch} />
        )}
        {isSuccess &&
          ephemeralBranches.map((branch) => {
            return (
              <BranchRow
                isGithubConnected={isGithubConnected}
                key={branch.id}
                repo={repo}
                branch={branch}
                rowActions={
                  <PreviewBranchActions
                    branch={branch}
                    repo={repo}
                    onSelectDeleteBranch={() => onSelectDeleteBranch(branch)}
                    generateCreatePullRequestURL={generateCreatePullRequestURL}
                  />
                }
              />
            )
          })}
      </BranchManagementSection>
      {/* Scheduled for deletion branches section */}
      <BranchManagementSection header="Scheduled for deletion branches">
        {isLoading && <BranchLoader />}
        {isSuccess && scheduledForDeletionBranches.length === 0 && (
          <div className="flex items-center flex-col gap-0.5 justify-center w-full py-10">
            <p className="text-foreground-lighter">No branches scheduled for deletion</p>
          </div>
        )}
        {isSuccess &&
          scheduledForDeletionBranches.map((branch) => {
            return (
              <BranchRow
                isGithubConnected={isGithubConnected}
                key={branch.id}
                repo={repo}
                branch={branch}
                rowActions={
                  <PreviewBranchActions
                    branch={branch}
                    repo={repo}
                    // If a scheduled for deletion branch is deleted, we force the deletion
                    onSelectDeleteBranch={() => onSelectDeleteBranch(branch)}
                    generateCreatePullRequestURL={generateCreatePullRequestURL}
                  />
                }
              />
            )
          })}
      </BranchManagementSection>
    </>
  )
}