@strapi/admin 4.5.0-alpha.0 → 4.5.0

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/utils/transformPermissionsData.js

@@ -0,0 +1,36 @@
+import { flatten } from 'lodash';
+
+const transformPermissionsData = (data) => {
+  const layout = {
+    allActionsIds: [],
+    permissions: [],
+  };
+
+  layout.permissions = Object.keys(data).map((apiId) => ({
+    apiId,
+    label: apiId.split('::')[1],
+    controllers: flatten(
+      Object.keys(data[apiId].controllers).map((controller) => ({
+        controller,
+        actions: flatten(
+          data[apiId].controllers[controller].map((action) => {
+            const actionId = `${apiId}.${controller}.${action}`;
+
+            if (apiId.includes('api::')) {
+              layout.allActionsIds.push(actionId);
+            }
+
+            return {
+              action,
+              actionId,
+            };
+          })
+        ),
+      }))
+    ),
+  }));
+
+  return layout;
+};
+
+export default transformPermissionsData;

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/DefaultButton/index.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Link } from '@strapi/helper-plugin';
+import { useHistory } from 'react-router-dom';
+import styled from 'styled-components';
+
+const MESSAGES_MAP = {
+  edit: {
+    id: 'app.component.table.edit',
+    defaultMessage: 'Edit {target}',
+  },
+  read: {
+    id: 'app.component.table.read',
+    defaultMessage: 'Read {target}',
+  },
+};
+
+const LinkStyled = styled(Link)`
+  svg {
+    path {
+      fill: ${({ theme }) => theme.colors.neutral500};
+    }
+  }
+
+  &:hover,
+  &:focus {
+    svg {
+      path {
+        fill: ${({ theme }) => theme.colors.neutral800};
+      }
+    }
+  }
+`;
+
+const DefaultButton = ({ tokenName, tokenId, buttonType, children }) => {
+  const { formatMessage } = useIntl();
+  const {
+    location: { pathname },
+  } = useHistory();
+
+  return (
+    <LinkStyled
+      to={`${pathname}/${tokenId}`}
+      title={formatMessage(MESSAGES_MAP[buttonType], { target: tokenName })}
+    >
+      {children}
+    </LinkStyled>
+  );
+};
+
+DefaultButton.propTypes = {
+  tokenName: PropTypes.string.isRequired,
+  tokenId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  buttonType: PropTypes.string,
+  children: PropTypes.node.isRequired,
+};
+
+DefaultButton.defaultProps = {
+  buttonType: 'edit',
+};
+
+export default DefaultButton;

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/DeleteButton/index.js

@@ -24,6 +24,7 @@ const DeleteButton = ({ tokenName, onClickDelete }) => {
           },
           { target: `${tokenName}` }
         )}
+        name="delete"
         noBorder
         icon={<Trash />}
       />

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/ReadButton/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Eye from '@strapi/icons/Eye';
+import PropTypes from 'prop-types';
+import DefaultButton from '../DefaultButton';
+
+const ReadButton = ({ tokenName, tokenId }) => {
+  return (
+    <DefaultButton tokenName={tokenName} tokenId={tokenId} buttonType="read">
+      <Eye />
+    </DefaultButton>
+  );
+};
+
+ReadButton.propTypes = {
+  tokenName: PropTypes.string.isRequired,
+  tokenId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+};
+
+export default ReadButton;

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/UpdateButton/index.js

@@ -1,46 +1,13 @@
 import React from 'react';
 import Pencil from '@strapi/icons/Pencil';
-import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import { Link } from '@strapi/helper-plugin';
-import { useHistory } from 'react-router-dom';
-import styled from 'styled-components';
-
-const LinkUpdate = styled(Link)`
-  svg {
-    path {
-      fill: ${({ theme }) => theme.colors.neutral500};
-    }
-  }
-
-  &:hover {
-    svg {
-      path {
-        fill: ${({ theme }) => theme.colors.neutral800};
-      }
-    }
-  }
-`;
+import DefaultButton from '../DefaultButton';
 
 const UpdateButton = ({ tokenName, tokenId }) => {
-  const { formatMessage } = useIntl();
-  const {
-    location: { pathname },
-  } = useHistory();
-
   return (
-    <LinkUpdate
-      to={`${pathname}/${tokenId}`}
-      title={formatMessage(
-        {
-          id: 'app.component.table.edit',
-          defaultMessage: 'Edit {target}',
-        },
-        { target: `${tokenName}` }
-      )}
-    >
+    <DefaultButton tokenName={tokenName} tokenId={tokenId}>
       <Pencil />
-    </LinkUpdate>
+    </DefaultButton>
   );
 };
 

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/index.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 
@@ -13,12 +12,11 @@ import {
   pxToRem,
   useTracking,
 } from '@strapi/helper-plugin';
-
 import DeleteButton from './DeleteButton';
 import UpdateButton from './UpdateButton';
+import ReadButton from './ReadButton';
 
-const TableRows = ({ canDelete, canUpdate, onClickDelete, withBulkActions, rows }) => {
-  const { formatMessage } = useIntl();
+const TableRows = ({ canDelete, canUpdate, canRead, onClickDelete, withBulkActions, rows }) => {
   const [{ query }] = useQueryParams();
   const [, sortOrder] = query.sort.split(':');
   const {
@@ -59,22 +57,24 @@ const TableRows = ({ canDelete, canUpdate, onClickDelete, withBulkActions, rows
             </Td>
             <Td>
               <Typography textColor="neutral800">
-                {formatMessage({
-                  id: `Settings.apiTokens.types.${apiToken.type}`,
-                  defaultMessage: 'Type unknown',
-                })}
+                <RelativeTime timestamp={new Date(apiToken.createdAt)} />
               </Typography>
             </Td>
             <Td>
-              <Typography textColor="neutral800">
-                <RelativeTime timestamp={new Date(apiToken.createdAt)} />
-              </Typography>
+              {apiToken.lastUsedAt && (
+                <Typography textColor="neutral800">
+                  <RelativeTime timestamp={new Date(apiToken.lastUsedAt)} />
+                </Typography>
+              )}
             </Td>
 
             {withBulkActions && (
               <Td>
                 <Flex justifyContent="end">
                   {canUpdate && <UpdateButton tokenName={apiToken.name} tokenId={apiToken.id} />}
+                  {!canUpdate && canRead && (
+                    <ReadButton tokenName={apiToken.name} tokenId={apiToken.id} />
+                  )}
                   {canDelete && (
                     <DeleteButton
                       tokenName={apiToken.name}
@@ -94,6 +94,7 @@ const TableRows = ({ canDelete, canUpdate, onClickDelete, withBulkActions, rows
 TableRows.defaultProps = {
   canDelete: false,
   canUpdate: false,
+  canRead: false,
   onClickDelete() {},
   rows: [],
   withBulkActions: false,
@@ -102,6 +103,7 @@ TableRows.defaultProps = {
 TableRows.propTypes = {
   canDelete: PropTypes.bool,
   canUpdate: PropTypes.bool,
+  canRead: PropTypes.bool,
   onClickDelete: PropTypes.func,
   rows: PropTypes.array,
   withBulkActions: PropTypes.bool,

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/index.js

@@ -147,15 +147,16 @@ const ApiTokenListView = () => {
             headers={headers}
             contentType="api-tokens"
             rows={apiTokens}
-            withBulkActions={canDelete || canUpdate}
+            withBulkActions={canDelete || canUpdate || canRead}
             isLoading={isLoading}
             onConfirmDelete={(id) => deleteMutation.mutateAsync(id)}
           >
             <TableRows
+              canRead={canRead}
               canDelete={canDelete}
               canUpdate={canUpdate}
               rows={apiTokens}
-              withBulkActions={canDelete || canUpdate}
+              withBulkActions={canDelete || canUpdate || canRead}
             />
           </DynamicTable>
         )}

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/utils/tableHeaders.js

@@ -22,23 +22,23 @@ const tableHeaders = [
     },
   },
   {
-    name: 'type',
-    key: 'type',
+    name: 'createdAt',
+    key: 'createdAt',
     metadatas: {
       label: {
-        id: 'Settings.apiTokens.ListView.headers.type',
-        defaultMessage: 'Token type',
+        id: 'Settings.apiTokens.ListView.headers.createdAt',
+        defaultMessage: 'Created at',
       },
       sortable: false,
     },
   },
   {
-    name: 'createdAt',
-    key: 'createdAt',
+    name: 'lastUsedAt',
+    key: 'lastUsedAt',
     metadatas: {
       label: {
-        id: 'Settings.apiTokens.ListView.headers.createdAt',
-        defaultMessage: 'Created at',
+        id: 'Settings.apiTokens.ListView.headers.lastUsedAt',
+        defaultMessage: 'Last used',
       },
       sortable: false,
     },

package/admin/src/pages/SettingsPage/pages/ApiTokens/ProtectedEditView/index.js

@@ -5,7 +5,7 @@ import EditView from '../EditView';
 
 const ProtectedApiTokenCreateView = () => {
   return (
-    <CheckPagePermissions permissions={adminPermissions.settings['api-tokens'].update}>
+    <CheckPagePermissions permissions={adminPermissions.settings['api-tokens'].read}>
       <EditView />
     </CheckPagePermissions>
   );

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ActionRow/index.js

@@ -5,14 +5,9 @@ import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
 import { Typography } from '@strapi/design-system/Typography';
 import { MultiSelectNested } from '@strapi/design-system/Select';
-import upperFirst from 'lodash/upperFirst';
 import { useIntl } from 'react-intl';
-import styled from 'styled-components';
-import { rowHeight } from '../../Permissions/utils/constants';
 
-const FlexWrapper = styled(Flex)`
-  height: ${rowHeight};
-`;
+import { getNestedOptions, getSelectedValues, getNewStateFromChangedValues } from './utils/options';
 
 const ActionRow = ({
   arrayOfOptionsGroupedByCategory,
@@ -24,40 +19,13 @@ const ActionRow = ({
   value,
 }) => {
   const { formatMessage } = useIntl();
-  const options = arrayOfOptionsGroupedByCategory.reduce((arr, curr) => {
-    const [label, children] = curr;
-    const obj = {
-      label: upperFirst(label),
-      children: children.map((child) => ({
-        label: child.displayName,
-        value: child.id,
-      })),
-    };
 
-    return [...arr, obj];
-  }, []);
-
-  // Output: ['value1', 'value2']
-  const values = Object.values(value)
-    .map((x) =>
-      Object.entries(x)
-        .filter(([, value]) => value)
-        .map(([key]) => key)
-    )
-    .flat();
-
-  // ! Only expects arrayOfOpt to be [['default', obj]] - might break in future changes
   const handleChange = (val) => {
-    const [[, values]] = arrayOfOptionsGroupedByCategory;
-    const formattedValues = values.reduce(
-      (acc, curr) => ({ [curr.id]: val.includes(curr.id), ...acc }),
-      {}
-    );
-    onChange(name, formattedValues);
+    onChange(name, getNewStateFromChangedValues(arrayOfOptionsGroupedByCategory, val));
   };
 
   return (
-    <FlexWrapper as="li" background={isGrey ? 'neutral100' : 'neutral0'}>
+    <Flex as="li" background={isGrey ? 'neutral100' : 'neutral0'} paddingBottom={3} paddingTop={3}>
       <Flex paddingLeft={6} style={{ width: 180 }}>
         <Typography variant="sigma" textColor="neutral600">
           {formatMessage({
@@ -85,12 +53,12 @@ const ActionRow = ({
           id={name}
           customizeContent={(values) => `${values.length} currently selected`}
           onChange={handleChange}
-          value={values}
-          options={options}
+          value={getSelectedValues(value)}
+          options={getNestedOptions(arrayOfOptionsGroupedByCategory)}
           disabled={isFormDisabled || IS_DISABLED}
         />
       </Box>
-    </FlexWrapper>
+    </Flex>
   );
 };
 
@@ -103,4 +71,5 @@ ActionRow.propTypes = {
   value: PropTypes.object.isRequired,
   onChange: PropTypes.func.isRequired,
 };
+
 export default ActionRow;

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ActionRow/utils/options.js

@@ -0,0 +1,31 @@
+import upperFirst from 'lodash/upperFirst';
+
+const getSelectedValues = (rawValue) =>
+  Object.values(rawValue)
+    .map((x) =>
+      Object.entries(x)
+        .filter(([, value]) => value)
+        .map(([key]) => key)
+    )
+    .flat();
+
+const getNestedOptions = (options) =>
+  options.reduce((acc, [label, children]) => {
+    acc.push({
+      label: upperFirst(label),
+      children: children.map((child) => ({
+        label: child.displayName,
+        value: child.id,
+      })),
+    });
+
+    return acc;
+  }, []);
+
+const getNewStateFromChangedValues = (options, changedValues) =>
+  options
+    .map(([, values]) => values)
+    .flat()
+    .reduce((acc, curr) => ({ [curr.id]: changedValues.includes(curr.id), ...acc }), {});
+
+export { getNestedOptions, getSelectedValues, getNewStateFromChangedValues };

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/index.js

@@ -1,10 +1,12 @@
 import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
 import { Button } from '@strapi/design-system/Button';
-import { Divider } from '@strapi/design-system/Divider';
-import { Stack } from '@strapi/design-system/Stack';
-import { ModalFooter, ModalHeader, ModalLayout } from '@strapi/design-system/ModalLayout';
+import {
+  ModalFooter,
+  ModalHeader,
+  ModalLayout,
+  ModalBody,
+} from '@strapi/design-system/ModalLayout';
 import { Breadcrumbs, Crumb } from '@strapi/design-system/Breadcrumbs';
 import { Typography } from '@strapi/design-system/Typography';
 import produce from 'immer';
@@ -88,48 +90,35 @@ const ConditionsModal = ({ actions, headerBreadCrumbs, isFormDisabled, onClosed,
           ))}
         </Breadcrumbs>
       </ModalHeader>
-      <Box padding={8}>
-        <Stack spacing={6}>
-          <Typography variant="beta" as="h2">
+      <ModalBody>
+        {actionsToDisplay.length === 0 && (
+          <Typography>
             {formatMessage({
-              id: 'Settings.permissions.conditions.define-conditions',
-              defaultMessage: 'Define conditions',
+              id: 'Settings.permissions.conditions.no-actions',
+              defaultMessage:
+                'You first need to select actions (create, read, update, ...) before defining conditions on them.',
             })}
           </Typography>
-          <Box>
-            <Divider />
-          </Box>
-          <Box>
-            {actionsToDisplay.length === 0 && (
-              <Typography>
-                {formatMessage({
-                  id: 'Settings.permissions.conditions.no-actions',
-                  defaultMessage:
-                    'You first need to select actions (create, read, update, ...) before defining conditions on them.',
-                })}
-              </Typography>
-            )}
-            <ul>
-              {actionsToDisplay.map(({ actionId, label, pathToConditionsObject }, index) => {
-                const name = pathToConditionsObject.join('..');
-
-                return (
-                  <ActionRow
-                    key={actionId}
-                    arrayOfOptionsGroupedByCategory={arrayOfOptionsGroupedByCategory}
-                    label={label}
-                    isFormDisabled={isFormDisabled}
-                    isGrey={index % 2 === 0}
-                    name={name}
-                    onChange={handleChange}
-                    value={get(state, name, {})}
-                  />
-                );
-              })}
-            </ul>
-          </Box>
-        </Stack>
-      </Box>
+        )}
+        <ul>
+          {actionsToDisplay.map(({ actionId, label, pathToConditionsObject }, index) => {
+            const name = pathToConditionsObject.join('..');
+
+            return (
+              <ActionRow
+                key={actionId}
+                arrayOfOptionsGroupedByCategory={arrayOfOptionsGroupedByCategory}
+                label={label}
+                isFormDisabled={isFormDisabled}
+                isGrey={index % 2 === 0}
+                name={name}
+                onChange={handleChange}
+                value={get(state, name, {})}
+              />
+            );
+          })}
+        </ul>
+      </ModalBody>
       <ModalFooter
         startActions={
           <Button variant="tertiary" onClick={onToggle}>

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/Collapse/index.js

@@ -232,7 +232,7 @@ const Collapse = ({
         </Flex>
         {isModalOpen && (
           <ConditionsModal
-            headerBreadCrumbs={[label, 'app.components.LeftMenuLinkContainer.settings']}
+            headerBreadCrumbs={[label, 'Settings.permissions.conditions.conditions']}
             actions={checkboxesActions}
             isFormDisabled={isFormDisabled}
             onClosed={handleModalClose}

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

@@ -8,7 +8,7 @@ import { IconButton } from '@strapi/design-system/IconButton';
 import { stopPropagation, onRowClick, pxToRem } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 
-const RoleRow = ({ id, name, description, usersCount, icons }) => {
+const RoleRow = ({ id, name, description, usersCount, icons, rowIndex }) => {
   const { formatMessage } = useIntl();
 
   const usersCountText = formatMessage(
@@ -21,6 +21,7 @@ const RoleRow = ({ id, name, description, usersCount, icons }) => {
 
   return (
     <Tr
+      aria-rowindex={rowIndex}
       key={id}
       {...onRowClick({
         fn: icons[1].onClick,
@@ -60,6 +61,7 @@ RoleRow.propTypes = {
   description: PropTypes.string.isRequired,
   usersCount: PropTypes.number.isRequired,
   icons: PropTypes.array.isRequired,
+  rowIndex: PropTypes.number.isRequired,
 };
 
 export default RoleRow;

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

@@ -168,7 +168,7 @@ const RoleListPage = () => {
             </Tr>
           </Thead>
           <Tbody>
-            {sortedRoles?.map((role) => (
+            {sortedRoles?.map((role, rowIndex) => (
               <RoleRow
                 key={role.id}
                 id={role.id}
@@ -176,6 +176,7 @@ const RoleListPage = () => {
                 description={role.description}
                 usersCount={role.usersCount}
                 icons={getIcons(role)}
+                rowIndex={rowIndex + 2}
               />
             ))}
           </Tbody>

package/admin/src/pages/SettingsPage/pages/Users/ListPage/ModalForm/index.js

@@ -69,8 +69,8 @@ const ModalForm = ({ queryName, onToggle }) => {
     } catch (err) {
       unlockApp();
 
-      if (err?.response?.data.message === 'Email already taken') {
-        setErrors({ email: err.response.data.message });
+      if (err?.response?.data?.error.message === 'Email already taken') {
+        setErrors({ email: err.response.data.error.message });
       }
     }
   };

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/EventInput/index.js

@@ -114,7 +114,7 @@ const EventInput = ({ isDraftAndPublish }) => {
               if (header === 'app.utils.publish' || header === 'app.utils.unpublish') {
                 return (
                   <td
-                    key={header}
+                    key={header.id}
                     title={formatMessage({
                       id: 'Settings.webhooks.event.publish-tooltip',
                       defaultMessage:
@@ -129,7 +129,7 @@ const EventInput = ({ isDraftAndPublish }) => {
               }
 
               return (
-                <td key={header}>
+                <td key={header.id}>
                   <Typography variant="sigma" textColor="neutral600">
                     {formatMessage(header)}
                   </Typography>

package/admin/src/permissions/defaultPermissions.js

@@ -76,16 +76,12 @@ const permissions = {
       update: [{ action: 'admin::webhooks.update', subject: null }],
     },
     'api-tokens': {
-      main: [
-        { action: 'admin::api-tokens.create', subject: null },
-        { action: 'admin::api-tokens.read', subject: null },
-        { action: 'admin::api-tokens.update', subject: null },
-        { action: 'admin::api-tokens.delete', subject: null },
-      ],
+      main: [{ action: 'admin::api-tokens.access', subject: null }],
       create: [{ action: 'admin::api-tokens.create', subject: null }],
       delete: [{ action: 'admin::api-tokens.delete', subject: null }],
       read: [{ action: 'admin::api-tokens.read', subject: null }],
       update: [{ action: 'admin::api-tokens.update', subject: null }],
+      regenerate: [{ action: 'admin::api-tokens.regenerate', subject: null }],
     },
   },
 };

package/admin/src/translations/ca.json

@@ -107,7 +107,7 @@
   "Settings.permissions.conditions.anytime": "En qualsevol moment",
   "Settings.permissions.conditions.apply": "Aplicar",
   "Settings.permissions.conditions.can": "Poder",
-  "Settings.permissions.conditions.define-conditions": "Definir condicions",
+  "Settings.permissions.conditions.conditions": "Definir condicions",
   "Settings.permissions.conditions.links": "Enllaços",
   "Settings.permissions.conditions.no-actions": "No hi ha acció",
   "Settings.permissions.conditions.none-selected": "En qualsevol moment",
@@ -633,6 +633,8 @@
   "content-manager.plugin.description.short": "Veure, editar i eliminar informació de la base de dades de manera ràpida.",
   "content-manager.popUpWarning.bodyMessage.contentType.delete": "Esteu segur de voler eliminar aquest registre?",
   "content-manager.popUpWarning.bodyMessage.contentType.delete.all": "Esteu segur de voler eliminar aquests registres?",
+  "content-manager.popUpWarning.warning.publish-question": "Encara vols publicar-ho?",
+  "content-manager.popUpwarning.warning.has-draft-relations.button-confirm": "Sí, publicar",
   "content-manager.popover.display-relations.label": "Mostrar relacions",
   "content-manager.success.record.delete": "Eliminat",
   "content-manager.success.record.publish": "Publicat",
@@ -687,4 +689,4 @@
   "request.error.model.unknown": "Aquest model no existeix",
   "skipToContent": "Saltar al contingut",
   "submit": "Enviar"
-}
+}