fix(consumption): Adding 'Invalid Parameter' message to Subgraph nodes (#4314)

* adding parameter error message to subgraph nodes

* adjusting spacing to match current error messages

* making small nodes bold

Author: valentina-vallalta

libs/designer-ui/src/lib/card/subgraphCard/index.tsx

@@ -1,7 +1,9 @@
 import { ActionButtonV2 } from '../../actionbuttonv2';
 import NodeCollapseToggle from '../../nodeCollapseToggle';
 import { CardContextMenu } from '../cardcontextmenu';
+import { ErrorBanner } from '../errorbanner';
 import { useCardContextMenu, useCardKeyboardInteraction } from '../hooks';
+import type { MessageBarType } from '@fluentui/react';
 import { css } from '@fluentui/react';
 import type { SubgraphType } from '@microsoft/logic-apps-shared';
 import { SUBGRAPH_TYPES } from '@microsoft/logic-apps-shared';
@@ -20,6 +22,8 @@ interface SubgraphCardProps {
   onDeleteClick?(): void;
   showAddButton?: boolean;
   contextMenuItems?: JSX.Element[];
+  errorLevel?: MessageBarType;
+  errorMessage?: string;
 }
 
 export const SubgraphCard: React.FC<SubgraphCardProps> = ({
@@ -34,6 +38,8 @@ export const SubgraphCard: React.FC<SubgraphCardProps> = ({
   onClick,
   onDeleteClick,
   contextMenuItems = [],
+  errorLevel,
+  errorMessage,
 }) => {
   const intl = useIntl();
 
@@ -120,7 +126,8 @@ export const SubgraphCard: React.FC<SubgraphCardProps> = ({
           onKeyDown={keyboardInteraction.keyUp}
           onKeyUp={keyboardInteraction.keyDown}
         >
-          {data.title}
+          <div className="msla-subgraph-title-text">{data.title}</div>
+          {errorMessage ? <ErrorBanner errorLevel={errorLevel} errorMessage={errorMessage} /> : null}
         </button>
         <NodeCollapseToggle collapsed={collapsed} handleCollapse={handleCollapse} />
         {contextMenuItems?.length > 0 ? (
@@ -148,7 +155,7 @@ export const SubgraphCard: React.FC<SubgraphCardProps> = ({
           onKeyUp={keyboardInteraction.keyDown}
         >
           <div className={css('msla-selection-box', 'white-outline', selected && 'selected')} tabIndex={-1} />
-          <div className="msla-subgraph-title">{data.title}</div>
+          <div className="msla-subgraph-title msla-subgraph-title-text">{data.title}</div>
           <NodeCollapseToggle disabled collapsed={collapsed} onSmallCard />
         </div>
       </div>

libs/designer-ui/src/lib/card/subgraphCard/subgraphCard.less

@@ -32,11 +32,38 @@
     color: white;
     flex-grow: 1;
     align-self: center;
-    display: inline-block;
-    font: 14px/20px normal @semibold-font-family;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
     text-align: left;
     word-break: break-word;
     padding: 4px 8px;
     background-color: var(--brand-color, black);
   }
+
+  .msla-subgraph-title-text {
+    font: 14px/20px normal @semibold-font-family;
+  }
+  .msla-panel-card-error-wrapper {
+    width: 100%;
+    margin-left: 0%;
+  }
+  .msla-panel-card-error {
+    margin: 8px 0px 0px;
+    text-align: left;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    .msla-panel-card-error-text {
+      margin: 0px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &.severeWarning {
+      color: #ffffff;
+    }
+  }
 }

libs/designer/src/lib/ui/CustomNodes/SubgraphCardNode.tsx

@@ -5,7 +5,7 @@ import { initializeSwitchCaseFromManifest } from '../../core/actions/bjsworkflow
 import { getOperationManifest } from '../../core/queries/operation';
 import { useMonitoringView, useReadOnly } from '../../core/state/designerOptions/designerOptionsSelectors';
 import { setShowDeleteModal } from '../../core/state/designerView/designerViewSlice';
-import { useIconUri } from '../../core/state/operation/operationSelector';
+import { useIconUri, useParameterValidationErrors } from '../../core/state/operation/operationSelector';
 import { useIsNodeSelected } from '../../core/state/panel/panelSelectors';
 import { changePanelNode, setSelectedNodeId } from '../../core/state/panel/panelSlice';
 import {
@@ -21,6 +21,7 @@ import { addSwitchCase, setFocusNode, toggleCollapsedGraphId } from '../../core/
 import { LoopsPager } from '../common/LoopsPager/LoopsPager';
 import { DropZone } from '../connections/dropzone';
 import { DeleteMenuItem } from '../menuItems/deleteMenuItem';
+import { MessageBarType } from '@fluentui/react';
 import { SubgraphCard } from '@microsoft/designer-ui';
 import { SUBGRAPH_TYPES, removeIdTag } from '@microsoft/logic-apps-shared';
 import { memo, useCallback, useMemo } from 'react';
@@ -104,6 +105,18 @@ const SubgraphCardNode = ({ data, targetPosition = Position.Top, sourcePosition
     [deleteClick, metadata?.subgraphType]
   );
 
+  const parameterValidationErrors = useParameterValidationErrors(subgraphId);
+  const parameterValidationErrorText = intl.formatMessage({
+    defaultMessage: 'Invalid parameters',
+    description: 'Text to explain that there are invalid parameters for this node',
+  });
+
+  const { errorMessage, errorLevel } = useMemo(() => {
+    if (parameterValidationErrors?.length > 0)
+      return { errorMessage: parameterValidationErrorText, errorLevel: MessageBarType.severeWarning };
+    return { errorMessage: undefined, errorLevel: undefined };
+  }, [parameterValidationErrors?.length, parameterValidationErrorText]);
+
   return (
     <div>
       <div style={{ display: 'flex', alignItems: 'center' }}>
@@ -122,6 +135,8 @@ const SubgraphCardNode = ({ data, targetPosition = Position.Top, sourcePosition
                 collapsed={graphCollapsed}
                 handleCollapse={handleGraphCollapse}
                 contextMenuItems={contextMenuItems}
+                errorLevel={errorLevel}
+                errorMessage={errorMessage}
               />
               {isMonitoringView && normalizedType === constants.NODE.TYPE.UNTIL ? (
                 <LoopsPager metadata={metadata} scopeId={subgraphId} collapsed={graphCollapsed} />