diff --git a/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/DeleteButton/index.js b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/DeleteButton/index.js index af1042c249..926c70a373 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/DeleteButton/index.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/DeleteButton/index.js @@ -5,13 +5,15 @@ import { useTracking, ConfirmDialog } from '@strapi/helper-plugin'; import { useIntl } from 'react-intl'; import PropTypes from 'prop-types'; -const DeleteButton = ({ tokenName, onClickDelete }) => { +const DeleteButton = ({ tokenName, onClickDelete, tokenType }) => { const { formatMessage } = useIntl(); - const { trackUsage } = useTracking(); // TODO: Track different types of tokens + const { trackUsage } = useTracking(); const [showConfirmDialog, setShowConfirmDialog] = useState(false); const handleClickDelete = () => { setShowConfirmDialog(false); - trackUsage('willDeleteToken'); + trackUsage('willDeleteToken', { + tokenType, + }); onClickDelete(); }; @@ -44,6 +46,7 @@ const DeleteButton = ({ tokenName, onClickDelete }) => { DeleteButton.propTypes = { tokenName: PropTypes.string.isRequired, onClickDelete: PropTypes.func.isRequired, + tokenType: PropTypes.string.isRequired, }; export default DeleteButton; diff --git a/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/DeleteButton/tests/DeleteButton.test.js b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/DeleteButton/tests/DeleteButton.test.js index d7f4c53868..fee28f629b 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/DeleteButton/tests/DeleteButton.test.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/DeleteButton/tests/DeleteButton.test.js @@ -16,7 +16,12 @@ function ComponentToTest(props) { {}}> - {}} {...props} /> + {}} + {...props} + /> diff --git a/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/index.js b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/index.js index 7504aaabd6..db83e08990 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/index.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/index.js @@ -14,7 +14,15 @@ import DeleteButton from './DeleteButton'; import UpdateButton from './UpdateButton'; import ReadButton from './ReadButton'; -const Table = ({ permissions, headers, contentType, isLoading, tokens, onConfirmDelete }) => { +const Table = ({ + permissions, + headers, + contentType, + isLoading, + tokens, + onConfirmDelete, + tokenType, +}) => { const { canDelete, canUpdate, canRead } = permissions; const withBulkActions = canDelete || canUpdate || canRead; const [{ query }] = useQueryParams(); @@ -47,7 +55,9 @@ const Table = ({ permissions, headers, contentType, isLoading, tokens, onConfirm key={token.id} {...onRowClick({ fn() { - trackUsage('willEditTokenFromList'); + trackUsage('willEditTokenFromList', { + tokenType, + }); push(`${pathname}/${token.id}`); }, condition: canUpdate, @@ -87,6 +97,7 @@ const Table = ({ permissions, headers, contentType, isLoading, tokens, onConfirm onConfirmDelete(token.id)} + tokenType={tokenType} /> )} @@ -121,6 +132,7 @@ Table.propTypes = { contentType: PropTypes.string.isRequired, isLoading: PropTypes.bool, onConfirmDelete: PropTypes.func, + tokenType: PropTypes.string.isRequired, }; Table.defaultProps = { diff --git a/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/TokenBox/index.js b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/TokenBox/index.js index 7546fcb5a3..eb5605af1c 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/TokenBox/index.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/TokenBox/index.js @@ -6,7 +6,7 @@ import { Duplicate, Key } from '@strapi/icons'; import PropTypes from 'prop-types'; import { CopyToClipboard } from 'react-copy-to-clipboard'; -const TokenBox = ({ token }) => { +const TokenBox = ({ token, tokenType }) => { const { formatMessage } = useIntl(); const toggleNotification = useNotification(); const { trackUsage } = useTracking(); // TODO: Track different types of tokens @@ -19,7 +19,9 @@ const TokenBox = ({ token }) => { { - trackUsageRef.current('didCopyTokenKey'); + trackUsageRef.current('didCopyTokenKey', { + tokenType, + }); toggleNotification({ type: 'success', message: { id: 'Settings.tokens.notification.copied' }, @@ -70,6 +72,7 @@ TokenBox.defaultProps = { TokenBox.propTypes = { token: PropTypes.string, + tokenType: PropTypes.string.isRequired, }; export default TokenBox; diff --git a/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/constants.js b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/constants.js new file mode 100644 index 0000000000..95e236c2cb --- /dev/null +++ b/packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/constants.js @@ -0,0 +1,2 @@ +export const API_TOKEN_TYPE = 'api-token'; +export const TRANSFER_TOKEN_TYPE = 'transfer-token'; diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/index.js index 578d96838a..19b851d4b9 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/index.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/index.js @@ -26,6 +26,7 @@ import Permissions from './components/Permissions'; import FormApiTokenContainer from './components/FormApiTokenContainer'; import TokenBox from '../../../components/Tokens/TokenBox'; import FormHead from '../../../components/Tokens/FormHead'; +import { API_TOKEN_TYPE } from '../../../components/Tokens/constants'; const MSG_ERROR_NAME_TAKEN = 'Name already taken'; @@ -107,7 +108,9 @@ const ApiTokenCreateView = () => { ); useEffect(() => { - trackUsageRef.current(isCreating ? 'didAddTokenFromList' : 'didEditTokenFromList'); + trackUsageRef.current(isCreating ? 'didAddTokenFromList' : 'didEditTokenFromList', { + tokenType: API_TOKEN_TYPE, + }); }, [isCreating]); const { status } = useQuery( @@ -152,7 +155,9 @@ const ApiTokenCreateView = () => { ); const handleSubmit = async (body, actions) => { - trackUsageRef.current(isCreating ? 'willCreateToken' : 'willEditToken'); + trackUsageRef.current(isCreating ? 'willCreateToken' : 'willEditToken', { + tokenType: API_TOKEN_TYPE, + }); lockApp(); const lifespanVal = body.lifespan && parseInt(body.lifespan, 10) && body.lifespan !== '0' @@ -199,6 +204,7 @@ const ApiTokenCreateView = () => { trackUsageRef.current(isCreating ? 'didCreateToken' : 'didEditToken', { type: apiToken.type, + tokenType: API_TOKEN_TYPE, }); } catch (err) { const errors = formatAPIErrors(err.response.data); @@ -297,7 +303,9 @@ const ApiTokenCreateView = () => { - {Boolean(apiToken?.name) && } + {Boolean(apiToken?.name) && ( + + )} { useFocusWhenNavigate(); @@ -62,12 +63,14 @@ const ApiTokenListView = () => { } = useQuery( ['api-tokens'], async () => { - trackUsage('willAccessTokenList'); + trackUsage('willAccessTokenList', { + tokenType: API_TOKEN_TYPE, + }); const { data: { data }, } = await get(`/admin/api-tokens`); - trackUsage('didAccessTokenList', { number: data.length }); + trackUsage('didAccessTokenList', { number: data.length, tokenType: API_TOKEN_TYPE }); return data; }, @@ -127,7 +130,11 @@ const ApiTokenListView = () => { data-testid="create-api-token-button" startIcon={} size="S" - onClick={() => trackUsage('willAddTokenFromList')} + onClick={() => + trackUsage('willAddTokenFromList', { + tokenType: API_TOKEN_TYPE, + }) + } to="/settings/api-tokens/create" > {formatMessage({ @@ -149,6 +156,7 @@ const ApiTokenListView = () => { isLoading={isLoading} onConfirmDelete={(id) => deleteMutation.mutateAsync(id)} tokens={apiTokens} + tokenType={API_TOKEN_TYPE} /> )} {shouldDisplayNoContentWithCreationButton && ( diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/index.js index beb31d2f87..b672c1a11e 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/index.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/index.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useRef, useEffect } from 'react'; import { useIntl } from 'react-intl'; import { Formik } from 'formik'; import { useRouteMatch, useHistory } from 'react-router-dom'; @@ -9,6 +9,7 @@ import { Form, useOverlayBlocker, useNotification, + useTracking, useGuidedTour, useRBAC, useFetchClient, @@ -21,6 +22,7 @@ import adminPermissions from '../../../../../permissions'; import FormTransferTokenContainer from './components/FormTransferTokenContainer'; import TokenBox from '../../../components/Tokens/TokenBox'; import FormHead from '../../../components/Tokens/FormHead'; +import { TRANSFER_TOKEN_TYPE } from '../../../components/Tokens/constants'; const MSG_ERROR_NAME_TAKEN = 'Name already taken'; @@ -37,6 +39,8 @@ const TransferTokenCreateView = () => { } : null ); + const { trackUsage } = useTracking(); + const trackUsageRef = useRef(trackUsage); const { setCurrentStep } = useGuidedTour(); const { allowedActions: { canCreate, canUpdate, canRegenerate }, @@ -48,6 +52,12 @@ const TransferTokenCreateView = () => { const isCreating = id === 'create'; + useEffect(() => { + trackUsageRef.current(isCreating ? 'didAddTokenFromList' : 'didEditTokenFromList', { + tokenType: TRANSFER_TOKEN_TYPE, + }); + }, [isCreating]); + const { status } = useQuery( ['transfer-token', id], async () => { @@ -73,6 +83,9 @@ const TransferTokenCreateView = () => { ); const handleSubmit = async (body, actions) => { + trackUsageRef.current(isCreating ? 'willCreateToken' : 'willEditToken', { + tokenType: TRANSFER_TOKEN_TYPE, + }); lockApp(); const lifespanVal = body.lifespan && parseInt(body.lifespan, 10) && body.lifespan !== '0' @@ -117,6 +130,11 @@ const TransferTokenCreateView = () => { defaultMessage: 'Transfer Token successfully edited', }), }); + + trackUsageRef.current(isCreating ? 'didCreateToken' : 'didEditToken', { + type: transferToken?.type, + tokenType: TRANSFER_TOKEN_TYPE, + }); } catch (err) { const errors = formatAPIErrors(err.response.data); actions.setErrors(errors); @@ -177,7 +195,9 @@ const TransferTokenCreateView = () => { /> - {Boolean(transferToken?.name) && } + {Boolean(transferToken?.name) && ( + + )} { useFocusWhenNavigate(); @@ -31,6 +33,7 @@ const TransferTokenListView = () => { allowedActions: { canCreate, canDelete, canUpdate, canRead }, } = useRBAC(adminPermissions.settings['transfer-tokens']); const { push } = useHistory(); + const { trackUsage } = useTracking(); const { startSection } = useGuidedTour(); const startSectionRef = useRef(startSection); @@ -61,10 +64,15 @@ const TransferTokenListView = () => { } = useQuery( ['transfer-tokens'], async () => { + trackUsage('willAccessTokenList', { + tokenType: TRANSFER_TOKEN_TYPE, + }); const { data: { data }, } = await get(`/admin/transfer/tokens`); + trackUsage('didAccessTokenList', { number: data.length, tokenType: TRANSFER_TOKEN_TYPE }); + return data; }, { @@ -125,6 +133,11 @@ const TransferTokenListView = () => { data-testid="create-transfer-token-button" startIcon={} size="S" + onClick={() => + trackUsage('willAddTokenFromList', { + tokenType: TRANSFER_TOKEN_TYPE, + }) + } to="/settings/transfer-tokens/create" > {formatMessage({ @@ -146,6 +159,7 @@ const TransferTokenListView = () => { isLoading={isLoading} onConfirmDelete={(id) => deleteMutation.mutateAsync(id)} tokens={transferTokens} + tokenType={TRANSFER_TOKEN_TYPE} /> )} {shouldDisplayNoContentWithCreationButton && (