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 f4777e70ef..e7e4c172ae 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 @@ -12,7 +12,8 @@ import { Icon } from '@strapi/design-system/Icon'; import ExternalLink from '@strapi/icons/ExternalLink'; import Duplicate from '@strapi/icons/Duplicate'; import Check from '@strapi/icons/Check'; - +import { useNotification, useTracking } from '@strapi/helper-plugin'; +import { CopyToClipboard } from 'react-copy-to-clipboard'; // Custom component to have an ellipsis after the 2nd line const EllipsisText = styled(Typography)` /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */ @@ -26,11 +27,14 @@ const EllipsisText = styled(Typography)` const PluginCard = ({ plugin, installedPlugins, useYarn }) => { const { attributes } = plugin; const { formatMessage } = useIntl(); + const toggleNotification = useNotification(); + const { trackUsage } = useTracking(); const isInstalled = installedPlugins.includes(attributes.npmPackageName); - // TODO: remove and use - console.log(useYarn); + const commandToCopy = useYarn + ? `yarn add ${attributes.npmPackageName}` + : `npm install ${attributes.npmPackageName}`; return ( { { pluginName: attributes.name } )} variant="tertiary" + onClick={() => trackUsage('didLearnMore')} > {formatMessage({ id: 'admin.pages.MarketPlacePage.plugin.info.text', @@ -97,12 +102,23 @@ const PluginCard = ({ plugin, installedPlugins, useYarn }) => { ) : ( - + { + trackUsage('willInstallPlugin'); + toggleNotification({ + type: 'success', + message: { id: 'admin.pages.MarketPlacePage.plugin.copy.success' }, + }); + }} + text={commandToCopy} + > + + )} diff --git a/packages/core/admin/admin/src/translations/en.json b/packages/core/admin/admin/src/translations/en.json index a2e671c9c5..67e96715bb 100644 --- a/packages/core/admin/admin/src/translations/en.json +++ b/packages/core/admin/admin/src/translations/en.json @@ -64,6 +64,7 @@ "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", + "admin.pages.MarketPlacePage.plugin.copy.success": "install command copied", "admin.pages.MarketPlacePage.plugin.installed": "Installed", "admin.pages.MarketPlacePage.plugin.info": "Learn more", "admin.pages.MarketPlacePage.submit.plugin.link": "Submit your plugin",