diff --git a/packages/manager/.changeset/pr-13543-upcoming-features-1774655934420.md b/packages/manager/.changeset/pr-13543-upcoming-features-1774655934420.md new file mode 100644 index 00000000000..21d237ece62 --- /dev/null +++ b/packages/manager/.changeset/pr-13543-upcoming-features-1774655934420.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Upcoming Features +--- + +Private Image Sharing: properly tag Images search bar and docs links for Pendo ([#13543](https://github.com/linode/manager/pull/13543)) diff --git a/packages/manager/src/components/DebouncedSearchTextField/DebouncedSearchTextField.tsx b/packages/manager/src/components/DebouncedSearchTextField/DebouncedSearchTextField.tsx index 12e4badf4b7..bf93969f00f 100644 --- a/packages/manager/src/components/DebouncedSearchTextField/DebouncedSearchTextField.tsx +++ b/packages/manager/src/components/DebouncedSearchTextField/DebouncedSearchTextField.tsx @@ -46,6 +46,10 @@ export interface DebouncedSearchProps extends TextFieldProps { * Function to perform when searching for query */ onSearch: (query: string) => void; + /** + * Value for data-pendo-id attribute for search input, used for analytics tracking. + */ + pendoId?: string; /** * Placeholder text for the input. */ @@ -68,6 +72,7 @@ export const DebouncedSearchTextField = React.memo( isSearching, label, onSearch, + pendoId, placeholder, value, ...restOfTextFieldProps @@ -111,6 +116,7 @@ export const DebouncedSearchTextField = React.memo( return ( void; + /** The Pendo ID to use for tracking purposes */ + pendoId?: string; } /** @@ -28,7 +30,7 @@ export interface DocsLinkProps { * - Consider displaying the title of a key guide or product document as the link instead of the generic “Docs”. */ export const DocsLink = (props: DocsLinkProps) => { - const { analyticsLabel, href, label, onClick, icon } = props; + const { analyticsLabel, href, label, onClick, icon, pendoId } = props; return ( { onClick(); } }} + pendoId={pendoId} to={href} > {icon ?? } diff --git a/packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/ImagesTable.tsx b/packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/ImagesTable.tsx index 7c8ddf1f73c..c1854fd475c 100644 --- a/packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/ImagesTable.tsx +++ b/packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/ImagesTable.tsx @@ -115,10 +115,9 @@ export const ImagesTable = (props: ImagesTableProps) => { > {headerProps.docsLink && ( )} {headerProps.buttonProps && ( diff --git a/packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/ImagesView.tsx b/packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/ImagesView.tsx index 95d901865c0..4a47f0a5b0f 100644 --- a/packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/ImagesView.tsx +++ b/packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/ImagesView.tsx @@ -176,6 +176,7 @@ export const ImagesView = (props: Props) => { isSearching={imagesIsFetching} label="Search" onSearch={onSearch} + pendoId={config.searchBarPendoId} placeholder="Search Images" value={search.query ?? ''} /> diff --git a/packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/imageLibraryTabsConfig.tsx b/packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/imageLibraryTabsConfig.tsx index 30c7a126cdd..fde3f0c338c 100644 --- a/packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/imageLibraryTabsConfig.tsx +++ b/packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/imageLibraryTabsConfig.tsx @@ -9,6 +9,8 @@ import { MANUAL_IMAGES_DEFAULT_ORDER, MANUAL_IMAGES_DEFAULT_ORDER_BY, MANUAL_IMAGES_PREFERENCE_KEY, + OWNED_BY_ME_IMAGES_TAB_PENDO_IDS, + RECOVERY_IMAGES_TAB_PENDO_IDS, SHARED_IMAGES_DEFAULT_ORDER, SHARED_IMAGES_DEFAULT_ORDER_BY, SHARED_IMAGES_PREFERENCE_KEY, @@ -54,6 +56,7 @@ export interface ImageConfig { orderByDefault: string; orderDefault: 'asc' | 'desc'; preferenceKey: string; + searchBarPendoId: string; title: string; type: Image['type']; } @@ -160,6 +163,7 @@ export const IMAGES_CONFIG: Record = { instruction: 'Click \u2018Create Image\u2019 to create your first custom image', }, + searchBarPendoId: OWNED_BY_ME_IMAGES_TAB_PENDO_IDS.searchImagesBar, }, 'recovery-images': { title: 'Recovery images', @@ -179,7 +183,9 @@ export const IMAGES_CONFIG: Record = { emptyMessage: { main: 'No recovery images to display', }, + searchBarPendoId: RECOVERY_IMAGES_TAB_PENDO_IDS.searchImagesBar, docsLink: { + dataPendoId: RECOVERY_IMAGES_TAB_PENDO_IDS.recoverDeletedLinodeDocsLink, label: 'Recover a deleted Linode', href: 'https://techdocs.akamai.com/cloud-computing/docs/images#recover-a-deleted', }, @@ -225,5 +231,6 @@ export const IMAGES_CONFIG: Record = { href: 'https://techdocs.akamai.com/cloud-computing/docs/image-sharing', dataPendoId: SHARED_WITH_ME_IMAGES_TAB_PENDO_IDS.imageSharingDocsLink, }, + searchBarPendoId: SHARED_WITH_ME_IMAGES_TAB_PENDO_IDS.searchImagesBar, }, }; diff --git a/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsTable.tsx b/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsTable.tsx index 8aaf6da3bb4..4c24d5aceaf 100644 --- a/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsTable.tsx +++ b/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsTable.tsx @@ -106,9 +106,9 @@ export const ShareGroupsTable = (props: ShareGroupsTableProps) => { > {headerProps.docsLink && ( )} {headerProps.buttonProps && ( diff --git a/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsView.tsx b/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsView.tsx index b108f6603a1..39899f48391 100644 --- a/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsView.tsx +++ b/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsView.tsx @@ -147,6 +147,7 @@ export const ShareGroupsView = (props: Props) => { isSearching={shareGroupsIsFetching} label="Search" onSearch={onSearch} + pendoId={config.searchFieldPendoId} placeholder="Search share groups" value={search.query ?? ''} /> diff --git a/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/shareGroupsTabsConfig.tsx b/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/shareGroupsTabsConfig.tsx index b8a1b5f391b..1177f475e91 100644 --- a/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/shareGroupsTabsConfig.tsx +++ b/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/shareGroupsTabsConfig.tsx @@ -1,5 +1,7 @@ import React from 'react'; +import { SHARE_GROUPS_OWNED_TAB_PENDO_IDS } from 'src/features/Images/constants'; + import type { APIError } from '@linode/api-v4'; import type { HiddenProps } from '@linode/ui'; import type { ImageSubTab, ShareGroupsType } from 'src/features/Images/utils'; @@ -123,7 +125,7 @@ export const SHAREGROUPS_CONFIG: Record< docsLink: { href: `https://techdocs.akamai.com/cloud-computing/docs/image-sharing`, label: 'Image sharing', - pendoId: 'Images Groups Owned-Docs Link', + pendoId: SHARE_GROUPS_OWNED_TAB_PENDO_IDS.imageSharingDocsLink, }, columns: OWNED_GROUPS_TABLE_COLUMNS, emptyMessage: { @@ -138,9 +140,9 @@ export const SHAREGROUPS_CONFIG: Record< buttonText: 'Create Share Group', navigateTo: '/images/share-groups/create', disabledToolTipText: 'You do not have permissions to create share groups', - pendoId: 'Images Groups Owned-Create Button', + pendoId: SHARE_GROUPS_OWNED_TAB_PENDO_IDS.createButton, }, - searchFieldPendoId: 'Images Groups Owned-Search', + searchFieldPendoId: SHARE_GROUPS_OWNED_TAB_PENDO_IDS.searchShareGroupsBar, }, 'joined-groups': { title: 'Joined groups', diff --git a/packages/manager/src/features/Images/constants.ts b/packages/manager/src/features/Images/constants.ts index 65d454cdf45..0da44e031d0 100644 --- a/packages/manager/src/features/Images/constants.ts +++ b/packages/manager/src/features/Images/constants.ts @@ -18,6 +18,11 @@ export const SHARED_IMAGES_DEFAULT_ORDER_BY = 'label'; export const SHARE_GROUP_COLUMN_HEADER_TOOLTIP = "Displays the share group for images shared with you; your custom images don't display a group name."; +// Pendo IDs for the Images Landing sub-tabs +export const OWNED_BY_ME_IMAGES_TAB_PENDO_IDS = { + searchImagesBar: 'Images Library Owned-Search', +}; + export const SHARED_WITH_ME_IMAGES_TAB_PENDO_IDS = { searchImagesBar: 'Images Library Shared-Search', imageSharingDocsLink: 'Images Library Shared-Docs', @@ -32,3 +37,14 @@ export const SHARED_WITH_ME_IMAGES_TAB_PENDO_IDS = { rebuildLinode: 'Images Library Shared-Rebuild an Existing Linode', }, }; + +export const RECOVERY_IMAGES_TAB_PENDO_IDS = { + searchImagesBar: 'Images Library Recovery-Search', + recoverDeletedLinodeDocsLink: 'Images Library Recovery-Docs', +}; + +export const SHARE_GROUPS_OWNED_TAB_PENDO_IDS = { + createButton: 'Images Groups Owned-Create Button', + imageSharingDocsLink: 'Images Groups Owned-Image sharing docs', + searchShareGroupsBar: 'Images Groups Owned-Search', +};