feat(admin): add promoting EE features in CE projects by default (#18179

) * Add: promoting EE features in CE projects by default * Add: pages * Update: first review modifications * Update: integrate locked features pages * Update: rename pages + update links to the website * Update: append config to default files * Update: implement flags logic * Update: implement promoteEnterpriseFeatures flag * Update: revamp variable + add doc * Update: add documentation * Delete: ContentTypes.d.ts file
strapi · Oct 23, 2023 · dfc4d17 · dfc4d17
1 parent cfd8d17
commit dfc4d17
Show file tree

Hide file tree

Showing 16 changed files with 289 additions and 3 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
@@ -14,3 +14,29 @@ import { useCurrentSidebarCategory } from '@docusaurus/theme-common';
 
 <DocCardList items={useCurrentSidebarCategory().items} />
 ```
+
+# Promoting EE features in CE projects
+
+Everytime a new EE feature is added in Strapi, in the settings menu, you should add the following condition to ensure that the feature promotes itself in CE:
+
+`packages/core/admin/admin/src/hooks/useSettingsMenu/index.js`
+
+```js
+...
+
+ ...(!window.strapi.features.isEnabled(window.strapi.features.NEW_EE_FEATURE) &&
+    window.strapi?.flags?.promoteEE
+      ? [
+          {
+            intlLabel: {
+              id: 'Settings.new-ee-feature.page.title',
+              defaultMessage: 'NEW EE FEATURE',
+            },
+            to: '/settings/purchase-new-ee-feature',
+            id: 'new-ee-feature',
+            lockIcon: true,
+          },
+        ]
+      : []),
+...
+```
diff --git a/examples/getstarted/config/admin.js b/examples/getstarted/config/admin.js
@@ -16,5 +16,6 @@ module.exports = ({ env }) => ({
   },
   flags: {
     nps: env.bool('FLAG_NPS', true),
+    promoteEE: env.bool('FLAG_PROMOTE_EE', true),
   },
 });
diff --git a/examples/kitchensink-ts/config/admin.ts b/examples/kitchensink-ts/config/admin.ts
@@ -12,5 +12,6 @@ export default ({ env }) => ({
   },
   flags: {
     nps: env.bool('FLAG_NPS', true),
+    promoteEE: env.bool('FLAG_PROMOTE_EE', true),
   },
 });
diff --git a/examples/kitchensink/config/admin.js b/examples/kitchensink/config/admin.js
@@ -13,5 +13,6 @@ module.exports = ({ env }) => ({
   },
   flags: {
     nps: env.bool('FLAG_NPS', true),
+    promoteEE: env.bool('FLAG_PROMOTE_EE', true),
   },
 });
diff --git a/packages/admin-test-utils/custom.d.ts b/packages/admin-test-utils/custom.d.ts
@@ -1,4 +1,4 @@
-export {};
+export { };
 
 declare global {
   interface Window {
@@ -12,8 +12,9 @@ declare global {
       projectType: string;
       telemetryDisabled: boolean;
       flags: {
-        nps: boolean;
-      };
+        nps: boolean,
+        promoteEE: boolean,
+      }
     };
   }
 }
diff --git a/packages/admin-test-utils/src/environment.ts b/packages/admin-test-utils/src/environment.ts
@@ -72,6 +72,7 @@ window.strapi = {
   telemetryDisabled: true,
   flags: {
     nps: true,
+    promoteEE: true,
   },
 };
 

diff --git a/packages/core/admin/admin/src/hooks/useSettingsMenu/constants.js b/packages/core/admin/admin/src/hooks/useSettingsMenu/constants.js
@@ -21,6 +21,34 @@ export const LINKS_CE = {
       to: '/settings/transfer-tokens?sort=name:ASC',
       id: 'transfer-tokens',
     },
+    // If the Enterprise feature is not enabled and if the config doesn't disable it, we promote the Enterprise feature by displaying them in the settings menu.
+    // Disable this by adding "promoteEE: false" to your `./config/admin.js` file
+    ...(!window.strapi.features.isEnabled(window.strapi.features.SSO) &&
+    window.strapi?.flags?.promoteEE
+      ? [
+          {
+            intlLabel: { id: 'Settings.sso.title', defaultMessage: 'Single Sign-On' },
+            to: '/settings/purchase-single-sign-on',
+            id: 'sso',
+            lockIcon: true,
+          },
+        ]
+      : []),
+
+    ...(!window.strapi.features.isEnabled(window.strapi.features.REVIEW_WORKFLOWS) &&
+    window.strapi?.flags?.promoteEE
+      ? [
+          {
+            intlLabel: {
+              id: 'Settings.review-workflows.page.title',
+              defaultMessage: 'Review Workflows',
+            },
+            to: '/settings/purchase-review-workflows',
+            id: 'review-workflows',
+            lockIcon: true,
+          },
+        ]
+      : []),
   ],
 
   admin: [
@@ -35,5 +63,16 @@ export const LINKS_CE = {
       to: '/settings/users?pageSize=10&page=1&sort=firstname',
       id: 'users',
     },
+    ...(!window.strapi.features.isEnabled(window.strapi.features.AUDIT_LOGS) &&
+    window.strapi?.flags?.promoteEE
+      ? [
+          {
+            intlLabel: { id: 'global.auditLogs', defaultMessage: 'Audit Logs' },
+            to: '/settings/purchase-audit-logs',
+            id: 'auditLogs',
+            lockIcon: true,
+          },
+        ]
+      : []),
   ],
 };
diff --git a/packages/core/admin/admin/src/index.js b/packages/core/admin/admin/src/index.js
@@ -24,6 +24,7 @@ window.strapi = {
   projectType: 'Community',
   flags: {
     nps: false,
+    promoteEE: true,
   },
 };
 

diff --git a/packages/core/admin/admin/src/pages/SettingsPage/components/SettingsNav/index.js b/packages/core/admin/admin/src/pages/SettingsPage/components/SettingsNav/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { Icon } from '@strapi/design-system';
 import {
   SubNav,
   SubNavHeader,
@@ -8,9 +9,21 @@ import {
   SubNavSections,
 } from '@strapi/design-system/v2';
 import { useTracking } from '@strapi/helper-plugin';
+import { Lock } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { NavLink, useLocation } from 'react-router-dom';
+import styled from 'styled-components';
+
+/**
+ * TODO: refactor the SubNav entirely, we shouldn't have
+ * to do this hack to work a lock at the end. It's a bit hacky.
+ */
+
+const CustomIcon = styled(Icon)`
+  right: 15px;
+  position: absolute;
+`;
 
 const SettingsNav = ({ menu }) => {
   const { formatMessage } = useIntl();
@@ -60,6 +73,13 @@ const SettingsNav = ({ menu }) => {
                   key={link.id}
                 >
                   {formatMessage(link.intlLabel)}
+                  {link?.lockIcon && (
+                    <CustomIcon
+                      width={`${15 / 16}rem`}
+                      height={`${15 / 16}rem`}
+                      as={Lock}
+                    />
+                  )}
                 </SubNavLink>
               );
             })}

diff --git a/packages/core/admin/admin/src/pages/SettingsPage/constants.js b/packages/core/admin/admin/src/pages/SettingsPage/constants.js
@@ -164,4 +164,37 @@ export const ROUTES_CE = [
     to: '/settings/transfer-tokens/:id',
     exact: true,
   },
+  {
+    async Component() {
+      const component = await import(
+        /* webpackChunkName: "audit-logs-sales-page" */ './pages/AuditLogs/SalesPage'
+      );
+
+      return component;
+    },
+    to: '/settings/purchase-audit-logs',
+    exact: true,
+  },
+  {
+    async Component() {
+      const component = await import(
+        /* webpackChunkName: "review-workflows-sales-page" */ './pages/ReviewWorkflows/SalesPage'
+      );
+
+      return component;
+    },
+    to: '/settings/purchase-review-workflows',
+    exact: true,
+  },
+  {
+    async Component() {
+      const component = await import(
+        /* webpackChunkName: "sso-sales-page" */ './pages/SingleSignOn/SalesPage'
+      );
+
+      return component;
+    },
+    to: '/settings/purchase-single-sign-on',
+    exact: true,
+  },
 ];
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/SalesPage.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/AuditLogs/SalesPage.js
@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { Box, Layout, Main, HeaderLayout, EmptyStateLayout } from '@strapi/design-system';
+import { LinkButton } from '@strapi/design-system/v2';
+import { ExternalLink, EmptyPermissions } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+
+const SalesPage = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Layout>
+      <Main>
+        <HeaderLayout
+          title={formatMessage({ id: 'global.auditLogs', defaultMessage: 'Audit Logs' })}
+          subtitle={formatMessage({
+            id: 'Settings.permissions.auditLogs.listview.header.subtitle',
+            defaultMessage: 'Logs of all the activities that happened in your environment',
+          })}
+        />
+        <Box paddingLeft={10} paddingRight={10}>
+          <EmptyStateLayout
+            icon={<EmptyPermissions width="10rem" />}
+            content={formatMessage({
+              id: 'Settings.permissions.auditLogs.not-available',
+              defaultMessage:
+                'Audit Logs is only available as part of the Enterprise Edition. Upgrade to get a searchable and filterable display of all activities.',
+            })}
+            action={
+              <LinkButton
+                variant="default"
+                endIcon={<ExternalLink />}
+                href="https://strp.cc/45mbAdF"
+                isExternal
+                target="_blank"
+              >
+                {formatMessage({
+                  id: 'global.learn-more',
+                  defaultMessage: 'Learn more',
+                })}
+              </LinkButton>
+            }
+          />
+        </Box>
+      </Main>
+    </Layout>
+  );
+};
+
+export default SalesPage;
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ReviewWorkflows/SalesPage.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ReviewWorkflows/SalesPage.js
@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { Box, Layout, Main, HeaderLayout, EmptyStateLayout } from '@strapi/design-system';
+import { LinkButton } from '@strapi/design-system/v2';
+import { ExternalLink, EmptyPermissions } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+
+const SalesPage = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Layout>
+      <Main>
+        <HeaderLayout
+          title={formatMessage({
+            id: 'Settings.review-workflows.list.page.title',
+            defaultMessage: 'Review Workflows',
+          })}
+          subtitle={formatMessage({
+            id: 'Settings.review-workflows.list.page.subtitle',
+            defaultMessage: 'Manage your content review process',
+          })}
+        />
+        <Box paddingLeft={10} paddingRight={10}>
+          <EmptyStateLayout
+            icon={<EmptyPermissions width="10rem" />}
+            content={formatMessage({
+              id: 'Settings.review-workflows.not-available',
+              defaultMessage:
+                'Review Workflows is only available as part of the Enterprise Edition. Upgrade to create and manage workflows.',
+            })}
+            action={
+              <LinkButton
+                variant="default"
+                endIcon={<ExternalLink />}
+                href="https://strp.cc/3tdNfJqe"
+                isExternal
+                target="_blank"
+              >
+                {formatMessage({
+                  id: 'global.learn-more',
+                  defaultMessage: 'Learn more',
+                })}
+              </LinkButton>
+            }
+          />
+        </Box>
+      </Main>
+    </Layout>
+  );
+};
+
+export default SalesPage;
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/SingleSignOn/SalesPage.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/SingleSignOn/SalesPage.js
@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { Box, Layout, Main, HeaderLayout, EmptyStateLayout } from '@strapi/design-system';
+import { LinkButton } from '@strapi/design-system/v2';
+import { ExternalLink, EmptyPermissions } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+
+const SalesPage = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Layout>
+      <Main>
+        <HeaderLayout
+          title={formatMessage({
+            id: 'Settings.sso.title',
+            defaultMessage: 'Single Sign-On',
+          })}
+          subtitle={formatMessage({
+            id: 'Settings.sso.subTitle',
+            defaultMessage: 'Configure the settings for the Single Sign-On feature.',
+          })}
+        />
+        <Box paddingLeft={10} paddingRight={10}>
+          <EmptyStateLayout
+            icon={<EmptyPermissions width="10rem" />}
+            content={formatMessage({
+              id: 'Settings.sso.not-available',
+              defaultMessage:
+                'SSO is only available as part of the Enterprise Edition. Upgrade to configure additional sign-in & sign-up methods for your administration panel.',
+            })}
+            action={
+              <LinkButton
+                variant="default"
+                endIcon={<ExternalLink />}
+                href="https://strp.cc/46Fk1BA"
+                isExternal
+                target="_blank"
+              >
+                {formatMessage({
+                  id: 'global.learn-more',
+                  defaultMessage: 'Learn more',
+                })}
+              </LinkButton>
+            }
+          />
+        </Box>
+      </Main>
+    </Layout>
+  );
+};
+
+export default SalesPage;