feat(designer): Add verbose telemetry for a number of scenarios

libs/designer-ui/src/lib/editor/base/plugins/tokenpickerbutton/index.tsx

@@ -5,6 +5,7 @@ import { TooltipHost } from '@fluentui/react/lib/Tooltip';
 import { Depths } from '@fluentui/theme';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { LogEntryLevel, LoggerService } from '@microsoft/designer-client-services-logic-apps';
 import type { NodeKey } from 'lexical';
 import { $getSelection } from 'lexical';
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
@@ -137,7 +138,15 @@ export const TokenPickerButton = ({
                 styles={{ root: `top-root-button-style ${hideExpression ? 'top-root-button-style-single' : ''}` }}
                 className="msla-token-picker-entrypoint-button-dynamic-content"
                 data-automation-id="msla-token-picker-entrypoint-button-dynamic-content"
-                onClick={() => openTokenPicker(TokenPickerMode.TOKEN)}
+                onClick={() => {
+                  LoggerService().log({
+                    area: 'TokenPickerButton:openTokenPicker',
+                    args: [TokenPickerMode.TOKEN],
+                    level: LogEntryLevel.Verbose,
+                    message: 'Token picker opened.',
+                  });
+                  openTokenPicker(TokenPickerMode.TOKEN);
+                }}
               />
             </TooltipHost>
           ) : null}
@@ -148,7 +157,15 @@ export const TokenPickerButton = ({
                 styles={{ root: `bottom-root-button-style ${hideDynamicContent ? 'bottom-root-button-style-single' : ''}` }}
                 className="msla-token-picker-entrypoint-button-dynamic-content"
                 data-automation-id="msla-token-picker-entrypoint-button-expression"
-                onClick={() => openTokenPicker(TokenPickerMode.EXPRESSION)}
+                onClick={() => {
+                  LoggerService().log({
+                    area: 'TokenPickerButton:openTokenPicker',
+                    args: [TokenPickerMode.EXPRESSION],
+                    level: LogEntryLevel.Verbose,
+                    message: 'Expression picker opened.',
+                  });
+                  openTokenPicker(TokenPickerMode.EXPRESSION);
+                }}
               />
             </TooltipHost>
           ) : null}

libs/designer-ui/src/lib/panel/recommendationpanel/operationSearchHeader/index.tsx

@@ -3,7 +3,7 @@ import { Checkbox } from '@fluentui/react';
 import type { IDropdownOption } from '@fluentui/react/lib/Dropdown';
 import { Dropdown } from '@fluentui/react/lib/Dropdown';
 import type { OperationRuntimeCategory } from '@microsoft/designer-client-services-logic-apps';
-import { SearchService } from '@microsoft/designer-client-services-logic-apps';
+import { LogEntryLevel, LoggerService, SearchService } from '@microsoft/designer-client-services-logic-apps';
 import type { IntlShape } from 'react-intl';
 import { useIntl } from 'react-intl';
 
@@ -82,13 +82,20 @@ export const OperationSearchHeader = (props: OperationSearchHeaderProps) => {
   const onChange = (_event: React.FormEvent<HTMLDivElement>, item?: IDropdownOption): void => {
     if (item) {
       const [k, v] = (item.key as string).split('-');
+      let newFilters: Record<string, string>;
       if (item.selected) {
-        setFilters?.({ ...filters, [k]: v });
+        newFilters = { ...filters, [k]: v };
       } else {
-        const newFilters = { ...filters };
+        newFilters = { ...filters };
         delete newFilters[k];
-        setFilters?.(newFilters);
       }
+      setFilters?.(newFilters);
+      LoggerService().log({
+        area: 'OperationSearchHeader:onChange',
+        args: [newFilters],
+        level: LogEntryLevel.Verbose,
+        message: 'Search filters updated.',
+      });
     }
   };
 

libs/designer-ui/src/lib/tokenpicker/tokenpickerfooter.tsx

@@ -1,19 +1,19 @@
 import constants from '../constants';
 import type { Token } from '../editor';
-import { ValueSegmentType, TokenType } from '../editor';
+import { TokenType, ValueSegmentType } from '../editor';
 import type { TokenNodeProps } from '../editor/base/nodes/tokenNode';
 import { INSERT_TOKEN_NODE } from '../editor/base/plugins/InsertTokenNode';
 import { SINGLE_VALUE_SEGMENT } from '../editor/base/plugins/SingleValueSegment';
 import type { ExpressionEditorEvent } from '../expressioneditor';
 import type { TokenGroup, Token as TokenGroupToken } from './models/token';
 import { UPDATE_TOKEN_NODE } from './plugins/UpdateTokenNode';
 import type { GetValueSegmentHandler } from './tokenpickersection/tokenpickeroption';
-import { getExpressionTokenTitle, getExpressionOutput } from './util';
+import { getExpressionOutput, getExpressionTokenTitle } from './util';
 import { PrimaryButton } from '@fluentui/react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { LogEntryLevel, LoggerService } from '@microsoft/designer-client-services-logic-apps';
 import type { Expression } from '@microsoft/logic-apps-shared';
-import { ExpressionExceptionCode, ExpressionParser, ScannerException } from '@microsoft/logic-apps-shared';
-import { guid } from '@microsoft/logic-apps-shared';
+import { ExpressionExceptionCode, ExpressionParser, ScannerException, guid } from '@microsoft/logic-apps-shared';
 import type { LexicalEditor, NodeKey } from 'lexical';
 import { useMemo } from 'react';
 import { useIntl } from 'react-intl';
@@ -106,8 +106,19 @@ export function TokenPickerFooter({
       } else {
         setExpressionEditorError(invalidExpression);
       }
+    }
+
+    LoggerService().log({
+      area: 'TokenPickerFooter:onUpdateOrAddClicked',
+      args: [expressionToBeUpdated ? 'update' : 'add', currExpression ? 'valid' : 'invalid'],
+      level: LogEntryLevel.Verbose,
+      message: 'Expression add/update button clicked.',
+    });
+
+    if (!currExpression) {
       return;
     }
+
     if (expression.value && window.localStorage.getItem('msla-tokenpicker-expression') !== expression.value) {
       window.localStorage.setItem('msla-tokenpicker-expression', expression.value);
     }

libs/designer-ui/src/lib/tokenpicker/tokenpickerheader.tsx

@@ -2,6 +2,7 @@ import constants from '../constants';
 import type { IButtonStyles } from '@fluentui/react';
 import { IconButton } from '@fluentui/react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { LogEntryLevel, LoggerService } from '@microsoft/designer-client-services-logic-apps';
 import type { LexicalEditor } from 'lexical';
 import { useIntl } from 'react-intl';
 
@@ -65,9 +66,17 @@ export function TokenPickerHeader({
     description: "Token picker for 'Paste last used expression'",
   });
 
+  const isExpressionString = isExpression ? 'expression' : 'token';
+
   const handleCloseTokenPicker = () => {
     editor?.focus();
     closeTokenPicker?.();
+    LoggerService().log({
+      area: 'TokenPickerHeader:handleCloseTokenPicker',
+      args: [isExpressionString],
+      level: LogEntryLevel.Verbose,
+      message: 'Token picker close button clicked.',
+    });
   };
 
   return (
@@ -86,7 +95,16 @@ export function TokenPickerHeader({
           iconProps={{ iconName: fullScreen ? 'BackToWindow' : 'FullScreen' }}
           title={fullScreen ? fullScreenExitMessage : fullScreenMessage}
           ariaLabel={fullScreen ? fullScreenExitMessage : fullScreenMessage}
-          onClick={() => setFullScreen(!fullScreen)}
+          onClick={() => {
+            const newValue = !fullScreen;
+            setFullScreen(newValue);
+            LoggerService().log({
+              area: 'TokenPickerHeader:onIconButtonClick',
+              args: ['fullScreen', `${newValue}`, isExpressionString],
+              level: LogEntryLevel.Verbose,
+              message: `Token picker set to fullscreen=${newValue}.`,
+            });
+          }}
           styles={buttonStyles}
         />
       </div>
@@ -96,7 +114,15 @@ export function TokenPickerHeader({
             iconProps={{ iconName: 'Paste' }}
             title={pasteLastUsedExpressionMessage}
             ariaLabel={pasteLastUsedExpressionMessage}
-            onClick={pasteLastUsedExpression}
+            onClick={() => {
+              pasteLastUsedExpression?.();
+              LoggerService().log({
+                area: 'TokenPickerHeader:onIconButtonClick',
+                args: ['pasteLastUsed', isExpressionString],
+                level: LogEntryLevel.Verbose,
+                message: 'Last used expression pasted into expression editor.',
+              });
+            }}
             styles={buttonStyles}
           />
         </div>
@@ -106,9 +132,15 @@ export function TokenPickerHeader({
           iconProps={{ iconName: 'Info' }}
           title={infoMessage}
           ariaLabel={infoMessage}
-          onClick={() =>
-            window.open('https://learn.microsoft.com/en-us/azure/logic-apps/workflow-definition-language-functions-reference', '_blank')
-          }
+          onClick={() => {
+            window.open('https://learn.microsoft.com/en-us/azure/logic-apps/workflow-definition-language-functions-reference', '_blank');
+            LoggerService().log({
+              area: 'TokenPickerHeader:onIconButtonClick',
+              args: ['info', isExpressionString],
+              level: LogEntryLevel.Verbose,
+              message: 'Token picker button clicked.',
+            });
+          }}
           styles={buttonStyles}
         />
       </div>

libs/designer/src/lib/ui/Controls.tsx

@@ -2,6 +2,7 @@ import { openPanel } from '../core';
 import { useShowMinimap } from '../core/state/designerView/designerViewSelectors';
 import { toggleMinimap } from '../core/state/designerView/designerViewSlice';
 import { Icon, useTheme } from '@fluentui/react';
+import { LogEntryLevel, LoggerService } from '@microsoft/designer-client-services-logic-apps';
 import { useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { ControlButton, Controls } from 'reactflow';
@@ -14,10 +15,20 @@ const CustomControls = () => {
   const searchId = 'control-search-button';
 
   const minimapToggleClick = () => {
+    LoggerService().log({
+      area: 'CustomControls:onToggleMiniMapClick',
+      level: LogEntryLevel.Verbose,
+      message: 'Minimap toggled.',
+    });
     dispatch(toggleMinimap());
   };
 
   const searchToggleClick = () => {
+    LoggerService().log({
+      area: 'CustomControls:searchToggleClick',
+      level: LogEntryLevel.Verbose,
+      message: 'Node search opened.',
+    });
     dispatch(openPanel({ panelMode: 'NodeSearch', focusReturnElementId: searchId }));
   };
 
@@ -34,7 +45,30 @@ const CustomControls = () => {
   const iconStyles = { root: { color: showMinimap ? '#1F85FF' : isInverted ? '#FFFFFF' : '#000000' } };
 
   return (
-    <Controls showInteractive={false}>
+    <Controls
+      onFitView={() => {
+        LoggerService().log({
+          area: 'CustomControls:onFitWindowClick',
+          level: LogEntryLevel.Verbose,
+          message: 'Canvas control clicked.',
+        });
+      }}
+      onZoomIn={() => {
+        LoggerService().log({
+          area: 'CustomControls:onZoomInClick',
+          level: LogEntryLevel.Verbose,
+          message: 'Canvas control clicked.',
+        });
+      }}
+      onZoomOut={() => {
+        LoggerService().log({
+          area: 'CustomControls:onZoomOutClick',
+          level: LogEntryLevel.Verbose,
+          message: 'Canvas control clicked.',
+        });
+      }}
+      showInteractive={false}
+    >
       <ControlButton id={searchId} aria-label={searchAria} title={searchAria} onClick={searchToggleClick}>
         <Icon iconName={'Search'} />
       </ControlButton>

libs/designer/src/lib/ui/connections/dropzone.tsx

@@ -2,22 +2,23 @@ import type { AppDispatch } from '../../core';
 import { pasteOperation } from '../../core/actions/bjsworkflow/copypaste';
 import { expandDiscoveryPanel } from '../../core/state/panel/panelSlice';
 import { useUpstreamNodes } from '../../core/state/tokens/tokenSelectors';
-import { useNodeDisplayName, useGetAllOperationNodesWithin } from '../../core/state/workflow/workflowSelectors';
+import { useGetAllOperationNodesWithin, useNodeDisplayName } from '../../core/state/workflow/workflowSelectors';
 import { AllowDropTarget } from './dynamicsvgs/allowdroptarget';
 import { BlockDropTarget } from './dynamicsvgs/blockdroptarget';
 import { MenuDivider, MenuItem, MenuList, Popover, PopoverSurface, PopoverTrigger } from '@fluentui/react-components';
 import {
-  bundleIcon,
   ArrowBetweenDown24Filled,
   ArrowBetweenDown24Regular,
   ArrowSplit24Filled,
   ArrowSplit24Regular,
   ClipboardPasteFilled,
   ClipboardPasteRegular,
+  bundleIcon,
 } from '@fluentui/react-icons';
 // import AddBranchIcon from './edgeContextMenuSvgs/addBranchIcon.svg';
 // import AddNodeIcon from './edgeContextMenuSvgs/addNodeIcon.svg';
 import { css } from '@fluentui/utilities';
+import { LogEntryLevel, LoggerService } from '@microsoft/designer-client-services-logic-apps';
 import { ActionButtonV2, convertUIElementNameToAutomationId } from '@microsoft/designer-ui';
 import { containsIdTag, guid, normalizeAutomationId, removeIdTag } from '@microsoft/logic-apps-shared';
 import { useCallback, useMemo, useState } from 'react';
@@ -72,6 +73,11 @@ export const DropZone: React.FC<DropZoneProps> = ({ graphId, parentId, childId,
     const relationshipIds = { graphId, childId, parentId };
     dispatch(expandDiscoveryPanel({ nodeId: newId, relationshipIds }));
     setShowCallout(false);
+    LoggerService().log({
+      area: 'DropZone:openAddNodePanel',
+      level: LogEntryLevel.Verbose,
+      message: 'Side-panel opened to add a new node.',
+    });
   }, [dispatch, graphId, childId, parentId]);
 
   const handlePasteClicked = useCallback(() => {
@@ -86,6 +92,11 @@ export const DropZone: React.FC<DropZoneProps> = ({ graphId, parentId, childId,
           connectionData: copiedNode.connectionData,
         })
       );
+      LoggerService().log({
+        area: 'DropZone:handlePasteClicked',
+        level: LogEntryLevel.Verbose,
+        message: 'New node added via paste.',
+      });
     }
     setShowCallout(false);
   }, [graphId, childId, parentId, dispatch, copiedNode]);
@@ -94,6 +105,11 @@ export const DropZone: React.FC<DropZoneProps> = ({ graphId, parentId, childId,
     const newId = guid();
     const relationshipIds = { graphId, childId: undefined, parentId };
     dispatch(expandDiscoveryPanel({ nodeId: newId, relationshipIds, isParallelBranch: true }));
+    LoggerService().log({
+      area: 'DropZone:addParallelBranch',
+      level: LogEntryLevel.Verbose,
+      message: 'Side-panel opened to add a new parallel branch node.',
+    });
     setShowCallout(false);
   }, [dispatch, graphId, parentId]);
 

libs/designer/src/lib/ui/menuItems/copyMenuItem.tsx

@@ -1,12 +1,14 @@
 import { MenuItem } from '@fluentui/react-components';
 import { bundleIcon, Clipboard24Filled, Clipboard24Regular } from '@fluentui/react-icons';
+import { LogEntryLevel, LoggerService } from '@microsoft/designer-client-services-logic-apps';
 import { isApple } from '@microsoft/logic-apps-shared';
+import { useCallback } from 'react';
 import { useIntl } from 'react-intl';
 
 const CopyIcon = bundleIcon(Clipboard24Filled, Clipboard24Regular);
 
 export interface CopyMenuItemProps {
-  onClick: (e: any) => void;
+  onClick: (e: unknown) => void;
   isTrigger?: boolean;
   showKey?: boolean;
 }
@@ -36,8 +38,21 @@ export const CopyMenuItem = (props: CopyMenuItemProps) => {
 
   const titleText = isTrigger ? copyTrigger : copyAction;
 
+  const onCopyClick = useCallback<CopyMenuItemProps['onClick']>(
+    (e) => {
+      onClick(e);
+      LoggerService().log({
+        area: 'CopyMenuItem:onCopyClick',
+        args: [isTrigger ? 'trigger' : 'action'],
+        level: LogEntryLevel.Verbose,
+        message: 'Action copied.',
+      });
+    },
+    [isTrigger, onClick]
+  );
+
   return (
-    <MenuItem key={titleText} icon={<CopyIcon />} secondaryContent={showKey ? copyKeyboardText : undefined} onClick={onClick}>
+    <MenuItem key={titleText} icon={<CopyIcon />} secondaryContent={showKey ? copyKeyboardText : undefined} onClick={onCopyClick}>
       {titleText}
     </MenuItem>
   );