@strapi/plugin-users-permissions 0.0.0-next.e41415e8ff5f565ff959667d5c5ba4f20bee013c → 0.0.0-next.e5b87a54008c9de2b3286a4774635dcf69895d9b

package/admin/src/pages/Roles/EditPage/index.js

@@ -1,194 +0,0 @@
-import React, { useState, useRef } from 'react';
-import { Formik } from 'formik';
-import { useIntl } from 'react-intl';
-import { useRouteMatch } from 'react-router-dom';
-import {
-  useFetchClient,
-  useOverlayBlocker,
-  SettingsPageTitle,
-  LoadingIndicatorPage,
-  Form,
-  useNotification,
-  Link,
-} from '@strapi/helper-plugin';
-import {
-  ContentLayout,
-  HeaderLayout,
-  Main,
-  Button,
-  Flex,
-  Box,
-  TextInput,
-  Textarea,
-  Typography,
-  GridItem,
-  Grid,
-} from '@strapi/design-system';
-import { ArrowLeft, Check } from '@strapi/icons';
-import UsersPermissions from '../../../components/UsersPermissions';
-import getTrad from '../../../utils/getTrad';
-import pluginId from '../../../pluginId';
-import { usePlugins, useFetchRole } from '../../../hooks';
-import schema from './utils/schema';
-
-const EditPage = () => {
-  const { formatMessage } = useIntl();
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const toggleNotification = useNotification();
-  const { lockApp, unlockApp } = useOverlayBlocker();
-  const {
-    params: { id },
-  } = useRouteMatch(`/settings/${pluginId}/roles/:id`);
-  const { isLoading: isLoadingPlugins, routes } = usePlugins();
-  const { role, onSubmitSucceeded, isLoading: isLoadingRole } = useFetchRole(id);
-  const permissionsRef = useRef();
-  const { put } = useFetchClient();
-
-  const handleEditRoleSubmit = async (data) => {
-    // Set loading state
-    lockApp();
-    setIsSubmitting(true);
-    try {
-      const permissions = permissionsRef.current.getPermissions();
-      // Update role in Strapi
-      await put(`/${pluginId}/roles/${id}`, { ...data, ...permissions, users: [] });
-      // Notify success
-      onSubmitSucceeded({ name: data.name, description: data.description });
-      toggleNotification({
-        type: 'success',
-        message: {
-          id: getTrad('Settings.roles.edited'),
-          defaultMessage: 'Role edited',
-        },
-      });
-    } catch (err) {
-      console.error(err);
-      toggleNotification({
-        type: 'warning',
-        message: {
-          id: 'notification.error',
-          defaultMessage: 'An error occurred',
-        },
-      });
-    }
-    // Unset loading state
-    setIsSubmitting(false);
-    unlockApp();
-  };
-
-  if (isLoadingRole) {
-    return <LoadingIndicatorPage />;
-  }
-
-  return (
-    <Main>
-      <SettingsPageTitle name="Roles" />
-      <Formik
-        enableReinitialize
-        initialValues={{ name: role.name, description: role.description }}
-        onSubmit={handleEditRoleSubmit}
-        validationSchema={schema}
-      >
-        {({ handleSubmit, values, handleChange, errors }) => (
-          <Form noValidate onSubmit={handleSubmit}>
-            <HeaderLayout
-              primaryAction={
-                !isLoadingPlugins && (
-                  <Button
-                    disabled={role.code === 'strapi-super-admin'}
-                    type="submit"
-                    loading={isSubmitting}
-                    startIcon={<Check />}
-                  >
-                    {formatMessage({
-                      id: 'global.save',
-                      defaultMessage: 'Save',
-                    })}
-                  </Button>
-                )
-              }
-              title={role.name}
-              subtitle={role.description}
-              navigationAction={
-                <Link startIcon={<ArrowLeft />} to="/settings/users-permissions/roles">
-                  {formatMessage({
-                    id: 'global.back',
-                    defaultMessage: 'Back',
-                  })}
-                </Link>
-              }
-            />
-            <ContentLayout>
-              <Flex direction="column" alignItems="stretch" gap={7}>
-                <Box
-                  background="neutral0"
-                  hasRadius
-                  shadow="filterShadow"
-                  paddingTop={6}
-                  paddingBottom={6}
-                  paddingLeft={7}
-                  paddingRight={7}
-                >
-                  <Flex direction="column" alignItems="stretch" gap={4}>
-                    <Typography variant="delta" as="h2">
-                      {formatMessage({
-                        id: getTrad('EditPage.form.roles'),
-                        defaultMessage: 'Role details',
-                      })}
-                    </Typography>
-                    <Grid gap={4}>
-                      <GridItem col={6}>
-                        <TextInput
-                          name="name"
-                          value={values.name || ''}
-                          onChange={handleChange}
-                          label={formatMessage({
-                            id: 'global.name',
-                            defaultMessage: 'Name',
-                          })}
-                          error={
-                            errors.name
-                              ? formatMessage({ id: errors.name, defaultMessage: 'Invalid value' })
-                              : null
-                          }
-                        />
-                      </GridItem>
-                      <GridItem col={6}>
-                        <Textarea
-                          id="description"
-                          value={values.description || ''}
-                          onChange={handleChange}
-                          label={formatMessage({
-                            id: 'global.description',
-                            defaultMessage: 'Description',
-                          })}
-                          error={
-                            errors.description
-                              ? formatMessage({
-                                  id: errors.description,
-                                  defaultMessage: 'Invalid value',
-                                })
-                              : null
-                          }
-                        />
-                      </GridItem>
-                    </Grid>
-                  </Flex>
-                </Box>
-                {!isLoadingPlugins && (
-                  <UsersPermissions
-                    ref={permissionsRef}
-                    permissions={role.permissions}
-                    routes={routes}
-                  />
-                )}
-              </Flex>
-            </ContentLayout>
-          </Form>
-        )}
-      </Formik>
-    </Main>
-  );
-};
-
-export default EditPage;

package/admin/src/pages/Roles/EditPage/utils/schema.js

@@ -1,9 +0,0 @@
-import * as yup from 'yup';
-import { translatedErrors } from '@strapi/helper-plugin';
-
-const schema = yup.object().shape({
-  name: yup.string().required(translatedErrors.required),
-  description: yup.string().required(translatedErrors.required),
-});
-
-export default schema;

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

@@ -1,92 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { IconButton, Typography, Flex, Tbody, Tr, Td } from '@strapi/design-system';
-import { Pencil, Trash } from '@strapi/icons';
-import { CheckPermissions, onRowClick, stopPropagation } from '@strapi/helper-plugin';
-import { useIntl } from 'react-intl';
-import { useHistory } from 'react-router-dom';
-
-import pluginId from '../../../../pluginId';
-
-const TableBody = ({ sortedRoles, canDelete, permissions, setRoleToDelete, onDelete }) => {
-  const { formatMessage } = useIntl();
-  const { push } = useHistory();
-  const [showConfirmDelete, setShowConfirmDelete] = onDelete;
-
-  const checkCanDeleteRole = (role) =>
-    canDelete && !['public', 'authenticated'].includes(role.type);
-
-  const handleClickDelete = (id) => {
-    setRoleToDelete(id);
-    setShowConfirmDelete(!showConfirmDelete);
-  };
-
-  const handleClickEdit = (id) => {
-    push(`/settings/${pluginId}/roles/${id}`);
-  };
-
-  return (
-    <Tbody>
-      {sortedRoles?.map((role) => (
-        <Tr key={role.name} {...onRowClick({ fn: () => handleClickEdit(role.id) })}>
-          <Td width="20%">
-            <Typography>{role.name}</Typography>
-          </Td>
-          <Td width="50%">
-            <Typography>{role.description}</Typography>
-          </Td>
-          <Td width="30%">
-            <Typography>
-              {`${role.nb_users} ${formatMessage({
-                id: 'global.users',
-                defaultMessage: 'users',
-              }).toLowerCase()}`}
-            </Typography>
-          </Td>
-          <Td>
-            <Flex justifyContent="end" {...stopPropagation}>
-              <CheckPermissions permissions={permissions.updateRole}>
-                <IconButton
-                  onClick={() => handleClickEdit(role.id)}
-                  noBorder
-                  icon={<Pencil />}
-                  label={formatMessage(
-                    { id: 'app.component.table.edit', defaultMessage: 'Edit {target}' },
-                    { target: `${role.name}` }
-                  )}
-                />
-              </CheckPermissions>
-              {checkCanDeleteRole(role) && (
-                <CheckPermissions permissions={permissions.deleteRole}>
-                  <IconButton
-                    onClick={() => handleClickDelete(role.id)}
-                    noBorder
-                    icon={<Trash />}
-                    label={formatMessage(
-                      { id: 'global.delete-target', defaultMessage: 'Delete {target}' },
-                      { target: `${role.name}` }
-                    )}
-                  />
-                </CheckPermissions>
-              )}
-            </Flex>
-          </Td>
-        </Tr>
-      ))}
-    </Tbody>
-  );
-};
-
-export default TableBody;
-
-TableBody.defaultProps = {
-  canDelete: false,
-};
-
-TableBody.propTypes = {
-  onDelete: PropTypes.array.isRequired,
-  permissions: PropTypes.object.isRequired,
-  setRoleToDelete: PropTypes.func.isRequired,
-  sortedRoles: PropTypes.array.isRequired,
-  canDelete: PropTypes.bool,
-};

package/admin/src/pages/Roles/ListPage/index.js

@@ -1,241 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import {
-  Button,
-  HeaderLayout,
-  Layout,
-  ContentLayout,
-  ActionLayout,
-  Main,
-  Table,
-  Tr,
-  Thead,
-  Th,
-  Typography,
-  useNotifyAT,
-  VisuallyHidden,
-} from '@strapi/design-system';
-import { Plus } from '@strapi/icons';
-import {
-  useTracking,
-  SettingsPageTitle,
-  CheckPermissions,
-  useNotification,
-  useRBAC,
-  NoPermissions,
-  LoadingIndicatorPage,
-  SearchURLQuery,
-  useFocusWhenNavigate,
-  useQueryParams,
-  EmptyStateLayout,
-  ConfirmDialog,
-  useFilter,
-  useCollator,
-} from '@strapi/helper-plugin';
-import { useIntl } from 'react-intl';
-import { useHistory } from 'react-router-dom';
-import { useMutation, useQuery, useQueryClient } from 'react-query';
-
-import { fetchData, deleteData } from './utils/api';
-import { getTrad } from '../../../utils';
-import pluginId from '../../../pluginId';
-import permissions from '../../../permissions';
-import TableBody from './components/TableBody';
-
-const RoleListPage = () => {
-  const { trackUsage } = useTracking();
-  const { formatMessage, locale } = useIntl();
-  const { push } = useHistory();
-  const toggleNotification = useNotification();
-  const { notifyStatus } = useNotifyAT();
-  const [{ query }] = useQueryParams();
-  const _q = query?._q || '';
-  const [showConfirmDelete, setShowConfirmDelete] = useState(false);
-  const [isConfirmButtonLoading, setIsConfirmButtonLoading] = useState(false);
-  const [roleToDelete, setRoleToDelete] = useState();
-  useFocusWhenNavigate();
-
-  const queryClient = useQueryClient();
-
-  const updatePermissions = useMemo(() => {
-    return {
-      create: permissions.createRole,
-      read: permissions.readRoles,
-      update: permissions.updateRole,
-      delete: permissions.deleteRole,
-    };
-  }, []);
-
-  const {
-    isLoading: isLoadingForPermissions,
-    allowedActions: { canRead, canDelete },
-  } = useRBAC(updatePermissions);
-
-  const {
-    isLoading: isLoadingForData,
-    data: { roles },
-    isFetching,
-  } = useQuery('get-roles', () => fetchData(toggleNotification, notifyStatus), {
-    initialData: {},
-    enabled: canRead,
-  });
-
-  const { includes } = useFilter(locale, {
-    sensitivity: 'base',
-  });
-
-  /**
-   * @type {Intl.Collator}
-   */
-  const formatter = useCollator(locale, {
-    sensitivity: 'base',
-  });
-
-  const isLoading = isLoadingForData || isFetching;
-
-  const handleNewRoleClick = () => {
-    trackUsage('willCreateRole');
-    push(`/settings/${pluginId}/roles/new`);
-  };
-
-  const handleShowConfirmDelete = () => {
-    setShowConfirmDelete(!showConfirmDelete);
-  };
-
-  const emptyLayout = {
-    roles: {
-      id: getTrad('Roles.empty'),
-      defaultMessage: "You don't have any roles yet.",
-    },
-    search: {
-      id: getTrad('Roles.empty.search'),
-      defaultMessage: 'No roles match the search.',
-    },
-  };
-
-  const pageTitle = formatMessage({
-    id: 'global.roles',
-    defaultMessage: 'Roles',
-  });
-
-  const deleteMutation = useMutation((id) => deleteData(id, toggleNotification), {
-    async onSuccess() {
-      await queryClient.invalidateQueries('get-roles');
-    },
-  });
-
-  const handleConfirmDelete = async () => {
-    setIsConfirmButtonLoading(true);
-    await deleteMutation.mutateAsync(roleToDelete);
-    setShowConfirmDelete(!showConfirmDelete);
-    setIsConfirmButtonLoading(false);
-  };
-
-  const sortedRoles = (roles || [])
-    .filter((role) => includes(role.name, _q) || includes(role.description, _q))
-    .sort(
-      (a, b) => formatter.compare(a.name, b.name) || formatter.compare(a.description, b.description)
-    );
-
-  const emptyContent = _q && !sortedRoles.length ? 'search' : 'roles';
-
-  const colCount = 4;
-  const rowCount = (roles?.length || 0) + 1;
-
-  return (
-    <Layout>
-      <SettingsPageTitle name={pageTitle} />
-      <Main aria-busy={isLoading}>
-        <HeaderLayout
-          title={formatMessage({
-            id: 'global.roles',
-            defaultMessage: 'Roles',
-          })}
-          subtitle={formatMessage({
-            id: 'Settings.roles.list.description',
-            defaultMessage: 'List of roles',
-          })}
-          primaryAction={
-            <CheckPermissions permissions={permissions.createRole}>
-              <Button onClick={handleNewRoleClick} startIcon={<Plus />} size="S">
-                {formatMessage({
-                  id: getTrad('List.button.roles'),
-                  defaultMessage: 'Add new role',
-                })}
-              </Button>
-            </CheckPermissions>
-          }
-        />
-
-        <ActionLayout
-          startActions={
-            <SearchURLQuery
-              label={formatMessage({
-                id: 'app.component.search.label',
-                defaultMessage: 'Search',
-              })}
-            />
-          }
-        />
-
-        <ContentLayout>
-          {!canRead && <NoPermissions />}
-          {(isLoading || isLoadingForPermissions) && <LoadingIndicatorPage />}
-          {canRead && sortedRoles && sortedRoles?.length ? (
-            <Table colCount={colCount} rowCount={rowCount}>
-              <Thead>
-                <Tr>
-                  <Th>
-                    <Typography variant="sigma" textColor="neutral600">
-                      {formatMessage({ id: 'global.name', defaultMessage: 'Name' })}
-                    </Typography>
-                  </Th>
-                  <Th>
-                    <Typography variant="sigma" textColor="neutral600">
-                      {formatMessage({
-                        id: 'global.description',
-                        defaultMessage: 'Description',
-                      })}
-                    </Typography>
-                  </Th>
-                  <Th>
-                    <Typography variant="sigma" textColor="neutral600">
-                      {formatMessage({
-                        id: 'global.users',
-                        defaultMessage: 'Users',
-                      })}
-                    </Typography>
-                  </Th>
-                  <Th>
-                    <VisuallyHidden>
-                      {formatMessage({
-                        id: 'global.actions',
-                        defaultMessage: 'Actions',
-                      })}
-                    </VisuallyHidden>
-                  </Th>
-                </Tr>
-              </Thead>
-              <TableBody
-                sortedRoles={sortedRoles}
-                canDelete={canDelete}
-                permissions={permissions}
-                setRoleToDelete={setRoleToDelete}
-                onDelete={[showConfirmDelete, setShowConfirmDelete]}
-              />
-            </Table>
-          ) : (
-            <EmptyStateLayout content={emptyLayout[emptyContent]} />
-          )}
-        </ContentLayout>
-        <ConfirmDialog
-          isConfirmButtonLoading={isConfirmButtonLoading}
-          onConfirm={handleConfirmDelete}
-          onToggleDialog={handleShowConfirmDelete}
-          isOpen={showConfirmDelete}
-        />
-      </Main>
-    </Layout>
-  );
-};
-
-export default RoleListPage;

package/admin/src/pages/Roles/ListPage/utils/api.js

@@ -1,31 +0,0 @@
-import { getFetchClient } from '@strapi/helper-plugin';
-import { getRequestURL } from '../../../../utils';
-
-export const fetchData = async (toggleNotification, notifyStatus) => {
-  try {
-    const { get } = getFetchClient();
-    const { data } = await get(getRequestURL('roles'));
-    notifyStatus('The roles have loaded successfully');
-
-    return data;
-  } catch (err) {
-    toggleNotification({
-      type: 'warning',
-      message: { id: 'notification.error' },
-    });
-
-    throw new Error('error');
-  }
-};
-
-export const deleteData = async (id, toggleNotification) => {
-  try {
-    const { del } = getFetchClient();
-    await del(`${getRequestURL('roles')}/${id}`);
-  } catch (error) {
-    toggleNotification({
-      type: 'warning',
-      message: { id: 'notification.error', defaultMessage: 'An error occured' },
-    });
-  }
-};

package/admin/src/pages/Roles/ProtectedCreatePage/index.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import { CheckPagePermissions } from '@strapi/helper-plugin';
-import pluginPermissions from '../../../permissions';
-import RolesCreatePage from '../CreatePage';
-
-const ProtectedRolesCreatePage = () => (
-  <CheckPagePermissions permissions={pluginPermissions.createRole}>
-    <RolesCreatePage />
-  </CheckPagePermissions>
-);
-
-export default ProtectedRolesCreatePage;

package/admin/src/pages/Roles/ProtectedEditPage/index.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import { CheckPagePermissions } from '@strapi/helper-plugin';
-import pluginPermissions from '../../../permissions';
-import RolesEditPage from '../EditPage';
-
-const ProtectedRolesEditPage = () => (
-  <CheckPagePermissions permissions={pluginPermissions.updateRole}>
-    <RolesEditPage />
-  </CheckPagePermissions>
-);
-
-export default ProtectedRolesEditPage;

package/admin/src/pages/Roles/ProtectedListPage/index.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import { CheckPagePermissions } from '@strapi/helper-plugin';
-import pluginPermissions from '../../../permissions';
-
-import RolesListPage from '../ListPage';
-
-const ProtectedRolesListPage = () => {
-  return (
-    <CheckPagePermissions permissions={pluginPermissions.accessRoles}>
-      <RolesListPage />
-    </CheckPagePermissions>
-  );
-};
-
-export default ProtectedRolesListPage;

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

@@ -1,27 +0,0 @@
-import React from 'react';
-import { Switch, Route } from 'react-router-dom';
-import { CheckPagePermissions, AnErrorOccurred } from '@strapi/helper-plugin';
-import pluginId from '../../pluginId';
-import pluginPermissions from '../../permissions';
-import ProtectedRolesListPage from './ProtectedListPage';
-import ProtectedRolesEditPage from './ProtectedEditPage';
-import ProtectedRolesCreatePage from './ProtectedCreatePage';
-
-const Roles = () => {
-  return (
-    <CheckPagePermissions permissions={pluginPermissions.accessRoles}>
-      <Switch>
-        <Route
-          path={`/settings/${pluginId}/roles/new`}
-          component={ProtectedRolesCreatePage}
-          exact
-        />
-        <Route path={`/settings/${pluginId}/roles/:id`} component={ProtectedRolesEditPage} exact />
-        <Route path={`/settings/${pluginId}/roles`} component={ProtectedRolesListPage} exact />
-        <Route path="" component={AnErrorOccurred} />
-      </Switch>
-    </CheckPagePermissions>
-  );
-};
-
-export default Roles;

package/admin/src/utils/getRequestURL.js

@@ -1,5 +0,0 @@
-import pluginId from '../pluginId';
-
-const getRequestURL = (endPoint) => `/${pluginId}/${endPoint}`;
-
-export default getRequestURL;