chore: update settings sidebar links ui

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

@@ -4,6 +4,7 @@ import { useIntl } from 'react-intl';
 import { useLocation } from 'react-router-dom';
 import { styled } from 'styled-components';
 
+import { useLicenseLimits } from '../../../../../ee/admin/src/hooks/useLicenseLimits';
 import { SubNav } from '../../../components/SubNav';
 import { useTracking } from '../../../features/Tracking';
 import { SettingsMenu } from '../../../hooks/useSettingsMenu';
@@ -22,6 +23,17 @@ const SettingsNav = ({ menu }: SettingsNavProps) => {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
   const { pathname } = useLocation();
+  const { license } = useLicenseLimits();
+
+  const availableFeatureNames = license?.features.map((feature) => feature.name);
+
+  const linksIdsToLicenseFeaturesNames = {
+    'content-releases': 'cms-content-releases',
+    'review-workflows': 'review-workflows',
+    sso: 'sso',
+    auditLogs: 'audit-logs',
+    'auditLogs-purchase-page': 'audit-logs',
+  };
 
   const filteredMenu = menu.filter(
     (section) => !section.links.every((link) => link.isDisplayed === false)
@@ -67,7 +79,19 @@ const SettingsNav = ({ menu }: SettingsNavProps) => {
                   endAction={
                     <>
                       {link?.licenseOnly && (
-                        <Lightning fill="primary600" width="1.5rem" height="1.5rem" />
+                        <Lightning
+                          fill={
+                            (availableFeatureNames || []).includes(
+                              linksIdsToLicenseFeaturesNames[
+                                link.id as keyof typeof linksIdsToLicenseFeaturesNames
+                              ] as keyof typeof availableFeatureNames
+                            )
+                              ? 'primary600'
+                              : 'neutral300'
+                          }
+                          width="1.5rem"
+                          height="1.5rem"
+                        />
                       )}
                       {link?.hasNotification && (
                         <StyledBadge

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

@@ -2,6 +2,14 @@ import { render } from '@tests/utils';
 
 import { SettingsNav, SettingsNavProps } from '../SettingsNav';
 
+jest.mock('../../../../../../ee/admin/src/hooks/useLicenseLimits', () => ({
+  useLicenseLimits: jest.fn(() => ({
+    license: {
+      features: [],
+    },
+  })),
+}));
+
 const menu = [
   {
     id: 'global',

packages/core/admin/admin/src/pages/Settings/tests/SettingsPage.test.tsx

@@ -8,6 +8,14 @@ import { Layout } from '../Layout';
 
 jest.mock('../../../hooks/useSettingsMenu');
 
+jest.mock('../../../../../ee/admin/src/hooks/useLicenseLimits', () => ({
+  useLicenseLimits: jest.fn(() => ({
+    license: {
+      features: [],
+    },
+  })),
+}));
+
 const LocationDisplay = () => {
   const location = useLocation();
 

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

@@ -72,6 +72,7 @@ export const SETTINGS_LINKS_EE = (): SettingsMenu => ({
             intlLabel: { id: 'Settings.sso.title', defaultMessage: 'Single Sign-On' },
             to: '/settings/single-sign-on',
             id: 'sso',
+            licenseOnly: true,
           },
         ]
       : []),
@@ -84,6 +85,7 @@ export const SETTINGS_LINKS_EE = (): SettingsMenu => ({
             intlLabel: { id: 'global.auditLogs', defaultMessage: 'Audit Logs' },
             to: '/settings/audit-logs?pageSize=50&page=1&sort=date:DESC',
             id: 'auditLogs',
+            licenseOnly: true,
           },
         ]
       : []),

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

@@ -67,6 +67,7 @@ const admin: Plugin.Config.AdminInput = {
           id: `${pluginId}.plugin.name`,
           defaultMessage: 'Releases',
         },
+        licenseOnly: true,
         permissions: [],
         async Component() {
           const { ProtectedReleasesSettingsPage } = await import('./pages/ReleasesSettingsPage');

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

@@ -30,6 +30,7 @@ const admin: Plugin.Config.AdminInput = {
           id: `${PLUGIN_ID}.plugin.name`,
           defaultMessage: 'Review Workflows',
         },
+        licenseOnly: true,
         permissions: [],
         async Component() {
           const { Router } = await import('./router');