diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/components/PluginCard/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/components/PluginCard/index.js
index 16671fecbc..3f2977d553 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/components/PluginCard/index.js
+++ b/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 (
+
+
+
+ {formatMessage({
+ id: 'admin.pages.MarketPlacePage.plugin.installed',
+ defaultMessage: 'Installed',
+ })}
+
+
+ );
+ }
+
+ // In development, show install button
+ if (isInDevelopmentMode) {
+ return (
+ {
+ trackUsage('willInstallPlugin');
+ toggleNotification({
+ type: 'success',
+ message: { id: 'admin.pages.MarketPlacePage.plugin.copy.success' },
+ });
+ }}
+ text={commandToCopy}
+ >
+ } variant="secondary">
+ {formatMessage({
+ id: 'admin.pages.MarketPlacePage.plugin.copy',
+ defaultMessage: 'Copy install command',
+ })}
+
+
+ );
+ }
+
+ // Not in development and plugin not installed already. Show nothing
+ return null;
+ };
+
return (
{
defaultMessage: 'Learn more',
})}
- {isInstalled ? (
-
-
-
- {formatMessage({
- id: 'admin.pages.MarketPlacePage.plugin.installed',
- defaultMessage: 'Installed',
- })}
-
-
- ) : (
- {
- trackUsage('willInstallPlugin');
- toggleNotification({
- type: 'success',
- message: { id: 'admin.pages.MarketPlacePage.plugin.copy.success' },
- });
- }}
- text={commandToCopy}
- >
- } variant="secondary">
- {formatMessage({
- id: 'admin.pages.MarketPlacePage.plugin.copy',
- defaultMessage: 'Copy install command',
- })}
-
-
- )}
+ {showInstallButton()}
);
};
+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;
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
index 2d2577281b..5db89f703b 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js
+++ b/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 (
@@ -198,6 +213,7 @@ const MarketPlacePage = () => {
plugin={plugin}
installedPluginNames={installedPluginNames}
useYarn={appInfoResponse.data.useYarn}
+ isInDevelopmentMode={isInDevelopmentMode}
/>
))}
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js b/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js
index 17ffd8303f..31d2ef5b2f 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js
+++ b/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();
+ });
});
diff --git a/packages/core/admin/admin/src/translations/en.json b/packages/core/admin/admin/src/translations/en.json
index 63d2e8c29b..ab5c7ba5c3 100644
--- a/packages/core/admin/admin/src/translations/en.json
+++ b/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",