Skip to content

Commit

Permalink
remove chips and improve preference managing (#11492)
Browse files Browse the repository at this point in the history
  • Loading branch information
abailly-akamai authored Jan 8, 2025
1 parent 3e4c2b8 commit 907640c
Show file tree
Hide file tree
Showing 4 changed files with 70 additions and 77 deletions.
13 changes: 3 additions & 10 deletions packages/manager/src/components/PrimaryNav/PrimaryLink.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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 {
Expand All @@ -41,7 +36,6 @@ const PrimaryLink = React.memo((props: PrimaryLinkProps) => {
isActiveLink,
isBeta,
isCollapsed,
label,
onClick,
} = props;

Expand All @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
})
);
Expand Down
117 changes: 67 additions & 50 deletions packages/manager/src/components/PrimaryNav/PrimaryNav.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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();

Expand All @@ -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: [
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -219,7 +212,6 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
hide: !isDatabasesEnabled,
href: '/databases',
isBeta: isDatabasesV2Beta,
label: 'DB',
},
],
name: 'Databases',
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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
Expand All @@ -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 (
Expand Down Expand Up @@ -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>
);
})}
Expand Down
8 changes: 0 additions & 8 deletions packages/manager/src/features/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 907640c

Please sign in to comment.