DEVPROD-1065: Remove antd layout (#377)

.github/pull_request_template.md

@@ -1,5 +1,5 @@
 DEVPROD-NNNNN
-<!-- Does this PR need a 🔵Spruce or 🟢Parsley label? -->
+<!-- Does this PR need a 🔵Spruce or 🟢Parsley label? Add it in the sidebar 👉 -->
 
 ### Description
 <!-- add description, context, thought process, etc -->

README.md

@@ -14,14 +14,22 @@ Check out the
 [Yarn Workspaces documentation](https://classic.yarnpkg.com/lang/en/docs/workspaces/)
 for more.
 
-### Upgrades
+### Dependencies
 
 To upgrade a dependency across workspaces:
 
 ```bash
 yarn upgrade-interactive [--latest] [package-name]
 ```
 
+To remove all installed dependencies:
+
+```bash
+yarn clean
+```
+
+You can then rerun `yarn install`.
+
 ### Scripts
 
 To run a script in a workspace from root:

apps/spruce/src/components/Loading/PatchAndTaskFullPageLoad.tsx

@@ -19,11 +19,9 @@ export const PatchAndTaskFullPageLoad: React.FC = () => (
           <Skeleton active paragraph={{ rows: 4 }} title={false} />
         </SiderCard>
       </PageSider>
-      <PageLayout>
-        <PageContent>
-          <Skeleton active paragraph={{ rows: 8 }} title />
-        </PageContent>
-      </PageLayout>
+      <PageContent>
+        <Skeleton active paragraph={{ rows: 8 }} title />
+      </PageContent>
     </PageLayout>
   </PageWrapper>
 );

apps/spruce/src/components/styles/Layout.tsx

@@ -1,17 +1,9 @@
-import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { palette } from "@leafygreen-ui/palette";
 import { H2, H2Props, Body, BodyProps } from "@leafygreen-ui/typography";
-import { Layout } from "antd";
 import { size, fontSize } from "constants/tokens";
 
-const { gray, red, white } = palette;
-const { Content, Sider } = Layout;
-
-const whiteBackground = css`
-  background: ${white};
-  background-color: ${white};
-`;
+const { gray, red } = palette;
 
 export const PageWrapper = styled.div`
   grid-area: contents;
@@ -30,14 +22,21 @@ export const PageGrid = styled.div`
   height: 100vh;
 `;
 
-/* Flexbox-based antd components to be used together */
-export const PageLayout = styled(Layout)`
-  ${whiteBackground}
+export const PageLayout = styled.section<{ hasSider?: boolean }>`
+  display: flex;
+  flex: auto;
+  flex-direction: ${({ hasSider }) => (hasSider ? "row" : "column")};
+  min-height: 0;
 `;
-export const PageSider = styled(Sider)`
-  ${whiteBackground}
+export const PageSider = styled.aside<{ width?: number }>`
+  ${({ width = 275 }) => `
+   max-width: ${width}px;
+   min-width: ${width}px;
+   width: ${width}px;
+   `}
 `;
-export const PageContent = styled(Content)`
+export const PageContent = styled.main`
+  flex: auto;
   margin-left: ${size.s};
   overflow: hidden;
 `;
@@ -78,7 +77,7 @@ export const ErrorMessage = styled(Body)<BodyProps>`
   color: ${red.base};
 `;
 
-export const HR = styled("hr")`
+export const HR = styled.hr`
   background-color: ${gray.light2};
   border: 0;
   height: 1px;

apps/spruce/src/pages/Task.tsx

@@ -139,20 +139,14 @@ export const Task = () => {
             taskId={taskId}
           />
         </PageSider>
-        <LogWrapper>
-          <PageContent>
-            {task && <TaskTabs isDisplayTask={isDisplayTask} task={task} />}
-          </PageContent>
-        </LogWrapper>
+        <PageContent>
+          {task && <TaskTabs isDisplayTask={isDisplayTask} task={task} />}
+        </PageContent>
       </PageLayout>
     </PageWrapper>
   );
 };
 
-const LogWrapper = styled(PageLayout)`
-  width: 100%;
-`;
-
 const StyledBadgeWrapper = styled.div`
   > :nth-of-type(2) {
     margin-left: 10px;

apps/spruce/src/pages/Version.tsx

@@ -127,14 +127,12 @@ export const VersionPage: React.FC = () => {
           {/* @ts-expect-error: FIXME. This comment was added by an automated script. */}
           <BuildVariantCard versionId={versionId} />
         </PageSider>
-        <PageLayout>
-          <PageContent>
-            <VersionTabs
-              // @ts-expect-error: FIXME. This comment was added by an automated script.
-              version={version}
-            />
-          </PageContent>
-        </PageLayout>
+        <PageContent>
+          <VersionTabs
+            // @ts-expect-error: FIXME. This comment was added by an automated script.
+            version={version}
+          />
+        </PageContent>
       </PageLayout>
     </PageWrapper>
   );