Display branch status in UI + refresh UI for branches list (#7492)

Author: bilalabbad

changelog/+IFC-1905.added.md

@@ -0,0 +1,5 @@
+Branches list page refreshed:
+
+- Improved layout for clearer grouping and labels
+- Better accessibility and full keyboard navigation
+- New: branch status is now displayed

frontend/app/src/entities/branches/api/get-branches-from-api.ts

@@ -10,6 +10,7 @@ const GET_BRANCHES = gql`
       description
       origin_branch
       branched_from
+      status
       created_at
       sync_with_git
       is_default

frontend/app/src/entities/branches/domain/get-branches.ts

@@ -7,9 +7,11 @@ import { branchesState } from "@/entities/branches/stores";
 export type GetBranches = () => Promise<Array<Branch>>;
 
 export const getBranches: GetBranches = async () => {
-  const { data, error } = await getBranchesFromApi();
+  const { data, errors } = await getBranchesFromApi();
 
-  if (error) throw error;
+  if (errors) {
+    throw new Error(errors.map((e) => e.message).join("; "));
+  }
 
   const branches = data?.Branch ?? [];
   store.set(branchesState, branches);

frontend/app/src/entities/branches/ui/branch-list-item/branch-default-badge.tsx

@@ -0,0 +1,10 @@
+import { Badge, type BadgeProps } from "@/shared/components/ui/badge";
+import { classNames } from "@/shared/utils/common";
+
+export function BranchDefaultBadge({ className, ...props }: BadgeProps) {
+  return (
+    <Badge className={classNames("rounded-full font-normal text-gray-700", className)} {...props}>
+      default
+    </Badge>
+  );
+}

frontend/app/src/entities/branches/ui/branch-list-item/branch-git-sync-badge.tsx

@@ -0,0 +1,26 @@
+import { RefreshCwIcon, RefreshCwOffIcon } from "lucide-react";
+
+import { classNames } from "@/shared/utils/common";
+
+export interface BranchGitSyncBadgeProps {
+  isSyncWithGit: boolean;
+}
+
+const pillStyle =
+  "inline-flex shrink-0 items-center gap-1.5 rounded-full border border-transparent px-2 py-1.25 text-xs";
+
+export function BranchGitSyncBadge({ isSyncWithGit }: BranchGitSyncBadgeProps) {
+  if (isSyncWithGit) {
+    return (
+      <span className={classNames(pillStyle, "bg-custom-blue-700/10 text-custom-blue-700")}>
+        <RefreshCwIcon className="size-3" /> Synced with Git
+      </span>
+    );
+  }
+
+  return (
+    <span className={classNames(pillStyle, "border-gray-300 border-dashed text-gray-500")}>
+      <RefreshCwOffIcon className="size-3" /> Not synced
+    </span>
+  );
+}

frontend/app/src/entities/branches/ui/branch-list-item/branch-list-item.tsx

@@ -0,0 +1,65 @@
+import { ListBoxItem, type ListBoxItemProps } from "react-aria-components";
+
+import type { Branch } from "@/shared/api/graphql/generated/graphql";
+import { constructPath } from "@/shared/api/rest/fetch";
+import { Col, Row } from "@/shared/components/container";
+import { focusVisibleStyle } from "@/shared/components/style-rac";
+import { classNames } from "@/shared/utils/common";
+import { formatFullDate } from "@/shared/utils/date";
+
+import { BranchDefaultBadge } from "@/entities/branches/ui/branch-list-item/branch-default-badge";
+import { BranchGitSyncBadge } from "@/entities/branches/ui/branch-list-item/branch-git-sync-badge";
+import { BranchMetadata } from "@/entities/branches/ui/branch-list-item/branch-metadata";
+import { BranchSchemaChangesBadge } from "@/entities/branches/ui/branch-list-item/branch-schema-changes-badge";
+import { BranchStatusBadge } from "@/entities/branches/ui/branch-list-item/branch-status-badge";
+
+interface BranchListItemProps extends ListBoxItemProps {
+  branch: Branch;
+}
+
+export function BranchListItem({ branch, className, ...props }: BranchListItemProps) {
+  return (
+    <ListBoxItem
+      textValue={branch.name}
+      href={constructPath(`/branches/${branch.name}`)}
+      className={classNames(
+        focusVisibleStyle,
+        "flex flex-wrap items-center gap-6 px-6 py-4",
+        "border border-transparent not-last:border-b-gray-200",
+        "first:rounded-t-lg last:rounded-b-lg",
+        "hover:bg-neutral-100",
+        className
+      )}
+      {...props}
+    >
+      <Col className="min-w-1/3 flex-1 gap-0 text-sm">
+        <Row className="shrink-0">
+          <span className="font-semibold">{branch.name}</span>
+
+          {branch.is_default ? (
+            <BranchDefaultBadge />
+          ) : branch.status !== "OPEN" ? (
+            <BranchStatusBadge status={branch.status} />
+          ) : null}
+
+          {branch.has_schema_changes && <BranchSchemaChangesBadge />}
+        </Row>
+
+        <p className="truncate text-gray-600 text-xs">{branch.description}</p>
+      </Col>
+
+      <BranchGitSyncBadge isSyncWithGit={!!branch.sync_with_git} />
+
+      <Row className="ml-auto gap-6">
+        <BranchMetadata
+          label="last rebase"
+          value={branch.branched_from ? formatFullDate(branch.branched_from) : "-"}
+        />
+        <BranchMetadata
+          label="created at"
+          value={branch.created_at ? formatFullDate(branch.created_at) : "-"}
+        />
+      </Row>
+    </ListBoxItem>
+  );
+}

frontend/app/src/entities/branches/ui/branch-list-item/branch-metadata.tsx

@@ -0,0 +1,15 @@
+import { Col } from "@/shared/components/container";
+
+interface BranchMetadataProps {
+  label: React.ReactNode;
+  value: React.ReactNode;
+}
+
+export function BranchMetadata({ label, value }: BranchMetadataProps) {
+  return (
+    <Col className="shrink-0 gap-0 text-xs">
+      <span className="font-medium">{label}</span>
+      <span>{value ?? "-"}</span>
+    </Col>
+  );
+}

frontend/app/src/entities/branches/ui/branch-list-item/branch-schema-changes-badge.tsx

@@ -0,0 +1,11 @@
+import { BoxIcon } from "lucide-react";
+
+import { Badge } from "@/shared/components/ui/badge";
+
+export function BranchSchemaChangesBadge() {
+  return (
+    <Badge className="gap-1 rounded-full font-normal text-gray-600">
+      <BoxIcon className="size-3" /> schema updated
+    </Badge>
+  );
+}

frontend/app/src/entities/branches/ui/branch-list-item/branch-status-badge.tsx

@@ -0,0 +1,41 @@
+import { AlertTriangleIcon, LoaderIcon } from "lucide-react";
+
+import type { BranchStatus } from "@/shared/api/graphql/generated/graphql";
+import { Badge, type BadgeProps } from "@/shared/components/ui/badge";
+import { classNames, warnUnexpectedType } from "@/shared/utils/common";
+
+const pillStyle = "gap-1 rounded-full font-normal";
+
+interface BranchStatusBadgeProps extends BadgeProps {
+  status: BranchStatus;
+}
+
+export function BranchStatusBadge({ status, className, ...props }: BranchStatusBadgeProps) {
+  switch (status) {
+    case "OPEN": {
+      return (
+        <Badge className={classNames(pillStyle, className)} variant="green" {...props}>
+          open
+        </Badge>
+      );
+    }
+    case "NEED_REBASE": {
+      return (
+        <Badge className={classNames(pillStyle, className)} variant="yellow" {...props}>
+          <AlertTriangleIcon className="size-3" /> Rebase needed
+        </Badge>
+      );
+    }
+    case "DELETING": {
+      return (
+        <Badge className={classNames(pillStyle, className)} variant="red" {...props}>
+          <LoaderIcon className="size-3 animate-spin" /> Deleting
+        </Badge>
+      );
+    }
+    default: {
+      warnUnexpectedType(status);
+      return null;
+    }
+  }
+}