mirror of
https://github.com/strapi/strapi.git
synced 2025-08-13 19:27:34 +00:00
add copy command and track usage data
This commit is contained in:
parent
f7fd8bcebf
commit
ac0d6b810d
@ -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>
|
||||||
) : (
|
) : (
|
||||||
<Button size="S" endIcon={<Duplicate />} variant="secondary">
|
<CopyToClipboard
|
||||||
{formatMessage({
|
onCopy={() => {
|
||||||
id: 'admin.pages.MarketPlacePage.plugin.copy',
|
trackUsageRef.current('willInstallPlugin');
|
||||||
defaultMessage: 'Copy install command',
|
toggleNotification({
|
||||||
})}
|
type: 'success',
|
||||||
</Button>
|
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>
|
</Stack>
|
||||||
</Flex>
|
</Flex>
|
||||||
|
@ -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",
|
||||||
|
Loading…
x
Reference in New Issue
Block a user