fix(Consumption): Multiple minor changes to scope and subgraph nodes (#…

…4331) * changing spinner for scope nodes * passing the scope node comment down * adjusting style so it matches operation nodes * keeping panel open when moving a node * Fixing spinner style * removing 'add a note' button for subgraph nodes * making comment footer clickable
Azure · Mar 8, 2024 · fd62aaa · fd62aaa
1 parent e4011e8
commit fd62aaa
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 22 deletions.
diff --git a/libs/designer-ui/src/lib/card/scopeCard/index.tsx b/libs/designer-ui/src/lib/card/scopeCard/index.tsx
@@ -5,7 +5,8 @@ import { ErrorBanner } from '../errorbanner';
 import { useCardContextMenu, useCardKeyboardInteraction } from '../hooks';
 import { Gripper } from '../images/dynamicsvgs/gripper';
 import type { CardProps } from '../index';
-import { css, Icon, Spinner, SpinnerSize, TooltipHost } from '@fluentui/react';
+import { css, Icon } from '@fluentui/react';
+import { Spinner, Tooltip } from '@fluentui/react-components';
 
 export interface ScopeCardProps extends CardProps {
   collapsed?: boolean;
@@ -50,7 +51,7 @@ export const ScopeCard: React.FC<ScopeCardProps> = ({
 
   const colorVars = { ['--brand-color' as any]: brandColor };
   const cardIcon = isLoading ? (
-    <Spinner className="msla-card-header-spinner" size={SpinnerSize.small} />
+    <Spinner className="msla-card-header-spinner" size={'tiny'} appearance="inverted" />
   ) : icon ? (
     <img className="scope-icon" alt="" role="presentation" src={icon} />
   ) : null;
@@ -81,24 +82,26 @@ export const ScopeCard: React.FC<ScopeCardProps> = ({
             <button className="msla-scope-card-title-button" onClick={handleClick}>
               <div className="msla-scope-card-title-box">
                 <div className={css('gripper-section', draggable && 'draggable')}>{draggable ? <Gripper /> : null}</div>
-                {cardIcon}
+                <div className="panel-card-content-icon-section">{cardIcon}</div>
                 <div className="msla-scope-title">{title}</div>
               </div>
               {errorMessage ? <ErrorBanner errorLevel={errorLevel} errorMessage={errorMessage} /> : null}
             </button>
             <NodeCollapseToggle collapsed={collapsed} handleCollapse={handleCollapse} />
           </div>
-          <div>
+          <div className="msla-card-v2-footer" onClick={handleClick}>
             <div className="msla-badges">
               {badges.map(({ title, content, darkBackground, iconProps }) => (
-                <TooltipHost key={title} content={content}>
-                  <Icon
-                    className={css('panel-card-v2-badge', 'active', darkBackground && 'darkBackground')}
-                    {...iconProps}
-                    ariaLabel={`${title}: ${content}`}
-                    tabIndex={0}
-                  />
-                </TooltipHost>
+                <Tooltip key={title} relationship={'label'} withArrow={true} content={content}>
+                  <div>
+                    <Icon
+                      className={css('panel-card-v2-badge', 'active', darkBackground && 'darkBackground')}
+                      {...iconProps}
+                      ariaLabel={`${title}: ${content}`}
+                      tabIndex={0}
+                    />
+                  </div>
+                </Tooltip>
               ))}
             </div>
           </div>

diff --git a/libs/designer-ui/src/lib/card/scopeCard/scopeCard.less b/libs/designer-ui/src/lib/card/scopeCard/scopeCard.less
@@ -58,12 +58,24 @@
   }
 
   .msla-scope-card-title-box {
+    flex: 1 1 auto;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
   }
 
+  .panel-card-content-icon-section {
+    display: flex;
+    margin: 8px 8px 8px 0px;
+
+    .panel-card-icon {
+      height: 24px;
+      width: 24px;
+      border-radius: 2px;
+    }
+  }
+
   .gripper-section {
     padding: 12px 6px 10px;
     text-align: center;

diff --git a/libs/designer/src/lib/core/actions/bjsworkflow/move.ts b/libs/designer/src/lib/core/actions/bjsworkflow/move.ts
@@ -1,14 +1,10 @@
 import type { MoveNodePayload } from '../../parsers/moveNodeInWorkflow';
-import { clearPanel } from '../../state/panel/panelSlice';
-import { clearFocusNode, moveNode } from '../../state/workflow/workflowSlice';
+import { moveNode } from '../../state/workflow/workflowSlice';
 import type { RootState } from '../../store';
 import { updateAllUpstreamNodes } from './initialize';
 import { createAsyncThunk } from '@reduxjs/toolkit';
 
 export const moveOperation = createAsyncThunk('moveOperation', async (movePayload: MoveNodePayload, { dispatch, getState }) => {
-  dispatch(clearFocusNode());
-  dispatch(clearPanel());
-
   dispatch(moveNode(movePayload));
   updateAllUpstreamNodes(getState() as RootState, dispatch);
 

diff --git a/libs/designer/src/lib/ui/CustomNodes/ScopeCardNode.tsx b/libs/designer/src/lib/ui/CustomNodes/ScopeCardNode.tsx
@@ -19,6 +19,7 @@ import {
   useParentRunIndex,
   useRunInstance,
   useParentRunId,
+  useNodeDescription,
 } from '../../core/state/workflow/workflowSelectors';
 import { setRepetitionRunData, toggleCollapsedGraphId } from '../../core/state/workflow/workflowSlice';
 import type { AppDispatch } from '../../core/store';
@@ -43,6 +44,7 @@ import type { NodeProps } from 'reactflow';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const ScopeCardNode = ({ data, targetPosition = Position.Top, sourcePosition = Position.Bottom, id }: NodeProps) => {
   const scopeId = removeIdTag(id);
+  const nodeComment = useNodeDescription(scopeId);
 
   const node = useActionMetadata(scopeId);
   const operationsInfo = useAllOperations();
@@ -176,6 +178,19 @@ const ScopeCardNode = ({ data, targetPosition = Position.Top, sourcePosition = P
     [brandColor, iconUri, opQuery.isLoading, isRepetitionLoading, isRepetitionRefetching]
   );
 
+  const comment = useMemo(
+    () =>
+      nodeComment
+        ? {
+            brandColor,
+            comment: nodeComment,
+            isDismissed: false,
+            isEditing: false,
+          }
+        : undefined,
+    [brandColor, nodeComment]
+  );
+
   const opManifestErrorText = intl.formatMessage({
     defaultMessage: 'Error fetching manifest',
     description: 'Error message when manifest fails to load',
@@ -279,6 +294,7 @@ const ScopeCardNode = ({ data, targetPosition = Position.Top, sourcePosition = P
             selected={selected}
             contextMenuItems={contextMenuItems}
             runData={runData}
+            commentBox={comment}
           />
           {isMonitoringView && normalizedType === constants.NODE.TYPE.FOREACH ? (
             <LoopsPager metadata={metadata} scopeId={scopeId} collapsed={graphCollapsed} />

diff --git a/libs/designer/src/lib/ui/panel/nodeDetailsPanel/nodeDetailsPanel.tsx b/libs/designer/src/lib/ui/panel/nodeDetailsPanel/nodeDetailsPanel.tsx
@@ -24,7 +24,8 @@ import { usePanelTabs } from './usePanelTabs';
 import { WorkflowService } from '@microsoft/designer-client-services-logic-apps';
 import type { CommonPanelProps, PageActionTelemetryData } from '@microsoft/designer-ui';
 import { PanelContainer, PanelLocation, PanelScope, PanelSize } from '@microsoft/designer-ui';
-import { isNullOrUndefined } from '@microsoft/logic-apps-shared';
+import { SUBGRAPH_TYPES, isNullOrUndefined } from '@microsoft/logic-apps-shared';
+import type { ReactElement } from 'react';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -83,10 +84,13 @@ export const NodeDetailsPanel = (props: CommonPanelProps): JSX.Element => {
     dispatch(setNodeDescription({ nodeId: selectedNode, ...(showCommentBox && { description: '' }) }));
   };
 
-  const headerMenuItems = [
-    <CommentMenuItem key={'comment'} onClick={handleCommentMenuClick} hasComment={showCommentBox} />,
-    <DeleteMenuItem key={'delete'} onClick={deleteClick} />,
-  ];
+  // Removing the 'add a note' button for subgraph nodes
+  const isSubgraphContainer = nodeMetaData?.subgraphType === SUBGRAPH_TYPES.SWITCH_CASE;
+  const headerMenuItems: ReactElement[] = [];
+  if (!isSubgraphContainer) {
+    headerMenuItems.push(<CommentMenuItem key={'comment'} onClick={handleCommentMenuClick} hasComment={showCommentBox} />);
+  }
+  headerMenuItems.push(<DeleteMenuItem key={'delete'} onClick={deleteClick} />);
 
   const onTitleChange = (newId: string): { valid: boolean; oldValue?: string } => {
     const isValid = isOperationNameValid(selectedNode, newId, isTriggerNode, nodesMetadata, idReplacements);