Handle marketplace production environment

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

@@ -28,7 +28,7 @@ const EllipsisText = styled(Typography)`
   overflow: hidden;
 `;
 
-const PluginCard = ({ plugin, installedPluginNames, useYarn }) => {
+const PluginCard = ({ plugin, installedPluginNames, useYarn, isInDevelopmentMode }) => {
   const { attributes } = plugin;
   const { formatMessage } = useIntl();
   const toggleNotification = useNotification();
@@ -45,6 +45,50 @@ const PluginCard = ({ plugin, installedPluginNames, useYarn }) => {
     defaultMessage: 'Made by Strapi',
   });
 
+  // Decide to show install button or not
+  const showInstallButton = () => {
+    // Already installed
+    if (isInstalled) {
+      return (
+        <Box paddingLeft={4}>
+          <Icon as={Check} marginRight={2} width={12} height={12} color="success600" />
+          <Typography variant="omega" textColor="success600" fontWeight="bold">
+            {formatMessage({
+              id: 'admin.pages.MarketPlacePage.plugin.installed',
+              defaultMessage: 'Installed',
+            })}
+          </Typography>
+        </Box>
+      );
+    }
+
+    // In development, show install button
+    if (isInDevelopmentMode) {
+      return (
+        <CopyToClipboard
+          onCopy={() => {
+            trackUsage('willInstallPlugin');
+            toggleNotification({
+              type: 'success',
+              message: { id: 'admin.pages.MarketPlacePage.plugin.copy.success' },
+            });
+          }}
+          text={commandToCopy}
+        >
+          <Button size="S" startIcon={<Duplicate />} variant="secondary">
+            {formatMessage({
+              id: 'admin.pages.MarketPlacePage.plugin.copy',
+              defaultMessage: 'Copy install command',
+            })}
+          </Button>
+        </CopyToClipboard>
+      );
+    }
+
+    // Not in development and plugin not installed already. Show nothing
+    return null;
+  };
+
   return (
     <Flex
       direction="column"
@@ -128,40 +172,16 @@ const PluginCard = ({ plugin, installedPluginNames, useYarn }) => {
             defaultMessage: 'Learn more',
           })}
         </LinkButton>
-        {isInstalled ? (
-          <Box paddingLeft={4}>
-            <Icon as={Check} marginRight={2} width={12} height={12} color="success600" />
-            <Typography variant="omega" textColor="success600" fontWeight="bold">
-              {formatMessage({
-                id: 'admin.pages.MarketPlacePage.plugin.installed',
-                defaultMessage: 'Installed',
-              })}
-            </Typography>
-          </Box>
-        ) : (
-          <CopyToClipboard
-            onCopy={() => {
-              trackUsage('willInstallPlugin');
-              toggleNotification({
-                type: 'success',
-                message: { id: 'admin.pages.MarketPlacePage.plugin.copy.success' },
-              });
-            }}
-            text={commandToCopy}
-          >
-            <Button size="S" startIcon={<Duplicate />} variant="secondary">
-              {formatMessage({
-                id: 'admin.pages.MarketPlacePage.plugin.copy',
-                defaultMessage: 'Copy install command',
-              })}
-            </Button>
-          </CopyToClipboard>
-        )}
+        {showInstallButton()}
       </Stack>
     </Flex>
   );
 };
 
+PluginCard.defaultProps = {
+  isInDevelopmentMode: false,
+};
+
 PluginCard.propTypes = {
   plugin: PropTypes.shape({
     id: PropTypes.string.isRequired,
@@ -181,6 +201,7 @@ PluginCard.propTypes = {
   }).isRequired,
   installedPluginNames: PropTypes.arrayOf(PropTypes.string).isRequired,
   useYarn: PropTypes.bool.isRequired,
+  isInDevelopmentMode: PropTypes.bool,
 };
 
 export default PluginCard;

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

@@ -10,6 +10,7 @@ import {
   useTracking,
   LoadingIndicatorPage,
   useNotification,
+  useAppInfos,
 } from '@strapi/helper-plugin';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
@@ -46,6 +47,7 @@ const MarketPlacePage = () => {
   const trackUsageRef = useRef(trackUsage);
   const toggleNotification = useNotification();
   const [searchQuery, setSearchQuery] = useState('');
+  const { autoReload: isInDevelopmentMode } = useAppInfos();
 
   useFocusWhenNavigate();
 
@@ -101,6 +103,19 @@ const MarketPlacePage = () => {
     trackUsageRef.current('didGoToMarketplace');
   }, []);
 
+  useEffect(() => {
+    if (!isInDevelopmentMode) {
+      toggleNotification({
+        type: 'info',
+        message: {
+          id: 'admin.pages.MarketPlacePage.production',
+          defaultMessage: 'Manage plugins from the development environment',
+        },
+        blockTransition: true,
+      });
+    }
+  }, [toggleNotification, isInDevelopmentMode]);
+
   if (hasFailed) {
     return (
       <Layout>
@@ -198,6 +213,7 @@ const MarketPlacePage = () => {
                     plugin={plugin}
                     installedPluginNames={installedPluginNames}
                     useYarn={appInfoResponse.data.useYarn}
+                    isInDevelopmentMode={isInDevelopmentMode}
                   />
                 </GridItem>
               ))}

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

@@ -10,16 +10,21 @@ import {
 import { IntlProvider } from 'react-intl';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { ThemeProvider, lightTheme } from '@strapi/design-system';
-import { useTracking } from '@strapi/helper-plugin';
+import { useTracking, useAppInfos } from '@strapi/helper-plugin';
 import MarketPlacePage from '../index';
 import server from './server';
 
+const toggleNotification = jest.fn();
+
 jest.mock('@strapi/helper-plugin', () => ({
   ...jest.requireActual('@strapi/helper-plugin'),
-  useNotification: jest.fn(),
+  useNotification: jest.fn(() => {
+    return toggleNotification;
+  }),
   pxToRem: jest.fn(),
   CheckPagePermissions: ({ children }) => children,
   useTracking: jest.fn(() => ({ trackUsage: jest.fn() })),
+  useAppInfos: jest.fn(() => ({ autoReload: true })),
 }));
 
 const client = new QueryClient({
@@ -1527,4 +1532,23 @@ describe('Marketplace page', () => {
 
     expect(noResult).toBeVisible();
   });
+
+  it('handles production environment', async () => {
+    // Simulate production environment
+    useAppInfos.mockImplementation(() => ({ autoReload: false }));
+    const { queryByText } = render(App);
+
+    // Should display notification
+    expect(toggleNotification).toHaveBeenCalledWith({
+      type: 'info',
+      message: {
+        id: 'admin.pages.MarketPlacePage.production',
+        defaultMessage: 'Manage plugins from the development environment',
+      },
+      blockTransition: true,
+    });
+
+    // Should not show install buttons
+    expect(queryByText(/copy install command/i)).not.toBeInTheDocument();
+  });
 });

packages/core/admin/admin/src/translations/en.json

@@ -61,6 +61,7 @@
   "admin.pages.MarketPlacePage.helmet": "Marketplace - Plugins",
   "admin.pages.MarketPlacePage.title": "Marketplace",
   "admin.pages.MarketPlacePage.subtitle": "Get more out of Strapi",
+  "admin.pages.MarketPlacePage.production": "Manage plugins from the development environment",
   "admin.pages.MarketPlacePage.plugin.info.text": "Learn more",
   "admin.pages.MarketPlacePage.plugin.info.label": "Learn more about {pluginName}",
   "admin.pages.MarketPlacePage.plugin.copy": "Copy install command",