New Layout: Wrap banch related pages in a card (#4626)

Author: bilalabbad

frontend/app/src/pages/branches/details.tsx

@@ -4,11 +4,15 @@ import { QSP } from "@/config/qsp";
 import { ArtifactsDiff } from "@/screens/diff/artifact-diff/artifacts-diff";
 import { NodeDiff } from "@/screens/diff/node-diff";
 
+import { Badge } from "@/components/ui/badge";
+import { Spinner } from "@/components/ui/spinner";
 import { useTitle } from "@/hooks/useTitle";
 import { BranchDetails } from "@/screens/branches/branch-details";
 import { FilesDiff } from "@/screens/diff/file-diff/files-diff";
 import Content from "@/screens/layout/content";
+import { branchesState } from "@/state/atoms/branches.atom";
 import { constructPath } from "@/utils/fetch";
+import { useAtomValue } from "jotai";
 import React from "react";
 import { Navigate, useParams } from "react-router-dom";
 import { StringParam, useQueryParam } from "use-query-params";
@@ -20,20 +24,40 @@ export const BRANCH_TABS = {
 
 export function BranchDetailsPage() {
   const { "*": branchName } = useParams();
+  const branches = useAtomValue(branchesState);
   useTitle(`${branchName} details`);
 
   if (!branchName) {
     return <Navigate to={constructPath("/branches")} />;
   }
 
+  if (branches.length === 0) {
+    return (
+      <Content.Card className="flex justify-center items-center p-5 min-h-[400px]">
+        <Spinner />
+      </Content.Card>
+    );
+  }
+
+  const branch = branches.find((branch) => branch.name === branchName);
+
+  if (!branch) {
+    return <Navigate to={constructPath("/branches")} />;
+  }
+
   return (
-    <Content>
-      <Content.Title title={<div>Branch - {branchName}</div>} />
+    <Content.Card>
+      <header className="p-5 font-bold flex gap-2 items-center">
+        <h1 className="text-xl">{branch.name}</h1>
+        {branch.is_default && <Badge variant="blue-outline">default</Badge>}
+      </header>
 
       <BranchTab />
 
-      <BranchContent branchName={branchName} />
-    </Content>
+      <Content.CardContent>
+        <BranchContent branchName={branchName} />
+      </Content.CardContent>
+    </Content.Card>
   );
 }
 

frontend/app/src/screens/branches/branches-items.tsx

@@ -32,14 +32,10 @@ const BranchesItems = () => {
   };
 
   return (
-    <Content>
-      <Content.Title
-        title={
-          <div className="flex items-center">
-            <h1 className="mr-2 truncate">Branches</h1>
-            <Badge>{branches.length}</Badge>
-          </div>
-        }
+    <Content.Card>
+      <Content.CardTitle
+        title="Branches"
+        badgeContent={branches.length}
         isReloadLoading={loading}
         reload={handleRefresh}
       />
@@ -105,7 +101,7 @@ const BranchesItems = () => {
           </li>
         ))}
       </ul>
-    </Content>
+    </Content.Card>
   );
 };
 

frontend/app/src/screens/layout/breadcrumb-navigation/style.ts

@@ -1,4 +1,5 @@
 export const breadcrumbItemStyle =
   "w-auto h-auto border-none hover:bg-gray-100 py-1 px-2 rounded-md";
 
-export const breadcrumbActiveStyle = "bg-indigo-50 text-indigo-700 hover:bg-indigo-100";
+export const breadcrumbActiveStyle =
+  "bg-indigo-50 text-indigo-700 hover:bg-indigo-100 [&>iconify-icon]:text-indigo-700";

frontend/app/src/screens/layout/content.tsx

@@ -1,4 +1,6 @@
 import { Retry } from "@/components/buttons/retry";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardProps } from "@/components/ui/card";
 import { classNames } from "@/utils/common";
 import { HTMLAttributes, ReactNode } from "react";
 
@@ -46,9 +48,55 @@ export const ContentTitle = ({
   );
 };
 
+export const ContentCard = ({ className, ...props }: CardProps) => {
+  return <Card className={classNames("p-0 m-2 overflow-hidden", className)} {...props} />;
+};
+
+export type ContentCardTitleProps = {
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  description?: ReactNode;
+  badgeContent?: ReactNode;
+  reload?: () => void;
+  isReloadLoading?: boolean;
+  className?: string;
+};
+
+export const ContentCardTitle = ({
+  badgeContent,
+  description,
+  isReloadLoading,
+  reload,
+  title,
+  className,
+  ...props
+}: ContentCardTitleProps) => {
+  return (
+    <header className={classNames("flex items-center p-5", className)} {...props}>
+      <div className="flex flex-col gap-0.5 overflow-hidden">
+        {title && (
+          <div className="font-bold text-xl flex items-center gap-2">
+            <div className="truncate">{title}</div>
+            {badgeContent && <Badge className="text-sm">{badgeContent}</Badge>}
+            {reload && <Retry isLoading={isReloadLoading} onClick={reload} />}
+          </div>
+        )}
+        {description && <div className="text-sm truncate">{description}</div>}
+      </div>
+    </header>
+  );
+};
+
+export const ContentCardContent = ({ className, ...props }: HTMLAttributes<HTMLElement>) => {
+  return <div className={classNames("p-5 pt-0", className)} {...props} />;
+};
+
 export const Content = Object.assign(ContentRoot, {
   Title: ContentTitle,
   Root: ContentRoot,
+  Card: ContentCard,
+  CardTitle: ContentCardTitle,
+  CardContent: ContentCardContent,
 });
 
 export default Content;