@strapi/admin 0.0.0-e6cac9fe30 → 0.0.0-fd8e4c6bfa

package/admin/src/content-manager/components/DynamicTable/index.js

@@ -36,16 +36,34 @@ const DynamicTable = ({
     });
 
     const formattedHeaders = headers.displayedHeaders.map((header) => {
+      const { metadatas } = header;
+
       if (header.fieldSchema.type === 'relation') {
         const sortFieldValue = `${header.name}.${header.metadatas.mainField.name}`;
 
         return {
           ...header,
+          metadatas: {
+            ...metadatas,
+            label: formatMessage({
+              id: getTrad(`containers.ListPage.table-headers.${header.name}`),
+              defaultMessage: header.name,
+            }),
+          },
           name: sortFieldValue,
         };
       }
 
-      return header;
+      return {
+        ...header,
+        metadatas: {
+          ...metadatas,
+          label: formatMessage({
+            id: getTrad(`containers.ListPage.table-headers.${header.name}`),
+            defaultMessage: header.name,
+          }),
+        },
+      };
     });
 
     if (!hasDraftAndPublish) {
@@ -61,7 +79,10 @@ const DynamicTable = ({
           type: 'custom',
         },
         metadatas: {
-          label: formatMessage({ id: getTrad('containers.ListPage.table-headers.published_at') }),
+          label: formatMessage({
+            id: getTrad(`containers.ListPage.table-headers.publishedAt`),
+            defaultMessage: 'publishedAt',
+          }),
           searchable: false,
           sortable: true,
         },

package/admin/src/content-manager/components/Inputs/index.js

@@ -164,6 +164,33 @@ function Inputs({
 
   const { label, description, placeholder, visible } = metadatas;
 
+  /**
+   * It decides whether using the default `step` accoding to its `inputType` or the one
+   * obtained from `metadatas`.
+   *
+   * The `metadatas.step` is returned when the `inputValue` is divisible by it or when the
+   * `inputValue` is empty, otherwise the default `step` is returned.
+   */
+  const inputStep = useMemo(() => {
+    if (!metadatas.step || (inputType !== 'datetime' && inputType !== 'time')) {
+      return step;
+    }
+
+    if (!inputValue) {
+      return metadatas.step;
+    }
+
+    let minutes;
+
+    if (inputType === 'datetime') {
+      minutes = parseInt(inputValue.substr(14, 2), 10);
+    } else if (inputType === 'time') {
+      minutes = parseInt(inputValue.slice(-2), 10);
+    }
+
+    return minutes % metadatas.step === 0 ? metadatas.step : step;
+  }, [inputType, inputValue, metadatas.step, step]);
+
   if (visible === false) {
     return null;
   }
@@ -242,7 +269,7 @@ function Inputs({
       options={options}
       placeholder={placeholder ? { id: placeholder, defaultMessage: placeholder } : null}
       required={fieldSchema.required || false}
-      step={step}
+      step={inputStep}
       type={inputType}
       // validations={validations}
       value={inputValue}

package/admin/src/content-manager/components/Inputs/utils/getStep.js

@@ -3,10 +3,6 @@ const getStep = (type) => {
 
   if (type === 'float' || type === 'decimal') {
     step = 0.01;
-  } else if (type === 'time' || type === 'datetime') {
-    // Since we cannot set a value that is not in the list of the time picker, we need to set the step to 1
-    // TODO: Fix the timepicker in order to be able to set any value regardless of the list
-    step = 1;
   } else {
     step = 1;
   }

package/admin/src/content-manager/pages/EditSettingsView/components/ModalForm.js

@@ -20,6 +20,10 @@ const FIELD_SIZES = [
 
 const NON_RESIZABLE_FIELD_TYPES = ['dynamiczone', 'component', 'json', 'richtext'];
 
+const TIME_FIELD_OPTIONS = [1, 5, 10, 15, 30, 60];
+
+const TIME_FIELD_TYPES = ['datetime', 'time'];
+
 const ModalForm = ({ onMetaChange, onSizeChange }) => {
   const { formatMessage } = useIntl();
   const { modifiedData, selectedField, attributes, fieldForm } = useLayoutDnd();
@@ -73,6 +77,10 @@ const ModalForm = ({ onMetaChange, onSizeChange }) => {
       return null;
     }
 
+    if (meta === 'step') {
+      return null;
+    }
+
     return (
       <GridItem col={6} key={meta}>
         <GenericInput
@@ -120,10 +128,33 @@ const ModalForm = ({ onMetaChange, onSizeChange }) => {
     </GridItem>
   );
 
+  const hasTimePicker = TIME_FIELD_TYPES.includes(attributes[selectedField].type);
+
+  const timeStepField = (
+    <GridItem col={6} key="step">
+      <Select
+        value={get(fieldForm, ['metadata', 'step'], 1)}
+        name="step"
+        onChange={(value) => onMetaChange({ target: { name: 'step', value } })}
+        label={formatMessage({
+          id: getTrad('containers.SettingPage.editSettings.step.label'),
+          defaultMessage: 'Time interval (minutes)',
+        })}
+      >
+        {TIME_FIELD_OPTIONS.map((value) => (
+          <Option key={value} value={value}>
+            {value}
+          </Option>
+        ))}
+      </Select>
+    </GridItem>
+  );
+
   return (
     <>
       {metaFields}
       {canResize && sizeField}
+      {hasTimePicker && timeStepField}
     </>
   );
 };

package/admin/src/pages/InstalledPluginsPage/Plugins.js

@@ -55,7 +55,7 @@ const Plugins = () => {
           })}
         />
         <ContentLayout>
-          <Table colCount={2} rowCount={data?.plugins.length || 0 + 1}>
+          <Table colCount={2} rowCount={data?.plugins?.length ?? 0 + 1}>
             <Thead>
               <Tr>
                 <Th>

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

@@ -1,4 +1,8 @@
 import React from 'react';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
+
 import { Typography } from '@strapi/design-system/Typography';
 import { Tbody, Tr, Td } from '@strapi/design-system/Table';
 import { Flex } from '@strapi/design-system/Flex';
@@ -9,9 +13,7 @@ import {
   pxToRem,
   useTracking,
 } from '@strapi/helper-plugin';
-import { useIntl } from 'react-intl';
-import PropTypes from 'prop-types';
-import { useHistory } from 'react-router-dom';
+
 import DeleteButton from './DeleteButton';
 import UpdateButton from './UpdateButton';
 

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

@@ -1,5 +1,9 @@
 import React, { useEffect, useRef } from 'react';
 import { useIntl } from 'react-intl';
+import { useQuery, useMutation, useQueryClient } from 'react-query';
+import { useHistory } from 'react-router-dom';
+import qs from 'qs';
+
 import {
   SettingsPageTitle,
   useFocusWhenNavigate,
@@ -16,9 +20,7 @@ import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
 import { Button } from '@strapi/design-system/Button';
 import Plus from '@strapi/icons/Plus';
-import { useQuery, useMutation, useQueryClient } from 'react-query';
-import { useHistory } from 'react-router-dom';
-import qs from 'qs';
+
 import { axiosInstance } from '../../../../../core/utils';
 import adminPermissions from '../../../../../permissions';
 import tableHeaders from './utils/tableHeaders';
@@ -47,6 +49,14 @@ const ApiTokenListView = () => {
     push({ search: qs.stringify({ sort: 'name:ASC' }, { encode: false }) });
   }, [push]);
 
+  const headers = tableHeaders.map((header) => ({
+    ...header,
+    metadatas: {
+      ...header.metadatas,
+      label: formatMessage(header.metadatas.label),
+    },
+  }));
+
   const {
     data: apiTokens,
     status,
@@ -134,7 +144,7 @@ const ApiTokenListView = () => {
         {!canRead && <NoPermissions />}
         {shouldDisplayDynamicTable && (
           <DynamicTable
-            headers={tableHeaders}
+            headers={headers}
             contentType="api-tokens"
             rows={apiTokens}
             withBulkActions={canDelete || canUpdate}

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

@@ -3,7 +3,10 @@ const tableHeaders = [
     name: 'name',
     key: 'name',
     metadatas: {
-      label: 'Name',
+      label: {
+        id: 'Settings.apiTokens.ListView.headers.name',
+        defaultMessage: 'Name',
+      },
       sortable: true,
     },
   },
@@ -11,7 +14,10 @@ const tableHeaders = [
     name: 'description',
     key: 'description',
     metadatas: {
-      label: 'Description',
+      label: {
+        id: 'Settings.apiTokens.ListView.headers.description',
+        defaultMessage: 'Description',
+      },
       sortable: false,
     },
   },
@@ -19,7 +25,10 @@ const tableHeaders = [
     name: 'type',
     key: 'type',
     metadatas: {
-      label: 'Token type',
+      label: {
+        id: 'Settings.apiTokens.ListView.headers.type',
+        defaultMessage: 'Token type',
+      },
       sortable: false,
     },
   },
@@ -27,7 +36,10 @@ const tableHeaders = [
     name: 'createdAt',
     key: 'createdAt',
     metadatas: {
-      label: 'Created at',
+      label: {
+        id: 'Settings.apiTokens.ListView.headers.createdAt',
+        defaultMessage: 'Created at',
+      },
       sortable: false,
     },
   },

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

@@ -38,6 +38,14 @@ const ListPage = () => {
   const { notifyStatus } = useNotifyAT();
   const queryName = ['users', search];
 
+  const headers = tableHeaders.map((header) => ({
+    ...header,
+    metadatas: {
+      ...header.metadatas,
+      label: formatMessage(header.metadatas.label),
+    },
+  }));
+
   const title = formatMessage({
     id: 'global.users',
     defaultMessage: 'Users',
@@ -143,14 +151,14 @@ const ListPage = () => {
               isLoading={isLoading}
               onConfirmDeleteAll={deleteAllMutation.mutateAsync}
               onConfirmDelete={(id) => deleteAllMutation.mutateAsync([id])}
-              headers={tableHeaders}
+              headers={headers}
               rows={data?.results}
               withBulkActions
               withMainAction={canDelete}
             >
               <TableRows
                 canDelete={canDelete}
-                headers={tableHeaders}
+                headers={headers}
                 rows={data?.results || []}
                 withBulkActions
                 withMainAction={canDelete}

package/admin/src/pages/SettingsPage/pages/Users/ListPage/utils/tableHeaders.js

@@ -7,30 +7,50 @@ const tableHeaders = [
   {
     name: 'firstname',
     key: 'firstname',
-    metadatas: { label: 'Firstname', sortable: true },
+    metadatas: {
+      label: {
+        id: 'Settings.permissions.users.firstname',
+        defaultMessage: 'Firstname',
+      },
+      sortable: true,
+    },
   },
   {
     name: 'lastname',
     key: 'lastname',
-    metadatas: { label: 'Lastname', sortable: true },
+    metadatas: {
+      label: {
+        id: 'Settings.permissions.users.lastname',
+        defaultMessage: 'Lastname',
+      },
+      sortable: true,
+    },
   },
   {
     key: 'email',
     name: 'email',
-    metadatas: { label: 'Email', sortable: true },
+    metadatas: {
+      label: { id: 'Settings.permissions.users.email', defaultMessage: 'Email' },
+      sortable: true,
+    },
   },
   {
     key: 'roles',
     name: 'roles',
-    metadatas: { label: 'Roles', sortable: false },
-    /* eslint-disable react/prop-types */
+    metadatas: {
+      label: {
+        id: 'Settings.permissions.users.roles',
+        defaultMessage: 'Roles',
+      },
+      sortable: false,
+    },
     cellFormatter({ roles }, { formatMessage }) {
       return (
         <Typography textColor="neutral800">
           {roles
             .map((role) =>
               formatMessage({
-                id: `global.${role.code}`,
+                id: `Settings.permissions.users.${role.code}`,
                 defaultMessage: role.name,
               })
             )
@@ -38,25 +58,37 @@ const tableHeaders = [
         </Typography>
       );
     },
-    /* eslint-enable react/prop-types */
   },
   {
     key: 'username',
     name: 'username',
-    metadatas: { label: 'Username', sortable: true },
+    metadatas: {
+      label: {
+        id: 'Settings.permissions.users.username',
+        defaultMessage: 'Username',
+      },
+      sortable: true,
+    },
   },
   {
     key: 'isActive',
     name: 'isActive',
-    metadatas: { label: 'User status', sortable: false },
-    // eslint-disable-next-line react/prop-types
+    metadatas: {
+      label: {
+        id: 'Settings.permissions.users.user-status',
+        defaultMessage: 'User status',
+      },
+      sortable: false,
+    },
     cellFormatter({ isActive }, { formatMessage }) {
       return (
         <Flex>
           <Status isActive={isActive} variant={isActive ? 'success' : 'danger'} />
           <Typography textColor="neutral800">
             {formatMessage({
-              id: isActive ? 'global.active' : 'global.inactive',
+              id: isActive
+                ? 'Settings.permissions.users.active'
+                : 'Settings.permissions.users.inactive',
               defaultMessage: isActive ? 'Active' : 'Inactive',
             })}
           </Typography>

package/admin/src/translations/ca.json

@@ -116,9 +116,9 @@
   "Settings.permissions.select-all-by-permission": "Seleccioneu tots els permisos de {label}",
   "Settings.permissions.select-by-permission": "Seleccionar permís de {label}",
   "Settings.permissions.users.create": "Crear nou usuari",
-  "Settings.permissions.users.form.email": "Email",
-  "Settings.permissions.users.form.firstname": "Nom",
-  "Settings.permissions.users.form.lastname": "Cognom",
+  "Settings.permissions.users.email": "Email",
+  "Settings.permissions.users.firstname": "Nom",
+  "Settings.permissions.users.lastname": "Cognom",
   "Settings.permissions.users.form.sso": "connecta amb SSO",
   "Settings.permissions.users.form.sso.description": "quan està disponible, els usuaris poden accedir via SSO",
   "Settings.permissions.users.listview.header.subtitle": "Tots els usuaris que tenen accés al panell d'administració de Strapi",
@@ -545,7 +545,7 @@
   "content-manager.containers.List.published": "Publicat",
   "content-manager.containers.ListPage.displayedFields": "Camps mostrats",
   "content-manager.containers.ListPage.items": "{number, plural, =0 {elements} one {element} other {elements}}",
-  "content-manager.containers.ListPage.table-headers.published_at": "Estat",
+  "content-manager.containers.ListPage.table-headers.publishedAt": "Estat",
   "content-manager.containers.ListSettingsView.modal-form.edit-label": "Edita l'etiqueta",
   "content-manager.containers.SettingPage.add.field": "Inserir un altre camp",
   "content-manager.containers.SettingPage.add.relational-field": "Inserir un altre camp relacional",

package/admin/src/translations/de.json

@@ -116,9 +116,9 @@
   "Settings.permissions.select-all-by-permission": "Wähle alle {label}-Berechtigungen",
   "Settings.permissions.select-by-permission": "Wähle {label}-Berechtigung",
   "Settings.permissions.users.create": "Benutzer einladen",
-  "Settings.permissions.users.form.email": "E-Mail",
-  "Settings.permissions.users.form.firstname": "Vorname",
-  "Settings.permissions.users.form.lastname": "Nachname",
+  "Settings.permissions.users.email": "E-Mail",
+  "Settings.permissions.users.firstname": "Vorname",
+  "Settings.permissions.users.lastname": "Nachname",
   "Settings.permissions.users.form.sso": "Mit SSO einloggen",
   "Settings.permissions.users.form.sso.description": "Nutzer können sich per SSO einloggen wenn aktiviert (ON)",
   "Settings.permissions.users.listview.header.subtitle": "Alle Nutzer mit Zugriff auf diese Administrationsoberfläche",
@@ -539,7 +539,7 @@
   "content-manager.containers.List.published": "Veröffentlicht",
   "content-manager.containers.ListPage.displayedFields": "Dargestellte Felder",
   "content-manager.containers.ListPage.items": "{number, plural, one {Eintrag} other {Einträge}}",
-  "content-manager.containers.ListPage.table-headers.published_at": "Status",
+  "content-manager.containers.ListPage.table-headers.publishedAt": "Status",
   "content-manager.containers.ListSettingsView.modal-form.edit-label": "Beschriftung ändern",
   "content-manager.containers.SettingPage.add.field": "Ein weiteres Feld hinzufügen",
   "content-manager.containers.SettingPage.add.relational-field": "Ein weiteres Beziehungs-Feld hinzufügen",

package/admin/src/translations/dk.json

@@ -114,9 +114,9 @@
   "Settings.permissions.select-all-by-permission": "Vælg alle {label} tilladelser",
   "Settings.permissions.select-by-permission": "Vælg {label} tilladelse",
   "Settings.permissions.users.create": "Opret ny bruger",
-  "Settings.permissions.users.form.email": "E-mail",
-  "Settings.permissions.users.form.firstname": "Fornavn",
-  "Settings.permissions.users.form.lastname": "Efternavn",
+  "Settings.permissions.users.email": "E-mail",
+  "Settings.permissions.users.firstname": "Fornavn",
+  "Settings.permissions.users.lastname": "Efternavn",
   "Settings.permissions.users.form.sso": "Forbind med SSO",
   "Settings.permissions.users.form.sso.description": "Når aktiveret (TIL), kan brugere logge ind med SSO",
   "Settings.permissions.users.listview.header.subtitle": "Alle brugere som har adgnag til Strapi admin panelet",
@@ -485,7 +485,7 @@
   "content-manager.containers.List.published": "Offentliggjort",
   "content-manager.containers.ListPage.displayedFields": "Viste felter",
   "content-manager.containers.ListPage.items": "{number, plural, =0 {elementer} one {element} other {elementer}}",
-  "content-manager.containers.ListPage.table-headers.published_at": "Tilstand",
+  "content-manager.containers.ListPage.table-headers.publishedAt": "Tilstand",
   "content-manager.containers.ListSettingsView.modal-form.edit-label": "Redigér label",
   "content-manager.containers.SettingPage.add.field": "Indsæt endnu et felt",
   "content-manager.containers.SettingPage.add.relational-field": "Indsæt endnu et relationsfelt",

package/admin/src/translations/en.json

@@ -87,6 +87,10 @@
   "Settings.apiTokens.create": "Create new API Token",
   "Settings.apiTokens.description": "List of generated tokens to consume the API",
   "Settings.apiTokens.emptyStateLayout": "You don’t have any content yet...",
+  "Settings.apiTokens.ListView.headers.name": "Name",
+  "Settings.apiTokens.ListView.headers.description": "Description",
+  "Settings.apiTokens.ListView.headers.type": "Token type",
+  "Settings.apiTokens.ListView.headers.createdAt": "Created at",
   "Settings.apiTokens.notification.copied": "Token copied to clipboard.",
   "Settings.apiTokens.title": "API Tokens",
   "Settings.apiTokens.types.full-access": "Full access",
@@ -142,13 +146,21 @@
   "Settings.permissions.select-all-by-permission": "Select all {label} permissions",
   "Settings.permissions.select-by-permission": "Select {label} permission",
   "Settings.permissions.users.create": "Invite new user",
-  "Settings.permissions.users.form.email": "Email",
-  "Settings.permissions.users.form.firstname": "First name",
-  "Settings.permissions.users.form.lastname": "Last name",
+  "Settings.permissions.users.email": "Email",
+  "Settings.permissions.users.firstname": "Firstname",
+  "Settings.permissions.users.lastname": "Lastname",
+  "Settings.permissions.users.user-status": "User status",
+  "Settings.permissions.users.roles": "Roles",
+  "Settings.permissions.users.username": "Username",
+  "Settings.permissions.users.active": "Active",
+  "Settings.permissions.users.inactive": "Inactive",
   "Settings.permissions.users.form.sso": "Connect with SSO",
   "Settings.permissions.users.form.sso.description": "When enabled (ON), users can login via SSO",
   "Settings.permissions.users.listview.header.subtitle": "All the users who have access to the Strapi admin panel",
   "Settings.permissions.users.tabs.label": "Tabs Permissions",
+  "Settings.permissions.users.strapi-super-admin": "Super Admin",
+  "Settings.permissions.users.strapi-editor": "Editor",
+  "Settings.permissions.users.strapi-author": "Author",
   "Settings.profile.form.notify.data.loaded": "Your profile data has been loaded",
   "Settings.profile.form.section.experience.clear.select": "Clear the interface language selected",
   "Settings.profile.form.section.experience.here": "here",
@@ -578,7 +590,7 @@
   "content-manager.containers.List.published": "Published",
   "content-manager.containers.ListPage.displayedFields": "Displayed Fields",
   "content-manager.containers.ListPage.items": "{number, plural, =0 {items} one {item} other {items}}",
-  "content-manager.containers.ListPage.table-headers.published_at": "State",
+  "content-manager.containers.ListPage.table-headers.publishedAt": "State",
   "content-manager.containers.ListSettingsView.modal-form.edit-label": "Edit {fieldName}",
   "content-manager.containers.SettingPage.add.field": "Insert another field",
   "content-manager.containers.SettingPage.add.relational-field": "Insert another relational field",
@@ -687,8 +699,6 @@
   "form.button.done": "Done",
   "global.search": "Search",
   "global.actions": "Actions",
-  "global.active": "Active",
-  "global.inactive": "Inactive",
   "global.back": "Back",
   "global.cancel": "Cancel",
   "global.change-password": "Change password",
@@ -734,15 +744,6 @@
   "global.select": "Select",
   "global.select-all-entries": "Select all entries",
   "global.settings": "Settings",
-  "global.strapi-super-admin": "Super Admin",
-  "global.strapi-editor": "Editor",
-  "global.strapi-author": "Author",
-  "global.table.header.email": "Email",
-  "global.table.header.firstname": "Firstname",
-  "global.table.header.isActive": "User status",
-  "global.table.header.lastname": "Lastname",
-  "global.table.header.roles": "Roles",
-  "global.table.header.username": "Username",
   "global.type": "Type",
   "global.users": "Users",
   "notification.contentType.relations.conflict": "Content type has conflicting relations",