@strapi/plugin-users-permissions 0.0.0-next.ff946d2c25a3e577b47132a357cac2932eb8e635 → 0.0.0-next.ffc36acb308febe288f1a31b62cbbb75b286585c

package/admin/src/pages/Roles/hooks/usePlugins.js

@@ -0,0 +1,78 @@
+import { useEffect } from 'react';
+
+import { useAPIErrorHandler, useNotification, useFetchClient } from '@strapi/strapi/admin';
+import { useQueries } from 'react-query';
+
+import { cleanPermissions, getTrad } from '../../../utils';
+
+export const usePlugins = () => {
+  const { toggleNotification } = useNotification();
+  const { get } = useFetchClient();
+  const { formatAPIError } = useAPIErrorHandler(getTrad);
+
+  const [
+    {
+      data: permissions,
+      isLoading: isLoadingPermissions,
+      error: permissionsError,
+      refetch: refetchPermissions,
+    },
+    { data: routes, isLoading: isLoadingRoutes, error: routesError, refetch: refetchRoutes },
+  ] = useQueries([
+    {
+      queryKey: ['users-permissions', 'permissions'],
+      async queryFn() {
+        const {
+          data: { permissions },
+        } = await get(`/users-permissions/permissions`);
+
+        return permissions;
+      },
+    },
+    {
+      queryKey: ['users-permissions', 'routes'],
+      async queryFn() {
+        const {
+          data: { routes },
+        } = await get(`/users-permissions/routes`);
+
+        return routes;
+      },
+    },
+  ]);
+
+  const refetchQueries = async () => {
+    await Promise.all([refetchPermissions(), refetchRoutes()]);
+  };
+
+  useEffect(() => {
+    if (permissionsError) {
+      toggleNotification({
+        type: 'danger',
+        message: formatAPIError(permissionsError),
+      });
+    }
+  }, [toggleNotification, permissionsError, formatAPIError]);
+
+  useEffect(() => {
+    if (routesError) {
+      toggleNotification({
+        type: 'danger',
+        message: formatAPIError(routesError),
+      });
+    }
+  }, [toggleNotification, routesError, formatAPIError]);
+
+  const isLoading = isLoadingPermissions || isLoadingRoutes;
+
+  return {
+    // TODO: these return values need to be memoized, otherwise
+    // they will create infinite rendering loops when used as
+    // effect dependencies
+    permissions: permissions ? cleanPermissions(permissions) : {},
+    routes: routes ?? {},
+
+    getData: refetchQueries,
+    isLoading,
+  };
+};

package/admin/src/pages/Roles/index.jsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import { Page } from '@strapi/strapi/admin';
+import { Route, Routes } from 'react-router-dom';
+
+import { PERMISSIONS } from '../../constants';
+
+import { ProtectedRolesCreatePage } from './pages/CreatePage';
+import { ProtectedRolesEditPage } from './pages/EditPage';
+import { ProtectedRolesListPage } from './pages/ListPage';
+
+const Roles = () => {
+  return (
+    <Page.Protect permissions={PERMISSIONS.accessRoles}>
+      <Routes>
+        <Route index element={<ProtectedRolesListPage />} />
+        <Route path="new" element={<ProtectedRolesCreatePage />} />
+        <Route path=":id" element={<ProtectedRolesEditPage />} />
+      </Routes>
+    </Page.Protect>
+  );
+};
+
+export default Roles;

package/admin/src/pages/Roles/pages/CreatePage.jsx

@@ -0,0 +1,194 @@
+import * as React from 'react';
+
+import {
+  Button,
+  Flex,
+  Grid,
+  Main,
+  Textarea,
+  TextInput,
+  Typography,
+  Field,
+} from '@strapi/design-system';
+import { Check } from '@strapi/icons';
+import { Page, useTracking, useNotification, useFetchClient, Layouts } from '@strapi/strapi/admin';
+import { Formik, Form } from 'formik';
+import { useIntl } from 'react-intl';
+import { useMutation } from 'react-query';
+import { useNavigate } from 'react-router-dom';
+
+import UsersPermissions from '../../../components/UsersPermissions';
+import { PERMISSIONS } from '../../../constants';
+import getTrad from '../../../utils/getTrad';
+import { createRoleSchema } from '../constants';
+import { usePlugins } from '../hooks/usePlugins';
+
+export const CreatePage = () => {
+  const { formatMessage } = useIntl();
+  const { toggleNotification } = useNotification();
+  const navigate = useNavigate();
+  const { isLoading: isLoadingPlugins, permissions, routes } = usePlugins();
+  const { trackUsage } = useTracking();
+  const permissionsRef = React.useRef();
+  const { post } = useFetchClient();
+  const mutation = useMutation((body) => post(`/users-permissions/roles`, body), {
+    onError() {
+      toggleNotification({
+        type: 'danger',
+        message: formatMessage({
+          id: 'notification.error',
+          defaultMessage: 'An error occurred',
+        }),
+      });
+    },
+
+    onSuccess() {
+      trackUsage('didCreateRole');
+
+      toggleNotification({
+        type: 'success',
+        message: formatMessage({
+          id: getTrad('Settings.roles.created'),
+          defaultMessage: 'Role created',
+        }),
+      });
+
+      // Forcing redirecting since we don't have the id in the response
+      navigate(-1);
+    },
+  });
+
+  const handleCreateRoleSubmit = async (data) => {
+    // TODO: refactor. Child -> parent component communication is evil;
+    // We should either move the provider one level up or move the state
+    // straight into redux.
+    const permissions = permissionsRef.current.getPermissions();
+
+    await mutation.mutate({ ...data, ...permissions, users: [] });
+  };
+
+  return (
+    <Main>
+      <Page.Title>
+        {formatMessage(
+          { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
+          { name: 'Roles' }
+        )}
+      </Page.Title>
+      <Formik
+        enableReinitialize
+        initialValues={{ name: '', description: '' }}
+        onSubmit={handleCreateRoleSubmit}
+        validationSchema={createRoleSchema}
+      >
+        {({ handleSubmit, values, handleChange, errors }) => (
+          <Form noValidate onSubmit={handleSubmit}>
+            <Layouts.Header
+              primaryAction={
+                !isLoadingPlugins && (
+                  <Button type="submit" loading={mutation.isLoading} startIcon={<Check />}>
+                    {formatMessage({
+                      id: 'global.save',
+                      defaultMessage: 'Save',
+                    })}
+                  </Button>
+                )
+              }
+              title={formatMessage({
+                id: 'Settings.roles.create.title',
+                defaultMessage: 'Create a role',
+              })}
+              subtitle={formatMessage({
+                id: 'Settings.roles.create.description',
+                defaultMessage: 'Define the rights given to the role',
+              })}
+            />
+            <Layouts.Content>
+              <Flex
+                background="neutral0"
+                direction="column"
+                alignItems="stretch"
+                gap={7}
+                hasRadius
+                paddingTop={6}
+                paddingBottom={6}
+                paddingLeft={7}
+                paddingRight={7}
+                shadow="filterShadow"
+              >
+                <Flex direction="column" alignItems="stretch">
+                  <Typography variant="delta" tag="h2">
+                    {formatMessage({
+                      id: getTrad('EditPage.form.roles'),
+                      defaultMessage: 'Role details',
+                    })}
+                  </Typography>
+
+                  <Grid.Root gap={4}>
+                    <Grid.Item col={6} direction="column" alignItems="stretch">
+                      <Field.Root
+                        name="name"
+                        error={
+                          errors?.name
+                            ? formatMessage({ id: errors.name, defaultMessage: 'Name is required' })
+                            : false
+                        }
+                        required
+                      >
+                        <Field.Label>
+                          {formatMessage({
+                            id: 'global.name',
+                            defaultMessage: 'Name',
+                          })}
+                        </Field.Label>
+                        <TextInput value={values.name || ''} onChange={handleChange} />
+                        <Field.Error />
+                      </Field.Root>
+                    </Grid.Item>
+                    <Grid.Item col={6} direction="column" alignItems="stretch">
+                      <Field.Root
+                        name="description"
+                        error={
+                          errors?.description
+                            ? formatMessage({
+                                id: errors.description,
+                                defaultMessage: 'Description is required',
+                              })
+                            : false
+                        }
+                        required
+                      >
+                        <Field.Label>
+                          {formatMessage({
+                            id: 'global.description',
+                            defaultMessage: 'Description',
+                          })}
+                        </Field.Label>
+                        <Textarea value={values.description || ''} onChange={handleChange} />
+                        <Field.Error />
+                      </Field.Root>
+                    </Grid.Item>
+                  </Grid.Root>
+                </Flex>
+
+                {!isLoadingPlugins && (
+                  <UsersPermissions
+                    ref={permissionsRef}
+                    permissions={permissions}
+                    routes={routes}
+                  />
+                )}
+              </Flex>
+            </Layouts.Content>
+          </Form>
+        )}
+      </Formik>
+    </Main>
+  );
+};
+
+export const ProtectedRolesCreatePage = () => (
+  <Page.Protect permissions={PERMISSIONS.createRole}>
+    <CreatePage />
+  </Page.Protect>
+);

package/admin/src/pages/Roles/pages/EditPage.jsx

@@ -0,0 +1,215 @@
+import * as React from 'react';
+
+import {
+  Main,
+  Button,
+  Flex,
+  TextInput,
+  Textarea,
+  Typography,
+  Grid,
+  Field,
+} from '@strapi/design-system';
+import { Check } from '@strapi/icons';
+import {
+  Page,
+  BackButton,
+  useAPIErrorHandler,
+  useNotification,
+  useFetchClient,
+  Layouts,
+} from '@strapi/strapi/admin';
+import { Formik, Form } from 'formik';
+import { useIntl } from 'react-intl';
+import { useQuery, useMutation } from 'react-query';
+import { useMatch } from 'react-router-dom';
+
+import UsersPermissions from '../../../components/UsersPermissions';
+import { PERMISSIONS } from '../../../constants';
+import getTrad from '../../../utils/getTrad';
+import { createRoleSchema } from '../constants';
+import { usePlugins } from '../hooks/usePlugins';
+
+export const EditPage = () => {
+  const { formatMessage } = useIntl();
+  const { toggleNotification } = useNotification();
+  const {
+    params: { id },
+  } = useMatch(`/settings/users-permissions/roles/:id`);
+  const { get } = useFetchClient();
+  const { isLoading: isLoadingPlugins, routes } = usePlugins();
+  const {
+    data: role,
+    isLoading: isLoadingRole,
+    refetch: refetchRole,
+  } = useQuery(['users-permissions', 'role', id], async () => {
+    // TODO: why doesn't this endpoint follow the admin API conventions?
+    const {
+      data: { role },
+    } = await get(`/users-permissions/roles/${id}`);
+
+    return role;
+  });
+
+  const permissionsRef = React.useRef();
+  const { put } = useFetchClient();
+  const { formatAPIError } = useAPIErrorHandler();
+  const mutation = useMutation((body) => put(`/users-permissions/roles/${id}`, body), {
+    onError(error) {
+      toggleNotification({
+        type: 'danger',
+        message: formatAPIError(error),
+      });
+    },
+
+    async onSuccess() {
+      toggleNotification({
+        type: 'success',
+        message: formatMessage({
+          id: getTrad('Settings.roles.created'),
+          defaultMessage: 'Role edited',
+        }),
+      });
+
+      await refetchRole();
+    },
+  });
+
+  const handleEditRoleSubmit = async (data) => {
+    const permissions = permissionsRef.current.getPermissions();
+
+    await mutation.mutate({ ...data, ...permissions, users: [] });
+  };
+
+  if (isLoadingRole) {
+    return <Page.Loading />;
+  }
+
+  return (
+    <Main>
+      <Page.Title>
+        {formatMessage(
+          { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },
+          { name: 'Roles' }
+        )}
+      </Page.Title>
+      <Formik
+        enableReinitialize
+        initialValues={{ name: role.name, description: role.description }}
+        onSubmit={handleEditRoleSubmit}
+        validationSchema={createRoleSchema}
+      >
+        {({ handleSubmit, values, handleChange, errors }) => (
+          <Form noValidate onSubmit={handleSubmit}>
+            <Layouts.Header
+              primaryAction={
+                !isLoadingPlugins ? (
+                  <Button
+                    disabled={role.code === 'strapi-super-admin'}
+                    type="submit"
+                    loading={mutation.isLoading}
+                    startIcon={<Check />}
+                  >
+                    {formatMessage({
+                      id: 'global.save',
+                      defaultMessage: 'Save',
+                    })}
+                  </Button>
+                ) : null
+              }
+              title={role.name}
+              subtitle={role.description}
+              navigationAction={<BackButton fallback=".." />}
+            />
+            <Layouts.Content>
+              <Flex
+                background="neutral0"
+                direction="column"
+                alignItems="stretch"
+                gap={7}
+                hasRadius
+                paddingTop={6}
+                paddingBottom={6}
+                paddingLeft={7}
+                paddingRight={7}
+                shadow="filterShadow"
+              >
+                <Flex direction="column" alignItems="stretch" gap={4}>
+                  <Typography variant="delta" tag="h2">
+                    {formatMessage({
+                      id: getTrad('EditPage.form.roles'),
+                      defaultMessage: 'Role details',
+                    })}
+                  </Typography>
+
+                  <Grid.Root gap={4}>
+                    <Grid.Item col={6} direction="column" alignItems="stretch">
+                      <Field.Root
+                        name="name"
+                        error={
+                          errors?.name
+                            ? formatMessage({
+                                id: errors.name,
+                                defaultMessage: 'Name is required',
+                              })
+                            : false
+                        }
+                        required
+                      >
+                        <Field.Label>
+                          {formatMessage({
+                            id: 'global.name',
+                            defaultMessage: 'Name',
+                          })}
+                        </Field.Label>
+                        <TextInput value={values.name || ''} onChange={handleChange} />
+                        <Field.Error />
+                      </Field.Root>
+                    </Grid.Item>
+                    <Grid.Item col={6} direction="column" alignItems="stretch">
+                      <Field.Root
+                        name="description"
+                        error={
+                          errors?.description
+                            ? formatMessage({
+                                id: errors.description,
+                                defaultMessage: 'Description is required',
+                              })
+                            : false
+                        }
+                        required
+                      >
+                        <Field.Label>
+                          {formatMessage({
+                            id: 'global.description',
+                            defaultMessage: 'Description',
+                          })}
+                        </Field.Label>
+                        <Textarea value={values.description || ''} onChange={handleChange} />
+                        <Field.Error />
+                      </Field.Root>
+                    </Grid.Item>
+                  </Grid.Root>
+                </Flex>
+
+                {!isLoadingPlugins && (
+                  <UsersPermissions
+                    ref={permissionsRef}
+                    permissions={role.permissions}
+                    routes={routes}
+                  />
+                )}
+              </Flex>
+            </Layouts.Content>
+          </Form>
+        )}
+      </Formik>
+    </Main>
+  );
+};
+
+export const ProtectedRolesEditPage = () => (
+  <Page.Protect permissions={PERMISSIONS.updateRole}>
+    <EditPage />
+  </Page.Protect>
+);

package/admin/src/pages/Roles/pages/ListPage/components/TableBody.jsx

@@ -0,0 +1,119 @@
+import * as React from 'react';
+
+import { Flex, IconButton, Link, Tbody, Td, Tr, Typography } from '@strapi/design-system';
+import { Pencil, Trash } from '@strapi/icons';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { useNavigate, NavLink } from 'react-router-dom';
+import { styled } from 'styled-components';
+
+const EditLink = styled(Link)`
+  align-items: center;
+  height: 3.2rem;
+  width: 3.2rem;
+  display: flex;
+  justify-content: center;
+  padding: ${({ theme }) => `${theme.spaces[2]}`};
+
+  svg {
+    height: 1.6rem;
+    width: 1.6rem;
+
+    path {
+      fill: ${({ theme }) => theme.colors.neutral500};
+    }
+  }
+
+  &:hover,
+  &:focus {
+    svg {
+      path {
+        fill: ${({ theme }) => theme.colors.neutral800};
+      }
+    }
+  }
+`;
+
+const TableBody = ({ sortedRoles, canDelete, canUpdate, setRoleToDelete, onDelete }) => {
+  const { formatMessage } = useIntl();
+  const navigate = useNavigate();
+  const [showConfirmDelete, setShowConfirmDelete] = onDelete;
+
+  const checkCanDeleteRole = (role) =>
+    canDelete && !['public', 'authenticated'].includes(role.type);
+
+  const handleClickDelete = (id) => {
+    setRoleToDelete(id);
+    setShowConfirmDelete(!showConfirmDelete);
+  };
+
+  return (
+    <Tbody>
+      {sortedRoles?.map((role) => (
+        <Tr cursor="pointer" key={role.name} onClick={() => navigate(role.id.toString())}>
+          <Td width="20%">
+            <Typography>{role.name}</Typography>
+          </Td>
+          <Td width="50%">
+            <Typography>{role.description}</Typography>
+          </Td>
+          <Td width="30%">
+            <Typography>
+              {formatMessage(
+                {
+                  id: 'Roles.RoleRow.user-count',
+                  defaultMessage: '{number, plural, =0 {# user} one {# user} other {# users}}',
+                },
+                { number: role.nb_users }
+              )}
+            </Typography>
+          </Td>
+          <Td>
+            <Flex justifyContent="end" onClick={(e) => e.stopPropagation()}>
+              {canUpdate ? (
+                <EditLink
+                  tag={NavLink}
+                  to={role.id.toString()}
+                  aria-label={formatMessage(
+                    { id: 'app.component.table.edit', defaultMessage: 'Edit {target}' },
+                    { target: `${role.name}` }
+                  )}
+                >
+                  <Pencil />
+                </EditLink>
+              ) : null}
+
+              {checkCanDeleteRole(role) && (
+                <IconButton
+                  onClick={() => handleClickDelete(role.id.toString())}
+                  variant="ghost"
+                  label={formatMessage(
+                    { id: 'global.delete-target', defaultMessage: 'Delete {target}' },
+                    { target: `${role.name}` }
+                  )}
+                >
+                  <Trash />
+                </IconButton>
+              )}
+            </Flex>
+          </Td>
+        </Tr>
+      ))}
+    </Tbody>
+  );
+};
+
+export default TableBody;
+
+TableBody.defaultProps = {
+  canDelete: false,
+  canUpdate: false,
+};
+
+TableBody.propTypes = {
+  onDelete: PropTypes.array.isRequired,
+  setRoleToDelete: PropTypes.func.isRequired,
+  sortedRoles: PropTypes.array.isRequired,
+  canDelete: PropTypes.bool,
+  canUpdate: PropTypes.bool,
+};