add copy command and track usage data

This commit is contained in:
Mark Kaylor 2022-02-21 17:16:13 +01:00
parent f7fd8bcebf
commit ac0d6b810d
2 changed files with 30 additions and 8 deletions

View File

@ -1,4 +1,4 @@
import React from 'react'; import React, { useRef } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import styled from 'styled-components'; import styled from 'styled-components';
@ -12,7 +12,8 @@ import { Icon } from '@strapi/design-system/Icon';
import ExternalLink from '@strapi/icons/ExternalLink'; import ExternalLink from '@strapi/icons/ExternalLink';
import Duplicate from '@strapi/icons/Duplicate'; import Duplicate from '@strapi/icons/Duplicate';
import Check from '@strapi/icons/Check'; 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 // Custom component to have an ellipsis after the 2nd line
const EllipsisText = styled(Typography)` const EllipsisText = styled(Typography)`
/* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */ /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
@ -26,8 +27,16 @@ const EllipsisText = styled(Typography)`
const PluginCard = ({ plugin, installedPlugins }) => { const PluginCard = ({ plugin, installedPlugins }) => {
const { attributes } = plugin; const { attributes } = plugin;
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const toggleNotification = useNotification();
const { trackUsage } = useTracking();
const trackUsageRef = useRef(trackUsage);
const isInstalled = installedPlugins.includes(attributes.npmPackageName); 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 ( return (
<Flex <Flex
@ -77,6 +86,7 @@ const PluginCard = ({ plugin, installedPlugins }) => {
{ pluginName: attributes.name } { pluginName: attributes.name }
)} )}
variant="tertiary" variant="tertiary"
onClick={() => trackUsageRef.current('didLearnMore')}
> >
{formatMessage({ {formatMessage({
id: 'admin.pages.MarketPlacePage.plugin.info.text', id: 'admin.pages.MarketPlacePage.plugin.info.text',
@ -94,12 +104,23 @@ const PluginCard = ({ plugin, installedPlugins }) => {
</Typography> </Typography>
</Box> </Box>
) : ( ) : (
<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"> <Button size="S" endIcon={<Duplicate />} variant="secondary">
{formatMessage({ {formatMessage({
id: 'admin.pages.MarketPlacePage.plugin.copy', id: 'admin.pages.MarketPlacePage.plugin.copy',
defaultMessage: 'Copy install command', defaultMessage: 'Copy install command',
})} })}
</Button> </Button>
</CopyToClipboard>
)} )}
</Stack> </Stack>
</Flex> </Flex>

View File

@ -64,6 +64,7 @@
"admin.pages.MarketPlacePage.plugin.info.text": "Learn more", "admin.pages.MarketPlacePage.plugin.info.text": "Learn more",
"admin.pages.MarketPlacePage.plugin.info.label": "Learn more about {pluginName}", "admin.pages.MarketPlacePage.plugin.info.label": "Learn more about {pluginName}",
"admin.pages.MarketPlacePage.plugin.copy": "Copy install command", "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.installed": "Installed",
"admin.pages.MarketPlacePage.plugin.info": "Learn more", "admin.pages.MarketPlacePage.plugin.info": "Learn more",
"admin.pages.MarketPlacePage.submit.plugin.link": "Submit your plugin", "admin.pages.MarketPlacePage.submit.plugin.link": "Submit your plugin",