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} + > + + + ); + } + + // 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} - > - - - )} + {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",