upcoming: [UIE-9670] - Add Pendo IDs for Marketplace Filter Options and Product Cards (#13393)

* Add missing pendo ids

* Added changeset: Add Pendo IDs for Marketplace filter options and product cards

* Some refactoring...

* fix pendo id for contact sales drawer's show details button

---------

Co-authored-by: tvijay-akamai <51293194+tvijay-akamai@users.noreply.github.com>
Co-authored-by: Harsh Shankar Rao <hrao@akamai.com>

Author: 3 people

packages/manager/.changeset/pr-13393-upcoming-features-1770901863593.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add Pendo IDs for Marketplace filter options and product cards ([#13393](https://github.com/linode/manager/pull/13393))

packages/manager/src/components/SelectionCard/SelectionCard.tsx

@@ -20,6 +20,10 @@ export interface SelectionCardProps {
    * Additional CSS classes to apply to the root element.
    */
   className?: string;
+  /**
+   * An optional data-pendo-id for analytics tracking
+   */
+  'data-pendo-id'?: string;
   /**
    * An optional custom data-testid
    * @default selection-card
@@ -172,6 +176,7 @@ export const SelectionCard = React.memo((props: SelectionCardProps) => {
   const cardGrid = (
     <StyledGrid
       className={className}
+      data-pendo-id={props['data-pendo-id']}
       data-qa-selection-card
       data-qa-selection-card-checked={checked}
       data-testid={props['data-testid'] ?? 'selection-card'}

packages/manager/src/features/Marketplace/MarketplaceLanding/MarketplaceLanding.tsx

@@ -4,6 +4,7 @@ import {
   Box,
   ErrorState,
   LinkButton,
+  SelectedIcon,
   Stack,
   Typography,
 } from '@linode/ui';
@@ -21,6 +22,7 @@ import { CategorySection } from './CategorySection';
 import { filterProducts } from './utils';
 
 import type { Category, Product, Type } from '../shared';
+import type { AutocompleteRenderOptionState } from '@mui/material';
 
 export const MarketplaceLanding = () => {
   const navigate = useNavigate();
@@ -88,6 +90,34 @@ export const MarketplaceLanding = () => {
     updateSearchParam('query', searchString || undefined);
   };
 
+  const renderAutocompleteOption = React.useCallback(
+    (prefix: string) =>
+      (
+        props: React.HTMLAttributes<HTMLLIElement> & { key: string },
+        option: { label: string },
+        state: AutocompleteRenderOptionState
+      ) => {
+        const { key, ...rest } = props;
+        return (
+          <li
+            {...rest}
+            data-pendo-id={`Cloud Marketplace Catalog-${option.label}`}
+            key={`${prefix}-${key}`}
+          >
+            <Box
+              sx={{
+                flexGrow: 1,
+              }}
+            >
+              {option.label}
+            </Box>
+            <SelectedIcon visible={state.selected} />
+          </li>
+        );
+      },
+    []
+  );
+
   // Filter products here based on category, search and type filters. If no filters are set, shows all available products.
   const filteredProducts = React.useMemo(
     () =>
@@ -208,6 +238,7 @@ export const MarketplaceLanding = () => {
             }
             options={categoryOptions}
             placeholder="Category"
+            renderOption={renderAutocompleteOption('category')}
             textFieldProps={{
               hideLabel: true,
             }}
@@ -225,6 +256,7 @@ export const MarketplaceLanding = () => {
             }
             options={typeOptions}
             placeholder="Type"
+            renderOption={renderAutocompleteOption('type')}
             textFieldProps={{
               hideLabel: true,
             }}

packages/manager/src/features/Marketplace/MarketplaceLanding/ProductSelectionCard.tsx

@@ -157,6 +157,7 @@ export const ProductSelectionCard = React.memo(
 
     return (
       <SelectionCard
+        data-pendo-id={`Cloud Marketplace-${productName}`}
         disabled={disabled}
         gridSize={PRODUCT_CARD_GRID_SIZE}
         heading={productName}

packages/manager/src/features/Marketplace/ProductDetails/ContactSalesDrawer.tsx

@@ -598,7 +598,7 @@ export const ContactSalesDrawer = (props: ContactSalesDrawerProps) => {
                     </Typography>
                   )}
                   <LinkButton
-                    data-pendo-id={`Cloud Marketplace Contact Sales-${showConsentDetails ? 'Show Details' : 'Hide Details'}`}
+                    data-pendo-id={`Cloud Marketplace Contact Sales-${showConsentDetails ? 'Hide Details' : 'Show Details'}`}
                     onClick={() => setShowConsentDetails(!showConsentDetails)}
                     sx={(theme) => ({
                       '&:hover': {