@strapi/admin 4.3.0-beta.1 → 4.3.0-beta.2

package/admin/src/components/OverlayBlocker/index.js

@@ -37,6 +37,10 @@ const Portal = ({ isOpen }) => {
   return null;
 };
 
+Portal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+};
+
 const OverlayBlockerProvider = ({ children }) => {
   const [isOpen, setIsOpen] = useState(false);
 

package/admin/src/content-manager/components/DynamicTable/CellContent/utils/hasContent.js

@@ -45,7 +45,7 @@ export default function hasContent(type, content, metadatas, fieldSchema) {
       return !isEmpty(content);
     }
 
-    return content.count > 0;
+    return content?.count > 0;
   }
 
   /* 

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

@@ -233,9 +233,13 @@ const EditViewDataManagerProvider = ({
     ({ target: { name, value, type } }, shouldSetInitialValue = false) => {
       let inputValue = value;
 
-      // Empty string is not a valid date,
-      // Set the date to null when it's empty
-      if (type === 'date' && value === '') {
+      // Allow to reset text, textarea, email, uid, select/enum, and number
+      if (
+        ['text', 'textarea', 'string', 'email', 'uid', 'select', 'select-one', 'number'].includes(
+          type
+        ) &&
+        !value
+      ) {
         inputValue = null;
       }
 
@@ -248,16 +252,6 @@ const EditViewDataManagerProvider = ({
         return;
       }
 
-      // Allow to reset enum
-      if (type === 'select-one' && value === '') {
-        inputValue = null;
-      }
-
-      // Allow to reset number input
-      if (type === 'number' && value === '') {
-        inputValue = null;
-      }
-
       dispatch({
         type: 'ON_CHANGE',
         keys: name.split('.'),

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/cleanData.js

@@ -57,6 +57,7 @@ const cleanData = (retrievedData, currentSchema, componentsSchema) => {
           } else {
             cleanedData = value ? recursiveCleanData(value, componentsSchema[component]) : value;
           }
+
           break;
         case 'dynamiczone':
           cleanedData = value.map(componentData => {

package/admin/src/content-manager/components/Wysiwyg/EditorStylesContainer.js

@@ -16,7 +16,7 @@ export const EditorStylesContainer = styled.div`
     height: ${({ isExpandMode }) => (isExpandMode ? '100%' : '290px')};
     color: ${({ theme }) => theme.colors.neutral800};
     direction: ltr;
-    font-family: --apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
       'Open Sans', 'Helvetica Neue', sans-serif;
   }
 

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

@@ -309,8 +309,8 @@ function ListView({
                     { target: headerLayoutTitle }
                   )}
                   placeholder={formatMessage({
-                    id: 'app.component.search.placeholder',
-                    defaultMessage: 'Search...',
+                    id: 'global.search',
+                    defaultMessage: 'Search',
                   })}
                   trackedEvent="didSearch"
                 />

package/admin/src/hooks/{useFetchInstalledPlugins → useFetchEnabledPlugins}/index.js

@@ -1,11 +1,11 @@
 import { useQuery } from 'react-query';
 import { useNotification } from '@strapi/helper-plugin';
-import { fetchInstalledPlugins } from './utils/api';
+import { fetchEnabledPlugins } from './utils/api';
 
-const useFetchInstalledPlugins = notifyLoad => {
+const useFetchEnabledPlugins = notifyLoad => {
   const toggleNotification = useNotification();
 
-  return useQuery('list-installed-plugins', () => fetchInstalledPlugins(), {
+  return useQuery('list-enabled-plugins', () => fetchEnabledPlugins(), {
     onSuccess: () => {
       if (notifyLoad) {
         notifyLoad();
@@ -20,4 +20,4 @@ const useFetchInstalledPlugins = notifyLoad => {
   });
 };
 
-export default useFetchInstalledPlugins;
+export default useFetchEnabledPlugins;

package/admin/src/hooks/{useFetchInstalledPlugins → useFetchEnabledPlugins}/utils/api.js

@@ -1,9 +1,9 @@
 import { axiosInstance } from '../../../core/utils';
 
-const fetchInstalledPlugins = async () => {
+const fetchEnabledPlugins = async () => {
   const { data } = await axiosInstance.get('/admin/plugins');
 
   return data;
 };
 
-export { fetchInstalledPlugins };
+export { fetchEnabledPlugins };

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

@@ -6,7 +6,7 @@ import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layou
 import { Main } from '@strapi/design-system/Main';
 import { Typography } from '@strapi/design-system/Typography';
 import { Table, Thead, Tbody, Tr, Td, Th } from '@strapi/design-system/Table';
-import useFetchInstalledPlugins from '../../hooks/useFetchInstalledPlugins';
+import useFetchEnabledPlugins from '../../hooks/useFetchEnabledPlugins';
 
 const Plugins = () => {
   const { formatMessage } = useIntl();
@@ -30,7 +30,7 @@ const Plugins = () => {
     );
   };
 
-  const { status, data } = useFetchInstalledPlugins(notifyPluginPageLoad);
+  const { status, data } = useFetchEnabledPlugins(notifyPluginPageLoad);
 
   const isLoading = status !== 'success' && status !== 'error';
 

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

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
+import pluralize from 'pluralize';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
 import { Typography } from '@strapi/design-system/Typography';
@@ -27,7 +28,7 @@ const EllipsisText = styled(Typography)`
 
 const NpmPackageCard = ({
   npmPackage,
-  installedPackageNames,
+  isInstalled,
   useYarn,
   isInDevelopmentMode,
   npmPackageType,
@@ -36,8 +37,6 @@ const NpmPackageCard = ({
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
 
-  const isInstalled = installedPackageNames.includes(attributes.npmPackageName);
-
   const commandToCopy = useYarn
     ? `yarn add ${attributes.npmPackageName}`
     : `npm install ${attributes.npmPackageName}`;
@@ -47,10 +46,9 @@ const NpmPackageCard = ({
     defaultMessage: 'Made by Strapi',
   });
 
-  const npmPackageHref =
-    npmPackageType === 'provider'
-      ? attributes.npmPackageUrl
-      : `https://market.strapi.io/plugins/${attributes.slug}`;
+  const npmPackageHref = `https://market.strapi.io/${pluralize.plural(npmPackageType)}/${
+    attributes.slug
+  }`;
 
   return (
     <Flex
@@ -65,6 +63,7 @@ const NpmPackageCard = ({
       shadow="tableShadow"
       height="100%"
       alignItems="normal"
+      data-testid="npm-package-card"
     >
       <Box>
         <Box
@@ -167,7 +166,7 @@ NpmPackageCard.propTypes = {
       strapiCompatibility: PropTypes.oneOf(['v3', 'v4']),
     }).isRequired,
   }).isRequired,
-  installedPackageNames: PropTypes.arrayOf(PropTypes.string).isRequired,
+  isInstalled: PropTypes.bool.isRequired,
   useYarn: PropTypes.bool.isRequired,
   isInDevelopmentMode: PropTypes.bool,
   npmPackageType: PropTypes.string.isRequired,

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import NpmPackageCard from '../NpmPackageCard';
@@ -10,13 +10,19 @@ const NpmPackagesGrid = ({
   isInDevelopmentMode,
   npmPackageType,
 }) => {
+  // Check if an individual package is in the dependencies
+  const isAlreadyInstalled = useCallback(
+    npmPackageName => installedPackageNames.includes(npmPackageName),
+    [installedPackageNames]
+  );
+
   return (
     <Grid gap={4}>
       {npmPackages.map(npmPackage => (
         <GridItem col={4} s={6} xs={12} style={{ height: '100%' }} key={npmPackage.id}>
           <NpmPackageCard
             npmPackage={npmPackage}
-            installedPackageNames={installedPackageNames}
+            isInstalled={isAlreadyInstalled(npmPackage.attributes.npmPackageName)}
             useYarn={useYarn}
             isInDevelopmentMode={isInDevelopmentMode}
             npmPackageType={npmPackageType}

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

@@ -1,7 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { Helmet } from 'react-helmet';
-import { useQuery } from 'react-query';
 import matchSorter from 'match-sorter';
 import {
   AnErrorOccurred,
@@ -23,8 +22,6 @@ import { Tabs, Tab, TabGroup, TabPanels, TabPanel } from '@strapi/design-system/
 
 import EmptyNpmPackageSearch from './components/EmptyNpmPackageSearch';
 import PageHeader from './components/PageHeader';
-import { fetchAppInformation } from './utils/api';
-import useFetchInstalledPlugins from '../../hooks/useFetchInstalledPlugins';
 import useFetchMarketplaceProviders from '../../hooks/useFetchMarketplaceProviders';
 import useFetchMarketplacePlugins from '../../hooks/useFetchMarketplacePlugins';
 import adminPermissions from '../../permissions';
@@ -53,7 +50,7 @@ const MarketPlacePage = () => {
   const toggleNotification = useNotification();
   const [searchQuery, setSearchQuery] = useState('');
   const [npmPackageType, setNpmPackageType] = useState('plugin');
-  const { autoReload: isInDevelopmentMode } = useAppInfos();
+  const { autoReload: isInDevelopmentMode, dependencies, useYarn } = useAppInfos();
   const isOnline = useNavigatorOnLine();
 
   useFocusWhenNavigate();
@@ -85,37 +82,9 @@ const MarketPlacePage = () => {
     data: marketplaceProvidersResponse,
   } = useFetchMarketplaceProviders(notifyMarketplaceLoad);
 
-  const {
-    status: installedPluginsStatus,
-    data: installedPluginsResponse,
-  } = useFetchInstalledPlugins();
-
-  const { data: appInfoResponse, status: appInfoStatus } = useQuery(
-    'app-information',
-    fetchAppInformation,
-    {
-      onError: () => {
-        toggleNotification({
-          type: 'warning',
-          message: { id: 'notification.error', defaultMessage: 'An error occured' },
-        });
-      },
-    }
-  );
-
-  const isLoading = [
-    marketplacePluginsStatus,
-    marketplaceProvidersStatus,
-    installedPluginsStatus,
-    appInfoStatus,
-  ].includes('loading');
+  const isLoading = [marketplacePluginsStatus, marketplaceProvidersStatus].includes('loading');
 
-  const hasFailed = [
-    marketplacePluginsStatus,
-    marketplaceProvidersStatus,
-    installedPluginsStatus,
-    appInfoStatus,
-  ].includes('error');
+  const hasFailed = [marketplacePluginsStatus, marketplaceProvidersStatus].includes('error');
 
   useEffect(() => {
     trackUsageRef.current('didGoToMarketplace');
@@ -208,8 +177,8 @@ const MarketPlacePage = () => {
     setNpmPackageType(packageType);
   };
 
-  // Check if plugins are installed already
-  const installedPluginNames = installedPluginsResponse.plugins.map(plugin => plugin.packageName);
+  // Check if plugins and providers are installed already
+  const installedPackageNames = Object.keys(dependencies);
 
   return (
     <Layout>
@@ -278,8 +247,8 @@ const MarketPlacePage = () => {
                 ) : (
                   <NpmPackagesGrid
                     npmPackages={pluginSearchResults}
-                    installedPackageNames={installedPluginNames}
-                    useYarn={appInfoResponse.data.useYarn}
+                    installedPackageNames={installedPackageNames}
+                    useYarn={useYarn}
                     isInDevelopmentMode={isInDevelopmentMode}
                     npmPackageType="plugin"
                   />
@@ -292,7 +261,8 @@ const MarketPlacePage = () => {
                 ) : (
                   <NpmPackagesGrid
                     npmPackages={providerSearchResults}
-                    useYarn={appInfoResponse.data.useYarn}
+                    installedPackageNames={installedPackageNames}
+                    useYarn={useYarn}
                     isInDevelopmentMode={isInDevelopmentMode}
                     npmPackageType="provider"
                   />

package/admin/src/translations/en.json

@@ -679,6 +679,7 @@
   "content-manager.apiError.This attribute must be unique": "{field} must be unique",
   "form.button.continue": "Continue",
   "form.button.done": "Done",
+  "global.search": "Search",
   "global.actions": "Actions",
   "global.back": "Back",
   "global.change-password": "Change password",
@@ -721,6 +722,7 @@
   "notification.success.title": "Success:",
   "notification.version.update.message": "A new version of Strapi is available!",
   "notification.warning.title": "Warning:",
+  "notification.warning.404": "404 - Not found",
   "or": "OR",
   "request.error.model.unknown": "This model doesn't exist",
   "skipToContent": "Skip to content",