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,77 +94,80 @@ const CreatePage = () => {
   ];
 
   return (
-    <Formik
+    <>
-      initialValues={{ name: '', description: '' }}
+      <PageTitle name="Roles" />
-      onSubmit={handleCreateRoleSubmit}
+      <Formik
-      validationSchema={schema}
+        initialValues={{ name: '', description: '' }}
-      validateOnChange={false}
+        onSubmit={handleCreateRoleSubmit}
-    >
+        validationSchema={schema}
-      {({ handleSubmit, values, errors, handleReset, handleChange, handleBlur }) => (
+        validateOnChange={false}
-        <form onSubmit={handleSubmit}>
+      >
-          <ContainerFluid padding="0">
+        {({ handleSubmit, values, errors, handleReset, handleChange, handleBlur }) => (
-            <Header
+          <form onSubmit={handleSubmit}>
-              title={{
+            <ContainerFluid padding="0">
-                label: formatMessage({
+              <Header
-                  id: 'Settings.roles.create.title',
+                title={{
-                  defaultMessage: 'Create a role',
+                  label: formatMessage({
-                }),
+                    id: 'Settings.roles.create.title',
-              }}
+                    defaultMessage: 'Create a role',
-              content={formatMessage({
+                  }),
-                id: 'Settings.roles.create.description',
+                }}
-                defaultMessage: 'Define the rights given to the role',
+                content={formatMessage({
-              })}
+                  id: 'Settings.roles.create.description',
-              actions={headerActions(handleSubmit, handleReset)}
+                  defaultMessage: 'Define the rights given to the role',
-              isLoading={isLayoutLoading}
+                })}
-            />
+                actions={headerActions(handleSubmit, handleReset)}
-            <BaselineAlignement top size="3px" />
+                isLoading={isLayoutLoading}
-            <FormCard
-              actions={actions}
-              title={formatMessage({
-                id: 'Settings.roles.form.title',
-                defaultMessage: 'Details',
-              })}
-              subtitle={formatMessage({
-                id: 'Settings.roles.form.description',
-                defaultMessage: 'Name and description of the role',
-              })}
-            >
-              <SizedInput
-                label="Settings.roles.form.input.name"
-                defaultMessage="Name"
-                name="name"
-                type="text"
-                error={errors.name ? { id: errors.name } : null}
-                onBlur={handleBlur}
-                value={values.name}
-                onChange={handleChange}
               />
-
+              <BaselineAlignement top size="3px" />
-              <SizedInput
+              <FormCard
-                label="Settings.roles.form.input.description"
+                actions={actions}
-                defaultMessage="Description"
+                title={formatMessage({
-                name="description"
+                  id: 'Settings.roles.form.title',
-                type="textarea"
+                  defaultMessage: 'Details',
-                onBlur={handleBlur}
+                })}
-                value={values.description}
+                subtitle={formatMessage({
-                onChange={handleChange}
+                  id: 'Settings.roles.form.description',
-                // Override the default height of the textarea
+                  defaultMessage: 'Name and description of the role',
-                style={{ height: 115 }}
+                })}
-              />
+              >
-            </FormCard>
+                <SizedInput
-            {!isLayoutLoading && (
+                  label="Settings.roles.form.input.name"
-              <Padded top bottom size="md">
+                  defaultMessage="Name"
-                <Permissions
+                  name="name"
-                  permissionsLayout={permissionsLayout}
+                  type="text"
-                  rolePermissions={{}}
+                  error={errors.name ? { id: errors.name } : null}
-                  ref={permissionsRef}
+                  onBlur={handleBlur}
+                  value={values.name}
+                  onChange={handleChange}
                 />
-              </Padded>
+
-            )}
+                <SizedInput
-          </ContainerFluid>
+                  label="Settings.roles.form.input.description"
-        </form>
+                  defaultMessage="Description"
-      )}
+                  name="description"
-    </Formik>
+                  type="textarea"
+                  onBlur={handleBlur}
+                  value={values.description}
+                  onChange={handleChange}
+                  // Override the default height of the textarea
+                  style={{ height: 115 }}
+                />
+              </FormCard>
+              {!isLayoutLoading && (
+                <Padded top bottom size="md">
+                  <Permissions
+                    permissionsLayout={permissionsLayout}
+                    rolePermissions={{}}
+                    ref={permissionsRef}
+                  />
+                </Padded>
+              )}
+            </ContainerFluid>
+          </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,55 +88,59 @@ const EditPage = () => {
   };
 
   return (
-    <Formik
+    <>
-      enableReinitialize
+      <PageTitle name="Roles" />
-      initialValues={{
+      <Formik
-        name: role.name,
+        enableReinitialize
-        description: role.description,
+        initialValues={{
-      }}
+          name: role.name,
-      onSubmit={handleEditRoleSubmit}
+          description: role.description,
-      validationSchema={schema}
+        }}
-      validateOnChange={false}
+        onSubmit={handleEditRoleSubmit}
-    >
+        validationSchema={schema}
-      {({ handleSubmit, values, errors, handleReset, handleChange, handleBlur }) => (
+        validateOnChange={false}
-        <form onSubmit={handleSubmit}>
+      >
-          <ContainerFluid padding="0">
+        {({ handleSubmit, values, errors, handleReset, handleChange, handleBlur }) => (
-            <Header
+          <form onSubmit={handleSubmit}>
-              title={{
+            <ContainerFluid padding="0">
-                label: formatMessage({
+              <Header
-                  id: 'Settings.roles.edit.title',
+                title={{
-                  defaultMessage: 'Edit a role',
+                  label: formatMessage({
-                }),
+                    id: 'Settings.roles.edit.title',
-              }}
+                    defaultMessage: 'Edit a role',
-              content={formatMessage({
+                  }),
-                id: 'Settings.roles.create.description',
+                }}
-                defaultMessage: 'Define the rights given to the role',
+                content={formatMessage({
-              })}
+                  id: 'Settings.roles.create.description',
-              actions={headerActions(handleSubmit, handleReset)}
+                  defaultMessage: 'Define the rights given to the role',
-              isLoading={isLayoutLoading || isRoleLoading}
+                })}
-            />
+                actions={headerActions(handleSubmit, handleReset)}
-            <BaselineAlignement top size="3px" />
+                isLoading={isLayoutLoading || isRoleLoading}
-            <RoleForm
+              />
-              isLoading={isRoleLoading}
+              <BaselineAlignement top size="3px" />
-              errors={errors}
+              <RoleForm
-              values={values}
+                isLoading={isRoleLoading}
-              onChange={handleChange}
+                errors={errors}
-              onBlur={handleBlur}
+                values={values}
-              role={role}
+                onChange={handleChange}
-            />
+                onBlur={handleBlur}
-            {!isLayoutLoading && !isRoleLoading && (
+                role={role}
-              <Padded top bottom size="md">
+              />
-                <Permissions
+              {!isLayoutLoading && !isRoleLoading && (
-                  permissionsLayout={permissionsLayout}
+                <Padded top bottom size="md">
-                  rolePermissions={rolePermissions}
+                  <Permissions
-                  ref={permissionsRef}
+                    permissionsLayout={permissionsLayout}
-                />
+                    rolePermissions={rolePermissions}
-              </Padded>
+                    role={role}
-            )}
+                    ref={permissionsRef}
-          </ContainerFluid>
+                  />
-        </form>
+                </Padded>
-      )}
+              )}
-    </Formik>
+            </ContainerFluid>
+          </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}"
 }