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

* feat: replace the lock icon with the new lightning icon

* feat: replace toBuy with licenseOnly

docs/docs/docs/01-core/admin/01-ee/00-intro.md

@@ -34,8 +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,
+            licenseOnly: true,
           },
         ]
       : []),

packages/core/admin/admin/src/StrapiApp.tsx

@@ -63,7 +63,7 @@ interface MenuItem {
   notificationsCount?: number;
   Component: React.LazyExoticComponent<React.ComponentType>;
   exact?: boolean;
-  lockIcon?: boolean;
+  licenseOnly?: boolean;
   position?: number;
 }
 

packages/core/admin/admin/src/components/LeftMenu.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { Divider, Flex, FlexComponent, useCollator } from '@strapi/design-system';
-import { Lock } from '@strapi/icons';
+import { Lightning } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { useLocation } from 'react-router-dom';
 import { styled } from 'styled-components';
@@ -81,7 +81,9 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }: LeftMenuProps) =
         {listLinks.length > 0
           ? listLinks.map((link) => {
               const LinkIcon = link.icon;
-              const badgeContentLock = link?.lockIcon ? <Lock /> : undefined;
+              const badgeContentLock = link?.licenseOnly ? (
+                <Lightning fill="warning500" />
+              ) : undefined;
 
               const badgeContentNumeric =
                 link.notificationsCount && link.notificationsCount > 0

packages/core/admin/admin/src/constants.ts

@@ -124,8 +124,8 @@ export const HOOKS = {
 };
 
 export interface SettingsMenuLink
-  extends Omit<StrapiAppSettingLink, 'Component' | 'permissions' | 'lockIcon'> {
-  lockIcon?: boolean; // TODO: to replace with another name in v5
+  extends Omit<StrapiAppSettingLink, 'Component' | 'permissions' | 'licenseOnly'> {
+  licenseOnly?: boolean;
 }
 
 export type SettingsMenu = {
@@ -164,7 +164,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, // TODO: to replace with another name in v5
+            licenseOnly: true,
           },
         ]
       : []),
@@ -189,7 +189,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, // TODO: to replace with another name in v5
+            licenseOnly: true,
           },
         ]
       : []),

packages/core/admin/admin/src/hooks/useSettingsMenu.ts

@@ -30,7 +30,7 @@ interface SettingsMenuLinkWithPermissions extends SettingsMenuLink {
 }
 
 interface StrapiAppSettingsLink extends IStrapiAppSettingLink {
-  lockIcon?: never; // TODO: to replace with another name in v5
+  licenseOnly?: never;
   hasNotification?: never;
 }
 

packages/core/admin/admin/src/pages/Settings/components/SettingsNav.tsx

@@ -5,7 +5,7 @@ import {
   SubNavSection,
   SubNavSections,
 } from '@strapi/design-system';
-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';
@@ -13,11 +13,15 @@ import { styled } from 'styled-components';
 import { useTracking } from '../../../features/Tracking';
 import { SettingsMenu } from '../../../hooks/useSettingsMenu';
 
-const CustomIcon = styled(Lock)`
+const CustomIcon = styled(Lightning)`
   right: 15px;
   position: absolute;
   bottom: 50%;
   transform: translateY(50%);
+
+  path {
+    fill: ${({ theme }) => theme.colors.warning500};
+  }
 `;
 
 const Link = styled(SubNavLink)`
@@ -79,7 +83,7 @@ const SettingsNav = ({ menu }: SettingsNavProps) => {
                   position="relative"
                 >
                   {formatMessage(link.intlLabel)}
-                  {link?.lockIcon && <CustomIcon width="1.5rem" height="1.5rem" />}
+                  {link?.licenseOnly && <CustomIcon width="1.5rem" height="1.5rem" />}
                 </Link>
               );
             })}

packages/core/content-releases/admin/src/index.ts

@@ -62,7 +62,7 @@ const admin: Plugin.Config.AdminInput = {
           const { PurchaseContentReleases } = await import('./pages/PurchaseContentReleases');
           return { default: PurchaseContentReleases };
         },
-        lockIcon: true,
+        licenseOnly: true,
         position: 2,
       });
     }

packages/core/review-workflows/admin/src/index.ts

@@ -41,12 +41,12 @@ const admin: Plugin.Config.AdminInput = {
           id: `${PLUGIN_ID}.plugin.name`,
           defaultMessage: 'Review Workflows',
         },
+        licenseOnly: true,
         permissions: [],
         async Component() {
           const { PurchaseReviewWorkflows } = await import('./routes/purchase-review-workflows');
           return { default: PurchaseReviewWorkflows };
         },
-        lockIcon: true,
       });
     }
   },