Add page title to settings

Signed-off-by: soupette <cyril.lpz@gmail.com>

packages/strapi-admin/admin/ee/containers/Roles/CreatePage/index.js

@@ -10,6 +10,7 @@ import { useHistory } from 'react-router-dom';
 import adminPermissions from '../../../../src/permissions';
 import { useFetchPermissionsLayout } from '../../../../src/hooks';
 import BaselineAlignement from '../../../../src/components/BaselineAlignement';
+import PageTitle from '../../../../src/components/SettingsPageTitle';
 import ContainerFluid from '../../../../src/components/ContainerFluid';
 import FormCard from '../../../../src/components/FormBloc';
 import { ButtonWithNumber, Permissions } from '../../../../src/components/Roles';
@@ -93,6 +94,8 @@ const CreatePage = () => {
   ];
 
   return (
+    <>
+      <PageTitle name="Roles" />
       <Formik
         initialValues={{ name: '', description: '' }}
         onSubmit={handleCreateRoleSubmit}
@@ -164,6 +167,7 @@ const CreatePage = () => {
           </form>
         )}
       </Formik>
+    </>
   );
 };
 

packages/strapi-admin/admin/ee/containers/Roles/ListPage/index.js

@@ -15,6 +15,7 @@ import {
 } from 'strapi-helper-plugin';
 import { useIntl } from 'react-intl';
 import adminPermissions from '../../../../src/permissions';
+import PageTitle from '../../../../src/components/SettingsPageTitle';
 import useSettingsHeaderSearchContext from '../../../../src/hooks/useSettingsHeaderSearchContext';
 import { EmptyRole, RoleListWrapper } from '../../../../src/components/Roles';
 import { useRolesList } from '../../../../src/hooks';
@@ -158,6 +159,7 @@ const RoleListPage = () => {
 
   return (
     <>
+      <PageTitle name="Roles" />
       <Header
         title={{
           label: formatMessage({

packages/strapi-admin/admin/src/components/SettingsPageTitle/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import PageTitle from '../PageTitle';
+
+const SettingsPageTitle = ({ name }) => {
+  const { formatMessage } = useIntl();
+  const text = formatMessage({ id: 'Settings.PageTitle' }, { name });
+
+  return <PageTitle title={text} />;
+};
+
+SettingsPageTitle.propTypes = {
+  name: PropTypes.string.isRequired,
+};
+
+export default SettingsPageTitle;

packages/strapi-admin/admin/src/containers/Roles/EditPage/index.js

@@ -6,8 +6,8 @@ import { Header } from '@buffetjs/custom';
 import { Padded } from '@buffetjs/core';
 import { Formik } from 'formik';
 import { useIntl } from 'react-intl';
-
 import BaselineAlignement from '../../../components/BaselineAlignement';
+import PageTitle from '../../../components/SettingsPageTitle';
 import ContainerFluid from '../../../components/ContainerFluid';
 import { Permissions, RoleForm } from '../../../components/Roles';
 import { useFetchRole, useFetchPermissionsLayout } from '../../../hooks';
@@ -88,6 +88,8 @@ const EditPage = () => {
   };
 
   return (
+    <>
+      <PageTitle name="Roles" />
       <Formik
         enableReinitialize
         initialValues={{
@@ -129,6 +131,7 @@ const EditPage = () => {
                   <Permissions
                     permissionsLayout={permissionsLayout}
                     rolePermissions={rolePermissions}
+                    role={role}
                     ref={permissionsRef}
                   />
                 </Padded>
@@ -137,6 +140,7 @@ const EditPage = () => {
           </form>
         )}
       </Formik>
+    </>
   );
 };
 

packages/strapi-admin/admin/src/containers/Roles/ListPage/index.js

@@ -6,6 +6,7 @@ import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import { useGlobalContext, useQuery, useUserPermissions } from 'strapi-helper-plugin';
 import adminPermissions from '../../../permissions';
+import PageTitle from '../../../components/SettingsPageTitle';
 import { EmptyRole, RoleListWrapper, RoleRow } from '../../../components/Roles';
 import { useRolesList, useSettingsHeaderSearchContext } from '../../../hooks';
 import BaselineAlignment from './BaselineAlignment';
@@ -36,6 +37,7 @@ const RoleListPage = () => {
 
   return (
     <>
+      <PageTitle name="Roles" />
       <Header
         icon
         title={{

packages/strapi-admin/admin/src/containers/SettingsPage/SettingDispatcher.js

@@ -2,10 +2,12 @@ import React, { memo } from 'react';
 import { useGlobalContext } from 'strapi-helper-plugin';
 import { get } from 'lodash';
 import { useParams } from 'react-router-dom';
+import PageTitle from '../../components/SettingsPageTitle';
 
 const SettingDispatcher = () => {
   const { plugins } = useGlobalContext();
   const { pluginId } = useParams();
+  console.log({ pluginId });
 
   const pluginToRender = get(plugins, [pluginId, 'settings', 'mainComponent'], null);
 
@@ -15,7 +17,12 @@ const SettingDispatcher = () => {
 
   const Compo = pluginToRender;
 
-  return <Compo settingsBaseURL="/settings" />;
+  return (
+    <>
+      <PageTitle name={pluginId} />
+      <Compo settingsBaseURL="/settings" />
+    </>
+  );
 };
 
 export default memo(SettingDispatcher);

packages/strapi-admin/admin/src/containers/SettingsPage/index.js

@@ -17,12 +17,13 @@ import {
   LoadingIndicatorPage,
 } from 'strapi-helper-plugin';
 import { Switch, Redirect, Route, useParams, useHistory } from 'react-router-dom';
-
+import { useIntl } from 'react-intl';
 import RolesCreatePage from 'ee_else_ce/containers/Roles/CreatePage';
 import ProtectedRolesListPage from 'ee_else_ce/containers/Roles/ProtectedListPage';
 // TODO remove this line when feature finished
 // import ProtectedRolesListPage from '../Roles/ProtectedListPage';
 import HeaderSearch from '../../components/HeaderSearch';
+import PageTitle from '../../components/PageTitle';
 import { useSettingsMenu } from '../../hooks';
 import { retrieveGlobalLinks } from '../../utils';
 import SettingsSearchHeaderProvider from '../SettingsHeaderSearchContextProvider';
@@ -49,6 +50,7 @@ function SettingsPage() {
   const { settingsBaseURL, plugins } = useGlobalContext();
   const [headerSearchState, setShowHeaderSearchState] = useState({ show: false, label: '' });
   const { isLoading, menu } = useSettingsMenu();
+  const { formatMessage } = useIntl();
   const pluginsGlobalLinks = useMemo(() => retrieveGlobalLinks(plugins), [plugins]);
   const firstAvailableEndpoint = useMemo(() => {
     // Don't need to compute while permissions are being checked
@@ -99,8 +101,11 @@ function SettingsPage() {
     return <Redirect to={firstAvailableEndpoint} />;
   }
 
+  const settingTitle = formatMessage({ id: 'app.components.LeftMenuLinkContainer.settings' });
+
   return (
     <SettingsSearchHeaderProvider value={{ toggleHeaderSearch }}>
+      <PageTitle title={settingTitle} />
       <Wrapper>
         <BackHeader onClick={goBack} />
 

packages/strapi-admin/admin/src/containers/Users/EditPage/index.js

@@ -5,8 +5,8 @@ import { get, isEmpty } from 'lodash';
 import { useGlobalContext, auth } from 'strapi-helper-plugin';
 import { Col } from 'reactstrap';
 import { Padded } from '@buffetjs/core';
-
 import BaselineAlignement from '../../../components/BaselineAlignement';
+import PageTitle from '../../../components/SettingsPageTitle';
 import ContainerFluid from '../../../components/ContainerFluid';
 import FormBloc from '../../../components/FormBloc';
 import SizedInput from '../../../components/SizedInput';
@@ -59,6 +59,7 @@ const EditPage = () => {
 
   return (
     <>
+      <PageTitle name="Users" />
       <form onSubmit={handleSubmit}>
         <ContainerFluid padding="0">
           <Header

packages/strapi-admin/admin/src/containers/Users/ListPage/index.js

@@ -11,6 +11,7 @@ import { get } from 'lodash';
 import { useHistory, useLocation } from 'react-router-dom';
 import { Flex, Padded } from '@buffetjs/core';
 import BaselineAlignement from '../../../components/BaselineAlignement';
+import PageTitle from '../../../components/SettingsPageTitle';
 import { useSettingsHeaderSearchContext } from '../../../hooks';
 import { Footer, List, Filter, FilterPicker, SortPicker } from '../../../components/Users';
 import adminPermissions from '../../../permissions';
@@ -243,6 +244,7 @@ const ListPage = () => {
 
   return (
     <div>
+      <PageTitle name="Users" />
       <Header
         canCreate={canCreate}
         canDelete={canDelete}

packages/strapi-admin/admin/src/containers/Webhooks/EditView/index.js

@@ -10,6 +10,7 @@ import { get, isEmpty, isEqual, omit } from 'lodash';
 import { Header, Inputs as InputsIndex } from '@buffetjs/custom';
 import { Play } from '@buffetjs/icons';
 import { request, useGlobalContext, getYupInnerErrors, BackHeader } from 'strapi-helper-plugin';
+import PageTitle from '../../../components/SettingsPageTitle';
 import { Inputs, TriggerContainer } from '../../../components/Webhooks';
 import reducer, { initialState } from './reducer';
 import { cleanData, form, schema } from './utils';
@@ -346,6 +347,7 @@ function EditView() {
 
   return (
     <Wrapper>
+      <PageTitle name="Webhooks" />
       <BackHeader onClick={goBack} />
       <form onSubmit={handleSubmit}>
         <Header {...headerProps} />

packages/strapi-admin/admin/src/containers/Webhooks/ListView/index.js

@@ -10,15 +10,16 @@ import { Header, List } from '@buffetjs/custom';
 import { Button } from '@buffetjs/core';
 import { Plus } from '@buffetjs/icons';
 import { omit } from 'lodash';
+import { useIntl } from 'react-intl';
 import {
   request,
-  useGlobalContext,
   ListButton,
   PopUpWarning,
   useUserPermissions,
   LoadingIndicatorPage,
 } from 'strapi-helper-plugin';
 import adminPermissions from '../../../permissions';
+import PageTitle from '../../../components/SettingsPageTitle';
 import { EmptyList, ListRow } from '../../../components/Webhooks';
 import Wrapper from './Wrapper';
 import reducer, { initialState } from './reducer';
@@ -30,7 +31,7 @@ function ListView() {
   } = useUserPermissions(adminPermissions.settings.webhooks);
 
   const isMounted = useRef(true);
-  const { formatMessage } = useGlobalContext();
+  const { formatMessage } = useIntl();
   const [showModal, setShowModal] = useState(false);
   const [reducerState, dispatch] = useReducer(reducer, initialState);
   const { push } = useHistory();
@@ -260,6 +261,7 @@ function ListView() {
 
   return (
     <Wrapper>
+      <PageTitle name="Webhooks" />
       <Header {...headerProps} />
       {canRead && (
         <div className="list-wrapper">

packages/strapi-admin/admin/src/translations/en.json

@@ -354,5 +354,6 @@
   "Roles.ListPage.notification.delete-all-not-allowed": "Some roles could not be deleted since they are associated with users",
   "Roles.RoleRow.user-count.plural": "{number} users",
   "Roles.RoleRow.user-count.singular": "{number} user",
-  "Roles.components.List.empty.withSearch": "There is no role corresponding to the search ({search})..."
+  "Roles.components.List.empty.withSearch": "There is no role corresponding to the search ({search})...",
+  "Settings.PageTitle": "Settings - {name}"
 }