upcoming: [UIE-10546] — Pendo support for DebouncedSearchTextField and DocsLink components

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))

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 (
       <TextField
         className={className}
+        data-pendo-id={pendoId}
         data-qa-debounced-search
         defaultValue={defaultValue}
         hideLabel={hideLabel}

packages/manager/src/components/DocsLink/DocsLink.tsx

@@ -7,7 +7,7 @@ import { Link } from 'src/components/Link';
 import { sendHelpButtonClickEvent } from 'src/utilities/analytics/customEventAnalytics';
 
 export interface DocsLinkProps {
-  /** The label to use for analytics purposes */
+  /** DEPRECATED: The label to use for Adobe Analytics purposes */
   analyticsLabel?: string;
   /** The URL to link to */
   href: string;
@@ -20,6 +20,8 @@ export interface DocsLinkProps {
   label?: string;
   /** A callback function when the link is clicked */
   onClick?: () => 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 (
     <StyledDocsLink
@@ -40,6 +42,7 @@ export const DocsLink = (props: DocsLinkProps) => {
           onClick();
         }
       }}
+      pendoId={pendoId}
       to={href}
     >
       {icon ?? <DocsIcon />}

packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/ImagesTable.tsx

@@ -115,10 +115,9 @@ export const ImagesTable = (props: ImagesTableProps) => {
             >
               {headerProps.docsLink && (
                 <DocsLink
-                  analyticsLabel={headerProps.title}
-                  data-pendo-id={headerProps.docsLink.dataPendoId}
                   href={headerProps.docsLink.href}
                   label={headerProps.docsLink.label}
+                  pendoId={headerProps.docsLink.dataPendoId}
                 />
               )}
               {headerProps.buttonProps && (

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 ?? ''}
       />

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<ImageLibraryType, ImageConfig> = {
       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<ImageLibraryType, ImageConfig> = {
     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<ImageLibraryType, ImageConfig> = {
       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,
   },
 };

packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsTable.tsx

@@ -106,9 +106,9 @@ export const ShareGroupsTable = (props: ShareGroupsTableProps) => {
             >
               {headerProps.docsLink && (
                 <DocsLink
-                  analyticsLabel={headerProps.title}
                   href={headerProps.docsLink.href}
                   label={headerProps.docsLink.label}
+                  pendoId={headerProps.docsLink.pendoId}
                 />
               )}
               {headerProps.buttonProps && (

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 ?? ''}
       />

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',

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',
+};