@strapi/admin 4.7.2-exp.175f7ac70ee76d6c825e4429e15fc85ee78d23bb → 4.8.0

package/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/index.js

@@ -1,270 +0,0 @@
-import React, { useRef, useState } from 'react';
-import { format } from 'date-fns';
-import {
-  CheckPagePermissions,
-  Form,
-  LoadingIndicatorPage,
-  SettingsPageTitle,
-  request,
-  useNotification,
-  useOverlayBlocker,
-  useTracking,
-  Link,
-} from '@strapi/helper-plugin';
-import {
-  Box,
-  Button,
-  ContentLayout,
-  HeaderLayout,
-  Grid,
-  GridItem,
-  Main,
-  Flex,
-  Typography,
-  TextInput,
-  Textarea,
-} from '@strapi/design-system';
-import { ArrowLeft } from '@strapi/icons';
-import { Formik } from 'formik';
-import get from 'lodash/get';
-import isEmpty from 'lodash/isEmpty';
-import { useIntl } from 'react-intl';
-import { useHistory, useRouteMatch } from 'react-router-dom';
-import styled from 'styled-components';
-import Permissions from '../../../../../../../admin/src/pages/SettingsPage/pages/Roles/EditPage/components/Permissions';
-import { useFetchPermissionsLayout, useFetchRole } from '../../../../../../../admin/src/hooks';
-import adminPermissions from '../../../../../../../admin/src/permissions';
-import schema from './utils/schema';
-
-const UsersRoleNumber = styled.div`
-  border: 1px solid ${({ theme }) => theme.colors.primary200};
-  background: ${({ theme }) => theme.colors.primary100};
-  padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[4]}`};
-  color: ${({ theme }) => theme.colors.primary600};
-  border-radius: ${({ theme }) => theme.borderRadius};
-  font-size: ${12 / 16}rem;
-  font-weight: bold;
-`;
-
-const CreatePage = () => {
-  const toggleNotification = useNotification();
-  const { lockApp, unlockApp } = useOverlayBlocker();
-  const { formatMessage } = useIntl();
-  const [isSubmitting, setIsSubmiting] = useState(false);
-  const { replace } = useHistory();
-  const permissionsRef = useRef();
-  const { trackUsage } = useTracking();
-  const params = useRouteMatch('/settings/roles/duplicate/:id');
-  const id = get(params, 'params.id', null);
-  const { isLoading: isLayoutLoading, data: permissionsLayout } = useFetchPermissionsLayout();
-  const { permissions: rolePermissions, isLoading: isRoleLoading } = useFetchRole(id);
-
-  const handleCreateRoleSubmit = (data) => {
-    lockApp();
-    setIsSubmiting(true);
-
-    if (id) {
-      trackUsage('willDuplicateRole');
-    } else {
-      trackUsage('willCreateNewRole');
-    }
-
-    Promise.resolve(
-      request('/admin/roles', {
-        method: 'POST',
-        body: data,
-      })
-    )
-      .then(async (res) => {
-        const { permissionsToSend } = permissionsRef.current.getPermissions();
-
-        if (id) {
-          trackUsage('didDuplicateRole');
-        } else {
-          trackUsage('didCreateNewRole');
-        }
-
-        if (res.data.id && !isEmpty(permissionsToSend)) {
-          await request(`/admin/roles/${res.data.id}/permissions`, {
-            method: 'PUT',
-            body: { permissions: permissionsToSend },
-          });
-        }
-
-        return res;
-      })
-      .then((res) => {
-        setIsSubmiting(false);
-        toggleNotification({
-          type: 'success',
-          message: { id: 'Settings.roles.created', defaultMessage: 'created' },
-        });
-        replace(`/settings/roles/${res.data.id}`);
-      })
-      .catch((err) => {
-        console.error(err);
-        setIsSubmiting(false);
-        toggleNotification({
-          type: 'warning',
-          message: { id: 'notification.error' },
-        });
-      })
-      .finally(() => {
-        unlockApp();
-      });
-  };
-
-  const defaultDescription = `${formatMessage({
-    id: 'Settings.roles.form.created',
-    defaultMessage: 'Created',
-  })} ${format(new Date(), 'PPP')}`;
-
-  return (
-    <Main>
-      <SettingsPageTitle name="Roles" />
-      <Formik
-        initialValues={{ name: '', description: defaultDescription }}
-        onSubmit={handleCreateRoleSubmit}
-        validationSchema={schema}
-        validateOnChange={false}
-      >
-        {({ handleSubmit, values, errors, handleReset, handleChange }) => (
-          <Form noValidate>
-            <>
-              <HeaderLayout
-                primaryAction={
-                  <Flex gap={2}>
-                    <Button
-                      variant="secondary"
-                      onClick={() => {
-                        handleReset();
-                        permissionsRef.current.resetForm();
-                      }}
-                      size="L"
-                    >
-                      {formatMessage({
-                        id: 'app.components.Button.reset',
-                        defaultMessage: 'Reset',
-                      })}
-                    </Button>
-                    <Button onClick={handleSubmit} loading={isSubmitting} size="L">
-                      {formatMessage({
-                        id: 'global.save',
-                        defaultMessage: 'Save',
-                      })}
-                    </Button>
-                  </Flex>
-                }
-                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',
-                })}
-                navigationAction={
-                  <Link startIcon={<ArrowLeft />} to="/settings/roles">
-                    {formatMessage({
-                      id: 'global.back',
-                      defaultMessage: 'Back',
-                    })}
-                  </Link>
-                }
-              />
-              <ContentLayout>
-                <Flex direction="column" alignItems="stretch" gap={6}>
-                  <Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
-                    <Flex direction="column" alignItems="stretch" gap={4}>
-                      <Flex justifyContent="space-between">
-                        <Box>
-                          <Box>
-                            <Typography fontWeight="bold">
-                              {formatMessage({
-                                id: 'global.details',
-                                defaultMessage: 'Details',
-                              })}
-                            </Typography>
-                          </Box>
-                          <Box>
-                            <Typography variant="pi" textColor="neutral600">
-                              {formatMessage({
-                                id: 'Settings.roles.form.description',
-                                defaultMessage: 'Name and description of the role',
-                              })}
-                            </Typography>
-                          </Box>
-                        </Box>
-                        <UsersRoleNumber>
-                          {formatMessage(
-                            {
-                              id: 'Settings.roles.form.button.users-with-role',
-                              defaultMessage:
-                                '{number, plural, =0 {# users} one {# user} other {# users}} with this role',
-                            },
-                            { number: 0 }
-                          )}
-                        </UsersRoleNumber>
-                      </Flex>
-                      <Grid gap={4}>
-                        <GridItem col={6}>
-                          <TextInput
-                            name="name"
-                            error={errors.name && formatMessage({ id: errors.name })}
-                            label={formatMessage({
-                              id: 'global.name',
-                              defaultMessage: 'Name',
-                            })}
-                            onChange={handleChange}
-                            value={values.name}
-                          />
-                        </GridItem>
-                        <GridItem col={6}>
-                          <Textarea
-                            label={formatMessage({
-                              id: 'global.description',
-                              defaultMessage: 'Description',
-                            })}
-                            name="description"
-                            error={errors.description && formatMessage({ id: errors.description })}
-                            onChange={handleChange}
-                          >
-                            {values.description}
-                          </Textarea>
-                        </GridItem>
-                      </Grid>
-                    </Flex>
-                  </Box>
-                  {!isLayoutLoading && !isRoleLoading ? (
-                    <Box shadow="filterShadow" hasRadius>
-                      <Permissions
-                        isFormDisabled={false}
-                        ref={permissionsRef}
-                        permissions={rolePermissions}
-                        layout={permissionsLayout}
-                      />
-                    </Box>
-                  ) : (
-                    <Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
-                      <LoadingIndicatorPage />
-                    </Box>
-                  )}
-                </Flex>
-              </ContentLayout>
-            </>
-          </Form>
-        )}
-      </Formik>
-    </Main>
-  );
-};
-
-export default function () {
-  return (
-    <CheckPagePermissions permissions={adminPermissions.settings.roles.create}>
-      <CreatePage />
-    </CheckPagePermissions>
-  );
-}
-
-export { CreatePage };

package/ee/admin/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ActionRow/utils/constants.js

@@ -1,3 +0,0 @@
-const IS_DISABLED = false;
-
-export default IS_DISABLED;

package/ee/admin/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ConditionsSelect/MenuList/utils/constants.js

@@ -1,3 +0,0 @@
-const IS_DISABLED = false;
-
-export default IS_DISABLED;

package/ee/admin/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/Collapse/utils/constants.js

@@ -1,3 +0,0 @@
-const IS_DISABLED = false;
-
-export default IS_DISABLED;

package/ee/admin/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/utils/constants.js

@@ -1,3 +0,0 @@
-const IS_DISABLED = false;
-
-export default IS_DISABLED;

package/ee/admin/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/utils/constants.js

@@ -1,3 +0,0 @@
-const IS_DISABLED = false;
-
-export default IS_DISABLED;

package/ee/admin/pages/SettingsPage/pages/Roles/EditPage/components/GlobalActions/utils/constants.js

@@ -1,3 +0,0 @@
-const IS_DISABLED = false;
-
-export default IS_DISABLED;

package/ee/admin/pages/SettingsPage/pages/Roles/EditPage/components/PluginsAndSettings/SubCategory/utils/constants.js

@@ -1,3 +0,0 @@
-const IS_DISABLED = false;
-
-export default IS_DISABLED;

package/ee/admin/pages/SettingsPage/pages/Roles/ListPage/index.js

@@ -1,376 +0,0 @@
-import React, { useCallback, useEffect, useReducer, useState } from 'react';
-import {
-  ConfirmDialog,
-  LoadingIndicatorPage,
-  SearchURLQuery,
-  SettingsPageTitle,
-  getFetchClient,
-  useNotification,
-  useQueryParams,
-  useRBAC,
-  useFocusWhenNavigate,
-} from '@strapi/helper-plugin';
-import { Plus, Trash, Duplicate, Pencil } from '@strapi/icons';
-import {
-  Button,
-  ActionLayout,
-  ContentLayout,
-  HeaderLayout,
-  Main,
-  Table,
-  Tbody,
-  TFooter,
-  Thead,
-  Th,
-  Tr,
-  Typography,
-  VisuallyHidden,
-} from '@strapi/design-system';
-import { get } from 'lodash';
-import matchSorter from 'match-sorter';
-import { useIntl } from 'react-intl';
-import { useHistory } from 'react-router-dom';
-import { useRolesList } from '../../../../../../../admin/src/hooks';
-import adminPermissions from '../../../../../../../admin/src/permissions';
-import EmptyRole from '../../../../../../../admin/src/pages/SettingsPage/pages/Roles/ListPage/components/EmptyRole';
-import BaseRoleRow from '../../../../../../../admin/src/pages/SettingsPage/pages/Roles/ListPage/components/RoleRow';
-import reducer, { initialState } from './reducer';
-
-const useSortedRoles = () => {
-  useFocusWhenNavigate();
-  const {
-    isLoading: isLoadingForPermissions,
-    allowedActions: { canCreate, canDelete, canRead, canUpdate },
-  } = useRBAC(adminPermissions.settings.roles);
-
-  const { getData, roles, isLoading } = useRolesList(false);
-  const [{ query }] = useQueryParams();
-  const _q = query?._q || '';
-  const sortedRoles = matchSorter(roles, _q, { keys: ['name', 'description'] });
-
-  useEffect(() => {
-    if (!isLoadingForPermissions && canRead) {
-      getData();
-    }
-  }, [isLoadingForPermissions, canRead, getData]);
-
-  return {
-    isLoadingForPermissions,
-    canCreate,
-    canDelete,
-    canRead,
-    canUpdate,
-    isLoading,
-    getData,
-    sortedRoles,
-    roles,
-  };
-};
-
-const useRoleActions = ({ getData, canCreate, canDelete, canUpdate }) => {
-  const { formatMessage } = useIntl();
-
-  const toggleNotification = useNotification();
-  const [isWarningDeleteAllOpened, setIsWarningDeleteAllOpenend] = useState(false);
-  const { push } = useHistory();
-  const [{ selectedRoles, showModalConfirmButtonLoading, roleToDelete }, dispatch] = useReducer(
-    reducer,
-    initialState
-  );
-
-  const { post } = getFetchClient();
-
-  const handleDeleteData = async () => {
-    try {
-      dispatch({
-        type: 'ON_REMOVE_ROLES',
-      });
-
-      await post('/admin/roles/batch-delete', {
-        ids: [roleToDelete],
-      });
-
-      await getData();
-
-      dispatch({
-        type: 'RESET_DATA_TO_DELETE',
-      });
-    } catch (err) {
-      const errorIds = get(err, ['response', 'payload', 'data', 'ids'], null);
-
-      if (errorIds && Array.isArray(errorIds)) {
-        const errorsMsg = errorIds.join('\n');
-        toggleNotification({
-          type: 'warning',
-          message: errorsMsg,
-        });
-      } else {
-        toggleNotification({
-          type: 'warning',
-          message: { id: 'notification.error' },
-        });
-      }
-    }
-    handleToggleModal();
-  };
-
-  const onRoleDuplicate = useCallback(
-    (id) => {
-      push(`/settings/roles/duplicate/${id}`);
-    },
-    [push]
-  );
-
-  const handleNewRoleClick = () => push('/settings/roles/new');
-
-  const onRoleRemove = useCallback((roleId) => {
-    dispatch({
-      type: 'SET_ROLE_TO_DELETE',
-      id: roleId,
-    });
-
-    handleToggleModal();
-  }, []);
-
-  const handleToggleModal = () => setIsWarningDeleteAllOpenend((prev) => !prev);
-
-  const handleGoTo = useCallback(
-    (id) => {
-      push(`/settings/roles/${id}`);
-    },
-    [push]
-  );
-
-  const handleClickDelete = useCallback(
-    (e, role) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      if (role.usersCount) {
-        toggleNotification({
-          type: 'info',
-          message: { id: 'Roles.ListPage.notification.delete-not-allowed' },
-        });
-      } else {
-        onRoleRemove(role.id);
-      }
-    },
-    [toggleNotification, onRoleRemove]
-  );
-
-  const handleClickDuplicate = useCallback(
-    (e, role) => {
-      e.preventDefault();
-      e.stopPropagation();
-      onRoleDuplicate(role.id);
-    },
-    [onRoleDuplicate]
-  );
-
-  const getIcons = useCallback(
-    (role) => [
-      ...(canCreate
-        ? [
-            {
-              onClick: (e) => handleClickDuplicate(e, role),
-              label: formatMessage({ id: 'app.utils.duplicate', defaultMessage: 'Duplicate' }),
-              icon: <Duplicate />,
-            },
-          ]
-        : []),
-      ...(canUpdate
-        ? [
-            {
-              onClick: () => handleGoTo(role.id),
-              label: formatMessage({ id: 'app.utils.edit', defaultMessage: 'Edit' }),
-              icon: <Pencil />,
-            },
-          ]
-        : []),
-      ...(canDelete
-        ? [
-            {
-              onClick: (e) => handleClickDelete(e, role),
-              label: formatMessage({ id: 'global.delete', defaultMessage: 'Delete' }),
-              icon: <Trash />,
-            },
-          ]
-        : []),
-    ],
-    [
-      formatMessage,
-      handleClickDelete,
-      handleClickDuplicate,
-      handleGoTo,
-      canCreate,
-      canUpdate,
-      canDelete,
-    ]
-  );
-
-  return {
-    handleNewRoleClick,
-    getIcons,
-    selectedRoles,
-    isWarningDeleteAllOpened,
-    showModalConfirmButtonLoading,
-    handleToggleModal,
-    handleDeleteData,
-  };
-};
-
-const RoleListPage = () => {
-  const { formatMessage } = useIntl();
-
-  const {
-    isLoadingForPermissions,
-    canCreate,
-    canRead,
-    canDelete,
-    canUpdate,
-    isLoading,
-    getData,
-    sortedRoles,
-  } = useSortedRoles();
-
-  const {
-    handleNewRoleClick,
-    getIcons,
-    isWarningDeleteAllOpened,
-    showModalConfirmButtonLoading,
-    handleToggleModal,
-    handleDeleteData,
-  } = useRoleActions({ getData, canCreate, canDelete, canUpdate });
-
-  // ! TODO - Show the search bar only if the user is allowed to read - add the search input
-  // canRead
-
-  const rowCount = sortedRoles.length + 1;
-  const colCount = 6;
-
-  if (isLoadingForPermissions) {
-    return (
-      <Main>
-        <LoadingIndicatorPage />
-      </Main>
-    );
-  }
-
-  const title = formatMessage({
-    id: 'global.roles',
-    defaultMessage: 'roles',
-  });
-
-  return (
-    <Main>
-      <SettingsPageTitle name="Roles" />
-      <HeaderLayout
-        primaryAction={
-          canCreate ? (
-            <Button onClick={handleNewRoleClick} startIcon={<Plus />} size="S">
-              {formatMessage({
-                id: 'Settings.roles.list.button.add',
-                defaultMessage: 'Add new role',
-              })}
-            </Button>
-          ) : null
-        }
-        title={title}
-        subtitle={formatMessage({
-          id: 'Settings.roles.list.description',
-          defaultMessage: 'List of roles',
-        })}
-        as="h2"
-      />
-      {canRead && (
-        <ActionLayout
-          startActions={
-            <SearchURLQuery
-              label={formatMessage(
-                { id: 'app.component.search.label', defaultMessage: 'Search for {target}' },
-                { target: title }
-              )}
-            />
-          }
-        />
-      )}
-      {canRead && (
-        <ContentLayout>
-          <Table
-            colCount={colCount}
-            rowCount={rowCount}
-            footer={
-              canCreate ? (
-                <TFooter onClick={handleNewRoleClick} icon={<Plus />}>
-                  {formatMessage({
-                    id: 'Settings.roles.list.button.add',
-                    defaultMessage: 'Add new role',
-                  })}
-                </TFooter>
-              ) : null
-            }
-          >
-            <Thead>
-              <Tr aria-rowindex={1}>
-                <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>
-            <Tbody>
-              {sortedRoles?.map((role, index) => (
-                <BaseRoleRow
-                  key={role.id}
-                  id={role.id}
-                  name={role.name}
-                  description={role.description}
-                  usersCount={role.usersCount}
-                  icons={getIcons(role)}
-                  rowIndex={index + 2}
-                />
-              ))}
-            </Tbody>
-          </Table>
-          {!rowCount && !isLoading && <EmptyRole />}
-        </ContentLayout>
-      )}
-      <ConfirmDialog
-        isOpen={isWarningDeleteAllOpened}
-        onConfirm={handleDeleteData}
-        isConfirmButtonLoading={showModalConfirmButtonLoading}
-        onToggleDialog={handleToggleModal}
-      />
-    </Main>
-  );
-};
-
-export default RoleListPage;

package/ee/admin/pages/SettingsPage/pages/Roles/ProtectedListPage/index.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import { CheckPagePermissions } from '@strapi/helper-plugin';
-import adminPermissions from '../../../../../../../admin/src/permissions';
-import ListPage from '../ListPage';
-
-const ProtectedListPage = () => (
-  <CheckPagePermissions permissions={adminPermissions.settings.roles.main}>
-    <ListPage />
-  </CheckPagePermissions>
-);
-
-export default ProtectedListPage;