Refactor timeline and group build by date

BrunoQuaresma · BrunoQuaresma · commit 11109979d474 · 2024-01-04T13:25:59.000Z
diff --git a/site/src/components/FullPageLayout/Sidebar.tsx b/site/src/components/FullPageLayout/Sidebar.tsx
@@ -49,7 +49,7 @@ export const SidebarCaption = (props: HTMLAttributes<HTMLSpanElement>) => {
 
 const styles = {
   sidebarItem: (theme: Theme) => ({
-    fontSize: 14,
+    fontSize: 13,
     lineHeight: 1.2,
     color: theme.palette.text.primary,
     textDecoration: "none",
diff --git a/site/src/components/Timeline/Timeline.tsx b/site/src/components/Timeline/Timeline.tsx
@@ -1,5 +1,6 @@
 import { TimelineDateRow } from "components/Timeline/TimelineDateRow";
-import { Fragment } from "react";
+import { FC, Fragment } from "react";
+import { createDisplayDate } from "./utils";
 
 type GetDateFn<TData> = (data: TData) => Date;
 
@@ -26,23 +27,27 @@ export interface TimelineProps<TData> {
   items: TData[];
   getDate: GetDateFn<TData>;
   row: (item: TData) => JSX.Element;
+  dateRow?: FC<{ date: Date; displayDate: string }>;
 }
 
 export const Timeline = <TData,>({
   items,
   getDate,
   row,
+  dateRow: DateRow = TimelineDateRow,
 }: TimelineProps<TData>): JSX.Element => {
   const itemsByDate = groupByDate(items, getDate);
 
   return (
     <>
       {Object.keys(itemsByDate).map((dateStr) => {
         const items = itemsByDate[dateStr];
+        const date = new Date(dateStr);
+        const displayDate = createDisplayDate(date);
 
         return (
           <Fragment key={dateStr}>
-            <TimelineDateRow date={new Date(dateStr)} />
+            <DateRow date={date} displayDate={displayDate} />
             {items.map(row)}
           </Fragment>
         );
diff --git a/site/src/components/Timeline/TimelineDateRow.tsx b/site/src/components/Timeline/TimelineDateRow.tsx
@@ -2,13 +2,13 @@ import TableCell from "@mui/material/TableCell";
 import TableRow from "@mui/material/TableRow";
 import { type FC } from "react";
 import { css, useTheme } from "@emotion/react";
-import { createDisplayDate } from "./utils";
 
 export interface TimelineDateRow {
   date: Date;
+  displayDate: string;
 }
 
-export const TimelineDateRow: FC<TimelineDateRow> = ({ date }) => {
+export const TimelineDateRow: FC<TimelineDateRow> = ({ date, displayDate }) => {
   const theme = useTheme();
 
   return (
@@ -30,7 +30,7 @@ export const TimelineDateRow: FC<TimelineDateRow> = ({ date }) => {
         }}
         title={date.toLocaleDateString()}
       >
-        {createDisplayDate(date)}
+        {displayDate}
       </TableCell>
     </TableRow>
   );
diff --git a/site/src/components/WorkspaceBuild/WorkspaceBuildData.tsx b/site/src/components/WorkspaceBuild/WorkspaceBuildData.tsx
@@ -33,7 +33,9 @@ export const WorkspaceBuildData = ({ build }: { build: WorkspaceBuild }) => {
           }}
         >
           {build.transition} by{" "}
-          <strong>{getDisplayWorkspaceBuildInitiatedBy(build)}</strong>
+          <span css={{ fontWeight: 500 }}>
+            {getDisplayWorkspaceBuildInitiatedBy(build)}
+          </span>
         </div>
         <div
           css={{
diff --git a/site/src/pages/WorkspacePage/HistorySidebar.tsx b/site/src/pages/WorkspacePage/HistorySidebar.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from "@mui/material/styles";
 import { infiniteWorkspaceBuilds } from "api/queries/workspaceBuilds";
 import { Workspace } from "api/typesGenerated";
 import {
@@ -6,13 +7,15 @@ import {
   SidebarItem,
   SidebarLink,
 } from "components/FullPageLayout/Sidebar";
+import { Timeline } from "components/Timeline/Timeline";
 import {
   WorkspaceBuildData,
   WorkspaceBuildDataSkeleton,
 } from "components/WorkspaceBuild/WorkspaceBuildData";
 import { useInfiniteQuery } from "react-query";
 
 export const HistorySidebar = ({ workspace }: { workspace: Workspace }) => {
+  const theme = useTheme();
   const buildsQuery = useInfiniteQuery({
     ...infiniteWorkspaceBuilds(workspace?.id ?? ""),
     enabled: workspace !== undefined,
@@ -22,20 +25,54 @@ export const HistorySidebar = ({ workspace }: { workspace: Workspace }) => {
   return (
     <Sidebar>
       <SidebarCaption>History</SidebarCaption>
-      {builds
-        ? builds.map((build) => (
+      {builds ? (
+        <Timeline
+          items={builds}
+          getDate={(build) => new Date(build.created_at)}
+          dateRow={({ displayDate }) => (
+            <div
+              css={{
+                fontSize: 12,
+                color: theme.palette.text.secondary,
+                padding: "0 16px 4px",
+
+                "&:not(:first-of-type)": {
+                  marginTop: "8px",
+                },
+
+                "&::first-letter": {
+                  textTransform: "uppercase",
+                },
+              }}
+            >
+              {displayDate}
+            </div>
+          )}
+          row={(build) => (
             <SidebarLink
               key={build.id}
               to={`/@${build.workspace_owner_name}/${build.workspace_name}/builds/${build.build_number}`}
             >
               <WorkspaceBuildData build={build} />
             </SidebarLink>
-          ))
-        : Array.from({ length: 15 }, (_, i) => (
-            <SidebarItem key={i}>
-              <WorkspaceBuildDataSkeleton />
-            </SidebarItem>
-          ))}
+          )}
+        />
+      ) : (
+        // builds.map((build) => (
+        //       <SidebarLink
+        //         key={build.id}
+        //         to={`/@${build.workspace_owner_name}/${build.workspace_name}/builds/${build.build_number}`}
+        //       >
+        //         <WorkspaceBuildData build={build} />
+        //       </SidebarLink>
+
+        //     ))
+        Array.from({ length: 15 }, (_, i) => (
+          <SidebarItem key={i}>
+            <WorkspaceBuildDataSkeleton />
+          </SidebarItem>
+        ))
+      )}
     </Sidebar>
   );
 };
