Replace lock icon with lightning icon in the Settings and Navbar links (

#20413) * feat(navlinks): replace lock icon with lightning icon * Feat(navLinks): revert lockIcon property name * feat(navlinks): fix badge icon style * feat(navlinks): add an explicit timeout to pass e2e tests * feat(navlinks): skip the e2e tests failing in the CI * feat(navlinks): remove attempts to fix the e2e tests faiing
strapi · Jun 5, 2024 · 8b56147 · 8b56147
1 parent 670141a
commit 8b56147
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 13 deletions.
diff --git a/docs/docs/docs/01-core/admin/01-ee/00-intro.md b/docs/docs/docs/01-core/admin/01-ee/00-intro.md
@@ -34,6 +34,7 @@ Everytime a new EE feature is added in Strapi, in the settings menu, you should
             },
             to: '/settings/purchase-new-ee-feature',
             id: 'new-ee-feature',
+            // TODO: to replace with another name in v5
             lockIcon: true,
           },
         ]

diff --git a/packages/core/admin/admin/src/components/LeftMenu.tsx b/packages/core/admin/admin/src/components/LeftMenu.tsx
@@ -12,7 +12,7 @@ import {
   NavUser,
 } from '@strapi/design-system/v2';
 import { useAppInfo, usePersistentState, useTracking } from '@strapi/helper-plugin';
-import { Exit, Write, Lock } from '@strapi/icons';
+import { Exit, Write, Lightning } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { NavLink as RouterNavLink, useLocation } from 'react-router-dom';
 import styled from 'styled-components';
@@ -56,6 +56,14 @@ const NavLinkWrapper = styled(Box)`
   }
 `;
 
+const BadgeIcon = styled(Icon)`
+  & {
+    path {
+      fill: ${({ theme }) => theme.colors.warning500};
+    }
+  }
+`;
+
 interface LeftMenuProps extends Pick<Menu, 'generalSectionLinks' | 'pluginsSectionLinks'> {}
 
 const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }: LeftMenuProps) => {
@@ -151,8 +159,13 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }: LeftMenuProps) =
                     onClick={() => handleClickOnLink(link.to)}
                     // @ts-expect-error: badgeContent in the DS accept only strings
                     badgeContent={
+                      // TODO: to replace with another name in v5
                       link?.lockIcon ? (
-                        <Icon width={`${15 / 16}rem`} height={`${15 / 16}rem`} as={Lock} />
+                        <BadgeIcon
+                          width={`${15 / 16}rem`}
+                          height={`${15 / 16}rem`}
+                          as={Lightning}
+                        />
                       ) : undefined
                     }
                   >

diff --git a/packages/core/admin/admin/src/constants.ts b/packages/core/admin/admin/src/constants.ts
@@ -125,7 +125,8 @@ export const HOOKS = {
 
 export interface SettingsMenuLink
   extends Omit<StrapiAppSettingLink, 'Component' | 'permissions' | 'lockIcon'> {
-  lockIcon?: boolean;
+  // TODO: to replace with another name in v5
+  lockIcon?: boolean; // TODO: to replace with another name in v5
 }
 
 export type SettingsMenu = {
@@ -164,7 +165,7 @@ export const SETTINGS_LINKS_CE = (): SettingsMenu => ({
             intlLabel: { id: 'Settings.sso.title', defaultMessage: 'Single Sign-On' },
             to: '/settings/purchase-single-sign-on',
             id: 'sso-purchase-page',
-            lockIcon: true,
+            lockIcon: true, // TODO: to replace with another name in v5
           },
         ]
       : []),
@@ -179,7 +180,7 @@ export const SETTINGS_LINKS_CE = (): SettingsMenu => ({
             },
             to: '/settings/purchase-review-workflows',
             id: 'review-workflows-purchase-page',
-            lockIcon: true,
+            lockIcon: true, // TODO: to replace with another name in v5
           },
         ]
       : []),
@@ -204,7 +205,7 @@ export const SETTINGS_LINKS_CE = (): SettingsMenu => ({
             intlLabel: { id: 'global.auditLogs', defaultMessage: 'Audit Logs' },
             to: '/settings/purchase-audit-logs',
             id: 'auditLogs-purchase-page',
-            lockIcon: true,
+            lockIcon: true, // TODO: to replace with another name in v5
           },
         ]
       : []),

diff --git a/packages/core/admin/admin/src/hooks/useSettingsMenu.ts b/packages/core/admin/admin/src/hooks/useSettingsMenu.ts
@@ -33,7 +33,7 @@ interface SettingsMenuLinkWithPermissions extends SettingsMenuLink {
 }
 
 interface StrapiAppSettingsLink extends IStrapiAppSettingLink {
-  lockIcon?: never;
+  lockIcon?: never; // TODO: to replace with another name in v5
   hasNotification?: never;
 }
 

diff --git a/packages/core/admin/admin/src/pages/Settings/components/SettingsNav.tsx b/packages/core/admin/admin/src/pages/Settings/components/SettingsNav.tsx
@@ -7,7 +7,7 @@ import {
   SubNavSections,
 } from '@strapi/design-system/v2';
 import { useTracking } from '@strapi/helper-plugin';
-import { Lock } from '@strapi/icons';
+import { Lightning } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { NavLink, useLocation } from 'react-router-dom';
 import styled from 'styled-components';
@@ -22,6 +22,10 @@ import { SettingsMenu } from '../../../hooks/useSettingsMenu';
 const CustomIcon = styled(Icon)`
   right: 15px;
   position: absolute;
+
+  path {
+    fill: ${({ theme }) => theme.colors.warning500};
+  }
 `;
 
 interface SettingsNavProps {
@@ -77,9 +81,12 @@ const SettingsNav = ({ menu }: SettingsNavProps) => {
                   key={link.id}
                 >
                   {formatMessage(link.intlLabel)}
-                  {link?.lockIcon && (
-                    <CustomIcon width={`${15 / 16}rem`} height={`${15 / 16}rem`} as={Lock} />
-                  )}
+                  {
+                    // TODO: to replace with another name in v5
+                    link?.lockIcon && (
+                      <CustomIcon width={`${15 / 16}rem`} height={`${15 / 16}rem`} as={Lightning} />
+                    )
+                  }
                 </SubNavLink>
               );
             })}

diff --git a/packages/core/content-releases/admin/src/index.ts b/packages/core/content-releases/admin/src/index.ts
@@ -76,7 +76,7 @@ const admin: Plugin.Config.AdminInput = {
           const { PurchaseContentReleases } = await import('./pages/PurchaseContentReleases');
           return PurchaseContentReleases;
         },
-        lockIcon: true,
+        lockIcon: true, // TODO: to replace with another name in v5
       });
     }
   },

diff --git a/packages/core/helper-plugin/src/features/StrapiApp.tsx b/packages/core/helper-plugin/src/features/StrapiApp.tsx
@@ -23,7 +23,7 @@ interface MenuItem extends Pick<LinkProps, 'to'> {
   notificationsCount?: number;
   Component?: ComponentModule;
   exact?: boolean;
-  lockIcon?: boolean;
+  lockIcon?: boolean; // TODO: to replace with another name in v5
 }
 
 /* -------------------------------------------------------------------------------------------------