@strapi/admin 4.9.0 → 4.9.2

package/admin/src/content-manager/pages/EditSettingsView/utils/layout.js

@@ -1,4 +1,3 @@
-/* eslint-disable indent */
 const getRowSize = (arr) => arr.reduce((sum, value) => sum + value.size, 0);
 
 const createLayout = (arr) => {
@@ -75,26 +74,6 @@ const unformatLayout = (arr) => {
   }, []);
 };
 
-const getDefaultInputSize = (type) => {
-  switch (type) {
-    case 'boolean':
-    case 'date':
-    case 'integer':
-    case 'float':
-    case 'biginteger':
-    case 'decimal':
-    case 'time':
-      return 4;
-    case 'json':
-    case 'component':
-    case 'richtext':
-    case 'dynamiczone':
-      return 12;
-    default:
-      return 6;
-  }
-};
-
 const getFieldSize = (name, layouts = []) => {
   return layouts.reduce((acc, { rowContent }) => {
     const size = rowContent.find((row) => row.name === name)?.size ?? null;
@@ -124,12 +103,4 @@ const setFieldSize = (name, size, layouts = []) => {
   });
 };
 
-export {
-  createLayout,
-  formatLayout,
-  getDefaultInputSize,
-  getFieldSize,
-  setFieldSize,
-  getRowSize,
-  unformatLayout,
-};
+export { createLayout, formatLayout, getFieldSize, setFieldSize, getRowSize, unformatLayout };

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

@@ -8,14 +8,14 @@ import PropTypes from 'prop-types';
 import { getTrad } from '../../../utils';
 import { connect, select } from './utils';
 
-const DeleteLink = ({ isCreatingEntry, onDelete, onDeleteSucceeded, trackerProperty }) => {
-  const [showWarningDelete, setWarningDelete] = useState(false);
+const DeleteLink = ({ onDelete, trackerProperty }) => {
+  const [displayDeleteConfirmation, setDisplayDeleteConfirmation] = useState(false);
   const [isModalConfirmButtonLoading, setIsModalConfirmButtonLoading] = useState(false);
   const { formatMessage } = useIntl();
   const { formatAPIError } = useAPIErrorHandler(getTrad);
   const toggleNotification = useNotification();
 
-  const toggleWarningDelete = () => setWarningDelete((prevState) => !prevState);
+  const toggleWarningDelete = () => setDisplayDeleteConfirmation((prevState) => !prevState);
 
   const handleConfirmDelete = async () => {
     try {
@@ -27,7 +27,6 @@ const DeleteLink = ({ isCreatingEntry, onDelete, onDeleteSucceeded, trackerPrope
       setIsModalConfirmButtonLoading(false);
 
       toggleWarningDelete();
-      onDeleteSucceeded();
     } catch (err) {
       setIsModalConfirmButtonLoading(false);
       toggleWarningDelete();
@@ -38,10 +37,6 @@ const DeleteLink = ({ isCreatingEntry, onDelete, onDeleteSucceeded, trackerPrope
     }
   };
 
-  if (isCreatingEntry) {
-    return null;
-  }
-
   return (
     <>
       <Button onClick={toggleWarningDelete} size="S" startIcon={<Trash />} variant="danger-light">
@@ -50,9 +45,10 @@ const DeleteLink = ({ isCreatingEntry, onDelete, onDeleteSucceeded, trackerPrope
           defaultMessage: 'Delete this entry',
         })}
       </Button>
+
       <ConfirmDialog
         isConfirmButtonLoading={isModalConfirmButtonLoading}
-        isOpen={showWarningDelete}
+        isOpen={displayDeleteConfirmation}
         onConfirm={handleConfirmDelete}
         onToggleDialog={toggleWarningDelete}
       />
@@ -61,9 +57,7 @@ const DeleteLink = ({ isCreatingEntry, onDelete, onDeleteSucceeded, trackerPrope
 };
 
 DeleteLink.propTypes = {
-  isCreatingEntry: PropTypes.bool.isRequired,
   onDelete: PropTypes.func.isRequired,
-  onDeleteSucceeded: PropTypes.func.isRequired,
   trackerProperty: PropTypes.object.isRequired,
 };
 

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

@@ -77,7 +77,6 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
         isCreatingEntry,
         isLoadingForData,
         onDelete,
-        onDeleteSucceeded,
         onPost,
         onPublish,
         onDraftRelationCheck,
@@ -221,12 +220,8 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
                             </LinkButton>
                           </CheckPermissions>
 
-                          {allowedActions.canDelete && (
-                            <DeleteLink
-                              isCreatingEntry={isCreatingEntry}
-                              onDelete={onDelete}
-                              onDeleteSucceeded={onDeleteSucceeded}
-                            />
+                          {allowedActions.canDelete && !isCreatingEntry && (
+                            <DeleteLink onDelete={onDelete} />
                           )}
                         </Flex>
                       </Box>

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

@@ -127,6 +127,7 @@ const ListSettingsView = ({ layout, slug }) => {
     dispatch({
       type: 'SUBMIT_FIELD_FORM',
     });
+    handleCloseModal();
   };
 
   const submitMutation = useMutation((body) => putCMSettingsLV(body, slug), {

package/admin/src/hooks/useFetchMarketplacePlugins/utils/api.js

@@ -1,19 +1,18 @@
 import axios from 'axios';
+import qs from 'qs';
 
 const MARKETPLACE_API_URL = 'https://market-api.strapi.io';
 
 const fetchMarketplacePlugins = async (params = {}) => {
-  const { data: response } = await axios.get(`${MARKETPLACE_API_URL}/plugins`, {
+  const { data } = await axios.get(`${MARKETPLACE_API_URL}/plugins`, {
     params,
+    paramsSerializer: {
+      encode: qs.parse,
+      serialize: qs.stringify,
+    },
   });
 
-  // Only keep v4 plugins
-  const filteredResponse = {
-    ...response,
-    data: response.data.filter((plugin) => plugin.attributes.strapiCompatibility === 'v4'),
-  };
-
-  return filteredResponse;
+  return data;
 };
 
 export { fetchMarketplacePlugins };

package/admin/src/hooks/useFetchMarketplaceProviders/utils/api.js

@@ -1,10 +1,15 @@
 import axios from 'axios';
+import qs from 'qs';
 
 const MARKETPLACE_API_URL = 'https://market-api.strapi.io';
 
 const fetchMarketplaceProviders = async (params = {}) => {
   const { data } = await axios.get(`${MARKETPLACE_API_URL}/providers`, {
     params,
+    paramsSerializer: {
+      encode: qs.parse,
+      serialize: qs.stringify,
+    },
   });
 
   return data;

package/admin/src/pages/HomePage/SocialLinks.js

@@ -187,7 +187,7 @@ const SocialLinks = () => {
       <GridGap>
         {socialLinksExtended.map(({ icon, link, name }) => {
           return (
-            <GridItem col={6} s={12} key={name}>
+            <GridItem col={6} s={12} key={name.id}>
               <LinkCustom size="L" startIcon={icon} variant="tertiary" href={link} isExternal>
                 {formatMessage(name)}
               </LinkCustom>

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

@@ -1,16 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Typography, Box, Flex, Icon } from '@strapi/design-system';
-import { EmptyStateDocument } from '@strapi/icons';
+import { EmptyDocuments } from '@strapi/icons';
 import { EmptyNpmPackageGrid } from './EmptyNpmPackageGrid';
 
 const EmptyNpmPackageSearch = ({ content }) => {
   return (
-    <Box position="relative">
+    <Box position="relative" data-testid="marketplace-results">
       <EmptyNpmPackageGrid />
       <Box position="absolute" top={11} width="100%">
         <Flex alignItems="center" justifyContent="center" direction="column">
-          <Icon as={EmptyStateDocument} color="" width="160px" height="88px" />
+          <Icon as={EmptyDocuments} color="" width="160px" height="88px" />
           <Box paddingTop={6}>
             <Typography variant="delta" as="p" textColor="neutral600">
               {content}

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

@@ -1,29 +1,58 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { Grid, GridItem } from '@strapi/design-system';
+import { Grid, GridItem, Flex, Loader } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { AnErrorOccurred } from '@strapi/helper-plugin';
 import NpmPackageCard from '../NpmPackageCard';
+import EmptyNpmPackageSearch from '../EmptyNpmPackageSearch';
 
 const NpmPackagesGrid = ({
+  status,
   npmPackages,
   installedPackageNames,
   useYarn,
   isInDevelopmentMode,
   npmPackageType,
   strapiAppVersion,
+  debouncedSearch,
 }) => {
-  // Check if an individual package is in the dependencies
-  const isAlreadyInstalled = useCallback(
-    (npmPackageName) => installedPackageNames.includes(npmPackageName),
-    [installedPackageNames]
+  const { formatMessage } = useIntl();
+
+  if (status === 'error') {
+    return (
+      <Flex paddingTop={8}>
+        <AnErrorOccurred />
+      </Flex>
+    );
+  }
+
+  if (status === 'loading') {
+    return (
+      <Flex justifyContent="center" paddingTop={8}>
+        <Loader>Loading content...</Loader>
+      </Flex>
+    );
+  }
+
+  const emptySearchMessage = formatMessage(
+    {
+      id: 'admin.pages.MarketPlacePage.search.empty',
+      defaultMessage: 'No result for "{target}"',
+    },
+    { target: debouncedSearch }
   );
 
+  if (npmPackages.length === 0) {
+    return <EmptyNpmPackageSearch content={emptySearchMessage} />;
+  }
+
   return (
-    <Grid gap={4}>
+    <Grid gap={4} data-testid="marketplace-results">
       {npmPackages.map((npmPackage) => (
         <GridItem col={4} s={6} xs={12} style={{ height: '100%' }} key={npmPackage.id}>
           <NpmPackageCard
             npmPackage={npmPackage}
-            isInstalled={isAlreadyInstalled(npmPackage.attributes.npmPackageName)}
+            isInstalled={installedPackageNames.includes(npmPackage.attributes.npmPackageName)}
             useYarn={useYarn}
             isInDevelopmentMode={isInDevelopmentMode}
             npmPackageType={npmPackageType}
@@ -36,17 +65,21 @@ const NpmPackagesGrid = ({
 };
 
 NpmPackagesGrid.defaultProps = {
+  npmPackages: [],
   installedPackageNames: [],
   strapiAppVersion: null,
+  debouncedSearch: '',
 };
 
 NpmPackagesGrid.propTypes = {
-  npmPackages: PropTypes.array.isRequired,
+  status: PropTypes.string.isRequired,
+  npmPackages: PropTypes.array,
   installedPackageNames: PropTypes.arrayOf(PropTypes.string),
   useYarn: PropTypes.bool.isRequired,
   isInDevelopmentMode: PropTypes.bool.isRequired,
   npmPackageType: PropTypes.string.isRequired,
   strapiAppVersion: PropTypes.string,
+  debouncedSearch: PropTypes.string,
 };
 
 export default NpmPackagesGrid;

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box, Flex } from '@strapi/design-system';
+import { PaginationURLQuery, PageSizeURLQuery } from '@strapi/helper-plugin';
+
+const NpmPackagesPagination = ({ pagination }) => {
+  return (
+    <Box paddingTop={4}>
+      <Flex alignItems="flex-end" justifyContent="space-between">
+        <PageSizeURLQuery options={['12', '24', '50', '100']} defaultValue="24" />
+        <PaginationURLQuery pagination={pagination} />
+      </Flex>
+    </Box>
+  );
+};
+
+NpmPackagesPagination.propTypes = {
+  pagination: PropTypes.shape({
+    page: PropTypes.number.isRequired,
+    pageCount: PropTypes.number.isRequired,
+    pageSize: PropTypes.number.isRequired,
+    total: PropTypes.number.isRequired,
+  }).isRequired,
+};
+
+export default NpmPackagesPagination;

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { pxToRem } from '@strapi/helper-plugin';
+import { Box, Flex, Typography, Layout, Main } from '@strapi/design-system';
+import PageHeader from '../PageHeader';
+import offlineCloud from '../../../../assets/images/icon_offline-cloud.svg';
+
+const OfflineLayout = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Layout>
+      <Main>
+        <PageHeader isOnline={false} />
+        <Flex
+          width="100%"
+          direction="column"
+          alignItems="center"
+          justifyContent="center"
+          paddingTop={pxToRem(120)}
+        >
+          <Box paddingBottom={2}>
+            <Typography textColor="neutral700" variant="alpha">
+              {formatMessage({
+                id: 'admin.pages.MarketPlacePage.offline.title',
+                defaultMessage: 'You are offline',
+              })}
+            </Typography>
+          </Box>
+          <Box paddingBottom={6}>
+            <Typography textColor="neutral700" variant="epsilon">
+              {formatMessage({
+                id: 'admin.pages.MarketPlacePage.offline.subtitle',
+                defaultMessage: 'You need to be connected to the Internet to access Strapi Market.',
+              })}
+            </Typography>
+          </Box>
+          <img src={offlineCloud} alt="offline" style={{ width: '88px', height: '88px' }} />
+        </Flex>
+      </Main>
+    </Layout>
+  );
+};
+
+export default OfflineLayout;