fix(designer): Update dropzone automation ids to use node names and a…

…lign with card … (#3729) * Update dropzone automation ids to use node names and align with card automation ids * Address CR --------- Co-authored-by: Aleks Dziewulska <[email protected]>
Azure · Nov 28, 2023 · d567972 · d567972
1 parent b7b7aaa
commit d567972
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/libs/designer/src/lib/ui/connections/dropzone.tsx b/libs/designer/src/lib/ui/connections/dropzone.tsx
@@ -9,8 +9,8 @@ import AddBranchIcon from './edgeContextMenuSvgs/addBranchIcon.svg';
 import AddNodeIcon from './edgeContextMenuSvgs/addNodeIcon.svg';
 import { ActionButton, Callout, DirectionalHint, FocusZone } from '@fluentui/react';
 import { css } from '@fluentui/utilities';
-import { ActionButtonV2 } from '@microsoft/designer-ui';
-import { containsIdTag, guid, removeIdTag } from '@microsoft/utils-logic-apps';
+import { ActionButtonV2, convertUIElementNameToAutomationId } from '@microsoft/designer-ui';
+import { containsIdTag, guid, normalizeAutomationId, removeIdTag } from '@microsoft/utils-logic-apps';
 import { useCallback, useState } from 'react';
 import { useDrop } from 'react-dnd';
 import { useIntl } from 'react-intl';
@@ -148,7 +148,9 @@ export const DropZone: React.FC<DropZoneProps> = ({ graphId, parentId, childId,
     setShowCallout(!showCallout);
   };
 
-  const buttonId = `msla-edge-button-${parentId}-${childId}`.replace(/\W/g, '-');
+  const buttonId = normalizeAutomationId(
+    `msla-edge-button-${convertUIElementNameToAutomationId(parentName)}-${convertUIElementNameToAutomationId(childName) || 'undefined'}`
+  );
 
   const showParallelBranchButton = !isLeaf && parentId;
 
@@ -169,7 +171,11 @@ export const DropZone: React.FC<DropZoneProps> = ({ graphId, parentId, childId,
             id={buttonId}
             title={tooltipText}
             onClick={actionButtonClick}
-            dataAutomationId={`msla-plus-button-${parentId}-${childId}`.replace(/\W/g, '-')}
+            dataAutomationId={normalizeAutomationId(
+              `msla-plus-button-${convertUIElementNameToAutomationId(parentName)}-${
+                convertUIElementNameToAutomationId(childName) || 'undefined'
+              }`
+            )}
           />
           {showCallout && (
             <Callout
@@ -186,15 +192,23 @@ export const DropZone: React.FC<DropZoneProps> = ({ graphId, parentId, childId,
                   <ActionButton
                     iconProps={{ imageProps: { src: AddNodeIcon } }}
                     onClick={openAddNodePanel}
-                    data-automation-id={`msla-add-action-${parentId}-${childId}`.replace(/\W/g, '-')}
+                    data-automation-id={normalizeAutomationId(
+                      `msla-add-action-${convertUIElementNameToAutomationId(parentName)}-${
+                        convertUIElementNameToAutomationId(childName) || 'undefined'
+                      }`
+                    )}
                   >
                     {newActionText}
                   </ActionButton>
                   {showParallelBranchButton ? (
                     <ActionButton
                       iconProps={{ imageProps: { src: AddBranchIcon } }}
                       onClick={addParallelBranch}
-                      data-automation-id={`msla-add-parallel-branch-${parentId}-${childId}`.replace(/\W/g, '-')}
+                      data-automation-id={normalizeAutomationId(
+                        `msla-add-parallel-branch-${convertUIElementNameToAutomationId(parentName)}-${
+                          convertUIElementNameToAutomationId(childName) || 'undefined'
+                        }`
+                      )}
                     >
                       {newBranchText}
                     </ActionButton>

diff --git a/libs/utils/src/lib/helpers/stringFunctions.ts b/libs/utils/src/lib/helpers/stringFunctions.ts
@@ -10,3 +10,5 @@ const normalizeApiId = (id?: string) => id?.replace(/\s+/, '').toLowerCase();
 export const areApiIdsEqual = (id1?: string, id2?: string) => normalizeApiId(id1) === normalizeApiId(id2);
 
 export const capitalizeFirstLetter = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
+
+export const normalizeAutomationId = (s: string) => s.replace(/\W/g, '-');
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,3 +10,5 @@ const normalizeApiId = (id?: string) => id?.replace(/\s+/, '').toLowerCase();
		export const areApiIdsEqual = (id1?: string, id2?: string) => normalizeApiId(id1) === normalizeApiId(id2);

		export const capitalizeFirstLetter = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);

		export const normalizeAutomationId = (s: string) => s.replace(/\W/g, '-');