Merge branch 'smarter-card' of github.com:strapi/strapi into copy-command-and-track

packages/core/admin/admin/src/pages/MarketplacePage/components/PluginCard/index.js

@@ -24,7 +24,7 @@ const EllipsisText = styled(Typography)`
   overflow: hidden;
 `;
 
-const PluginCard = ({ plugin, installedPlugins }) => {
+const PluginCard = ({ plugin, installedPlugins, useYarn }) => {
   const { attributes } = plugin;
   const { formatMessage } = useIntl();
   const toggleNotification = useNotification();
@@ -38,6 +38,9 @@ const PluginCard = ({ plugin, installedPlugins }) => {
     ? `yarn add ${attributes.npmPackageName}`
     : `npm install ${attributes.npmPackageName}`;
 
+  // TODO: remove and use
+  console.log(useYarn);
+
   return (
     <Flex
       direction="column"
@@ -144,6 +147,7 @@ PluginCard.propTypes = {
     }).isRequired,
   }).isRequired,
   installedPlugins: PropTypes.arrayOf(PropTypes.string).isRequired,
+  useYarn: PropTypes.bool.isRequired,
 };
 
 export default PluginCard;

packages/core/admin/admin/src/pages/MarketplacePage/index.js

@@ -1,24 +1,28 @@
 import React, { useEffect } from 'react';
 import { useIntl } from 'react-intl';
 import { Helmet } from 'react-helmet';
+import { useQuery } from 'react-query';
 import {
   AnErrorOccurred,
   CheckPagePermissions,
   useFocusWhenNavigate,
   useTracking,
   LoadingIndicatorPage,
+  useNotification,
 } from '@strapi/helper-plugin';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
 import adminPermissions from '../../permissions';
 import PluginCard from './components/PluginCard';
+import { fetchAppInformation } from './utils/api';
 import useFetchInstalledPlugins from '../../hooks/useFetchInstalledPlugins';
 import useFetchMarketplacePlugins from '../../hooks/useFetchMarketplacePlugins';
 
 const MarketPlacePage = () => {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
+  const toggleNotification = useNotification();
 
   useFocusWhenNavigate();
 
@@ -43,9 +47,27 @@ const MarketPlacePage = () => {
     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 === 'loading' || installedPluginsStatus === 'loading';
-  const hasFailed = marketplacePluginsStatus === 'error' || installedPluginsStatus === 'error';
+  const isLoading =
+    marketplacePluginsStatus === 'loading' ||
+    installedPluginsStatus === 'loading' ||
+    appInfoStatus === 'loading';
+  const hasFailed =
+    marketplacePluginsStatus === 'error' ||
+    installedPluginsStatus === 'error' ||
+    appInfoStatus === 'error';
 
   useEffect(() => {
     trackUsage('didGoToMarketplace');
@@ -94,7 +116,11 @@ const MarketPlacePage = () => {
           <Grid gap={4}>
             {marketplacePluginsResponse.data.map(plugin => (
               <GridItem col={4} s={6} xs={12} style={{ height: '100%' }} key={plugin.id}>
-                <PluginCard plugin={plugin} installedPlugins={installedPlugins} />
+                <PluginCard
+                  plugin={plugin}
+                  installedPlugins={installedPlugins}
+                  useYarn={appInfoResponse.data.useYarn}
+                />
               </GridItem>
             ))}
           </Grid>

packages/core/admin/admin/src/pages/MarketplacePage/utils/api.js

@@ -1,10 +1,8 @@
 import { axiosInstance } from '../../../core/utils';
 
-const fetchAppInformation = async notify => {
+const fetchAppInformation = async () => {
   const { data } = await axiosInstance.get('/admin/information');
 
-  notify();
-
   return data;
 };