Merge pull request #10892 from strapi/ds-migration/roles-edit-structure

[v4] Create users-permissions edit role page structure

packages/plugins/users-permissions/admin/src/index.js

@@ -27,22 +27,22 @@ export default {
         },
       },
       [
-        // {
-        //   intlLabel: {
-        //     id: getTrad('HeaderNav.link.roles'),
-        //     defaultMessage: 'Roles',
-        //   },
-        //   id: 'roles',
-        //   to: `/settings/${pluginId}/roles`,
-        //   Component: async () => {
-        //     const component = await import(
-        //       /* webpackChunkName: "users-roles-settings-page" */ './pages/Roles'
-        //     );
+        {
+          intlLabel: {
+            id: getTrad('HeaderNav.link.roles'),
+            defaultMessage: 'Roles',
+          },
+          id: 'roles',
+          to: `/settings/${pluginId}/roles`,
+          Component: async () => {
+            const component = await import(
+              /* webpackChunkName: "users-roles-settings-page" */ './pages/Roles'
+            );
 
-        //     return component;
-        //   },
-        //   permissions: pluginPermissions.accessRoles,
-        // },
+            return component;
+          },
+          permissions: pluginPermissions.accessRoles,
+        },
         {
           intlLabel: {
             id: getTrad('HeaderNav.link.providers'),

packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/index.js

@@ -1,68 +1,36 @@
 import React, { useState, useRef } from 'react';
-import { Header } from '@buffetjs/custom';
-import { Padded } from '@buffetjs/core';
+import { Main, HeaderLayout, Button } from '@strapi/parts';
 import { Formik } from 'formik';
 import { useIntl } from 'react-intl';
 import { useRouteMatch } from 'react-router-dom';
-import { request, useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
+import {
+  request,
+  useNotification,
+  useOverlayBlocker,
+  SettingsPageTitle,
+} from '@strapi/helper-plugin';
 
-import BaselineAlignement from '../../../components/BaselineAlignement';
-import ContainerFluid from '../../../components/ContainerFluid';
-import FormCard from '../../../components/FormBloc';
-import SizedInput from '../../../components/SizedInput';
 import getTrad from '../../../utils/getTrad';
 import pluginId from '../../../pluginId';
-import UsersPermissions from '../../../components/UsersPermissions';
 import { usePlugins, useFetchRole } from '../../../hooks';
 
 import schema from './utils/schema';
 
 const EditPage = () => {
   const { formatMessage } = useIntl();
-  const [isSubmiting, setIsSubmiting] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const toggleNotification = useNotification();
   const { lockApp, unlockApp } = useOverlayBlocker();
   const {
     params: { id },
   } = useRouteMatch(`/settings/${pluginId}/roles/:id`);
-  const { routes, policies, isLoading } = usePlugins();
-  const { role, isLoading: isRoleLoading, onSubmitSucceeded } = useFetchRole(id);
+  const { isLoading } = usePlugins();
+  const { role, onSubmitSucceeded } = useFetchRole(id);
   const permissionsRef = useRef();
 
-  const headerActions = (handleSubmit, handleReset) => {
-    if (isLoading) {
-      return [];
-    }
-
-    return [
-      {
-        label: formatMessage({
-          id: 'app.components.Button.reset',
-          defaultMessage: 'Reset',
-        }),
-        onClick: () => {
-          handleReset();
-          permissionsRef.current.resetForm();
-        },
-        color: 'cancel',
-        type: 'button',
-      },
-      {
-        label: formatMessage({
-          id: 'app.components.Button.save',
-          defaultMessage: 'Save',
-        }),
-        onClick: handleSubmit,
-        color: 'success',
-        type: 'submit',
-        isLoading: isSubmiting,
-      },
-    ];
-  };
-
   const handleCreateRoleSubmit = data => {
     lockApp();
-    setIsSubmiting(true);
+    setIsSubmitting(true);
 
     const permissions = permissionsRef.current.getPermissions();
 
@@ -88,74 +56,45 @@ const EditPage = () => {
         });
       })
       .finally(() => {
-        setIsSubmiting(false);
+        setIsSubmitting(false);
         unlockApp();
       });
   };
 
   return (
-    <Formik
-      enableReinitialize
-      initialValues={{ name: role.name, description: role.description }}
-      onSubmit={handleCreateRoleSubmit}
-      validationSchema={schema}
-    >
-      {({ handleSubmit, values, errors, handleReset, handleChange, handleBlur }) => (
-        <form onSubmit={handleSubmit}>
-          <ContainerFluid padding="0">
-            <Header
-              title={{
-                label: role.name,
-              }}
-              content={role.description}
-              actions={headerActions(handleSubmit, handleReset)}
-              isLoading={isRoleLoading}
+    <Main labelledBy="title">
+      <SettingsPageTitle name="Roles" />
+      <Formik
+        enableReinitialize
+        initialValues={{ name: role.name, description: role.description }}
+        onSubmit={handleCreateRoleSubmit}
+        validationSchema={schema}
+      >
+        {({ handleSubmit }) => (
+          <form onSubmit={handleSubmit}>
+            <HeaderLayout
+              id="title"
+              primaryAction={
+                !isLoading && (
+                  <Button
+                    disabled={role.code === 'strapi-super-admin'}
+                    onClick={handleSubmit}
+                    loading={isSubmitting}
+                  >
+                    {formatMessage({
+                      id: 'app.components.Button.save',
+                      defaultMessage: 'Save',
+                    })}
+                  </Button>
+                )
+              }
+              title={role.name}
+              subtitle={role.description}
             />
-            <BaselineAlignement top size="3px" />
-            <FormCard
-              title={formatMessage({
-                id: getTrad('EditPage.form.roles'),
-                defaultMessage: 'Role details',
-              })}
-              isLoading={isLoading}
-            >
-              <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}
-              />
-              <SizedInput
-                label="Settings.roles.form.input.description"
-                defaultMessage="Description"
-                name="description"
-                type="textarea"
-                error={errors.description ? { id: errors.description } : null}
-                onBlur={handleBlur}
-                value={values.description}
-                onChange={handleChange}
-                // Override the default height of the textarea
-                style={{ height: 115 }}
-              />
-            </FormCard>
-          </ContainerFluid>
-          <div style={{ paddingTop: '1.8rem' }} />
-          {!isLoading && !isRoleLoading && (
-            <UsersPermissions
-              ref={permissionsRef}
-              permissions={role.permissions}
-              routes={routes}
-              policies={policies}
-            />
-          )}
-          <Padded top size="md" />
-        </form>
-      )}
-    </Formik>
+          </form>
+        )}
+      </Formik>
+    </Main>
   );
 };
 

packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js

@@ -0,0 +1,156 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ThemeProvider, lightTheme } from '@strapi/parts';
+import { Router, Switch, Route } from 'react-router-dom';
+import { IntlProvider } from 'react-intl';
+import { createMemoryHistory } from 'history';
+
+import pluginId from '../../../../pluginId';
+import RolesEditPage from '..';
+
+jest.mock('@strapi/helper-plugin', () => ({
+  ...jest.requireActual('@strapi/helper-plugin'),
+  useNotification: jest.fn(() => jest.fn()),
+  useOverlayBlocker: jest.fn(() => ({ lockApp: jest.fn(), unlockApp: jest.fn() })),
+}));
+
+jest.mock('../../../../hooks', () => {
+  const originalModule = jest.requireActual('../../../../hooks');
+
+  return {
+    ...originalModule,
+    useFetchRole: id => {
+      const role = {
+        id,
+        name: 'Authenticated',
+        description: 'Default role given to authenticated user.',
+        type: 'authenticated',
+      };
+      const onSubmitSucceed = jest.fn();
+
+      return { role, onSubmitSucceed };
+    },
+  };
+});
+
+it('renders users-permissions edit role and matches snapshot', () => {
+  const history = createMemoryHistory();
+
+  const app = (
+    <IntlProvider locale="en" messages={{ en: {} }} textComponent="span">
+      <ThemeProvider theme={lightTheme}>
+        <Router history={history}>
+          <Switch>
+            <Route path={`/settings/${pluginId}/roles/:id`} component={RolesEditPage} />
+          </Switch>
+        </Router>
+      </ThemeProvider>
+    </IntlProvider>
+  );
+
+  const { container } = render(app);
+  history.push(`/settings/${pluginId}/roles/1`);
+
+  expect(container.firstChild).toMatchInlineSnapshot(`
+    .c4 {
+      font-weight: 600;
+      font-size: 2rem;
+      line-height: 1.25;
+      color: #32324d;
+    }
+
+    .c5 {
+      font-weight: 400;
+      font-size: 0.875rem;
+      line-height: 1.43;
+      color: #666687;
+    }
+
+    .c6 {
+      font-size: 1rem;
+      line-height: 1.5;
+    }
+
+    .c1 {
+      background: #f6f6f9;
+      padding-top: 56px;
+      padding-right: 56px;
+      padding-bottom: 56px;
+      padding-left: 56px;
+    }
+
+    .c2 {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-flex-direction: row;
+      -ms-flex-direction: row;
+      flex-direction: row;
+      -webkit-box-pack: justify;
+      -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+      justify-content: space-between;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+    }
+
+    .c3 {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-flex-direction: row;
+      -ms-flex-direction: row;
+      flex-direction: row;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+    }
+
+    .c0 {
+      outline: none;
+    }
+
+    <main
+      aria-labelledby="title"
+      class="c0"
+      id="main-content"
+      tabindex="-1"
+    >
+      <form>
+        <div
+          class=""
+        >
+          <div
+            class="c1"
+            data-strapi-header="true"
+          >
+            <div
+              class="c2"
+            >
+              <div
+                class="c3"
+              >
+                <h1
+                  class="c4"
+                  id="title"
+                >
+                  Authenticated
+                </h1>
+              </div>
+            </div>
+            <p
+              class="c5 c6"
+            >
+              Default role given to authenticated user.
+            </p>
+          </div>
+        </div>
+      </form>
+    </main>
+  `);
+});