Init Users & Permissions settings section

[HichamELBSI]

Signed-off-by: HichamELBSI elabbassih@gmail.com

Description of what you did:

• Move the current Users & Permissions plugin folder in an OLD/ folder
• Create a container for each settings page (Role, Provider, Email Template and Advanced Settings)
• Init the new Settings section

[derrickmehaffy]

This is moving all the Users & Permissions options into the new settings menu yeah? If possible can you attach a quick screenshot of the layout in the new menu?

[soupette]

The settings key does not exist in the permissions.js file. Maybe you could update this file as follows:

const pluginPermissions = {
  // Roles
  accessRoles: [
    { action: 'plugins::users-permissions.roles.create', subject: null },
    { action: 'plugins::users-permissions.roles.read', subject: null },
    { action: 'plugins::users-permissions.roles.update', subject: null },
  ],
  createRole: [{ action: 'plugins::users-permissions.roles.create', subject: null }],
  deleteRole: [{ action: 'plugins::users-permissions.roles.delete', subject: null }],
  readRoles: [{ action: 'plugins::users-permissions.roles.read', subject: null }],
  updateRole: [{ action: 'plugins::users-permissions.roles.update', subject: null }],

  // AdvancedSettings
  readAdvancedSettings: [
    { action: 'plugins::users-permissions.advanced-settings.read', subject: null },
    { action: 'plugins::users-permissions.advanced-settings.update', subject: null },
  ],
  updateAdvancedSettings: [
    { action: 'plugins::users-permissions.advanced-settings.update', subject: null },
  ],

  // Emails
  readEmailTemplates: [
    { action: 'plugins::users-permissions.email-templates.read', subject: null },
    { action: 'plugins::users-permissions.email-templates.update', subject: null },
  ],
  updateEmailTemplates: [
    { action: 'plugins::users-permissions.email-templates.update', subject: null },
  ],

  // Providers
  readProviders: [
    { action: 'plugins::users-permissions.providers.read', subject: null },
    { action: 'plugins::users-permissions.providers.update', subject: null },
  ],
  updateProviders: [{ action: 'plugins::users-permissions.providers.update', subject: null }],
};

export default pluginPermissions;

[soupette]

Here you will need to a Router for the roles pages so you can't wrap the component using the CheckPagePermissions

`

[soupette]

permissions: pluginPermissions.accessRoles

[soupette]

<CheckPagePermissions permissions={pluginPermissions.readProviders}>

[soupette]

pluginPermissions.readProviders

[soupette]

<CheckPagePermissions permissions={pluginPermissions.readEmailTemplates}>

[soupette]

<CheckPagePermissions permissions={pluginPermissions.readAdvancedSettings}>

[soupette]

pluginPermissions.readAdvancedSettings

[soupette]

Since you will need a router a suggest the following modifications:

import React from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import { useGlobalContext, CheckPagePermissions, NotFound } from 'strapi-helper-plugin';
import pluginId from '../../pluginId';
import pluginPermissions from '../../permissions';

const RolesEditPage = () => <div>Role edit</div>;

const ProtectedRolesEditPage = () => (
  <CheckPagePermissions permissions={pluginPermissions.updateRole}>
    <RolesEditPage />
  </CheckPagePermissions>
);
const RolesCreatePage = () => (
  <CheckPagePermissions permissions={pluginPermissions.createRole}>
    <RolesEditPage />
  </CheckPagePermissions>
);

const RolesListPage = () => {
  return (
    <CheckPagePermissions permissions={pluginPermissions.accessRoles}>
      <div>Role list</div>
      <div>
        <Link to="/settings/users-permissions/roles/1">Edit Role</Link>
      </div>
      <div>
        <Link to="/settings/users-permissions/roles/new">Create Role</Link>
      </div>
    </CheckPagePermissions>
  );
};

const Role = () => {
  const { settingsBaseURL } = useGlobalContext();

  return (
    <Switch>
      <Route path={`${settingsBaseURL}/${pluginId}/roles/new`} component={RolesCreatePage} exact />
      <Route
        path={`${settingsBaseURL}/${pluginId}/roles/:id`}
        component={ProtectedRolesEditPage}
        exact
      />
      <Route path={`${settingsBaseURL}/${pluginId}/roles`} component={RolesListPage} exact />
      <Route path="" component={NotFound} />
    </Switch>
  );
};

export default Roles;

[soupette]

<Roles />

[soupette]

import Role from './containers/Roles

[soupette]

This is moving all the Users & Permissions options into the new settings menu yeah? If possible can you attach a quick screenshot of the layout in the new menu?

[codecov]

Codecov Report

❗ No coverage uploaded for pull request base (features/users-permissions@81a4509). Click here to learn what that means.
The diff coverage is n/a.

@@                      Coverage Diff                      @@
##             features/users-permissions    #7302   +/-   ##
=============================================================
  Coverage                              ?   27.48%           
=============================================================
  Files                                 ?     1097           
  Lines                                 ?    14729           
  Branches                              ?     2353           
=============================================================
  Hits                                  ?     4048           
  Misses                                ?     8951           
  Partials                              ?     1730           

Flag	Coverage Δ
#front	19.41% <0.00%> (?)
#unit	53.14% <0.00%> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 81a4509...cb0f33c. Read the comment docs.

[soupette]

LGTM