DEVPROD-11387: Remove CSS grid layout (#397)

evergreen-ci · Sep 19, 2024 · aec8832 · aec8832
1 parent b84a004
commit aec8832
Show file tree

Hide file tree

Showing 10 changed files with 227 additions and 201 deletions.
diff --git a/apps/spruce/src/components/Content/Layout.tsx b/apps/spruce/src/components/Content/Layout.tsx
@@ -7,7 +7,7 @@ import { useAnalyticsAttributes } from "analytics";
 import { Feedback } from "components/Feedback";
 import { Header } from "components/Header";
 import { FullPageLoad } from "components/Loading/FullPageLoad";
-import { PageGrid } from "components/styles/Layout";
+import { SiteLayout } from "components/styles/Layout";
 import { TaskStatusIconLegend } from "components/TaskStatusIconLegend";
 import WelcomeModal from "components/WelcomeModal";
 import { CY_DISABLE_NEW_USER_WELCOME_MODAL } from "constants/cookies";
@@ -44,7 +44,7 @@ export const Layout: React.FC = () => {
   }
 
   return (
-    <PageGrid>
+    <SiteLayout>
       <Header />
       <Outlet />
       {!shouldDisableForTest && !hasUsedSpruceBefore && (
@@ -58,7 +58,7 @@ export const Layout: React.FC = () => {
         <TaskStatusIconLegend />
         <Feedback />
       </FloatingContent>
-    </PageGrid>
+    </SiteLayout>
   );
 };
 

diff --git a/apps/spruce/src/components/Header/index.tsx b/apps/spruce/src/components/Header/index.tsx
@@ -20,7 +20,9 @@ export const Header: React.FC = () => (
 );
 
 const StyledHeader = styled.header`
-  grid-area: header;
+  position: sticky;
+  top: 0;
+  width: 100%;
 `;
 
 const BannerContainer = styled.div`

diff --git a/apps/spruce/src/components/styles/Layout.tsx b/apps/spruce/src/components/styles/Layout.tsx
@@ -5,23 +5,33 @@ import { size, fontSize } from "constants/tokens";
 
 const { gray, red } = palette;
 
-export const PageWrapper = styled.div`
-  grid-area: contents;
+// Top-level layout for the entire site. Manages positioning of navbar.
+export const SiteLayout = styled.div`
+  display: flex;
+  flex-flow: column;
+  height: 100vh;
+`;
+
+// Layout elements for pages with a LeafyGreen SideNav
+export const SideNavPageWrapper = styled.div`
+  display: flex;
+  overflow: hidden;
+  height: 100%;
+`;
+export const SideNavPageContent = styled.div`
   overflow-x: hidden;
   overflow-y: scroll;
+  flex-grow: 1;
   padding: ${size.m} ${size.l};
 `;
 
-export const PageGrid = styled.div`
-  display: grid;
-  grid-template-areas:
-    "header header"
-    "sidenav contents";
-  grid-template-columns: auto minmax(0, 1fr);
-  grid-template-rows: auto 1fr;
-  height: 100vh;
+// Layout elements for non-LG SideNav pages
+export const PageWrapper = styled.div`
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  padding: ${size.m} ${size.l};
 `;
-
 export const PageLayout = styled.section<{ hasSider?: boolean }>`
   display: flex;
   flex: auto;

diff --git a/apps/spruce/src/components/styles/SideNav.tsx b/apps/spruce/src/components/styles/SideNav.tsx
@@ -13,7 +13,8 @@ import { zIndex, size } from "constants/tokens";
 const { blue } = palette;
 
 export const SideNav = styled(LGSideNav)`
-  grid-area: sidenav;
+  flex-shrink: 0;
+  flex-grow: 0;
   z-index: ${zIndex.sideNav};
 `;
 

diff --git a/apps/spruce/src/components/styles/index.ts b/apps/spruce/src/components/styles/index.ts
@@ -6,9 +6,11 @@ import {
   InputLabel,
   PageButtonRow,
   PageContent,
-  PageGrid,
+  SiteLayout,
   PageLayout,
   PageSider,
+  SideNavPageContent,
+  SideNavPageWrapper,
   PageTitle,
   PageWrapper,
   TableControlInnerRow,
@@ -28,14 +30,16 @@ export {
   InputLabel,
   PageButtonRow,
   PageContent,
-  PageGrid,
+  SiteLayout,
   PageLayout,
   PageSider,
   PageTitle,
   PageWrapper,
   SideNav,
   SideNavGroup,
   SideNavItem,
+  SideNavPageContent,
+  SideNavPageWrapper,
   SiderCard,
   StyledLink,
   StyledRouterLink,

diff --git a/apps/spruce/src/pages/distroSettings/index.tsx b/apps/spruce/src/pages/distroSettings/index.tsx
@@ -7,7 +7,8 @@ import {
   SideNav,
   SideNavGroup,
   SideNavItem,
-  PageWrapper,
+  SideNavPageContent,
+  SideNavPageWrapper,
 } from "components/styles";
 import { SideNavItemLink } from "components/styles/SideNav";
 import { showImageVisibilityPage } from "constants/featureFlags";
@@ -64,63 +65,65 @@ const DistroSettings: React.FC = () => {
 
   return (
     <DistroSettingsProvider>
-      <SideNav aria-label="Distro Settings" widthOverride={250}>
-        <ButtonsContainer>
-          {/* @ts-expect-error: FIXME. This comment was added by an automated script. */}
-          <DistroSelect selectedDistro={distroId} />
-          <NewDistroButton />
-        </ButtonsContainer>
-        <SideNavGroup>
-          {Object.values(DistroSettingsTabRoutes).map((tab) => (
-            <SideNavItem
-              key={tab}
-              active={tab === currentTab}
-              as={Link}
-              data-cy={`navitem-${tab}`}
-              // @ts-expect-error: FIXME. This comment was added by an automated script.
-              to={getDistroSettingsRoute(distroId, tab)}
-            >
-              {getTabTitle(tab).title}
-            </SideNavItem>
-          ))}
-        </SideNavGroup>
-        <SideNavGroup glyph={<Icon glyph="Link" />} header="Links">
-          <SideNavItemLink
-            data-cy="navitem-task-queue-link"
-            // @ts-expect-error: FIXME. This comment was added by an automated script.
-            to={getTaskQueueRoute(distroId)}
-          >
-            Task Queue
-          </SideNavItemLink>
-          {showImageVisibilityPage && (
+      <SideNavPageWrapper>
+        <SideNav aria-label="Distro Settings" widthOverride={250}>
+          <ButtonsContainer>
+            {/* @ts-expect-error: FIXME. This comment was added by an automated script. */}
+            <DistroSelect selectedDistro={distroId} />
+            <NewDistroButton />
+          </ButtonsContainer>
+          <SideNavGroup>
+            {Object.values(DistroSettingsTabRoutes).map((tab) => (
+              <SideNavItem
+                key={tab}
+                active={tab === currentTab}
+                as={Link}
+                data-cy={`navitem-${tab}`}
+                // @ts-expect-error: FIXME. This comment was added by an automated script.
+                to={getDistroSettingsRoute(distroId, tab)}
+              >
+                {getTabTitle(tab).title}
+              </SideNavItem>
+            ))}
+          </SideNavGroup>
+          <SideNavGroup glyph={<Icon glyph="Link" />} header="Links">
             <SideNavItemLink
-              data-cy="navitem-image-build-information-link"
-              to={getImageRoute(
-                data?.distro?.imageId ?? "",
-                ImageTabRoutes.BuildInformation,
-              )}
-            >
-              Image Build Information
-            </SideNavItemLink>
-          )}
-          {showImageVisibilityPage && (
-            <SideNavItemLink
-              data-cy="navitem-image-event-log-link"
-              to={getImageRoute(
-                data?.distro?.imageId ?? "",
-                ImageTabRoutes.EventLog,
-              )}
+              data-cy="navitem-task-queue-link"
+              // @ts-expect-error: FIXME. This comment was added by an automated script.
+              to={getTaskQueueRoute(distroId)}
             >
-              Image Event Log
+              Task Queue
             </SideNavItemLink>
+            {showImageVisibilityPage && (
+              <SideNavItemLink
+                data-cy="navitem-image-build-information-link"
+                to={getImageRoute(
+                  data?.distro?.imageId ?? "",
+                  ImageTabRoutes.BuildInformation,
+                )}
+              >
+                Image Build Information
+              </SideNavItemLink>
+            )}
+            {showImageVisibilityPage && (
+              <SideNavItemLink
+                data-cy="navitem-image-event-log-link"
+                to={getImageRoute(
+                  data?.distro?.imageId ?? "",
+                  ImageTabRoutes.EventLog,
+                )}
+              >
+                Image Event Log
+              </SideNavItemLink>
+            )}
+          </SideNavGroup>
+        </SideNav>
+        <SideNavPageContent data-cy="distro-settings-page">
+          {!loading && data?.distro && (
+            <DistroSettingsTabs distro={data.distro} />
           )}
-        </SideNavGroup>
-      </SideNav>
-      <PageWrapper data-cy="distro-settings-page">
-        {!loading && data?.distro && (
-          <DistroSettingsTabs distro={data.distro} />
-        )}
-      </PageWrapper>
+        </SideNavPageContent>
+      </SideNavPageWrapper>
     </DistroSettingsProvider>
   );
 };

diff --git a/apps/spruce/src/pages/image/index.tsx b/apps/spruce/src/pages/image/index.tsx
@@ -5,7 +5,8 @@ import {
   SideNav,
   SideNavGroup,
   SideNavItem,
-  PageWrapper,
+  SideNavPageContent,
+  SideNavPageWrapper,
 } from "components/styles";
 import { ImageTabRoutes, getImageRoute, slugs } from "constants/routes";
 import { size } from "constants/tokens";
@@ -37,7 +38,7 @@ const Image: React.FC = () => {
   }
 
   return (
-    <>
+    <SideNavPageWrapper>
       <SideNav aria-label="Image" widthOverride={250}>
         <ButtonsContainer>
           <ImageSelect selectedImage={selectedImage} />
@@ -56,10 +57,10 @@ const Image: React.FC = () => {
           ))}
         </SideNavGroup>
       </SideNav>
-      <PageWrapper>
+      <SideNavPageContent>
         <ImageTabs currentTab={currentTab} imageId={selectedImage} />
-      </PageWrapper>
-    </>
+      </SideNavPageContent>
+    </SideNavPageWrapper>
   );
 };
 

diff --git a/apps/spruce/src/pages/preferences/index.tsx b/apps/spruce/src/pages/preferences/index.tsx
@@ -5,7 +5,8 @@ import {
   SideNav,
   SideNavGroup,
   SideNavItem,
-  PageWrapper,
+  SideNavPageContent,
+  SideNavPageWrapper,
 } from "components/styles";
 import {
   PreferencesTabRoutes,
@@ -23,7 +24,7 @@ const Preferences: React.FC = () => {
   const { sendEvent } = usePreferencesAnalytics();
 
   return (
-    <>
+    <SideNavPageWrapper>
       <SideNav aria-label="Preferences">
         <SideNavGroup glyph={<Icon glyph="Settings" />} header="Preferences">
           <SideNavItem
@@ -98,10 +99,10 @@ const Preferences: React.FC = () => {
           </SideNavItem>
         </SideNavGroup>
       </SideNav>
-      <PageWrapper>
+      <SideNavPageContent>
         <PreferencesTabs />
-      </PageWrapper>
-    </>
+      </SideNavPageContent>
+    </SideNavPageWrapper>
   );
 };