refactor: decommission menu visibilities evaluation in the navbar (#3889)

* refactor: remove menu visibility evaluations

* refactor: further changes and generated types

* chore: changeset

Author: kark

.changeset/tall-colts-strive.md

@@ -0,0 +1,7 @@
+---
+'@commercetools-frontend/application-shell-connectors': minor
+'@commercetools-frontend/application-shell': minor
+'@commercetools-frontend/permissions': minor
+---
+
+Decommission menu visibilities evaluation in the navbar

packages/application-shell-connectors/src/components/application-context/index.ts

@@ -3,7 +3,6 @@ import type {
   TApplicationContext as ApplicationContext,
 } from './application-context';
 import type {
-  TMenuVisibilities as NormalizedMenuVisibilities,
   TPermissions as NormalizedPermissions,
   TActionRights as NormalizedActionRights,
   TDataFences as NormalizedDataFences,
@@ -14,7 +13,6 @@ export type TProviderProps<AdditionalEnvironmentProperties extends {}> =
 export type TApplicationContext<AdditionalEnvironmentProperties extends {}> =
   ApplicationContext<AdditionalEnvironmentProperties>;
 
-export type TNormalizedMenuVisibilities = NormalizedMenuVisibilities;
 export type TNormalizedPermissions = NormalizedPermissions;
 export type TNormalizedActionRights = NormalizedActionRights;
 export type TNormalizedDataFences = NormalizedDataFences;
@@ -29,6 +27,5 @@ export {
 export {
   normalizeAllAppliedActionRights,
   normalizeAllAppliedDataFences,
-  normalizeAllAppliedMenuVisibilities,
   normalizeAllAppliedPermissions,
 } from './normalizers';

packages/application-shell-connectors/src/components/application-context/normalizers.spec.ts

@@ -1,13 +1,11 @@
 import type {
   TAppliedPermission,
   TAppliedActionRight,
-  TAppliedMenuVisibilities,
   TStoreDataFence,
 } from '../../types/generated/mc';
 
 import {
   normalizeAllAppliedActionRights,
-  normalizeAllAppliedMenuVisibilities,
   normalizeAllAppliedPermissions,
   normalizeAllAppliedDataFences,
 } from './normalizers';
@@ -43,23 +41,6 @@ describe('normalizeAllAppliedActionRights', () => {
     );
   });
 });
-describe('normalizeAllAppliedMenuVisibilities', () => {
-  const allAppliedMenuVisibilities: TAppliedMenuVisibilities[] = [
-    {
-      name: 'hideDashboard',
-      value: true,
-    },
-  ];
-  it('should normalize menu visibilities', () => {
-    expect(
-      normalizeAllAppliedMenuVisibilities(allAppliedMenuVisibilities)
-    ).toEqual(
-      expect.objectContaining({
-        hideDashboard: true,
-      })
-    );
-  });
-});
 describe('normalizeAllAppliedDataFences', () => {
   describe('with store types', () => {
     const allAppliedDataFences: TStoreDataFence[] = [

packages/application-shell-connectors/src/components/application-context/normalizers.ts

@@ -1,15 +1,9 @@
 import type {
   TAppliedPermission,
   TAppliedActionRight,
-  TAppliedMenuVisibilities,
   TStoreDataFence,
 } from '../../types/generated/mc';
 
-// Menu visibilities
-export type TMenuVisibilities = {
-  [key: string]: boolean;
-};
-
 // Permissions
 export type TPermissions = {
   [key: string]: boolean;
@@ -77,24 +71,6 @@ export const normalizeAllAppliedPermissions = (
   );
 };
 
-export const normalizeAllAppliedMenuVisibilities = (
-  allAppliedMenuVisibilities?: TAppliedMenuVisibilities[]
-): TMenuVisibilities | null => {
-  if (!allAppliedMenuVisibilities || allAppliedMenuVisibilities.length === 0) {
-    return null;
-  }
-  return allAppliedMenuVisibilities.reduce<TMenuVisibilities>(
-    (transformedAllApplied, allApplied) => {
-      if (!allApplied) return transformedAllApplied;
-      return {
-        ...transformedAllApplied,
-        [allApplied.name]: allApplied.value,
-      };
-    },
-    {}
-  );
-};
-
 export const normalizeAllAppliedActionRights = (
   allAppliedActionRights?: TAppliedActionRight[]
 ): TActionRights | null => {

packages/application-shell-connectors/src/export-types.ts

@@ -1,7 +1,6 @@
 import type {
   TProviderProps as ProviderProps,
   TApplicationContext as ApplicationContext,
-  TNormalizedMenuVisibilities as NormalizedMenuVisibilities,
   TNormalizedPermissions as NormalizedPermissions,
   TNormalizedActionRights as NormalizedActionRights,
   TNormalizedDataFences as NormalizedDataFences,
@@ -26,7 +25,6 @@ export type TProviderProps<AdditionalEnvironmentProperties extends {}> =
 export type TApplicationContext<AdditionalEnvironmentProperties extends {}> =
   ApplicationContext<AdditionalEnvironmentProperties>;
 
-export type TNormalizedMenuVisibilities = NormalizedMenuVisibilities;
 export type TNormalizedPermissions = NormalizedPermissions;
 export type TNormalizedActionRights = NormalizedActionRights;
 export type TNormalizedDataFences = NormalizedDataFences;

packages/application-shell-connectors/src/index.ts

@@ -9,7 +9,6 @@ export {
   useApplicationContext,
   normalizeAllAppliedActionRights,
   normalizeAllAppliedDataFences,
-  normalizeAllAppliedMenuVisibilities,
   normalizeAllAppliedPermissions,
 } from './components/application-context';
 

packages/application-shell-connectors/src/types/generated/mc.ts

@@ -1391,7 +1391,7 @@ describe('navbar menu links interactions', () => {
     });
   });
 });
-describe('when navbar menu items are hidden', () => {
+describe('when navbar menu items with menuVisibility are configured', () => {
   beforeEach(() => {
     mockServer.resetHandlers();
     mockServer.use(
@@ -1412,7 +1412,7 @@ describe('when navbar menu items are hidden', () => {
       })
     );
   });
-  it('should not render hidden main menu items', async () => {
+  it('should render menu items even if menuVisibility data exists (menuVisibilities are no longer evaluated)', async () => {
     const menuLinks = createTestNavBarMenuLinksConfig({
       menuVisibility: 'hideFoo',
       submenuLinks: [],
@@ -1429,19 +1429,13 @@ describe('when navbar menu items are hidden', () => {
       }
     );
     await waitForLeftNavigationToBeLoaded();
-    // Get the nav container, to narrow down the search area
     const container = await findByLeftNavigation();
-    const navbarRendered = within(container);
 
     const applicationLocale = 'en';
     const mainMenuLabel = menuLinks.labelAllLocales.find(
       (localized) => localized.locale === applicationLocale
     );
-    await waitFor(() => {
-      expect(
-        navbarRendered.queryByText(mainMenuLabel.value)
-      ).not.toBeInTheDocument();
-    });
+    await within(container).findByText(mainMenuLabel.value);
   });
 });
 

packages/application-shell/src/components/application-shell/application-shell.spec.js

@@ -44,10 +44,6 @@ query FetchProject($projectKey: String) {
         name
         value
       }
-      allAppliedMenuVisibilities {
-        name
-        value
-      }
       allAppliedDataFences {
         ... on StoreDataFence {
           type

packages/application-shell/src/components/fetch-project/fetch-project.mc.graphql

@@ -16,7 +16,6 @@ import classnames from 'classnames';
 import { useIntl } from 'react-intl';
 import { NavLink } from 'react-router-dom';
 import type {
-  TNormalizedMenuVisibilities,
   TNormalizedPermissions,
   TNormalizedActionRights,
   TNormalizedDataFences,
@@ -342,22 +341,9 @@ const MenuItemLink = ({ exactMatch = false, ...props }: MenuItemLinkProps) => {
 };
 MenuItemLink.displayName = 'MenuItemLink';
 
-const isEveryMenuVisibilitySetToHidden = (
-  menuVisibilities?: TNormalizedMenuVisibilities | null,
-  namesOfMenuVisibilities?: string[]
-) =>
-  Array.isArray(namesOfMenuVisibilities) &&
-  namesOfMenuVisibilities.length > 0 &&
-  namesOfMenuVisibilities.every(
-    (nameOfMenuVisibility) =>
-      menuVisibilities && menuVisibilities[nameOfMenuVisibility] === true
-  );
-
 type RestrictedMenuItemProps = {
   featureToggle?: string;
-  namesOfMenuVisibilities?: string[];
   projectPermissions: TProjectPermissions;
-  menuVisibilities: TNormalizedMenuVisibilities | null;
   keyOfMenuItem: string;
   permissions: string[];
   actionRights?: TActionRight[];
@@ -378,16 +364,7 @@ const RestrictedMenuItem = ({
   permissions = [],
   ...props
 }: RestrictedMenuItemProps) => {
-  // NOTE: Custom application are activated/deactivated while their
-  // visibility is not controlled via a visibiility overwrite.
   const flagVariation = useFlagVariation(props.featureToggle);
-  if (
-    isEveryMenuVisibilitySetToHidden(
-      props.menuVisibilities,
-      props.namesOfMenuVisibilities
-    )
-  )
-    return null;
 
   const permissionsWrapper =
     (Array.isArray(permissions) && permissions.length > 0) ||