From bfed2ecf428cc5fa6bea7fb9e10ad7bd07d2724e Mon Sep 17 00:00:00 2001 From: Dajahi Wiley Date: Fri, 27 Mar 2026 19:24:52 -0400 Subject: [PATCH 1/3] Pendo constants and tagging for search bars and docs links across the Images sub-tabs --- .../DebouncedSearchTextField.tsx | 6 ++++++ packages/manager/src/components/DocsLink/DocsLink.tsx | 7 +++++-- .../Images/ImagesLanding/v2/ImageLibrary/ImagesTable.tsx | 3 +-- .../Images/ImagesLanding/v2/ImageLibrary/ImagesView.tsx | 1 + .../v2/ImageLibrary/imageLibraryTabsConfig.tsx | 7 +++++++ .../ImagesLanding/v2/ShareGroups/ShareGroupsTable.tsx | 4 ++-- .../ImagesLanding/v2/ShareGroups/ShareGroupsView.tsx | 1 + .../v2/ShareGroups/shareGroupsTabsConfig.tsx | 2 +- packages/manager/src/features/Images/constants.ts | 9 +++++++++ 9 files changed, 33 insertions(+), 7 deletions(-) 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 4446ede6ae1..068b6d21caa 100644 --- a/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsTable.tsx +++ b/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsTable.tsx @@ -107,9 +107,9 @@ export const ShareGroupsTable = (props: ShareGroupsTableProps) => { > {headerProps.docsLink && ( )} {headerProps.buttonProps && ( @@ -183,7 +183,7 @@ export const ShareGroupsTable = (props: ShareGroupsTableProps) => { style={{ display: 'flex', justifyContent: 'center', - padding: 0 + padding: 0, }} > { 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 06ffb28f733..a933eb9b9f4 100644 --- a/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/shareGroupsTabsConfig.tsx +++ b/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/shareGroupsTabsConfig.tsx @@ -124,7 +124,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: 'Images Groups Owned-Docs', }, columns: OWNED_GROUPS_TABLE_COLUMNS, emptyMessage: { diff --git a/packages/manager/src/features/Images/constants.ts b/packages/manager/src/features/Images/constants.ts index 65d454cdf45..5fd9bc09247 100644 --- a/packages/manager/src/features/Images/constants.ts +++ b/packages/manager/src/features/Images/constants.ts @@ -18,6 +18,10 @@ 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."; +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 +36,8 @@ 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', +}; From 3c83092a84139238218b7b2ad74fb6bb64d6f15f Mon Sep 17 00:00:00 2001 From: Dajahi Wiley Date: Fri, 27 Mar 2026 19:58:54 -0400 Subject: [PATCH 2/3] Added changeset: Private Image Sharing: properly tag Images search bar and docs links for Pendo --- .../.changeset/pr-13543-upcoming-features-1774655934420.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-13543-upcoming-features-1774655934420.md 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)) From 73b2ea423fabe01ec62bf52115bb4fb4b8e3f4cd Mon Sep 17 00:00:00 2001 From: Dajahi Wiley Date: Tue, 31 Mar 2026 16:37:12 -0400 Subject: [PATCH 3/3] Feedback: move Share Group pendo IDs to Images/constants.ts; update pendo ID for Image sharing docs link --- .../v2/ShareGroups/shareGroupsTabsConfig.tsx | 8 +++++--- packages/manager/src/features/Images/constants.ts | 7 +++++++ 2 files changed, 12 insertions(+), 3 deletions(-) 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 91dcb74dde7..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', + 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 5fd9bc09247..0da44e031d0 100644 --- a/packages/manager/src/features/Images/constants.ts +++ b/packages/manager/src/features/Images/constants.ts @@ -18,6 +18,7 @@ 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', }; @@ -41,3 +42,9 @@ 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', +};