@strapi/admin 4.9.0-alpha.0 → 4.9.0-beta.2

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

@@ -1,43 +1,138 @@
-import React, { useCallback, useState } from 'react';
-import matchSorter from 'match-sorter';
+import React, { useCallback, useEffect, useReducer, useState } from 'react';
 import {
+  ConfirmDialog,
+  LoadingIndicatorPage,
+  SearchURLQuery,
   SettingsPageTitle,
-  useQuery,
-  useTracking,
+  getFetchClient,
+  useNotification,
+  useQueryParams,
+  useRBAC,
   useFocusWhenNavigate,
 } from '@strapi/helper-plugin';
-import Plus from '@strapi/icons/Plus';
-import Trash from '@strapi/icons/Trash';
-import Pencil from '@strapi/icons/Pencil';
-import Duplicate from '@strapi/icons/Duplicate';
-import { Button } from '@strapi/design-system/Button';
-import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
-import { Table, Tbody, Th, Thead, Tr, TFooter } from '@strapi/design-system/Table';
-import { Typography } from '@strapi/design-system/Typography';
-import { Main } from '@strapi/design-system/Main';
-import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden';
+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/get';
+import matchSorter from 'match-sorter';
 import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
-import RoleRow from './components/RoleRow';
-import EmptyRole from './components/EmptyRole';
-import UpgradePlanModal from '../../../../../components/UpgradePlanModal';
 import { useRolesList } from '../../../../../hooks';
+import adminPermissions from '../../../../../permissions';
+import EmptyRole from './components/EmptyRole';
+import BaseRoleRow from './components/RoleRow';
+import reducer, { initialState } from './reducer';
 
 const useSortedRoles = () => {
-  const { roles, isLoading } = useRolesList();
+  useFocusWhenNavigate();
+  const {
+    isLoading: isLoadingForPermissions,
+    allowedActions: { canCreate, canDelete, canRead, canUpdate },
+  } = useRBAC(adminPermissions.settings.roles);
 
-  const query = useQuery();
-  const _q = decodeURIComponent(query.get('_q') || '');
+  const { getData, roles, isLoading } = useRolesList(false);
+  const [{ query }] = useQueryParams();
+  const _q = query?._q || '';
   const sortedRoles = matchSorter(roles, _q, { keys: ['name', 'description'] });
 
-  return { isLoading, sortedRoles };
+  useEffect(() => {
+    if (!isLoadingForPermissions && canRead) {
+      getData();
+    }
+  }, [isLoadingForPermissions, canRead, getData]);
+
+  return {
+    isLoadingForPermissions,
+    canCreate,
+    canDelete,
+    canRead,
+    canUpdate,
+    isLoading,
+    getData,
+    sortedRoles,
+    roles,
+  };
 };
 
-const useRoleActions = () => {
+const useRoleActions = ({ getData, canCreate, canDelete, canUpdate }) => {
   const { formatMessage } = useIntl();
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const { trackUsage } = useTracking();
+
+  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) => {
@@ -46,144 +141,234 @@ const useRoleActions = () => {
     [push]
   );
 
-  const handleToggle = useCallback(() => {
-    setIsModalOpen((prev) => !prev);
-  }, []);
+  const handleClickDelete = useCallback(
+    (e, role) => {
+      e.preventDefault();
+      e.stopPropagation();
 
-  const handleToggleModalForCreatingRole = useCallback(() => {
-    trackUsage('didShowRBACUpgradeModal');
-    setIsModalOpen(true);
-  }, [trackUsage]);
+      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) => [
-      {
-        onClick: handleToggle,
-        label: formatMessage({ id: 'app.utils.duplicate', defaultMessage: 'Duplicate' }),
-        icon: <Duplicate />,
-      },
-      {
-        onClick: () => handleGoTo(role.id),
-        label: formatMessage({ id: 'app.utils.edit', defaultMessage: 'Edit' }),
-        icon: <Pencil />,
-      },
-      {
-        onClick: handleToggle,
-        label: formatMessage({ id: 'global.delete', defaultMessage: 'Delete' }),
-        icon: <Trash />,
-      },
+      ...(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, handleToggle, handleGoTo]
+    [
+      formatMessage,
+      handleClickDelete,
+      handleClickDuplicate,
+      handleGoTo,
+      canCreate,
+      canUpdate,
+      canDelete,
+    ]
   );
 
   return {
-    isModalOpen,
-    handleToggleModalForCreatingRole,
-    handleToggle,
+    handleNewRoleClick,
     getIcons,
+    selectedRoles,
+    isWarningDeleteAllOpened,
+    showModalConfirmButtonLoading,
+    handleToggleModal,
+    handleDeleteData,
   };
 };
 
 const RoleListPage = () => {
   const { formatMessage } = useIntl();
-  useFocusWhenNavigate();
 
-  const { sortedRoles, isLoading } = useSortedRoles();
-  const { isModalOpen, handleToggle, handleToggleModalForCreatingRole, getIcons } =
-    useRoleActions();
+  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 = 5;
+  const colCount = 6;
+
+  if (isLoadingForPermissions) {
+    return (
+      <Main>
+        <LoadingIndicatorPage />
+      </Main>
+    );
+  }
 
-  // ! TODO - Add the search input
+  const title = formatMessage({
+    id: 'global.roles',
+    defaultMessage: 'roles',
+  });
 
   return (
     <Main>
       <SettingsPageTitle name="Roles" />
       <HeaderLayout
         primaryAction={
-          <Button onClick={handleToggleModalForCreatingRole} startIcon={<Plus />} size="S">
-            {formatMessage({
-              id: 'Settings.roles.list.button.add',
-              defaultMessage: 'Add new role',
-            })}
-          </Button>
+          canCreate ? (
+            <Button onClick={handleNewRoleClick} startIcon={<Plus />} size="S">
+              {formatMessage({
+                id: 'Settings.roles.list.button.add',
+                defaultMessage: 'Add new role',
+              })}
+            </Button>
+          ) : null
         }
-        title={formatMessage({
-          id: 'global.roles',
-          defaultMessage: 'roles',
-        })}
+        title={title}
         subtitle={formatMessage({
           id: 'Settings.roles.list.description',
           defaultMessage: 'List of roles',
         })}
+        as="h2"
       />
-      <ContentLayout>
-        <Table
-          colCount={colCount}
-          rowCount={rowCount}
-          footer={
-            <TFooter onClick={handleToggleModalForCreatingRole} icon={<Plus />}>
-              {formatMessage({
-                id: 'Settings.roles.list.button.add',
-                defaultMessage: 'Add new role',
-              })}
-            </TFooter>
+      {canRead && (
+        <ActionLayout
+          startActions={
+            <SearchURLQuery
+              label={formatMessage(
+                { id: 'app.component.search.label', defaultMessage: 'Search for {target}' },
+                { target: title }
+              )}
+            />
           }
-        >
-          <Thead>
-            <Tr>
-              <Th>
-                <Typography variant="sigma" textColor="neutral600">
+        />
+      )}
+      {canRead && (
+        <ContentLayout>
+          <Table
+            colCount={colCount}
+            rowCount={rowCount}
+            footer={
+              canCreate ? (
+                <TFooter onClick={handleNewRoleClick} icon={<Plus />}>
                   {formatMessage({
-                    id: 'global.name',
-                    defaultMessage: 'Name',
+                    id: 'Settings.roles.list.button.add',
+                    defaultMessage: 'Add new role',
                   })}
-                </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, rowIndex) => (
-              <RoleRow
-                key={role.id}
-                id={role.id}
-                name={role.name}
-                description={role.description}
-                usersCount={role.usersCount}
-                icons={getIcons(role)}
-                rowIndex={rowIndex + 2}
-              />
-            ))}
-          </Tbody>
-        </Table>
-        {!rowCount && !isLoading && <EmptyRole />}
-      </ContentLayout>
-      <UpgradePlanModal isOpen={isModalOpen} onClose={handleToggle} />
+                </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>
   );
 };

package/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/components/FormTransferTokenContainer/index.js

@@ -0,0 +1,142 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Box, Grid, GridItem, Flex, Typography } from '@strapi/design-system';
+import LifeSpanInput from '../../../../../components/Tokens/LifeSpanInput';
+import TokenName from '../../../../../components/Tokens/TokenName';
+import TokenDescription from '../../../../../components/Tokens/TokenDescription';
+import TokenTypeSelect from '../../../../../components/Tokens/TokenTypeSelect';
+
+const FormTransferTokenContainer = ({
+  errors,
+  onChange,
+  canEditInputs,
+  isCreating,
+  values,
+  transferToken,
+}) => {
+  const { formatMessage } = useIntl();
+
+  const typeOptions = [
+    {
+      value: 'push',
+      label: {
+        id: 'Settings.transferTokens.types.push',
+        defaultMessage: 'Push',
+      },
+    },
+    {
+      value: 'pull',
+      label: {
+        id: 'Settings.transferTokens.types.pull',
+        defaultMessage: 'Pull',
+      },
+    },
+    {
+      value: 'push-pull',
+      label: {
+        id: 'Settings.transferTokens.types.push-pull',
+        defaultMessage: 'Full Access',
+      },
+    },
+  ];
+
+  return (
+    <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: 'global.details',
+            defaultMessage: 'Details',
+          })}
+        </Typography>
+        <Grid gap={5}>
+          <GridItem key="name" col={6} xs={12}>
+            <TokenName
+              errors={errors}
+              values={values}
+              canEditInputs={canEditInputs}
+              onChange={onChange}
+            />
+          </GridItem>
+          <GridItem key="description" col={6} xs={12}>
+            <TokenDescription
+              errors={errors}
+              values={values}
+              canEditInputs={canEditInputs}
+              onChange={onChange}
+            />
+          </GridItem>
+          <GridItem key="lifespan" col={6} xs={12}>
+            <LifeSpanInput
+              isCreating={isCreating}
+              errors={errors}
+              values={values}
+              onChange={onChange}
+              token={transferToken}
+            />
+          </GridItem>
+          <GridItem key="permissions" col={6} xs={12}>
+            <TokenTypeSelect
+              name="permissions"
+              values={values}
+              errors={errors}
+              label={{
+                id: 'Settings.tokens.form.type',
+                defaultMessage: 'Token type',
+              }}
+              onChange={(value) => {
+                onChange({ target: { name: 'permissions', value } });
+              }}
+              options={typeOptions}
+              canEditInputs={canEditInputs}
+            />
+          </GridItem>
+        </Grid>
+      </Flex>
+    </Box>
+  );
+};
+
+FormTransferTokenContainer.propTypes = {
+  errors: PropTypes.shape({
+    name: PropTypes.string,
+    description: PropTypes.string,
+    lifespan: PropTypes.string,
+    type: PropTypes.string,
+  }),
+  onChange: PropTypes.func.isRequired,
+  canEditInputs: PropTypes.bool.isRequired,
+  values: PropTypes.shape({
+    name: PropTypes.string,
+    description: PropTypes.string,
+    lifespan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.string,
+  }).isRequired,
+  isCreating: PropTypes.bool.isRequired,
+  transferToken: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.string,
+    lifespan: PropTypes.string,
+    name: PropTypes.string,
+    accessKey: PropTypes.string,
+    permissions: PropTypes.array,
+    description: PropTypes.string,
+    createdAt: PropTypes.string,
+  }),
+};
+
+FormTransferTokenContainer.defaultProps = {
+  errors: {},
+  transferToken: {},
+};
+
+export default FormTransferTokenContainer;

package/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/components/LoadingView/index.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import {
+  SettingsPageTitle,
+  LoadingIndicatorPage,
+  useFocusWhenNavigate,
+} from '@strapi/helper-plugin';
+import { HeaderLayout, ContentLayout, Main, Button } from '@strapi/design-system';
+import { Check } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+
+const LoadingView = ({ transferTokenName }) => {
+  const { formatMessage } = useIntl();
+  useFocusWhenNavigate();
+
+  return (
+    <Main aria-busy="true">
+      <SettingsPageTitle name="Transfer Tokens" />
+      <HeaderLayout
+        primaryAction={
+          <Button disabled startIcon={<Check />} type="button" size="L">
+            {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
+          </Button>
+        }
+        title={
+          transferTokenName ||
+          formatMessage({
+            id: 'Settings.transferTokens.createPage.title',
+            defaultMessage: 'Create Transfer Token',
+          })
+        }
+      />
+      <ContentLayout>
+        <LoadingIndicatorPage />
+      </ContentLayout>
+    </Main>
+  );
+};
+
+LoadingView.defaultProps = {
+  transferTokenName: null,
+};
+
+LoadingView.propTypes = {
+  transferTokenName: PropTypes.string,
+};
+
+export default LoadingView;