feat: [M3-8728] - Add Product Families to Create Menu dropdown (linod…

…e#11260)

## Description 📝
Add Product Families to the Create Menu Dropdown and display the desktop dropdown as 3 columns in a row; mobile will remain as a single column dropdown

Note: The Storage section was intentionally moved after Networking (different from the Side Nav Menu) since it has less items and can be in the same column as Databases. UX would prefer not to change the Side Nav order as it "reflects the info hierarchy from Ryan McEntee, that is also being used by TechDocs."

## Changes  🔄
- Add Product Families to Create Menu dropdown

Clean up 🧹 :
- Deleted unused nav components
- Renamed AddNewMenu to CreateMenu
- Variable renaming in PrimaryNav
- Updated unit test to use `userEvent` over `fireEvent`

## How to test 🧪

### Verification steps
- [ ] Open the create menu and ensure you can tab through the items. Clicking links still work as expected, etc
- [ ] Check mobile view

```
yarn test CreateMenu
```

packages/manager/.changeset/pr-11260-added-1731699680759.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Product Families to Create Menu dropdown ([#11260](https://github.com/linode/manager/pull/11260))

packages/manager/cypress/e2e/core/cloudpulse/dbaas-widgets-verification.spec.ts

@@ -49,7 +49,7 @@ import { formatToolTip } from 'src/features/CloudPulse/Utils/unitConversion';
 const expectedGranularityArray = ['Auto', '1 day', '1 hr', '5 min'];
 const timeDurationToSelect = 'Last 24 Hours';
 
-const flags : Partial<Flags>= {aclp: { enabled: true, beta: true}}
+const flags: Partial<Flags> = { aclp: { enabled: true, beta: true } };
 
 const {
   metrics,

packages/manager/cypress/e2e/core/cloudpulse/linode-widget-verification.spec.ts

@@ -46,7 +46,7 @@ import { formatToolTip } from 'src/features/CloudPulse/Utils/unitConversion';
  */
 const expectedGranularityArray = ['Auto', '1 day', '1 hr', '5 min'];
 const timeDurationToSelect = 'Last 24 Hours';
-const flags : Partial<Flags> = {aclp: {enabled: true, beta: true}}
+const flags: Partial<Flags> = { aclp: { enabled: true, beta: true } };
 const {
   metrics,
   id,

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

@@ -4,22 +4,25 @@ import * as React from 'react';
 import { StyledActiveLink, StyledPrimaryLinkBox } from './PrimaryNav.styles';
 
 import type { NavEntity } from './PrimaryNav';
+import type { CreateEntity } from 'src/features/TopMenu/CreateMenu/CreateMenu';
 
-export interface PrimaryLink {
-  activeLinks?: Array<string>;
+export interface BaseNavLink {
   attr?: { [key: string]: any };
-  betaChipClassName?: string;
-  display: NavEntity;
+  display: CreateEntity | NavEntity;
   hide?: boolean;
   href: string;
+}
+
+export interface PrimaryLink extends BaseNavLink {
+  activeLinks?: Array<string>;
+  betaChipClassName?: string;
   isBeta?: boolean;
   onClick?: (e: React.ChangeEvent<any>) => void;
 }
 
 interface PrimaryLinkProps extends PrimaryLink {
   closeMenu: () => void;
   isActiveLink: boolean;
-  isBeta?: boolean;
   isCollapsed: boolean;
 }
 

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

@@ -33,7 +33,6 @@ import { linkIsActive } from './utils';
 import type { PrimaryLink as PrimaryLinkType } from './PrimaryLink';
 
 export type NavEntity =
-  | 'Account'
   | 'Account'
   | 'Betas'
   | 'Cloud Load Balancers'
@@ -56,10 +55,18 @@ export type NavEntity =
   | 'VPC'
   | 'Volumes';
 
-interface PrimaryLinkGroup {
+export type ProductFamily =
+  | 'Compute'
+  | 'Databases'
+  | 'Monitor'
+  | 'More'
+  | 'Networking'
+  | 'Storage';
+
+export interface ProductFamilyLinkGroup<T> {
   icon?: React.JSX.Element;
-  links: PrimaryLinkType[];
-  title?: string;
+  links: T;
+  name?: ProductFamily;
 }
 
 export interface PrimaryNavProps {
@@ -84,7 +91,9 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
   const { data: preferences } = usePreferences();
   const { mutateAsync: updatePreferences } = useMutatePreferences();
 
-  const primaryLinkGroups: PrimaryLinkGroup[] = React.useMemo(
+  const productFamilyLinkGroups: ProductFamilyLinkGroup<
+    PrimaryLinkType[]
+  >[] = React.useMemo(
     () => [
       {
         links: [
@@ -132,7 +141,7 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
             href: '/linodes/create?type=One-Click',
           },
         ],
-        title: 'Compute',
+        name: 'Compute',
       },
       {
         icon: <Storage />,
@@ -150,7 +159,7 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
             href: '/volumes',
           },
         ],
-        title: 'Storage',
+        name: 'Storage',
       },
       {
         icon: <NodeBalancer />,
@@ -172,7 +181,7 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
             href: '/domains',
           },
         ],
-        title: 'Networking',
+        name: 'Networking',
       },
       {
         icon: <Database />,
@@ -184,7 +193,7 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
             isBeta: isDatabasesV2Beta,
           },
         ],
-        title: 'Databases',
+        name: 'Databases',
       },
       {
         icon: <Longview />,
@@ -200,7 +209,7 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
             isBeta: flags.aclp?.beta,
           },
         ],
-        title: 'Monitor',
+        name: 'Monitor',
       },
       {
         icon: <More />,
@@ -219,7 +228,7 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
             href: '/support',
           },
         ],
-        title: 'More',
+        name: 'More',
       },
     ],
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -282,8 +291,8 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
         </StyledLogoBox>
         <StyledDivider />
       </Grid>
-      {primaryLinkGroups.map((linkGroup, idx) => {
-        const filteredLinks = linkGroup.links.filter((link) => !link.hide);
+      {productFamilyLinkGroups.map((productFamily, idx) => {
+        const filteredLinks = productFamily.links.filter((link) => !link.hide);
         if (filteredLinks.length === 0) {
           return null;
         }
@@ -298,7 +307,7 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
             )
           );
           if (isActiveLink) {
-            activeProductFamily = linkGroup.title ?? '';
+            activeProductFamily = productFamily.name ?? '';
           }
           const props = {
             closeMenu,
@@ -311,17 +320,17 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
 
         return (
           <div key={idx} style={{ width: 'inherit' }}>
-            {linkGroup.title ? ( // TODO: we can remove this conditional when Managed is removed
+            {productFamily.name ? ( // TODO: we can remove this conditional when Managed is removed
               <>
                 <StyledAccordion
                   heading={
                     <>
-                      {linkGroup.icon}
-                      <p>{linkGroup.title}</p>
+                      {productFamily.icon}
+                      <p>{productFamily.name}</p>
                     </>
                   }
                   isActiveProductFamily={
-                    activeProductFamily === linkGroup.title
+                    activeProductFamily === productFamily.name
                   }
                   expanded={!collapsedAccordions.includes(idx)}
                   isCollapsed={isCollapsed}