Refactor check if plugin is installed

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

@@ -12,11 +12,11 @@ import ExternalLink from '@strapi/icons/ExternalLink';
 import Duplicate from '@strapi/icons/Duplicate';
 import Check from '@strapi/icons/Check';
 
-const PluginCard = ({ plugin, installedPlugins }) => {
+const PluginCard = ({ plugin, installedPackages }) => {
   const { attributes } = plugin;
   const { formatMessage } = useIntl();
 
-  const isInstalled = installedPlugins.includes(attributes.name.toLowerCase());
+  const isInstalled = installedPackages.includes(attributes.npmPackageName);
 
   return (
     <Flex
@@ -121,7 +121,7 @@ PluginCard.propTypes = {
       strapiCompatibility: PropTypes.oneOf(['v3', 'v4']).isRequired,
     }).isRequired,
   }).isRequired,
-  installedPlugins: PropTypes.array.isRequired,
+  installedPackages: PropTypes.array.isRequired,
 };
 
 export default PluginCard;

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

@@ -3,6 +3,7 @@ import { useIntl } from 'react-intl';
 import { useQuery } from 'react-query';
 import { Helmet } from 'react-helmet';
 import {
+  AnErrorOccurred,
   CheckPagePermissions,
   useTracking,
   LoadingIndicatorPage,
@@ -12,7 +13,7 @@ import { useNotifyAT } from '@strapi/design-system/LiveRegions';
 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 { fetchPlugins, fetchInstalledPlugins } from './utils/api';
+import { fetchPlugins, fetchDependencies } from './utils/api';
 import adminPermissions from '../../permissions';
 import PluginCard from './components/PluginCard';
 
@@ -39,9 +40,9 @@ const MarketPlacePage = () => {
     );
   };
 
-  const { status: installedPluginsStatus, data: installedPluginsResponse } = useQuery(
-    'list-installed-plugins',
-    () => fetchInstalledPlugins(notifyLoad),
+  const { status: installedDependenciesStatus, data: installedDependenciesResponse } = useQuery(
+    'list-dependencies',
+    () => fetchDependencies(notifyLoad),
     {
       onError: () => {
         toggleNotification({
@@ -52,7 +53,7 @@ const MarketPlacePage = () => {
     }
   );
 
-  const { status, data: pluginsResponse } = useQuery(
+  const { status: pluginsStatus, data: pluginsResponse } = useQuery(
     'list-plugins',
     () => fetchPlugins(notifyLoad),
     {
@@ -65,14 +66,21 @@ const MarketPlacePage = () => {
     }
   );
 
-  const isLoading =
-    (status !== 'success' && status !== 'error') ||
-    (installedPluginsStatus !== 'success' && installedPluginsStatus !== 'error');
+  const isLoading = pluginsStatus === 'loading' || installedDependenciesStatus === 'loading';
+  const hasFailed = pluginsStatus === 'error' || installedDependenciesStatus === 'error';
 
   useEffect(() => {
     trackUsage('didGoToMarketplace');
   }, [trackUsage]);
 
+  if (hasFailed) {
+    return (
+      <Layout>
+        <AnErrorOccurred />
+      </Layout>
+    );
+  }
+
   if (isLoading) {
     return (
       <Layout>
@@ -83,9 +91,7 @@ const MarketPlacePage = () => {
     );
   }
 
-  const installedPlugins = installedPluginsResponse.plugins.map(plugin => {
-    return plugin.displayName.toLowerCase();
-  });
+  const installedPackages = Object.keys(installedDependenciesResponse.data.dependencies);
 
   return (
     <CheckPagePermissions permissions={adminPermissions.marketplace.main}>
@@ -111,7 +117,7 @@ const MarketPlacePage = () => {
             <Grid gap={4}>
               {pluginsResponse.data.map(plugin => (
                 <GridItem col={4} s={6} xs={12} style={{ height: '100%' }} key={plugin.id}>
-                  <PluginCard plugin={plugin} installedPlugins={installedPlugins} />
+                  <PluginCard plugin={plugin} installedPackages={installedPackages} />
                 </GridItem>
               ))}
             </Grid>

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

@@ -17,12 +17,12 @@ const fetchPlugins = async notify => {
   return filteredResponse;
 };
 
-const fetchInstalledPlugins = async notify => {
-  const { data } = await axiosInstance.get('/admin/plugins');
+const fetchDependencies = async notify => {
+  const { data } = await axiosInstance.get('/admin/information');
 
   notify();
 
   return data;
 };
 
-export { fetchPlugins, fetchInstalledPlugins };
+export { fetchPlugins, fetchDependencies };

packages/core/admin/server/controllers/admin.js

@@ -45,11 +45,19 @@ module.exports = {
     const currentEnvironment = strapi.config.get('environment');
     const autoReload = strapi.config.get('autoReload', false);
     const strapiVersion = strapi.config.get('info.strapi', null);
+    const dependencies = strapi.config.get('info.dependencies', {});
     const nodeVersion = process.version;
     const communityEdition = !strapi.EE;
 
     return {
-      data: { currentEnvironment, autoReload, strapiVersion, nodeVersion, communityEdition },
+      data: {
+        currentEnvironment,
+        autoReload,
+        strapiVersion,
+        nodeVersion,
+        communityEdition,
+        dependencies,
+      },
     };
   },