@strapi/admin 4.2.1-alpha.0 → 4.2.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/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/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) => (
+      {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"
                   />