upcoming: [M3-10674] - Add pendo ids for VM analytics

packages/manager/.changeset/pr-12983-upcoming-features-1760371939234.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add pendo ids for VM Host Maintenance analytics ([#12983](https://github.com/linode/manager/pull/12983))

packages/manager/src/components/Link.tsx

@@ -53,6 +53,10 @@ export interface LinkProps extends Omit<_LinkProps, 'to'> {
    * Optional prop to pass a onClick handler to the link.
    */
   onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+  /**
+   * Optional prop to pass a pendo id to the link.
+   */
+  pendoId?: string;
   /**
    * Optional prop to pass a sx style to the link.
    */
@@ -99,6 +103,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
       forceCopyColor,
       hideIcon,
       onClick,
+      pendoId,
       style,
       title,
       to,
@@ -131,6 +136,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
       'external',
       'forceCopyColor',
       'to',
+      'pendoId',
     ]);
 
     return shouldOpenInNewTab ? (
@@ -143,6 +149,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
           },
           className
         )}
+        data-pendo-id={pendoId}
         data-testid={external ? 'external-site-link' : 'external-link'}
         href={processedUrl()}
         onClick={onClick}
@@ -166,6 +173,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
     ) : (
       <RouterLink
         aria-label={ariaLabel}
+        data-pendo-id={pendoId}
         data-testid="internal-link"
         {...routerLinkProps}
         className={cx(

packages/manager/src/components/MaintenanceBanner/LinodeMaintenanceBanner.tsx

@@ -62,7 +62,13 @@ export const LinodeMaintenanceBanner = ({ linodeId }: Props) => {
           )}
         </strong>
         . For more details, view{' '}
-        <Link to="/account/maintenance">Account Maintenance</Link>.
+        <Link
+          pendoId="linode-maintenance-banner-link"
+          to="/account/maintenance"
+        >
+          Account Maintenance
+        </Link>
+        .
       </Typography>
     </Notice>
   );

packages/manager/src/components/MaintenanceBanner/MaintenanceBannerV2.tsx

@@ -47,7 +47,10 @@ export const MaintenanceBannerV2 = () => {
             <span data-testid="maintenance-link-section">
               {' '}
               For more details, view{' '}
-              <Link to="/maintenance">Account Maintenance</Link>.
+              <Link pendoId="maintenance-banner-link" to="/maintenance">
+                Account Maintenance
+              </Link>
+              .
             </span>
           )}
         </Typography>

packages/manager/src/components/MaintenancePolicySelect/MaintenancePolicySelect.tsx

@@ -60,6 +60,7 @@ export const MaintenancePolicySelect = (
 
   return (
     <Autocomplete
+      data-pendo-id="maintenance-policy-select"
       disableClearable={!!selectedOption}
       disabled={disabled}
       errorText={errorText}
@@ -75,7 +76,7 @@ export const MaintenancePolicySelect = (
       renderOption={(props, policy, state) => {
         const { key } = props;
         return (
-          <li {...props} key={key}>
+          <li {...props} data-pendo-id={policy.slug} key={key}>
             <Stack gap={0.5} width="100%">
               <Stack
                 alignItems="center"

packages/manager/src/components/PlatformMaintenanceBanner/PlatformMaintenanceBanner.tsx

@@ -37,7 +37,10 @@ export const PlatformMaintenanceBanner = () => {
           <span data-testid="platform-maintenance-link-section">
             {' '}
             See which Linodes are <strong>scheduled</strong> for reboot on the{' '}
-            <Link to="/maintenance">Account Maintenance</Link> page.
+            <Link pendoId="platform-maintenance-banner-link" to="/maintenance">
+              Account Maintenance
+            </Link>{' '}
+            page.
           </span>
         )}
       </Typography>

packages/manager/src/features/Account/MaintenancePolicy.tsx

@@ -105,6 +105,7 @@ export const MaintenancePolicy = () => {
           <Box marginTop={2}>
             <Button
               buttonType="outlined"
+              data-pendo-id="maintenance-policy-save-button"
               disabled={!isDirty || !permissions.update_account_settings}
               loading={isSubmitting}
               type="submit"

packages/manager/src/features/Linodes/LinodeCreate/AdditionalOptions/MaintenancePolicy.tsx

@@ -52,7 +52,13 @@ export const MaintenancePolicy = () => {
       subHeading={
         <>
           {MAINTENANCE_POLICY_DESCRIPTION}{' '}
-          <Link to={MAINTENANCE_POLICY_LEARN_MORE_URL}>Learn more</Link>.
+          <Link
+            data-pendo-id="linode-create-maintenance-policy-learn-more"
+            to={MAINTENANCE_POLICY_LEARN_MORE_URL}
+          >
+            Learn more
+          </Link>
+          .
         </>
       }
       summaryProps={{ sx: { p: 0 } }}

packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsMaintenancePolicyPanel.tsx

@@ -100,7 +100,13 @@ export const LinodeSettingsMaintenancePolicyPanel = (props: Props) => {
         <Stack spacing={2}>
           <Typography>
             {MAINTENANCE_POLICY_DESCRIPTION}{' '}
-            <Link to={MAINTENANCE_POLICY_LEARN_MORE_URL}>Learn more</Link>.
+            <Link
+              data-pendo-id="linode-detail-maintenance-policy-learn-more"
+              to={MAINTENANCE_POLICY_LEARN_MORE_URL}
+            >
+              Learn more
+            </Link>
+            .
           </Typography>
           {showUpcomingMaintenanceNotice && (
             <Notice variant="warning">
@@ -133,6 +139,7 @@ export const LinodeSettingsMaintenancePolicyPanel = (props: Props) => {
           <Box>
             <Button
               buttonType="outlined"
+              data-pendo-id="linode-maintenance-policy-save-button"
               disabled={!isDirty || isDisabled}
               loading={isSubmitting}
               type="submit"