Ds: Add settings sub nav (#10703)

packages/core/admin/admin/src/pages/SettingsPage/components/SettingsNav/index.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import {
+  SubNav,
+  SubNavHeader,
+  SubNavSection,
+  SubNavSections,
+  SubNavLink,
+} from '@strapi/parts/SubNav';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { getSectionsToDisplay } from '../../utils';
+
+const SettingsNav = ({ menu }) => {
+  const { formatMessage } = useIntl();
+
+  const filteredMenu = getSectionsToDisplay(menu);
+
+  const sections = filteredMenu.map(section => {
+    return {
+      ...section,
+      title: section.intlLabel,
+      links: section.links.map(link => {
+        return {
+          ...link,
+          title: link.intlLabel,
+          name: link.id,
+        };
+      }),
+    };
+  });
+
+  const label = formatMessage({ id: 'app.components.LeftMenuLinkContainer.settings' });
+
+  return (
+    <SubNav ariaLabel={label}>
+      <SubNavHeader label={label} />
+      <SubNavSections>
+        {sections.map(section => (
+          <SubNavSection key={section.id} label={formatMessage(section.intlLabel)}>
+            {section.links.map(link => (
+              <SubNavLink to={link.to} key={link.id}>
+                {formatMessage(link.intlLabel)}
+              </SubNavLink>
+            ))}
+          </SubNavSection>
+        ))}
+      </SubNavSections>
+    </SubNav>
+  );
+};
+
+SettingsNav.propTypes = {
+  menu: PropTypes.array.isRequired,
+};
+
+export default SettingsNav;

packages/core/admin/admin/src/pages/SettingsPage/index.js

@@ -10,13 +10,9 @@
 // IF THE DOC IS NOT UPDATED THE PULL REQUEST WILL NOT BE MERGED
 
 import React, { memo, useMemo, useState } from 'react';
-import {
-  BackHeader,
-  LeftMenuList,
-  LoadingIndicatorPage,
-  useStrapiApp,
-} from '@strapi/helper-plugin';
-import { Switch, Redirect, Route, useParams, useHistory } from 'react-router-dom';
+import { LoadingIndicatorPage, useStrapiApp } from '@strapi/helper-plugin';
+import { Switch, Redirect, Route, useParams } from 'react-router-dom';
+import { Layout } from '@strapi/parts/Layout';
 import { useIntl } from 'react-intl';
 import HeaderSearch from '../../components/HeaderSearch';
 import PageTitle from '../../components/PageTitle';
@@ -24,13 +20,11 @@ import SettingsSearchHeaderProvider from '../../components/SettingsHeaderSearchC
 import { useSettingsMenu } from '../../hooks';
 import { createRoute, makeUniqueRoutes } from '../../utils';
 import ApplicationInfosPage from '../ApplicationInfosPage';
-import { ApplicationDetailLink, MenuWrapper, StyledLeftMenu, Wrapper } from './components';
-
-import { createSectionsRoutes, getSectionsToDisplay, routes } from './utils';
+import { createSectionsRoutes, routes } from './utils';
+import SettingsNav from './components/SettingsNav';
 
 function SettingsPage() {
   const { settingId } = useParams();
-  const { goBack } = useHistory();
   const { settings } = useStrapiApp();
   const { formatMessage } = useIntl();
   // TODO
@@ -47,24 +41,6 @@ function SettingsPage() {
 
   const pluginsRoutes = useMemo(() => createSectionsRoutes(settings), [settings]);
 
-  // Only display accessible sections
-  const filteredMenu = useMemo(() => getSectionsToDisplay(menu), [menu]);
-
-  // Adapter until we refactor the helper-plugin/leftMenu
-  const menuAdapter = filteredMenu.map(section => {
-    return {
-      ...section,
-      title: section.intlLabel,
-      links: section.links.map(link => {
-        return {
-          ...link,
-          title: link.intlLabel,
-          name: link.id,
-        };
-      }),
-    };
-  });
-
   const toggleHeaderSearch = label =>
     setShowHeaderSearchState(prev => {
       if (prev.show) {
@@ -91,32 +67,17 @@ function SettingsPage() {
 
   return (
     <SettingsSearchHeaderProvider value={{ toggleHeaderSearch }}>
-      <PageTitle title={settingTitle} />
-      <Wrapper>
-        <BackHeader onClick={goBack} />
+      <Layout sideNav={<SettingsNav menu={menu} />}>
+        <PageTitle title={settingTitle} />
 
-        <div className="row">
-          <div className="col-md-3">
-            <MenuWrapper>
-              <ApplicationDetailLink />
-              <StyledLeftMenu>
-                {menuAdapter.map(item => {
-                  return <LeftMenuList {...item} key={item.id} />;
-                })}
-              </StyledLeftMenu>
-            </MenuWrapper>
-          </div>
+        <Switch>
+          <Route path="/settings/application-infos" component={ApplicationInfosPage} exact />
+          {adminRoutes}
+          {pluginsRoutes}
+        </Switch>
 
-          <div className="col-md-9">
-            <Switch>
-              <Route path="/settings/application-infos" component={ApplicationInfosPage} exact />
-              {adminRoutes}
-              {pluginsRoutes}
-            </Switch>
-          </div>
-        </div>
         {headerSearchState.show && <HeaderSearch label={headerSearchState.label} />}
-      </Wrapper>
+      </Layout>
     </SettingsSearchHeaderProvider>
   );
 }

packages/core/admin/package.json

@@ -41,8 +41,8 @@
     "@strapi/babel-plugin-switch-ee-ce": "1.0.0",
     "@strapi/helper-plugin": "3.6.6",
     "@strapi/utils": "3.6.6",
-    "@strapi/icons": "0.0.1-alpha.4",
-    "@strapi/parts": "0.0.1-alpha.4",
+    "@strapi/icons": "0.0.1-alpha.5",
+    "@strapi/parts": "0.0.1-alpha.5",
     "axios": "^0.21.1",
     "babel-loader": "8.2.2",
     "babel-plugin-styled-components": "1.12.0",

yarn.lock

@@ -3490,15 +3490,15 @@
     tslib "^2.0.0"
     upath "2.0.1"
 
-"@strapi/icons@0.0.1-alpha.4":
-  version "0.0.1-alpha.4"
-  resolved "https://registry.yarnpkg.com/@strapi/icons/-/icons-0.0.1-alpha.4.tgz#f3e66f05b8aa0ae1615380e68cc0125fe405777e"
-  integrity sha512-Lnfam0vCD2PWNdvnyG9ZHtvTKgDdSc7AvqzqlxC3BlbvrNBMov3XtvCZFfW1TgXZ4iwGbCmuN+JDmiFtiAWygA==
+"@strapi/icons@0.0.1-alpha.5":
+  version "0.0.1-alpha.5"
+  resolved "https://registry.yarnpkg.com/@strapi/icons/-/icons-0.0.1-alpha.5.tgz#04f2d62a516e8da6b14f0b1bacc040b10c5f44db"
+  integrity sha512-PCTQXIkBxfV/qWQZPrbABEdkLSYO7w4+RWVHA7eNlSkcKPP/b5Q/ZEW+56GZ/o9DLexivsGdZaC/aVUzK7G7IA==
 
-"@strapi/parts@0.0.1-alpha.4":
-  version "0.0.1-alpha.4"
-  resolved "https://registry.yarnpkg.com/@strapi/parts/-/parts-0.0.1-alpha.4.tgz#ffeeb856d2e4b0b6f5ae84f28e071e73e1c3d07e"
-  integrity sha512-1LBipdmZiCEdO6RC+YSsVEkHV3XxStTFxTKPz3bsorb5Rt52FchOB2CkHTjIK4+WmNvHdDJh1b98ZC0M0gJCEQ==
+"@strapi/parts@0.0.1-alpha.5":
+  version "0.0.1-alpha.5"
+  resolved "https://registry.yarnpkg.com/@strapi/parts/-/parts-0.0.1-alpha.5.tgz#6abddbcf4ee58da506065aa49f736b0b51e9cbfa"
+  integrity sha512-Vb55oaD0G9N9OzsVM4SB3WG30w4Mo3oDITq9lCvwQT9uR0xKuN+GwYK1XdlBTItLcjnJOpRJ3vSoI7sgI1L8rQ==
   dependencies:
     compute-scroll-into-view "^1.0.17"
     prop-types "^15.7.2"