feat: [UIE-10505] IAM Parent/Child - pendo tags

packages/manager/.changeset/pr-13530-added-1774372673714.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+IAM: Add Pendo IDs for Parent/Child ([#13530](https://github.com/linode/manager/pull/13530))

packages/manager/src/features/IAM/Delegations/AccountDelegationsTableRow.tsx

@@ -6,6 +6,7 @@ import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow/TableRow';
 
 import { usePermissions } from '../hooks/usePermissions';
+import { IAM_PARENT_USERS_PENDO_IDS } from '../Shared/constants';
 import { TruncatedList } from '../Shared/TruncatedList';
 import { UpdateDelegationsDrawer } from './UpdateDelegationsDrawer';
 
@@ -126,6 +127,7 @@ export const AccountDelegationsTableRow = ({ delegation, index }: Props) => {
         <InlineMenuAction
           actionText="Update Delegation"
           buttonHeight={40}
+          data-pendo-id={IAM_PARENT_USERS_PENDO_IDS.updateDelegation}
           disabled={!permissions.update_delegate_users}
           onClick={handleUpdateDelegations}
           tooltip={

packages/manager/src/features/IAM/Delegations/UpdateDelegationForm.tsx

@@ -20,6 +20,7 @@ import * as React from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 
 import { usePermissions } from '../hooks/usePermissions';
+import { IAM_PARENT_USERS_PENDO_IDS } from '../Shared/constants';
 import { INTERNAL_ERROR_NO_CHANGES_SAVED } from '../Shared/constants';
 import { getPlaceholder } from '../Shared/Entities/utils';
 
@@ -296,6 +297,7 @@ export const UpdateDelegationForm = ({
             primaryButtonProps={{
               'data-testid': 'submit',
               label: 'Save Changes',
+              'data-pendo-id': IAM_PARENT_USERS_PENDO_IDS.updateDelegationSave,
               loading: isSubmitting,
               type: 'submit',
               disabled: !permissions?.update_delegate_users,

packages/manager/src/features/IAM/Roles/Defaults/DefaultRolesPanel.tsx

@@ -2,6 +2,8 @@ import { Box, Button, Paper, Typography } from '@linode/ui';
 import { useNavigate } from '@tanstack/react-router';
 import * as React from 'react';
 
+import { IAM_ROLES_PENDO_IDS } from '../../Shared/constants';
+
 export const DefaultRolesPanel = () => {
   const navigate = useNavigate();
 
@@ -23,6 +25,7 @@ export const DefaultRolesPanel = () => {
         <Box>
           <Button
             buttonType="outlined"
+            data-pendo-id={IAM_ROLES_PENDO_IDS.viewDefaultRoles}
             onClick={() => navigate({ to: '/iam/roles/defaults/roles' })}
           >
             View Default Roles

packages/manager/src/features/IAM/Roles/RolesTable/AssignSelectedRolesDrawer.tsx

@@ -23,8 +23,12 @@ import { Link } from 'src/components/Link';
 import { StyledLinkButtonBox } from 'src/components/SelectFirewallPanel/SelectFirewallPanel';
 import { AssignSingleSelectedRole } from 'src/features/IAM/Roles/RolesTable/AssignSingleSelectedRole';
 
+import { useDelegationRole } from '../../hooks/useDelegationRole';
 import { usePermissions } from '../../hooks/usePermissions';
-import { INTERNAL_ERROR_NO_CHANGES_SAVED } from '../../Shared/constants';
+import {
+  IAM_ROLES_PENDO_IDS,
+  INTERNAL_ERROR_NO_CHANGES_SAVED,
+} from '../../Shared/constants';
 import { DelegateUserChip } from '../../Shared/DelegateUserChip';
 import { mergeAssignedRolesIntoExistingRoles } from '../../Shared/utilities';
 
@@ -47,6 +51,8 @@ export const AssignSelectedRolesDrawer = ({
 }: Props) => {
   const theme = useTheme();
 
+  const { isParentUserType } = useDelegationRole();
+
   const values = {
     roles: selectedRoles.map((r) => ({
       role: {
@@ -213,7 +219,15 @@ export const AssignSelectedRolesDrawer = ({
                   options={getUserOptions() || []}
                   placeholder="Select a User"
                   renderOption={(props, option) => (
-                    <li {...props} key={option.value}>
+                    <li
+                      {...props}
+                      data-pendo-id={
+                        option.userType === 'delegate'
+                          ? IAM_ROLES_PENDO_IDS.assignSelectedRoleToUserDelegate
+                          : IAM_ROLES_PENDO_IDS.assignSelectedRoleToChildUser
+                      }
+                      key={option.value}
+                    >
                       <Stack alignItems="center" direction="row" spacing={1}>
                         <Typography>{option.label}</Typography>
                         {option.userType === 'delegate' && <DelegateUserChip />}
@@ -223,6 +237,10 @@ export const AssignSelectedRolesDrawer = ({
                   slotProps={{
                     listbox: {
                       onScroll: handleScroll,
+                      // @ts-expect-error - MUI doesn't have a built in way to add data attributes to the options in Autocomplete, so we need to add it to the listboxProps and then check for it in the onChange handler
+                      'data-pendo-id': isParentUserType
+                        ? IAM_ROLES_PENDO_IDS.assignSelectedRoleToUserParent
+                        : IAM_ROLES_PENDO_IDS.assignSelectedRoleToUserDelegate,
                     },
                   }}
                   textFieldProps={{
@@ -278,6 +296,8 @@ export const AssignSelectedRolesDrawer = ({
             primaryButtonProps={{
               'data-testid': 'submit',
               label: 'Assign',
+              'data-pendo-id':
+                IAM_ROLES_PENDO_IDS.assignSelectedRoleToUserAssign,
               type: 'submit',
               loading: isPending || formState.isSubmitting,
             }}

packages/manager/src/features/IAM/Roles/RolesTable/RolesTable.tsx

@@ -29,6 +29,7 @@ import {
 import { usePaginationV2 } from 'src/hooks/usePaginationV2';
 
 import { usePermissions } from '../../hooks/usePermissions';
+import { IAM_ROLES_PENDO_IDS } from '../../Shared/constants';
 import {
   ROLES_LEARN_MORE_LINK,
   ROLES_TABLE_PREFERENCE_KEY,
@@ -213,6 +214,7 @@ export const RolesTable = ({ roles = [] }: Props) => {
           </Grid>
           <Button
             buttonType="primary"
+            data-pendo-id={IAM_ROLES_PENDO_IDS.assignSelectedRoles}
             disabled={selectedRows.length === 0 || !isAccountAdmin}
             onClick={() => handleAssignSelectedRoles()}
             sx={{ height: 34 }}
@@ -298,6 +300,10 @@ export const RolesTable = ({ roles = [] }: Props) => {
                   selected={selectedRows.includes(roleRow)}
                 >
                   <TableCell
+                    // data-pendo-id={IAM_ROLES_PENDO_IDS.rolesChecked}
+                    {...(selectedRows.includes(roleRow) && {
+                      'data-pendo-id': IAM_ROLES_PENDO_IDS.rolesChecked,
+                    })}
                     disabled={!isAccountAdmin}
                     style={{
                       wordBreak: 'break-word',

packages/manager/src/features/IAM/Roles/RolesTable/RolesTableActionMenu.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
 
+import { IAM_ROLES_PENDO_IDS } from '../../Shared/constants';
+
 interface Props {
   canUpdateUserGrants: boolean;
   onClick?: () => void;
@@ -16,6 +18,7 @@ export const RolesTableActionMenu = ({
     <InlineMenuAction
       actionText={'Assign Role'}
       buttonHeight={40}
+      data-pendo-id={IAM_ROLES_PENDO_IDS.assignRole}
       disabled={!canUpdateUserGrants}
       onClick={onClick}
       sx={{

packages/manager/src/features/IAM/Shared/AssignedRolesTable/AssignedRolesActionMenu.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { ActionMenu } from 'src/components/ActionMenu/ActionMenu';
 
 import { useIsDefaultDelegationRolesForChildAccount } from '../../hooks/useDelegationRole';
+import { IAM_ROLES_PENDO_IDS } from '../constants';
 
 import type { ExtendedRoleView } from '../types';
 import type { PickPermissions } from '@linode/api-v4';
@@ -109,6 +110,11 @@ export const AssignedRolesActionMenu = ({
     <ActionMenu
       actionsList={actions}
       ariaLabel={`Action menu for role ${role.name}`}
+      pendoId={
+        isDefaultDelegationRolesForChildAccount
+          ? IAM_ROLES_PENDO_IDS.delegateUsersActionMenu
+          : undefined
+      }
     />
   );
 };

packages/manager/src/features/IAM/Shared/AssignedRolesTable/AssignedRolesTable.tsx

@@ -27,6 +27,7 @@ import { AssignedEntities } from '../../Users/UserRoles/AssignedEntities';
 import { AssignNewRoleDrawer } from '../../Users/UserRoles/AssignNewRoleDrawer';
 import {
   ASSIGNED_ROLES_TABLE_PREFERENCE_KEY,
+  IAM_ROLES_PENDO_IDS,
   ROLES_LEARN_MORE_LINK,
 } from '../constants';
 import { Permissions } from '../Permissions/Permissions';
@@ -472,6 +473,11 @@ export const AssignedRolesTable = () => {
         <Grid sx={{ alignSelf: 'flex-start' }}>
           <Button
             buttonType="primary"
+            data-pendo-id={
+              isDefaultDelegationRolesForChildAccount
+                ? IAM_ROLES_PENDO_IDS.addNewDefaultRoles
+                : undefined
+            }
             disabled={!permissionToCheck}
             onClick={() => setIsAssignNewRoleDrawerOpen(true)}
             tooltipText={

packages/manager/src/features/IAM/Shared/NoAssignedRoles/NoAssignedRoles.tsx

@@ -6,6 +6,7 @@ import EmptyState from 'src/assets/icons/empty-state-cloud.svg';
 import { useIsDefaultDelegationRolesForChildAccount } from '../../hooks/useDelegationRole';
 import { usePermissions } from '../../hooks/usePermissions';
 import { AssignNewRoleDrawer } from '../../Users/UserRoles/AssignNewRoleDrawer';
+import { IAM_ROLES_PENDO_IDS } from '../constants';
 
 interface Props {
   hasAssignNewRoleDrawer: boolean;
@@ -54,6 +55,11 @@ export const NoAssignedRoles = (props: Props) => {
       {hasAssignNewRoleDrawer && (
         <Button
           buttonType="primary"
+          data-pendo-id={
+            isDefaultDelegationRolesForChildAccount
+              ? IAM_ROLES_PENDO_IDS.addNewDefaultRoles
+              : undefined
+          }
           disabled={!permissionToCheck}
           onClick={() => setIsAssignNewRoleDrawerOpen(true)}
           tooltipText={

packages/manager/src/features/IAM/Shared/constants.ts

@@ -1,3 +1,46 @@
+// Pendo IDs for Parent Users flow
+export const IAM_PARENT_USERS_PENDO_IDS = {
+  parentUsernameLink: 'IAM Users-Parent Username',
+  parentUsernameActionMenu: 'IAM Users Parent Username-Action menu',
+  addUserButton: 'IAM Users Parent-Add A User',
+  addUserDrawerSubmit: 'IAM Users Parent Add A User-Add User',
+  updateDelegation: 'IAM Account Delegations-Update Delegation',
+  updateDelegationSave: 'IAM Update Delegation-Save Changes',
+};
+// Pendo IDs for Delegate Users flow
+export const IAM_DELEGATE_USERS_PENDO_IDS = {
+  addUserButton: 'IAM Users Delegate-Add A User',
+  addUserDrawerSubmit: 'IAM Users Delegate Add A User-Add User',
+  delegateUsernameActionMenu: 'IAM Users Delegate Username-Action menu',
+  delegateUsernameLink: 'IAM Users-Delegate Username',
+};
+// Pendo IDs for Child Users flow
+export const IAM_CHILD_USERS_PENDO_IDS = {
+  childUsernameLink: 'IAM Users-Child Username',
+  childUsernameActionMenu: 'IAM Users Child Username-Action menu',
+  addUserButton: 'IAM Users Child-Add A User',
+  addUserDrawerSubmit: 'IAM Users Child Add A User-Add User',
+};
+
+// Pendo IDs for Roles pages (Parent & Child)
+export const IAM_ROLES_PENDO_IDS = {
+  viewDefaultRoles: 'IAM Roles-View Default Roles',
+  delegateUsersActionMenu: 'IAM Roles Delegate Users-Action menu',
+  addNewDefaultRoles: 'IAM Roles for Delegate Users-Add New Default Roles',
+  addNewDefaultRolesDrawer:
+    'IAM Roles for Delegate Users Add New Default Roles-Add',
+  rolesChecked: 'IAM Roles-Roles checked',
+  assignSelectedRoles: 'IAM Roles-Assign Selected Roles',
+  assignSelectedRoleToUserDelegate:
+    'IAM Roles Assign Selected Role to a User-Delegate User',
+  assignSelectedRoleToUserParent:
+    'IAM Roles Assign Selected Role to a User-Parent User',
+  assignSelectedRoleToChildUser:
+    'IAM Roles Assign Selected Role to a User-Child User',
+  assignSelectedRoleToUserAssign:
+    'IAM Roles Assign Selected Role to a User-Assign',
+  assignRole: 'IAM Roles-Assign Role',
+};
 // Various constants for the IAM package
 
 // Labels

packages/manager/src/features/IAM/Users/UserRoles/AssignNewRoleDrawer.tsx

@@ -26,6 +26,7 @@ import { AssignSingleRole } from 'src/features/IAM/Users/UserRoles/AssignSingleR
 
 import { useIsDefaultDelegationRolesForChildAccount } from '../../hooks/useDelegationRole';
 import {
+  IAM_ROLES_PENDO_IDS,
   INTERNAL_ERROR_NO_CHANGES_SAVED,
   ROLES_LEARN_MORE_LINK,
 } from '../../Shared/constants';
@@ -225,6 +226,9 @@ export const AssignNewRoleDrawer = ({
                 isUserRolesPending ||
                 isDefaultRolesPending ||
                 formState.isSubmitting,
+              'data-pendo-id': isDefaultDelegationRolesForChildAccount
+                ? IAM_ROLES_PENDO_IDS.addNewDefaultRolesDrawer
+                : undefined,
             }}
             secondaryButtonProps={{
               'data-testid': 'cancel',

packages/manager/src/features/IAM/Users/UsersTable/CreateUserDrawer.tsx

@@ -5,6 +5,13 @@ import { CreateUserSchema } from '@linode/validation';
 import * as React from 'react';
 import { Controller, useForm } from 'react-hook-form';
 
+import { useDelegationRole } from '../../hooks/useDelegationRole';
+import {
+  IAM_CHILD_USERS_PENDO_IDS,
+  IAM_DELEGATE_USERS_PENDO_IDS,
+  IAM_PARENT_USERS_PENDO_IDS,
+} from '../../Shared/constants';
+
 interface Props {
   onClose: () => void;
   open: boolean;
@@ -13,7 +20,7 @@ interface Props {
 export const CreateUserDrawer = (props: Props) => {
   const { onClose, open } = props;
   const { mutateAsync: createUserMutation } = useCreateUserMutation();
-
+  const { isParentUserType, isDelegateUserType } = useDelegationRole();
   const {
     control,
     formState: { errors, isSubmitting },
@@ -102,6 +109,11 @@ export const CreateUserDrawer = (props: Props) => {
             'data-testid': 'submit',
             label: 'Add User',
             loading: isSubmitting,
+            'data-pendo-id': isDelegateUserType
+              ? IAM_DELEGATE_USERS_PENDO_IDS.addUserDrawerSubmit
+              : isParentUserType
+                ? IAM_PARENT_USERS_PENDO_IDS.addUserDrawerSubmit
+                : IAM_CHILD_USERS_PENDO_IDS.addUserDrawerSubmit,
             type: 'submit',
           }}
           secondaryButtonProps={{

packages/manager/src/features/IAM/Users/UsersTable/UserRow.tsx

@@ -15,6 +15,11 @@ import { TableRow } from 'src/components/TableRow';
 import { useDelegationRole } from '../../hooks/useDelegationRole';
 import { useIsIAMDelegationEnabled } from '../../hooks/useIsIAMEnabled';
 import { usePermissions } from '../../hooks/usePermissions';
+import {
+  IAM_CHILD_USERS_PENDO_IDS,
+  IAM_DELEGATE_USERS_PENDO_IDS,
+  IAM_PARENT_USERS_PENDO_IDS,
+} from '../../Shared/constants';
 import { UsersActionMenu } from './UsersActionMenu';
 
 import type { User } from '@linode/api-v4';
@@ -64,6 +69,13 @@ export const UserRow = ({ onDelete, user }: Props) => {
               <Typography sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
                 {canViewUser ? (
                   <Link
+                    data-pendo-id={
+                      user.user_type === 'child'
+                        ? IAM_CHILD_USERS_PENDO_IDS.childUsernameLink
+                        : user.user_type === 'delegate'
+                          ? IAM_DELEGATE_USERS_PENDO_IDS.delegateUsernameLink
+                          : IAM_PARENT_USERS_PENDO_IDS.parentUsernameLink
+                    }
                     to={
                       isChildOrDelegateWithDelegationEnabled &&
                       user.user_type === 'delegate'

packages/manager/src/features/IAM/Users/UsersTable/Users.tsx

@@ -16,6 +16,11 @@ import { usePaginationV2 } from 'src/hooks/usePaginationV2';
 import { useDelegationRole } from '../../hooks/useDelegationRole';
 import { useIsIAMDelegationEnabled } from '../../hooks/useIsIAMEnabled';
 import { usePermissions } from '../../hooks/usePermissions';
+import {
+  IAM_CHILD_USERS_PENDO_IDS,
+  IAM_DELEGATE_USERS_PENDO_IDS,
+  IAM_PARENT_USERS_PENDO_IDS,
+} from '../../Shared/constants';
 import { UserDeleteConfirmation } from '../../Shared/UserDeleteConfirmation';
 import { CreateUserDrawer } from './CreateUserDrawer';
 import { UsersLandingTableBody } from './UsersLandingTableBody';
@@ -226,6 +231,13 @@ export const UsersLanding = () => {
           <Grid sx={{ alignSelf: 'flex-start' }}>
             <Button
               buttonType="primary"
+              data-pendo-id={
+                isDelegateUserType
+                  ? IAM_DELEGATE_USERS_PENDO_IDS.addUserButton
+                  : isChildUserType
+                    ? IAM_CHILD_USERS_PENDO_IDS.addUserButton
+                    : IAM_PARENT_USERS_PENDO_IDS.addUserButton
+              }
               disabled={!canCreateUser}
               onClick={() => setIsCreateDrawerOpen(true)}
               tooltipText={

packages/manager/src/features/IAM/Users/UsersTable/UsersActionMenu.tsx

@@ -5,6 +5,11 @@ import { ActionMenu } from 'src/components/ActionMenu/ActionMenu';
 import { useIsIAMDelegationEnabled } from 'src/features/IAM/hooks/useIsIAMEnabled';
 
 import { useDelegationRole } from '../../hooks/useDelegationRole';
+import {
+  IAM_CHILD_USERS_PENDO_IDS,
+  IAM_DELEGATE_USERS_PENDO_IDS,
+  IAM_PARENT_USERS_PENDO_IDS,
+} from '../../Shared/constants';
 
 import type { PickPermissions, UserType } from '@linode/api-v4';
 import type { Action } from 'src/components/ActionMenu/ActionMenu';
@@ -117,6 +122,13 @@ export const UsersActionMenu = (props: Props) => {
     <ActionMenu
       actionsList={actions}
       ariaLabel={`Action menu for user ${username}`}
+      pendoId={
+        userType === 'delegate'
+          ? IAM_DELEGATE_USERS_PENDO_IDS.delegateUsernameActionMenu
+          : userType === 'child'
+            ? IAM_CHILD_USERS_PENDO_IDS.childUsernameActionMenu
+            : IAM_PARENT_USERS_PENDO_IDS.parentUsernameActionMenu
+      }
     />
   );
 };