upcoming: [DPS-34191] - logs delivery pendo tags (linode#13022)

* upcoming: [DPS-34191] - logs delivery pendo tags

* Added changeset: Logs Delivery Stream/Destination Pendo tags

* Change Edit Destination/Stream button to Save button

* update e2e with Edit to Save change

Author: kagora-akamai

packages/manager/.changeset/pr-13022-upcoming-features-1761581678060.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Logs Delivery Stream/Destination Pendo tags ([#13022](https://github.com/linode/manager/pull/13022))

packages/manager/cypress/e2e/core/delivery/edit-destination.spec.ts

@@ -43,8 +43,8 @@ describe('Edit Destination', () => {
       mockDestinationPayload.details as AkamaiObjectStorageDetailsExtended
     );
 
-    // Create Destination should be disabled before test connection
-    cy.findByRole('button', { name: 'Edit Destination' }).should('be.disabled');
+    // Save button should be disabled before test connection
+    cy.findByRole('button', { name: 'Save' }).should('be.disabled');
     // Test connection of the destination form
     mockTestConnection(400);
     ui.button
@@ -57,8 +57,8 @@ describe('Edit Destination', () => {
       'Delivery connection test failed. Verify your delivery settings and try again.'
     );
 
-    // Create Destination should be disabled after test connection failed
-    cy.findByRole('button', { name: 'Edit Destination' }).should('be.disabled');
+    // Save button should be disabled after test connection failed
+    cy.findByRole('button', { name: 'Save' }).should('be.disabled');
   });
 
   it('edit destination with correct data', () => {
@@ -70,8 +70,8 @@ describe('Edit Destination', () => {
       mockDestinationPayload.details as AkamaiObjectStorageDetailsExtended
     );
 
-    // Create Destination should be disabled before test connection
-    cy.findByRole('button', { name: 'Edit Destination' }).should('be.disabled');
+    // Save button should be disabled before test connection
+    cy.findByRole('button', { name: 'Save' }).should('be.disabled');
     // Test connection of the destination form
     mockTestConnection();
     ui.button
@@ -88,7 +88,7 @@ describe('Edit Destination', () => {
     mockUpdateDestination(mockDestinationPayloadWithId, updatedDestination);
     mockGetDestinations([updatedDestination]);
     // Submit the destination edit form
-    cy.findByRole('button', { name: 'Edit Destination' })
+    cy.findByRole('button', { name: 'Save' })
       .should('be.enabled')
       .should('have.attr', 'type', 'button')
       .click();

packages/manager/src/components/ActionMenu/ActionMenu.tsx

@@ -11,6 +11,7 @@ export interface Action {
   hidden?: boolean;
   id?: string;
   onClick: () => void;
+  pendoId?: string;
   title: string;
   tooltip?: string;
 }
@@ -32,6 +33,10 @@ export interface ActionMenuProps {
    * A function that is called when the Menu is opened. Useful for analytics.
    */
   onOpen?: () => void;
+  /**
+   * Pendo ID to be added to ActionMenu IconButton via data-pendo-id attribute
+   */
+  pendoId?: string;
   /**
    * If true, stop event propagation when handling clicks
    * Ex: If the action menu is in an accordion, we don't want the click also opening/closing the accordion
@@ -45,8 +50,14 @@ export interface ActionMenuProps {
  * No more than 8 items should be displayed within an action menu.
  */
 export const ActionMenu = React.memo((props: ActionMenuProps) => {
-  const { actionsList, ariaLabel, loading, onOpen, stopClickPropagation } =
-    props;
+  const {
+    actionsList,
+    ariaLabel,
+    loading,
+    onOpen,
+    pendoId,
+    stopClickPropagation,
+  } = props;
 
   const filteredActionsList = actionsList.filter((action) => !action.hidden);
 
@@ -102,6 +113,7 @@ export const ActionMenu = React.memo((props: ActionMenuProps) => {
         aria-haspopup="true"
         aria-label={ariaLabel}
         color="inherit"
+        data-pendo-id={pendoId}
         id={buttonId}
         loading={loading}
         loadingIndicator={<CircleProgress noPadding size="xs" />}
@@ -159,6 +171,7 @@ export const ActionMenu = React.memo((props: ActionMenuProps) => {
         >
           {filteredActionsList.map((a, idx) => (
             <MenuItem
+              data-pendo-id={a.pendoId}
               data-qa-action-menu-item={a.title}
               data-testid={a.title}
               disabled={a.disabled}

packages/manager/src/components/EmptyLandingPageResources/ResourcesSection.tsx

@@ -25,6 +25,7 @@ import type {
 
 interface ButtonProps {
   children: string;
+  'data-pendo-id'?: string;
   disabled?: boolean;
   onClick: () => void;
   tooltipText?: string;

packages/manager/src/features/Delivery/Destinations/DeleteDestinationDialog.tsx

@@ -55,8 +55,13 @@ export const DeleteDestinationDialog = React.memo((props: Props) => {
         loading: isPending,
         disabled: false,
         onClick: handleDelete,
+        'data-pendo-id': 'Logs Delivery Destinations Delete-Delete',
+      }}
+      secondaryButtonProps={{
+        label: 'Cancel',
+        onClick: onClose,
+        'data-pendo-id': 'Logs Delivery Destinations Delete-Cancel',
       }}
-      secondaryButtonProps={{ label: 'Cancel', onClick: onClose }}
       style={{ padding: 0 }}
     />
   );

packages/manager/src/features/Delivery/Destinations/DestinationActionMenu.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { ActionMenu } from 'src/components/ActionMenu/ActionMenu';
 
 import type { Destination } from '@linode/api-v4';
+import type { Action } from 'src/components/ActionMenu/ActionMenu';
 
 export interface DestinationHandlers {
   onDelete: (destination: Destination) => void;
@@ -16,25 +17,28 @@ interface DestinationActionMenuProps extends DestinationHandlers {
 export const DestinationActionMenu = (props: DestinationActionMenuProps) => {
   const { destination, onDelete, onEdit } = props;
 
-  const menuActions = [
+  const menuActions: Action[] = [
     {
       onClick: () => {
         onEdit(destination);
       },
       title: 'Edit',
+      pendoId: 'Logs Delivery Destinations-Edit',
     },
     {
       onClick: () => {
         onDelete(destination);
       },
       title: 'Delete',
+      pendoId: 'Logs Delivery Destinations-Delete',
     },
   ];
 
   return (
     <ActionMenu
       actionsList={menuActions}
       ariaLabel={`Action menu for Destination ${destination.label}`}
+      pendoId="Logs Delivery Destinations-Action Menu"
     />
   );
 };

packages/manager/src/features/Delivery/Destinations/DestinationForm/DestinationEdit.test.tsx

@@ -60,7 +60,7 @@ describe('DestinationEdit', () => {
 
   describe('given Test Connection and Edit Destination buttons', () => {
     const testConnectionButtonText = 'Test Connection';
-    const editDestinationButtonText = 'Edit Destination';
+    const saveDestinationButtonText = 'Save';
     const editDestinationSpy = vi.fn();
     const verifyDestinationSpy = vi.fn();
 
@@ -89,23 +89,23 @@ describe('DestinationEdit', () => {
         const testConnectionButton = screen.getByRole('button', {
           name: testConnectionButtonText,
         });
-        const editDestinationButton = screen.getByRole('button', {
-          name: editDestinationButtonText,
+        const saveDestinationButton = screen.getByRole('button', {
+          name: saveDestinationButtonText,
         });
 
         // Enter Secret Access Key
         const secretAccessKeyInput = screen.getByLabelText('Secret Access Key');
         await userEvent.type(secretAccessKeyInput, 'Test');
 
-        expect(editDestinationButton).toBeDisabled();
+        expect(saveDestinationButton).toBeDisabled();
         await userEvent.click(testConnectionButton);
         expect(verifyDestinationSpy).toHaveBeenCalled();
 
         await waitFor(() => {
-          expect(editDestinationButton).toBeEnabled();
+          expect(saveDestinationButton).toBeEnabled();
         });
 
-        await userEvent.click(editDestinationButton);
+        await userEvent.click(saveDestinationButton);
         expect(editDestinationSpy).toHaveBeenCalled();
       });
     });
@@ -131,20 +131,20 @@ describe('DestinationEdit', () => {
         const testConnectionButton = screen.getByRole('button', {
           name: testConnectionButtonText,
         });
-        const editDestinationButton = screen.getByRole('button', {
-          name: editDestinationButtonText,
+        const saveDestinationButton = screen.getByRole('button', {
+          name: saveDestinationButtonText,
         });
 
         // Enter Secret Access Key
         const secretAccessKeyInput = screen.getByLabelText('Secret Access Key');
         await userEvent.type(secretAccessKeyInput, 'Test');
 
-        expect(editDestinationButton).toBeDisabled();
+        expect(saveDestinationButton).toBeDisabled();
         await userEvent.click(testConnectionButton);
         expect(verifyDestinationSpy).toHaveBeenCalled();
 
         await waitFor(() => {
-          expect(editDestinationButton).toBeDisabled();
+          expect(saveDestinationButton).toBeDisabled();
         });
       });
     });

packages/manager/src/features/Delivery/Destinations/DestinationForm/DestinationForm.tsx

@@ -1,5 +1,6 @@
 import { destinationType } from '@linode/api-v4';
 import { Autocomplete, Paper, TextField } from '@linode/ui';
+import { capitalize } from '@linode/utilities';
 import Grid from '@mui/material/Grid';
 import * as React from 'react';
 import { useEffect } from 'react';
@@ -53,6 +54,7 @@ export const DestinationForm = (props: DestinationFormProps) => {
               name="type"
               render={({ field }) => (
                 <Autocomplete
+                  data-pendo-id={`Logs Delivery Destinations ${capitalize(mode)}-Destination Type`}
                   disableClearable
                   disabled
                   label="Destination Type"
@@ -71,6 +73,7 @@ export const DestinationForm = (props: DestinationFormProps) => {
               render={({ field, fieldState }) => (
                 <TextField
                   aria-required
+                  data-pendo-id={`Logs Delivery Destinations ${capitalize(mode)}-Destination Name`}
                   errorText={fieldState.error?.message}
                   label="Destination Name"
                   onBlur={field.onBlur}
@@ -83,7 +86,10 @@ export const DestinationForm = (props: DestinationFormProps) => {
               )}
             />
             {destination.type === destinationType.AkamaiObjectStorage && (
-              <DestinationAkamaiObjectStorageDetailsForm />
+              <DestinationAkamaiObjectStorageDetailsForm
+                entity="destination"
+                mode={mode}
+              />
             )}
           </Paper>
         </Grid>

packages/manager/src/features/Delivery/Destinations/DestinationTableRow.tsx

@@ -23,7 +23,10 @@ export const DestinationTableRow = React.memo(
     return (
       <TableRow key={id}>
         <TableCell>
-          <Link to={`/logs/delivery/destinations/${id}/edit`}>
+          <Link
+            pendoId="Logs Delivery Destinations-Name"
+            to={`/logs/delivery/destinations/${id}/edit`}
+          >
             {destination.label}
           </Link>
         </TableCell>

packages/manager/src/features/Delivery/Destinations/DestinationsLandingEmptyState.tsx

@@ -34,6 +34,8 @@ export const DestinationsLandingEmptyState = (
               });
               navigateToCreate();
             },
+            'data-pendo-id':
+              'Logs Delivery Destinations Empty-Create Destination',
           },
         ]}
         gettingStartedGuidesData={gettingStartedGuides}