add copy command and track usage data

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 (
     <Flex
@@ -77,6 +86,7 @@ const PluginCard = ({ plugin, installedPlugins }) => {
             { 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 }) => {
             </Typography>
           </Box>
         ) : (
-          <Button size="S" endIcon={<Duplicate />} variant="secondary">
-            {formatMessage({
-              id: 'admin.pages.MarketPlacePage.plugin.copy',
-              defaultMessage: 'Copy install command',
-            })}
-          </Button>
+          <CopyToClipboard
+            onCopy={() => {
+              trackUsageRef.current('willInstallPlugin');
+              toggleNotification({
+                type: 'success',
+                message: { id: 'admin.pages.MarketPlacePage.plugin.copy.success' },
+              });
+            }}
+            text={commandToCopy}
+          >
+            <Button size="S" endIcon={<Duplicate />} variant="secondary">
+              {formatMessage({
+                id: 'admin.pages.MarketPlacePage.plugin.copy',
+                defaultMessage: 'Copy install command',
+              })}
+            </Button>
+          </CopyToClipboard>
         )}
       </Stack>
     </Flex>

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",