@strapi/admin 4.5.1 → 4.5.3

package/admin/src/content-manager/pages/EditView/utils/index.js

@@ -1,3 +1,4 @@
 // eslint-disable-next-line import/prefer-default-export
 export { default as createAttributesLayout } from './createAttributesLayout';
 export { default as getFieldsActionMatchingPermissions } from './getFieldsActionMatchingPermissions';
+export { default as getCustomFieldUidsFromLayout } from './getCustomFieldUidsFromLayout';

package/admin/src/content-manager/pages/EditViewLayoutManager/index.js

@@ -30,7 +30,7 @@ const EditViewLayoutManager = ({ layout, ...rest }) => {
     return <LoadingIndicatorPage />;
   }
 
-  return <Permissions {...rest} layout={currentLayout} userPermissions={permissions} />;
+  return <Permissions {...rest} userPermissions={permissions} />;
 };
 
 EditViewLayoutManager.propTypes = {

package/admin/src/content-manager/pages/ListSettingsView/components/Settings.js

@@ -1,92 +1,95 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { Flex } from '@strapi/design-system/Flex';
+import { Box } from '@strapi/design-system/Box';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Select, Option } from '@strapi/design-system/Select';
 import { ToggleInput } from '@strapi/design-system/ToggleInput';
-import { Box } from '@strapi/design-system/Box';
+import { Stack } from '@strapi/design-system/Stack';
 import { Typography } from '@strapi/design-system/Typography';
 import { getTrad } from '../../../utils';
 
-const FlexGap = styled(Flex)`
-  gap: ${({ theme }) => theme.spaces[4]};
-`;
-
 const Settings = ({ modifiedData, onChange, sortOptions }) => {
   const { formatMessage } = useIntl();
   const { settings, metadatas } = modifiedData;
 
   return (
-    <>
-      <Box paddingBottom={4}>
-        <Typography variant="delta" as="h2">
-          {formatMessage({
-            id: getTrad('containers.SettingPage.settings'),
-            defaultMessage: 'Settings',
-          })}
-        </Typography>
-      </Box>
-      <FlexGap justifyContent="space-between" wrap="wrap" paddingBottom={6}>
-        <ToggleInput
-          label={formatMessage({
-            id: getTrad('form.Input.search'),
-            defaultMessage: 'Enable search',
-          })}
-          onChange={(e) => {
-            onChange({ target: { name: 'settings.searchable', value: e.target.checked } });
-          }}
-          onLabel={formatMessage({
-            id: 'app.components.ToggleCheckbox.on-label',
-            defaultMessage: 'on',
-          })}
-          offLabel={formatMessage({
-            id: 'app.components.ToggleCheckbox.off-label',
-            defaultMessage: 'off',
-          })}
-          name="settings.searchable"
-          checked={settings.searchable}
-        />
-        <ToggleInput
-          label={formatMessage({
-            id: getTrad('form.Input.filters'),
-            defaultMessage: 'Enable filters',
-          })}
-          onChange={(e) => {
-            onChange({ target: { name: 'settings.filterable', value: e.target.checked } });
-          }}
-          onLabel={formatMessage({
-            id: 'app.components.ToggleCheckbox.on-label',
-            defaultMessage: 'on',
-          })}
-          offLabel={formatMessage({
-            id: 'app.components.ToggleCheckbox.off-label',
-            defaultMessage: 'off',
-          })}
-          name="settings.filterable"
-          checked={settings.filterable}
-        />
-        <ToggleInput
-          label={formatMessage({
-            id: getTrad('form.Input.bulkActions'),
-            defaultMessage: 'Enable bulk actions',
-          })}
-          onChange={(e) => {
-            onChange({ target: { name: 'settings.bulkable', value: e.target.checked } });
-          }}
-          onLabel={formatMessage({
-            id: 'app.components.ToggleCheckbox.on-label',
-            defaultMessage: 'on',
-          })}
-          offLabel={formatMessage({
-            id: 'app.components.ToggleCheckbox.off-label',
-            defaultMessage: 'off',
-          })}
-          name="settings.bulkable"
-          checked={settings.bulkable}
-        />
-      </FlexGap>
+    <Stack spacing={4}>
+      <Typography variant="delta" as="h2">
+        {formatMessage({
+          id: getTrad('containers.SettingPage.settings'),
+          defaultMessage: 'Settings',
+        })}
+      </Typography>
+
+      <Stack horizontal justifyContent="space-between" spacing={4}>
+        <Box width="100%">
+          <ToggleInput
+            label={formatMessage({
+              id: getTrad('form.Input.search'),
+              defaultMessage: 'Enable search',
+            })}
+            onChange={(e) => {
+              onChange({ target: { name: 'settings.searchable', value: e.target.checked } });
+            }}
+            onLabel={formatMessage({
+              id: 'app.components.ToggleCheckbox.on-label',
+              defaultMessage: 'on',
+            })}
+            offLabel={formatMessage({
+              id: 'app.components.ToggleCheckbox.off-label',
+              defaultMessage: 'off',
+            })}
+            name="settings.searchable"
+            checked={settings.searchable}
+          />
+        </Box>
+
+        <Box width="100%">
+          <ToggleInput
+            label={formatMessage({
+              id: getTrad('form.Input.filters'),
+              defaultMessage: 'Enable filters',
+            })}
+            onChange={(e) => {
+              onChange({ target: { name: 'settings.filterable', value: e.target.checked } });
+            }}
+            onLabel={formatMessage({
+              id: 'app.components.ToggleCheckbox.on-label',
+              defaultMessage: 'on',
+            })}
+            offLabel={formatMessage({
+              id: 'app.components.ToggleCheckbox.off-label',
+              defaultMessage: 'off',
+            })}
+            name="settings.filterable"
+            checked={settings.filterable}
+          />
+        </Box>
+
+        <Box width="100%">
+          <ToggleInput
+            label={formatMessage({
+              id: getTrad('form.Input.bulkActions'),
+              defaultMessage: 'Enable bulk actions',
+            })}
+            onChange={(e) => {
+              onChange({ target: { name: 'settings.bulkable', value: e.target.checked } });
+            }}
+            onLabel={formatMessage({
+              id: 'app.components.ToggleCheckbox.on-label',
+              defaultMessage: 'on',
+            })}
+            offLabel={formatMessage({
+              id: 'app.components.ToggleCheckbox.off-label',
+              defaultMessage: 'off',
+            })}
+            name="settings.bulkable"
+            checked={settings.bulkable}
+          />
+        </Box>
+      </Stack>
+
       <Grid gap={4}>
         <GridItem s={12} col={6}>
           <Select
@@ -145,7 +148,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
           </Select>
         </GridItem>
       </Grid>
-    </>
+    </Stack>
   );
 };
 

package/admin/src/core/apis/CustomFields.js

@@ -19,6 +19,40 @@ const ALLOWED_TYPES = [
   'uid',
 ];
 
+const ALLOWED_ROOT_LEVEL_OPTIONS = [
+  'min',
+  'minLength',
+  'max',
+  'maxLength',
+  'required',
+  'regex',
+  'enum',
+  'unique',
+  'private',
+  'default',
+];
+
+const optionValidationsReducer = (acc, option) => {
+  if (option.items) {
+    return option.items.reduce(optionValidationsReducer, acc);
+  }
+
+  if (!option.name) {
+    acc.push({
+      isValidOptionPath: false,
+      errorMessage: "The 'name' property is required on an options object",
+    });
+  } else {
+    acc.push({
+      isValidOptionPath:
+        ALLOWED_ROOT_LEVEL_OPTIONS.includes(option.name) || option.name.startsWith('options'),
+      errorMessage: `'${option.name}' must be prefixed with 'options.'`,
+    });
+  }
+
+  return acc;
+};
+
 class CustomFields {
   constructor() {
     this.customFields = {};
@@ -32,7 +66,8 @@ class CustomFields {
       });
     } else {
       // Handle individual custom field
-      const { name, pluginId, type, intlLabel, intlDescription, components } = customFields;
+      const { name, pluginId, type, intlLabel, intlDescription, components, options } =
+        customFields;
 
       // Ensure required attributes are provided
       invariant(name, 'A name must be provided');
@@ -55,6 +90,16 @@ class CustomFields {
         `Custom field name: '${name}' is not a valid object key`
       );
 
+      // Ensure options have valid name paths
+      const allFormOptions = [...(options?.base || []), ...(options?.advanced || [])];
+
+      if (allFormOptions.length) {
+        const optionPathValidations = allFormOptions.reduce(optionValidationsReducer, []);
+        optionPathValidations.forEach(({ isValidOptionPath, errorMessage }) => {
+          invariant(isValidOptionPath, errorMessage);
+        });
+      }
+
       // When no plugin is specified, default to the global namespace
       const uid = pluginId ? `plugin::${pluginId}.${name}` : `global::${name}`;
 

package/admin/src/pages/MarketplacePage/components/SortSelect/index.js

@@ -37,6 +37,26 @@ const SortSelect = ({ sortQuery, handleSelectChange }) => {
         defaultMessage: 'Newest',
       },
     },
+    'githubStars:desc': {
+      selected: {
+        id: 'admin.pages.MarketPlacePage.sort.githubStars.selected',
+        defaultMessage: 'Sort by GitHub stars',
+      },
+      option: {
+        id: 'admin.pages.MarketPlacePage.sort.githubStars',
+        defaultMessage: 'Number of GitHub stars',
+      },
+    },
+    'npmDownloads:desc': {
+      selected: {
+        id: 'admin.pages.MarketPlacePage.sort.npmDownloads.selected',
+        defaultMessage: 'Sort by npm downloads',
+      },
+      option: {
+        id: 'admin.pages.MarketPlacePage.sort.npmDownloads',
+        defaultMessage: 'Number of downloads',
+      },
+    },
   };
 
   return (

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormApiTokenContainer/index.js

@@ -229,14 +229,14 @@ FormApiTokenContainer.propTypes = {
   values: PropTypes.shape({
     name: PropTypes.string,
     description: PropTypes.string,
-    lifespan: PropTypes.string,
+    lifespan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     type: PropTypes.string,
   }).isRequired,
   isCreating: PropTypes.bool.isRequired,
   apiToken: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     type: PropTypes.string,
-    lifespan: PropTypes.number,
+    lifespan: PropTypes.string,
     name: PropTypes.string,
     accessKey: PropTypes.string,
     permissions: PropTypes.array,

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormBody/index.js

@@ -50,7 +50,7 @@ FormBody.propTypes = {
   apiToken: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     type: PropTypes.string,
-    lifespan: PropTypes.number,
+    lifespan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     name: PropTypes.string,
     accessKey: PropTypes.string,
     permissions: PropTypes.array,

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormHead/index.js

@@ -69,7 +69,7 @@ FormHead.propTypes = {
   apiToken: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     type: PropTypes.string,
-    lifespan: PropTypes.number,
+    lifespan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     name: PropTypes.string,
     accessKey: PropTypes.string,
     permissions: PropTypes.array,

package/admin/src/translations/en.json

@@ -290,6 +290,10 @@
   "admin.pages.MarketPlacePage.sort.newest": "Newest",
   "admin.pages.MarketPlacePage.sort.alphabetical.selected": "Sort by alphabetical order",
   "admin.pages.MarketPlacePage.sort.newest.selected": "Sort by newest",
+  "admin.pages.MarketPlacePage.sort.githubStars": "Number of GitHub stars",
+  "admin.pages.MarketPlacePage.sort.githubStars.selected": "Sort by GitHub stars",
+  "admin.pages.MarketPlacePage.sort.npmDownloads": "Number of downloads",
+  "admin.pages.MarketPlacePage.sort.npmDownloads.selected": "Sort by npm downloads",
   "admin.pages.MarketPlacePage.filters.collections": "Collections",
   "admin.pages.MarketPlacePage.filters.collectionsSelected": "{count, plural, =0 {No collections} one {# collection} other {# collections}} selected",
   "admin.pages.MarketPlacePage.filters.categories": "Categories",