feat: Collapsible sidebar

.vscode/launch.json

@@ -0,0 +1,63 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Start",
+            "type": "node",
+            "request": "launch",
+            "cwd": "${workspaceFolder}",
+            "program": "${workspaceFolder}/node_modules/.bin/concurrently",
+            "args": [
+                "yarn workspace app start",
+                "yarn workspace backend start"
+            ],
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "console": "integratedTerminal"
+        },
+        {
+            "name": "Start Backend",
+            "type": "node",
+            "request": "launch",
+            "args": [
+                "package",
+                "start"
+            ],
+            "cwd": "${workspaceFolder}/packages/backend",
+            "program": "${workspaceFolder}/node_modules/.bin/backstage-cli",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "console": "integratedTerminal"
+        },
+        {
+            "name": "Start App",
+            "type": "node",
+            "request": "launch",
+            "args": [
+                "package",
+                "start"
+            ],
+            "cwd": "${workspaceFolder}/packages/app",
+            "program": "${workspaceFolder}/node_modules/.bin/backstage-cli",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "console": "integratedTerminal"
+        },
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}/src",
+            "sourceMapPathOverrides": {
+                "webpack:///src/*": "${webRoot}/*"
+            }
+        }
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "jest.jestCommandLine": "node_modules/.bin/jest --config node_modules/@backstage/cli/config/jest.js",
+}

CONTRIBUTING.md

@@ -11,10 +11,6 @@ This is similar to other open source projects. Here are the steps to get started
   ```
   git clone
   ```
-- Install dependencies
-  ```
-  make install
-  ```
 - Start the app
   ```
   make dev

docs/development.md

@@ -38,3 +38,8 @@ export default function CustomizedButtons() {
 ## Theme Providers
 
 https://mui.com/material-ui/customization/theming/#accessing-the-theme-in-a-component
+
+## Guides
+
+- [Debugging Jest Tests](https://backstage.io/docs/tooling/cli/build-system/#debugging-jest-tests)
+- [Testing with Jest](https://backstage.io/docs/plugins/testing)

packages/app/src/components/Root/Root.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import Home from '@mui/icons-material/Home';
 import CreateComponent from '@mui/icons-material/AddCircleOutline';
@@ -19,6 +19,7 @@ import {
   SidebarSpace,
   useSidebarOpenState,
   Link,
+  SidebarExpandButton,
 } from '@backstage/core-components';
 import MenuIcon from '@mui/icons-material/Menu';
 import SearchIcon from '@mui/icons-material/Search';
@@ -31,6 +32,10 @@ import MonitorHeartRoundedIcon from '@mui/icons-material/MonitorHeartRounded';
 import ScoreRoundedIcon from '@mui/icons-material/ScoreRounded';
 import { IconComponent } from '@backstage/core-plugin-api';
 
+export enum LocalStorageKeys {
+  SIDEBAR_PIN_STATE = 'sidebarPinState',
+}
+
 const SidebarLogoRoot = styled('div')(() => ({
   width: sidebarConfig.drawerWidthClosed,
   height: 3 * sidebarConfig.logoHeight,
@@ -57,64 +62,76 @@ const SidebarLogo = () => {
   );
 };
 
-export const Root = ({ children }: PropsWithChildren<{}>) => (
-  <SidebarPage>
-    <Sidebar>
-      <SidebarLogo />
-      <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
-        <SidebarSearchModal />
-      </SidebarGroup>
-      <SidebarDivider />
-      <SidebarGroup label="Menu" icon={<MenuIcon />}>
-        {/* Global nav, not org-specific */}
-        <SidebarItem icon={Home as IconComponent} to="/" text="Home" />
-        <SidebarItem
-          icon={MenuBookRoundedIcon as IconComponent}
-          to="catalog"
-          text="Catalog"
-        />
+export const Root = ({ children }: PropsWithChildren<{}>) => {
+  if (
+    window.localStorage.getItem(LocalStorageKeys.SIDEBAR_PIN_STATE) === null
+  ) {
+    window.localStorage.setItem(
+      LocalStorageKeys.SIDEBAR_PIN_STATE,
+      JSON.stringify(false),
+    );
+  }
+
+  return (
+    <SidebarPage>
+      <Sidebar disableExpandOnHover={false}>
+        <SidebarLogo />
+        <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
+          <SidebarSearchModal />
+        </SidebarGroup>
+        <SidebarDivider />
+        <SidebarGroup label="Menu" icon={<MenuIcon />}>
+          {/* Global nav, not org-specific */}
+          <SidebarItem icon={Home as IconComponent} to="/" text="Home" />
+          <SidebarItem
+            icon={MenuBookRoundedIcon as IconComponent}
+            to="catalog"
+            text="Catalog"
+          />
+          <SidebarItem
+            icon={ExtensionRoundedIcon as IconComponent}
+            to="api-docs"
+            text="APIs"
+          />
+          <SidebarItem
+            icon={LocalLibraryRoundedIcon as IconComponent}
+            to="docs"
+            text="Docs"
+          />
+          <SidebarItem
+            icon={TouchAppRoundedIcon as IconComponent}
+            to="self-service"
+            text="Self-Service"
+          />
+        </SidebarGroup>
+        <SidebarDivider />
         <SidebarItem
-          icon={ExtensionRoundedIcon as IconComponent}
-          to="api-docs"
-          text="APIs"
+          icon={ScoreRoundedIcon as IconComponent}
+          to="scorecard"
+          text="Scorecard"
         />
         <SidebarItem
-          icon={LocalLibraryRoundedIcon as IconComponent}
-          to="docs"
-          text="Docs"
+          icon={MonitorHeartRoundedIcon as IconComponent}
+          to="pulse-check"
+          text="Pulse Check"
         />
         <SidebarItem
-          icon={TouchAppRoundedIcon as IconComponent}
-          to="self-service"
-          text="Self-Service"
+          icon={AutoAwesomeRoundedIcon as IconComponent}
+          to="explore"
+          text="Explore"
         />
-      </SidebarGroup>
-      <SidebarDivider />
-      <SidebarItem
-        icon={ScoreRoundedIcon as IconComponent}
-        to="scorecard"
-        text="Scorecard"
-      />
-      <SidebarItem
-        icon={MonitorHeartRoundedIcon as IconComponent}
-        to="pulse-check"
-        text="Pulse Check"
-      />
-      <SidebarItem
-        icon={AutoAwesomeRoundedIcon as IconComponent}
-        to="explore"
-        text="Explore"
-      />
-      <SidebarSpace />
-      <SidebarDivider />
-      <SidebarGroup
-        label="Settings"
-        icon={<UserSettingsSignInAvatar />}
-        to="/settings"
-      >
-        <SidebarSettings />
-      </SidebarGroup>
-    </Sidebar>
-    {children}
-  </SidebarPage>
-);
+        <SidebarSpace />
+        <SidebarDivider />
+        <SidebarGroup
+          label="Settings"
+          icon={<UserSettingsSignInAvatar />}
+          to="/settings"
+        >
+          <SidebarSettings />
+        </SidebarGroup>
+        <SidebarExpandButton />
+      </Sidebar>
+      {children}
+    </SidebarPage>
+  );
+};

packages/app/src/components/catalog/EntityPage.tsx

@@ -123,7 +123,7 @@ const entityWarningContent = (
 );
 
 const overviewContent = (
-  <Grid container spacing={0} alignItems="stretch">
+  <Grid container alignItems="stretch">
     {entityWarningContent}
     <Grid item md={6} marginBottom={-1}>
       <EntityAboutCard variant="gridItem" />
@@ -190,7 +190,7 @@ const websiteEntityPage = (
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/dependencies" title="Dependencies">
-      <Grid container spacing={2} alignItems="stretch">
+      <Grid container alignItems="stretch">
         <Grid item md={6}>
           <EntityDependsOnComponentsCard variant="gridItem" />
         </Grid>
@@ -242,15 +242,15 @@ const componentPage = (
 const apiPage = (
   <EntityLayout>
     <EntityLayout.Route path="/" title="Overview">
-      <Grid container spacing={2}>
+      <Grid container>
         {entityWarningContent}
         <Grid item md={6} marginBottom={-1}>
           <EntityAboutCard variant="gridItem" />
         </Grid>
         <Grid item md={6} marginBottom={-1}>
           <EntityCatalogGraphCard variant="gridItem" height={400} />
         </Grid>
-        <Grid container spacing={2} item md={8}>
+        <Grid md={8}>
           <Grid item md={12}>
             <EntityProvidingComponentsCard variant="gridItem" />
           </Grid>
@@ -265,7 +265,7 @@ const apiPage = (
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/definition" title="Definition">
-      <Grid container spacing={2}>
+      <Grid container>
         <Grid item xs>
           <EntityApiDefinitionCard />
         </Grid>