Refactor to only have history sidebar

BrunoQuaresma · BrunoQuaresma · commit 72ed777a2545 · 2024-01-04T12:52:15.000Z
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -369,6 +369,7 @@ export const AppRouter: FC = () => {
 
               {/* In order for the 404 page to work properly the routes that start with
               top level parameter must be fully qualified. */}
+              <Route path="/:username/:workspace" element={<WorkspacePage />} />
               <Route
                 path="/:username/:workspace/builds/:buildNumber"
                 element={<WorkspaceBuildPage />}
@@ -407,7 +408,6 @@ export const AppRouter: FC = () => {
             </Route>
 
             {/* Pages that don't have the dashboard layout */}
-            <Route path="/:username/:workspace" element={<WorkspacePage />} />
             <Route
               path="/templates/:template/versions/:version/edit"
               element={<TemplateVersionEditorPage />}
diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
@@ -5,6 +5,7 @@ import type { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { Stack } from "../Stack/Stack";
 import { ResourceCard } from "./ResourceCard";
+import { useTheme } from "@mui/material/styles";
 
 const countAgents = (resource: WorkspaceResource) => {
   return resource.agents ? resource.agents.length : 0;
@@ -19,6 +20,7 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
   resources,
   agentRow,
 }) => {
+  const theme = useTheme();
   const [shouldDisplayHideResources, setShouldDisplayHideResources] =
     useState(false);
   const displayResources = shouldDisplayHideResources
@@ -30,7 +32,11 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
   const hasHideResources = resources.some((r) => r.hide);
 
   return (
-    <Stack direction="column" spacing={0}>
+    <Stack
+      direction="column"
+      spacing={0}
+      css={{ background: theme.palette.background.default }}
+    >
       {displayResources.map((resource) => (
         <ResourceCard
           key={resource.id}
diff --git a/site/src/pages/WorkspacePage/HistorySidebar.tsx b/site/src/pages/WorkspacePage/HistorySidebar.tsx
@@ -1,6 +1,7 @@
 import { infiniteWorkspaceBuilds } from "api/queries/workspaceBuilds";
 import { Workspace } from "api/typesGenerated";
 import {
+  Sidebar,
   SidebarCaption,
   SidebarItem,
   SidebarLink,
@@ -11,19 +12,15 @@ import {
 } from "components/WorkspaceBuild/WorkspaceBuildData";
 import { useInfiniteQuery } from "react-query";
 
-export const HistorySidebarContent = ({
-  workspace,
-}: {
-  workspace: Workspace;
-}) => {
+export const HistorySidebar = ({ workspace }: { workspace: Workspace }) => {
   const buildsQuery = useInfiniteQuery({
     ...infiniteWorkspaceBuilds(workspace?.id ?? ""),
     enabled: workspace !== undefined,
   });
   const builds = buildsQuery.data?.pages.flat();
 
   return (
-    <>
+    <Sidebar>
       <SidebarCaption>History</SidebarCaption>
       {builds
         ? builds.map((build) => (
@@ -39,6 +36,6 @@ export const HistorySidebarContent = ({
               <WorkspaceBuildDataSkeleton />
             </SidebarItem>
           ))}
-    </>
+    </Sidebar>
   );
 };
diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
