remove chips and improve preference managing

packages/manager/src/components/PrimaryNav/PrimaryLink.tsx

@@ -1,17 +1,13 @@
 import { BetaChip } from '@linode/ui';
 import * as React from 'react';
 
-import {
-  StyledActiveLink,
-  StyledChip,
-  StyledPrimaryLinkBox,
-} from './PrimaryNav.styles';
+import { StyledActiveLink, StyledPrimaryLinkBox } from './PrimaryNav.styles';
 
 import type { NavEntity } from './PrimaryNav';
 import type { CreateEntity } from 'src/features/TopMenu/CreateMenu/CreateMenu';
 
 export interface BaseNavLink {
-  attr?: { [key: string]: any };
+  attr?: { [key: string]: unknown };
   display: CreateEntity | NavEntity;
   hide?: boolean;
   href: string;
@@ -21,8 +17,7 @@ export interface PrimaryLink extends BaseNavLink {
   activeLinks?: Array<string>;
   betaChipClassName?: string;
   isBeta?: boolean;
-  label?: string;
-  onClick?: (e: React.ChangeEvent<any>) => void;
+  onClick?: (e: React.ChangeEvent<HTMLAnchorElement>) => void;
 }
 
 interface PrimaryLinkProps extends PrimaryLink {
@@ -41,7 +36,6 @@ const PrimaryLink = React.memo((props: PrimaryLinkProps) => {
     isActiveLink,
     isBeta,
     isCollapsed,
-    label,
     onClick,
   } = props;
 
@@ -60,7 +54,6 @@ const PrimaryLink = React.memo((props: PrimaryLinkProps) => {
       isActiveLink={isActiveLink}
       isCollapsed={isCollapsed}
     >
-      <StyledChip isActiveLink={isActiveLink} label={label} size="small" />
       <StyledPrimaryLinkBox
         className="primaryNavLink"
         isActiveLink={isActiveLink}

packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts

@@ -83,7 +83,6 @@ export const StyledActiveLink = styled(Link, {
   display: 'flex',
   minWidth: SIDEBAR_WIDTH,
   padding: '7px 16px',
-  paddingLeft: '10px',
   position: 'relative',
   ...(props.isActiveLink && {
     backgroundColor: theme.tokens.sideNavigation.SelectedMenuItem.Background,
@@ -175,14 +174,6 @@ export const StyledAccordion = styled(Accordion, {
         stroke: 'transparent',
       },
     },
-    ...(props.isCollapsed &&
-      props.isActiveProductFamily && {
-        [theme.breakpoints.up('md')]: {
-          '.MuiAccordion-region, div[class*="StyledSingleLinkBox"]': {
-            maxHeight: 'fit-content',
-          },
-        },
-      }),
     backgroundColor: theme.tokens.sideNavigation.DefaultMenuItem.Background,
   })
 );

packages/manager/src/components/PrimaryNav/PrimaryNav.tsx

@@ -1,4 +1,3 @@
-import { Box } from '@linode/ui';
 import { Hidden } from '@mui/material';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
@@ -102,7 +101,7 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
     (preferences) => preferences?.collapsedSideNavProductFamilies
   );
 
-  const collapsedAccordions = collapsedSideNavPreference ?? [];
+  const collapsedAccordions = collapsedSideNavPreference ?? [1, 2, 3, 4, 5, 6]; // by default, we collapse all categories if no preference is set;
 
   const { mutateAsync: updatePreferences } = useMutatePreferences();
 
@@ -111,23 +110,28 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
   >[] = React.useMemo(
     () => [
       {
+        links: [],
+      },
+      {
+        icon: <Linode />,
         links: [
           {
+            activeLinks: [
+              '/managed',
+              '/managed/summary',
+              '/managed/monitors',
+              '/managed/ssh-access',
+              '/managed/credentials',
+              '/managed/contacts',
+            ],
             display: 'Managed',
             hide: !isManaged,
             href: '/managed',
-            label: 'MGD',
           },
-        ],
-      },
-      {
-        icon: <Linode />,
-        links: [
           {
             activeLinks: ['/linodes', '/linodes/create'],
             display: 'Linodes',
             href: '/linodes',
-            label: 'LND',
           },
           {
             activeLinks: [
@@ -136,31 +140,26 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
             ],
             display: 'Images',
             href: '/images',
-            label: 'IMG',
           },
           {
             activeLinks: ['/kubernetes/create'],
             display: 'Kubernetes',
             href: '/kubernetes/clusters',
-            label: 'K8',
           },
           {
             display: 'StackScripts',
             href: '/stackscripts',
-            label: 'SKS',
           },
           {
             betaChipClassName: 'beta-chip-placement-groups',
             display: 'Placement Groups',
             hide: !isPlacementGroupsEnabled,
             href: '/placement-groups',
-            label: 'PG',
           },
           {
             attr: { 'data-qa-one-click-nav-btn': true },
             display: 'Marketplace',
             href: '/linodes/create?type=One-Click',
-            label: 'M',
           },
         ],
         name: 'Compute',
@@ -175,12 +174,10 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
             ],
             display: 'Object Storage',
             href: '/object-storage/buckets',
-            label: 'OBJ',
           },
           {
             display: 'Volumes',
             href: '/volumes',
-            label: 'VOL',
           },
         ],
         name: 'Storage',
@@ -191,22 +188,18 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
           {
             display: 'VPC',
             href: '/vpcs',
-            label: 'VPC',
           },
           {
             display: 'Firewalls',
             href: '/firewalls',
-            label: 'FW',
           },
           {
             display: 'NodeBalancers',
             href: '/nodebalancers',
-            label: 'NB',
           },
           {
             display: 'Domains',
             href: '/domains',
-            label: 'D',
           },
         ],
         name: 'Networking',
@@ -219,7 +212,6 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
             hide: !isDatabasesEnabled,
             href: '/databases',
             isBeta: isDatabasesV2Beta,
-            label: 'DB',
           },
         ],
         name: 'Databases',
@@ -230,14 +222,12 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
           {
             display: 'Longview',
             href: '/longview',
-            label: 'LV',
           },
           {
             display: 'Monitor',
             hide: !isACLPEnabled,
             href: '/monitor',
             isBeta: flags.aclp?.beta,
-            label: 'MON',
           },
         ],
         name: 'Monitor',
@@ -249,25 +239,21 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
             display: 'Betas',
             hide: !flags.selfServeBetas,
             href: '/betas',
-            label: 'B',
           },
           {
             display: 'Identity and Access',
             hide: !isIAMEnabled,
             href: '/iam',
             icon: <IAM />,
             isBeta: isIAMBeta,
-            label: 'IAM',
           },
           {
             display: 'Account',
             href: '/account',
-            label: 'ACC',
           },
           {
             display: 'Help & Support',
             href: '/support',
-            label: 'HEL',
           },
         ],
         name: 'More',
@@ -284,7 +270,7 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
   );
 
   const accordionClicked = (index: number) => {
-    let updatedCollapsedAccordions;
+    let updatedCollapsedAccordions: number[] = [0, 1, 2, 3, 4, 5];
     if (collapsedAccordions.includes(index)) {
       updatedCollapsedAccordions = collapsedAccordions.filter(
         (accIndex) => accIndex !== index
@@ -300,6 +286,40 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
     }
   };
 
+  // This effect will only run if the collapsedSideNavPreference is not set
+  // When a user lands on a page and does not have any preference set,
+  // we want to expand the accordion that contains the active link for convenience and discoverability
+  React.useEffect(() => {
+    if (collapsedSideNavPreference) {
+      return;
+    }
+
+    // Find the index of the group containing the active link and expand it
+    const activeGroupIndex = productFamilyLinkGroups.findIndex((group) => {
+      const filteredLinks = group.links.filter((link) => !link.hide);
+
+      return filteredLinks.some((link) =>
+        linkIsActive(
+          link.href,
+          location.search,
+          location.pathname,
+          link.activeLinks
+        )
+      );
+    });
+
+    if (activeGroupIndex !== -1) {
+      accordionClicked(activeGroupIndex);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    location.pathname,
+    location.search,
+    productFamilyLinkGroups,
+    collapsedSideNavPreference,
+  ]);
+
   let activeProductFamily = '';
 
   return (
@@ -348,42 +368,39 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
                 link.activeLinks
               )
             );
+
             if (isActiveLink) {
               activeProductFamily = productFamily.name ?? '';
             }
+
             const props = {
               closeMenu,
               isActiveLink,
               isCollapsed,
               ...link,
             };
+
             return <PrimaryLink {...props} key={link.display} />;
           });
 
           return (
             <div key={idx} style={{ width: 'inherit' }}>
-              {productFamily.name ? ( // TODO: we can remove this conditional when Managed is removed
-                <StyledAccordion
-                  heading={
-                    <>
-                      {productFamily.icon}
-                      <p>{productFamily.name}</p>
-                    </>
-                  }
-                  isActiveProductFamily={
-                    activeProductFamily === productFamily.name
-                  }
-                  expanded={!collapsedAccordions.includes(idx)}
-                  isCollapsed={isCollapsed}
-                  onChange={() => accordionClicked(idx)}
-                >
-                  {PrimaryLinks}
-                </StyledAccordion>
-              ) : (
-                <Box className={`StyledSingleLinkBox-${idx}`}>
-                  {PrimaryLinks}
-                </Box>
-              )}
+              <StyledAccordion
+                heading={
+                  <>
+                    {productFamily.icon}
+                    <p>{productFamily.name}</p>
+                  </>
+                }
+                isActiveProductFamily={
+                  activeProductFamily === productFamily.name
+                }
+                expanded={!collapsedAccordions.includes(idx)}
+                isCollapsed={isCollapsed}
+                onChange={() => accordionClicked(idx)}
+              >
+                {PrimaryLinks}
+              </StyledAccordion>
             </div>
           );
         })}

packages/manager/src/features/Footer.tsx

@@ -13,14 +13,6 @@ const StyledLink = styled(Link)(({ theme }) => ({
     color: theme.tokens.footer.Text.Hover,
   },
   color: theme.tokens.footer.Text.Default,
-  [theme.breakpoints.down('sm')]: {
-    '&&': {
-      marginTop: theme.tokens.spacing[20],
-    },
-    '&:first-child': {
-      marginTop: 0,
-    },
-  },
 }));
 
 export const FOOTER_HEIGHT = 40;