PD-547: Add payment status badge to project nav

.changeset/forty-tables-yawn.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/mongo-nav': minor
+---
+
+Adds project status badge to ProjectNav

.changeset/nervous-eyes-shake.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/menu': patch
+---
+
+Fixes SubMenuIcon padding to account for change in size of xlarge glyphs

packages/menu/src/styles.tsx

@@ -3,9 +3,9 @@ import { uiColors } from '@leafygreen-ui/palette';
 
 const indentation = 15;
 const leftBar = 5;
-export const svgWidth = 32;
+export const svgWidth = 24;
 export const menuItemPadding = 15;
-export const paddingLeft = 60;
+export const paddingLeft = 52;
 
 export const menuItemContainerStyle = css`
   display: flex;

packages/mongo-nav/src/MongoNav.tsx

@@ -251,6 +251,7 @@ function MongoNav({
             mode={mode}
             activeProduct={activeProduct}
             activeNav={activeNav}
+            admin={admin}
             current={data?.currentProject}
             data={filteredProjects}
             constructProjectURL={constructProjectURL}

packages/mongo-nav/src/data.ts

@@ -21,6 +21,7 @@ export const dataFixtures = {
     planType: 'atlas',
     projectId: '020019e',
     projectName: 'Test Project',
+    status: 'ACTIVE',
   },
   organizations: [
     {

packages/mongo-nav/src/helpers/ProjectStatusBadge.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import Badge, { Variant } from '@leafygreen-ui/badge';
+import { css } from '@leafygreen-ui/emotion';
+import { ProjectStatus } from '../types';
+
+const projectStatusBadgeMargin = css`
+  margin-right: 20px;
+`;
+
+const projectStatusBadgeVariant = {
+  [ProjectStatus.Active]: Variant.Green,
+  [ProjectStatus.Closing]: Variant.Yellow,
+  [ProjectStatus.Closed]: Variant.Red,
+  [ProjectStatus.Dead]: Variant.Red,
+};
+
+interface ProjectStatusBadgeProps {
+  currentStatus: ProjectStatus;
+}
+
+export default function ProjectStatusBadge({
+  currentStatus,
+}: ProjectStatusBadgeProps) {
+  return (
+    <Badge
+      variant={projectStatusBadgeVariant[currentStatus]}
+      data-testid="project-nav-project-status-badge"
+      className={projectStatusBadgeMargin}
+    >
+      {currentStatus}
+    </Badge>
+  );
+}

packages/mongo-nav/src/helpers/index.ts

@@ -1,4 +1,5 @@
-import OrgNavLink from './OrgNavLink';
-import InteractionRingWrapper from './InteractionRingWrapper';
-import OnPremUserMenu from './OnPremUserMenu';
-export { OrgNavLink, InteractionRingWrapper, OnPremUserMenu };
+export { default as OrgNavLink } from './OrgNavLink';
+export { default as InteractionRingWrapper } from './InteractionRingWrapper';
+export { default as OnPremUserMenu } from './OnPremUserMenu';
+export { default as ProjectStatusBadge } from './ProjectStatusBadge';
+export { RealmIcon, AtlasIcon, ChartsIcon } from './Icons';

packages/mongo-nav/src/org-nav/OrgNav.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import Tooltip from '@leafygreen-ui/tooltip';
-import Badge from '@leafygreen-ui/badge';
+import Badge, { Variant } from '@leafygreen-ui/badge';
 import IconButton from '@leafygreen-ui/icon-button';
 import Icon from '@leafygreen-ui/icon';
 import UserMenu from '../user-menu';
@@ -78,27 +78,20 @@ const versionStyle = css`
   })}
 `;
 
-export const Colors = {
-  Lightgray: 'lightgray',
-  Green: 'green',
-  Yellow: 'yellow',
-  Red: 'red',
-} as const;
-
-export type Colors = typeof Colors[keyof typeof Colors];
-
-const paymentStatusMap: Record<Colors, ReadonlyArray<OrgPaymentLabel>> = {
-  [Colors.Lightgray]: [
+const paymentStatusMap: {
+  [K in Partial<Variant>]?: ReadonlyArray<OrgPaymentLabel>;
+} = {
+  [Variant.LightGray]: [
     OrgPaymentLabel.Embargoed,
     OrgPaymentLabel.EmbargoConfirmed,
   ],
-  [Colors.Green]: [OrgPaymentLabel.Ok],
-  [Colors.Yellow]: [
+  [Variant.Green]: [OrgPaymentLabel.Ok],
+  [Variant.Yellow]: [
     OrgPaymentLabel.Warning,
     OrgPaymentLabel.Suspended,
     OrgPaymentLabel.Closing,
   ],
-  [Colors.Red]: [
+  [Variant.Red]: [
     OrgPaymentLabel.Dead,
     OrgPaymentLabel.AdminSuspended,
     OrgPaymentLabel.Locked,
@@ -147,13 +140,13 @@ function OrgNav({
   const isMobile = viewportWidth < breakpoints.small;
   const disabled = activeNav === ActiveNavElement.UserSettings;
 
-  let paymentVariant: Colors | undefined;
-  let key: Colors;
+  let paymentVariant: Variant | undefined;
+  let key: Variant;
 
   for (key in paymentStatusMap) {
     const paymentStatus = current?.paymentStatus;
 
-    if (paymentStatus && paymentStatusMap[key].includes(paymentStatus)) {
+    if (paymentStatus && paymentStatusMap[key]?.includes(paymentStatus)) {
       paymentVariant = key;
     }
   }

packages/mongo-nav/src/project-nav/ProjectNav.spec.tsx

@@ -55,6 +55,9 @@ describe('packages/mongo-nav/src/project-nav', () => {
 
   const setExpectedElements = () => {
     const { queryByTestId = () => null } = queries;
+    expectedElements.projectStatusBadge = queryByTestId(
+      'project-nav-project-status-badge',
+    );
     expectedElements.atlas = queryByTestId('project-nav-atlas');
     expectedElements.cloudManager = queryByTestId('project-nav-cloud-manager');
     expectedElements.realm = queryByTestId('project-nav-realm');
@@ -144,6 +147,21 @@ describe('packages/mongo-nav/src/project-nav', () => {
     });
   };
 
+  const testForProjectStatusBadge = (isVisible: boolean) => {
+    it(`${
+      isVisible ? 'displays' : 'does not display'
+    } the project status badge in the nav`, () => {
+      const statusBadge = expectedElements.projectStatusBadge;
+
+      if (isVisible) {
+        expect(statusBadge).toBeInTheDocument();
+        expect((statusBadge as Element).innerHTML).toContain('ACTIVE');
+      } else {
+        expect(statusBadge).not.toBeInTheDocument();
+      }
+    });
+  };
+
   describe('when rendered with default props', () => {
     beforeEach(async () => {
       fetchData = [];
@@ -158,6 +176,8 @@ describe('packages/mongo-nav/src/project-nav', () => {
       testForNavLink(linkName, true),
     );
 
+    testForProjectStatusBadge(false);
+
     it('atlas tab shows the correct link', () => {
       expect(expectedElements!.atlas!.getAttribute('href')).toEqual(
         'https://cloud.mongodb.com/v2/020019e#',
@@ -238,6 +258,12 @@ describe('packages/mongo-nav/src/project-nav', () => {
     });
   });
 
+  describe('when admin is set to true', () => {
+    beforeEach(() => renderComponent({ admin: true, current: currentProject }));
+
+    testForProjectStatusBadge(true);
+  });
+
   describe('when the date is before MongoDB World', () => {
     const testDate = new Date('March 20, 2020 0:00:00');
 

packages/mongo-nav/src/project-nav/ProjectNav.tsx

@@ -23,8 +23,14 @@ import {
   NavElement,
   Mode,
   MongoNavInterface,
+  ProjectStatus,
 } from '../types';
-import { AtlasIcon, RealmIcon, ChartsIcon } from '../helpers/Icons';
+import {
+  AtlasIcon,
+  RealmIcon,
+  ChartsIcon,
+  ProjectStatusBadge,
+} from '../helpers';
 
 const {
   ProjectNavProjectDropdown,
@@ -70,7 +76,7 @@ const navContainerStyle = css`
 const menuIconButtonStyle = css`
   z-index: 1;
   ${facepaint({
-    marginRight: ['20px', '14px', '20px'],
+    marginRight: ['16px', '14px', '16px'],
   })}
 `;
 
@@ -234,7 +240,7 @@ const secondTabName = displayProductName();
 
 type ProjectNavProps = Pick<
   MongoNavInterface,
-  'activeProduct' | 'activeNav' | 'onProjectChange' | 'mode'
+  'activeProduct' | 'activeNav' | 'onProjectChange' | 'admin' | 'mode'
 > & {
   current?: CurrentProjectInterface;
   data?: Array<ProjectInterface>;
@@ -248,6 +254,7 @@ type ProjectNavProps = Pick<
 };
 
 export default function ProjectNav({
+  admin,
   current,
   data,
   constructProjectURL,
@@ -378,6 +385,13 @@ export default function ProjectNav({
         </MenuItem>
       </Menu>
 
+      {!isMobile &&
+        admin &&
+        current?.status &&
+        Object.values(ProjectStatus).includes(current?.status) && (
+          <ProjectStatusBadge currentStatus={current.status} />
+        )}
+
       <ul className={productListStyle}>
         <li role="none" className={productTabStyle}>
           <a

packages/mongo-nav/src/types.ts

@@ -145,6 +145,17 @@ type OrgPaymentLabel = typeof OrgPaymentLabel[keyof typeof OrgPaymentLabel];
 
 export { OrgPaymentLabel };
 
+const ProjectStatus = {
+  Active: 'ACTIVE',
+  Dead: 'DEAD',
+  Closing: 'CLOSING',
+  Closed: 'CLOSED',
+};
+
+type ProjectStatus = typeof ProjectStatus[keyof typeof ProjectStatus];
+
+export { ProjectStatus };
+
 export interface AccountInterface {
   email: string;
   firstName: string;
@@ -163,6 +174,7 @@ export interface ProjectInterface {
 export interface CurrentProjectInterface extends ProjectInterface {
   alertsOpen: number;
   chartsActivated: boolean;
+  status?: ProjectStatus;
 }
 
 export interface OrganizationInterface {