upcoming: [UIE-10505] IAM Parent/Child - pendo tags (#13537)

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

* Added changeset: IAM: Add Pendo IDs for Parent/Child

Author: mpolotsk-akamai

packages/manager/.changeset/pr-13537-added-1774524506637.md

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

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

@@ -23,7 +23,6 @@ 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 {
   IAM_ROLES_PENDO_IDS,
@@ -51,8 +50,6 @@ export const AssignSelectedRolesDrawer = ({
 }: Props) => {
   const theme = useTheme();
 
-  const { isParentUserType } = useDelegationRole();
-
   const values = {
     roles: selectedRoles.map((r) => ({
       role: {
@@ -201,6 +198,9 @@ export const AssignSelectedRolesDrawer = ({
               name={`username`}
               render={({ field: { onChange }, fieldState }) => (
                 <Autocomplete
+                  data-pendo-id={
+                    IAM_ROLES_PENDO_IDS.assignSelectedRolesToUserOpen
+                  }
                   errorText={fieldState.error?.message}
                   getOptionLabel={(option) => option.label}
                   label="Select a User"
@@ -222,9 +222,11 @@ export const AssignSelectedRolesDrawer = ({
                     <li
                       {...props}
                       data-pendo-id={
-                        option.userType === 'delegate'
-                          ? IAM_ROLES_PENDO_IDS.assignSelectedRoleToUserDelegate
-                          : IAM_ROLES_PENDO_IDS.assignSelectedRoleToChildUser
+                        option.userType === 'parent'
+                          ? IAM_ROLES_PENDO_IDS.assignSelectedRoleToUserParent
+                          : option.userType === 'child'
+                            ? IAM_ROLES_PENDO_IDS.assignSelectedRoleToUserChild
+                            : IAM_ROLES_PENDO_IDS.assignSelectedRoleToUserDelegate
                       }
                       key={option.value}
                     >
@@ -237,10 +239,6 @@ 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={{

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

@@ -28,6 +28,7 @@ import {
 } from 'src/features/IAM/Shared/utilities';
 import { usePaginationV2 } from 'src/hooks/usePaginationV2';
 
+import { useDelegationRole } from '../../hooks/useDelegationRole';
 import { usePermissions } from '../../hooks/usePermissions';
 import { IAM_ROLES_PENDO_IDS } from '../../Shared/constants';
 import {
@@ -77,7 +78,7 @@ export const RolesTable = ({ roles = [] }: Props) => {
 
   const { data: permissions } = usePermissions('account', ['is_account_admin']);
   const isAccountAdmin = permissions?.is_account_admin;
-
+  const { isDelegateUserType, isChildUserType } = useDelegationRole();
   // Filtering
   const getFilteredRows = (
     text: string,
@@ -214,7 +215,13 @@ export const RolesTable = ({ roles = [] }: Props) => {
           </Grid>
           <Button
             buttonType="primary"
-            data-pendo-id={IAM_ROLES_PENDO_IDS.assignSelectedRoles}
+            data-pendo-id={
+              isDelegateUserType
+                ? IAM_ROLES_PENDO_IDS.assignSelectedRolesAsDelegate
+                : isChildUserType
+                  ? IAM_ROLES_PENDO_IDS.assignSelectedRolesAsChild
+                  : IAM_ROLES_PENDO_IDS.assignSelectedRolesAsParent
+            }
             disabled={selectedRows.length === 0 || !isAccountAdmin}
             onClick={() => handleAssignSelectedRoles()}
             sx={{ height: 34 }}
@@ -300,10 +307,13 @@ 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,
-                    })}
+                    {...(selectedRows.includes(roleRow)
+                      ? {
+                          'data-pendo-id': IAM_ROLES_PENDO_IDS.rolesChecked,
+                        }
+                      : {
+                          'data-pendo-id': IAM_ROLES_PENDO_IDS.rolesUnchecked,
+                        })}
                     disabled={!isAccountAdmin}
                     style={{
                       wordBreak: 'break-word',

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
 
+import { useDelegationRole } from '../../hooks/useDelegationRole';
 import { IAM_ROLES_PENDO_IDS } from '../../Shared/constants';
 
 interface Props {
@@ -13,12 +14,19 @@ export const RolesTableActionMenu = ({
   canUpdateUserGrants,
   onClick,
 }: Props) => {
+  const { isParentUserType, isChildUserType } = useDelegationRole();
   // This menu has evolved over time to where it isn't much of a menu at all, but rather a single action.
   return (
     <InlineMenuAction
       actionText={'Assign Role'}
       buttonHeight={40}
-      data-pendo-id={IAM_ROLES_PENDO_IDS.assignRole}
+      data-pendo-id={
+        isParentUserType
+          ? IAM_ROLES_PENDO_IDS.assignRoleAsParent
+          : isChildUserType
+            ? IAM_ROLES_PENDO_IDS.assignRoleAsChild
+            : IAM_ROLES_PENDO_IDS.assignRoleAsDelegate
+      }
       disabled={!canUpdateUserGrants}
       onClick={onClick}
       sx={{

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

@@ -30,16 +30,25 @@ export const IAM_ROLES_PENDO_IDS = {
   addNewDefaultRolesDrawer:
     'IAM Roles for Delegate Users Add New Default Roles-Add',
   rolesChecked: 'IAM Roles-Roles checked',
+  rolesUnchecked: 'IAM Roles-Roles unchecked',
   assignSelectedRoles: 'IAM Roles-Assign Selected Roles',
+  assignSelectedRolesToUserOpen:
+    'IAM Roles Assign Selected Role to a User-User:open',
+  assignSelectedRolesAsDelegate: 'IAM Roles-Assign Selected Roles as Delegate',
+  assignSelectedRolesAsChild: 'IAM Roles-Assign Selected Roles as Child',
+  assignSelectedRolesAsParent: 'IAM Roles-Assign Selected Roles as Parent',
+
   assignSelectedRoleToUserDelegate:
     'IAM Roles Assign Selected Role to a User-Delegate User',
   assignSelectedRoleToUserParent:
     'IAM Roles Assign Selected Role to a User-Parent User',
-  assignSelectedRoleToChildUser:
+  assignSelectedRoleToUserChild:
     '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',
+  assignRoleAsParent: 'IAM Roles-Assign Role as Parent',
+  assignRoleAsChild: 'IAM Roles-Assign Role as Child',
+  assignRoleAsDelegate: 'IAM Roles-Assign Role as Delegate',
 };
 // Various constants for the IAM package