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 9ced3ba7d7..b23c60270a 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 @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useRef } from 'react'; import PropTypes from 'prop-types'; import { useIntl } from 'react-intl'; import styled from 'styled-components'; @@ -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,8 +27,16 @@ const EllipsisText = styled(Typography)` const PluginCard = ({ plugin, installedPlugins }) => { const { attributes } = plugin; const { formatMessage } = useIntl(); + const toggleNotification = useNotification(); + const { trackUsage } = useTracking(); + const trackUsageRef = useRef(trackUsage); const isInstalled = installedPlugins.includes(attributes.npmPackageName); + // TODO: Remove this temp test boolean + const useYarn = true; + const commandToCopy = useYarn + ? `yarn add ${attributes.npmPackageName}` + : `npm install ${attributes.npmPackageName}`; return ( { { pluginName: attributes.name } )} variant="tertiary" + onClick={() => trackUsageRef.current('didLearnMore')} > {formatMessage({ id: 'admin.pages.MarketPlacePage.plugin.info.text', @@ -94,12 +104,23 @@ const PluginCard = ({ plugin, installedPlugins }) => { ) : ( - + { + trackUsageRef.current('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",