@strapi/admin 4.4.0-alpha.0 → 4.4.0-beta.1

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/init.js

@@ -0,0 +1,13 @@
+import { transformPermissionsData } from './utils';
+
+const init = (state, permissions = []) => {
+  return {
+    ...state,
+    selectedAction: null,
+    routes: [],
+    selectedActions: [],
+    data: transformPermissionsData(permissions),
+  };
+};
+
+export default init;

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/reducer.js

@@ -0,0 +1,55 @@
+/* eslint-disable consistent-return */
+import produce from 'immer';
+import { pull } from 'lodash';
+import { transformPermissionsData } from './utils';
+
+export const initialState = {
+  data: {},
+  selectedActions: [],
+};
+
+const reducer = (state, action) =>
+  produce(state, (draftState) => {
+    switch (action.type) {
+      case 'ON_CHANGE': {
+        if (draftState.selectedActions.includes(action.value)) {
+          pull(draftState.selectedActions, action.value);
+        } else {
+          draftState.selectedActions.push(action.value);
+        }
+        break;
+      }
+      case 'SELECT_ALL_ACTIONS': {
+        draftState.selectedActions = [...draftState.data.allActionsIds];
+
+        break;
+      }
+      case 'ON_CHANGE_READ_ONLY': {
+        const onlyReadOnlyActions = draftState.data.allActionsIds.filter(
+          (actionId) => actionId.includes('find') || actionId.includes('findOne')
+        );
+        draftState.selectedActions = [...onlyReadOnlyActions];
+        break;
+      }
+      case 'UPDATE_PERMISSIONS_LAYOUT': {
+        draftState.data = transformPermissionsData(action.value);
+        break;
+      }
+      case 'UPDATE_ROUTES': {
+        draftState.routes = { ...action.value };
+        break;
+      }
+      case 'UPDATE_PERMISSIONS': {
+        draftState.selectedActions = [...action.value];
+        break;
+      }
+      case 'SET_SELECTED_ACTION': {
+        draftState.selectedAction = action.value;
+        break;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+export default reducer;

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

@@ -0,0 +1,16 @@
+import { addDays, format } from 'date-fns';
+import * as locales from 'date-fns/locale';
+
+const getDateOfExpiration = (createdAt, duration, language = 'en') => {
+  if (duration && typeof duration === 'number') {
+    const durationInDays = duration / 24 / 60 / 60 / 1000;
+
+    return format(addDays(new Date(createdAt), durationInDays), 'PPP', {
+      locale: locales[language],
+    });
+  }
+
+  return 'Unlimited';
+};
+
+export default getDateOfExpiration;

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

@@ -0,0 +1,5 @@
+import getDateOfExpiration from './getDateOfExpiration';
+import schema from './schema';
+import transformPermissionsData from './transformPermissionsData';
+
+export { getDateOfExpiration, schema, transformPermissionsData };

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

@@ -5,9 +5,10 @@ const schema = yup.object().shape({
   name: yup.string(translatedErrors.string).required(translatedErrors.required),
   type: yup
     .string(translatedErrors.string)
-    .oneOf(['read-only', 'full-access'])
+    .oneOf(['read-only', 'full-access', 'custom'])
     .required(translatedErrors.required),
   description: yup.string().nullable(),
+  lifespan: yup.number().integer().min(1).nullable().defined(translatedErrors.required),
 });
 
 export default schema;

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

@@ -128,7 +128,7 @@ const ApiTokenListView = () => {
             <LinkButton
               data-testid="create-api-token-button"
               startIcon={<Plus />}
-              size="L"
+              size="S"
               onClick={() => trackUsage('willAddTokenFromList')}
               to="/settings/api-tokens/create"
             >
@@ -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/ListPage/index.js

@@ -102,7 +102,7 @@ const RoleListPage = () => {
       <SettingsPageTitle name="Roles" />
       <HeaderLayout
         primaryAction={
-          <Button onClick={handleToggleModalForCreatingRole} startIcon={<Plus />} size="L">
+          <Button onClick={handleToggleModalForCreatingRole} startIcon={<Plus />} size="S">
             {formatMessage({
               id: 'Settings.roles.list.button.add',
               defaultMessage: 'Add new role',

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

@@ -105,7 +105,7 @@ const ListPage = () => {
       data-testid="create-user-button"
       onClick={handleToggle}
       startIcon={<Envelop />}
-      size="L"
+      size="S"
     >
       {formatMessage({
         id: 'Settings.permissions.users.create',

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

@@ -29,16 +29,16 @@ const StyledTable = styled.table`
 const displayedData = {
   headers: {
     default: [
-      'Settings.webhooks.events.create',
-      'Settings.webhooks.events.update',
-      'app.utils.delete',
+      { id: 'Settings.webhooks.events.create', defaultMessage: 'Create' },
+      { id: 'Settings.webhooks.events.update', defaultMessage: 'Update' },
+      { id: 'app.utils.delete', defaultMessage: 'Delete' },
     ],
     draftAndPublish: [
-      'Settings.webhooks.events.create',
-      'Settings.webhooks.events.update',
-      'app.utils.delete',
-      'app.utils.publish',
-      'app.utils.unpublish',
+      { id: 'Settings.webhooks.events.create', defaultMessage: 'Create' },
+      { id: 'Settings.webhooks.events.update', defaultMessage: 'Update' },
+      { id: 'app.utils.delete', defaultMessage: 'Delete' },
+      { id: 'app.utils.publish', defaultMessage: 'Publish' },
+      { id: 'app.utils.unpublish', defaultMessage: 'Unpublish' },
     ],
   },
   events: {
@@ -122,7 +122,7 @@ const EventInput = ({ isDraftAndPublish }) => {
                     })}
                   >
                     <Typography variant="sigma" textColor="neutral600">
-                      {formatMessage({ id: header, defaultMessage: header })}
+                      {formatMessage(header)}
                     </Typography>
                   </td>
                 );
@@ -131,7 +131,7 @@ const EventInput = ({ isDraftAndPublish }) => {
               return (
                 <td key={header}>
                   <Typography variant="sigma" textColor="neutral600">
-                    {formatMessage({ id: header, defaultMessage: header })}
+                    {formatMessage(header)}
                   </Typography>
                 </td>
               );

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

@@ -252,7 +252,7 @@ const ListView = () => {
           primaryAction={
             canCreate &&
             !loadingWebhooks && (
-              <LinkButton startIcon={<Plus />} variant="default" to={`${pathname}/create`} size="L">
+              <LinkButton startIcon={<Plus />} variant="default" to={`${pathname}/create`} size="S">
                 {formatMessage({
                   id: 'Settings.webhooks.list.button.add',
                   defaultMessage: 'Create new webhook',

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/en.json

@@ -91,10 +91,24 @@
   "Settings.apiTokens.ListView.headers.description": "Description",
   "Settings.apiTokens.ListView.headers.type": "Token type",
   "Settings.apiTokens.ListView.headers.createdAt": "Created at",
+  "Settings.apiTokens.ListView.headers.lastUsedAt": "Last used",
   "Settings.apiTokens.notification.copied": "Token copied to clipboard.",
   "Settings.apiTokens.title": "API Tokens",
   "Settings.apiTokens.types.full-access": "Full access",
   "Settings.apiTokens.types.read-only": "Read-only",
+  "Settings.apiTokens.duration.7-days": "7 days",
+  "Settings.apiTokens.duration.30-days": "30 days",
+  "Settings.apiTokens.duration.90-days": "90 days",
+  "Settings.apiTokens.duration.unlimited": "Unlimited",
+  "Settings.apiTokens.form.duration":"Token duration",
+  "Settings.apiTokens.form.type":"Token type",
+  "Settings.apiTokens.duration.expiration-date":"Expiration date",
+  "Settings.apiTokens.createPage.permissions.title":"Permissions",
+  "Settings.apiTokens.createPage.permissions.description":"Only actions bound by a route are listed below.",
+  "Settings.apiTokens.RegenerateDialog.title": "Regenerate token",
+  "Settings.apiTokens.popUpWarning.message": "Are you sure you want to regenerate this token?",
+  "Settings.apiTokens.Button.cancel": "Cancel",
+  "Settings.apiTokens.Button.regenerate": "Regenerate",
   "Settings.application.description": "Administration panel’s global information",
   "Settings.application.edition-title": "current plan",
   "Settings.application.get-help": "Get help",
@@ -416,6 +430,7 @@
   "app.utils.defaultMessage": " ",
   "app.utils.duplicate": "Duplicate",
   "app.utils.edit": "Edit",
+  "app.utils.delete": "Delete",
   "app.utils.errors.file-too-big.message": "The file is too big",
   "app.utils.filter-value": "Filter value",
   "app.utils.filters": "Filters",
@@ -757,6 +772,9 @@
   "notification.success.delete": "The item has been deleted",
   "notification.success.saved": "Saved",
   "notification.success.title": "Success:",
+  "notification.success.tokencreated": "API Token successfully created",
+  "notification.success.tokenedited": "API Token successfully edited",
+  "notification.error.tokennamenotunique": "Name already assigned to another token",
   "notification.version.update.message": "A new version of Strapi is available!",
   "notification.warning.title": "Warning:",
   "notification.warning.404": "404 - Not found",

package/admin/src/translations/es.json

@@ -759,7 +759,7 @@
     "global.table.header.roles": "Roles",
     "global.table.header.username": "Nombre de usuario",
     "global.type": "Tipo",
-    "global.users": "Useuarios",
+    "global.users": "Usuarios",
     "notification.warning.404": "404 - No Encontrado"
   
   }

package/admin/src/translations/fr.json

@@ -314,6 +314,7 @@
   "app.utils.defaultMessage": " ",
   "app.utils.duplicate": "Dupliquer",
   "app.utils.edit": "Modifier",
+  "app.utils.delete": "Supprimer",
   "app.utils.errors.file-too-big.message": "Le fichier est trop lourd",
   "app.utils.filter-value": "Valeur du filtre",
   "app.utils.filters": "Filtres",
@@ -587,6 +588,38 @@
   "content-manager.success.record.save": "Sauvegardé",
   "content-manager.success.record.unpublish": "Publication annulée",
   "content-manager.utils.data-loaded": "{number, plural, =1 {L'entrée a été chargée} other {Les entrées on été chargées} avec  succès",
+  "content-manager.apiError.This attribute must be unique": "Le champ {field} doit être unique",
+  "form.button.continue": "Continuer",
+  "global.search": "Rechercher",
+  "global.actions": "Actions",
+  "global.back": "Retour",
+  "global.cancel": "Annuler",
+  "global.change-password": "Modifier le mot de passe",
+  "global.content-manager": "Gestion du contenu",
+  "global.continue": "Continuer",
+  "global.delete": "Supprimer",
+  "global.delete-target": "Supprimer {target}",
+  "global.description": "Description",
+  "global.details": "Détails",
+  "global.disabled": "Désactivé",
+  "global.documentation": "Documentation",
+  "global.enabled": "Activé",
+  "global.finish": "Terminer",
+  "global.marketplace": "Marketplace",
+  "global.name": "Nom",
+  "global.none": "Aucun",
+  "global.password": "Mot de passe",
+  "global.plugins": "Plugins",
+  "global.profile": "Profil",
+  "global.reset-password": "Réinitialiser le mot de passe",
+  "global.roles": "Rôles",
+  "global.save": "Enregistrer",
+  "global.see-more": "Voir plus",
+  "global.select": "Sélectionner",
+  "global.select-all-entries": "Sélectionner toutes les entrées",
+  "global.settings": "Paramètres",
+  "global.type": "Type",
+  "global.users": "Utilisateurs",
   "form.button.done": "Terminer",
   "global.prompt.unsaved": "Êtes-vous sûr de vouloir quitter cette page? Toutes vos modifications seront perdues",
   "notification.contentType.relations.conflict": "Le Type de Contenu à des relations qui rentrent en conflit",