fix(Designer): Collapsed view of 'Run After'

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

@@ -2,7 +2,7 @@ import { useReadOnly } from '../../core/state/designerOptions/designerOptionsSel
 import { useActionMetadata, useNodeEdgeTargets, useNodeMetadata } from '../../core/state/workflow/workflowSelectors';
 import { DropZone } from './dropzone';
 import { ArrowCap } from './dynamicsvgs/arrowCap';
-import { RunAfterIndicator } from './runAfterIndicator';
+import { CollapsedRunAfterIndicator, RunAfterIndicator } from './runAfterIndicator';
 import type { LogicAppsV2 } from '@microsoft/logic-apps-shared';
 import { containsIdTag, removeIdTag, getEdgeCenter, RUN_AFTER_STATUS } from '@microsoft/logic-apps-shared';
 import type { ElkExtendedEdge } from 'elkjs/lib/elk-api';
@@ -92,7 +92,9 @@ const ButtonEdge: React.FC<EdgeProps<LogicAppsEdgeProps>> = ({
   }, [filteredRunAfters, reactFlow, source]);
 
   const runAfterStatuses = useMemo(() => filteredRunAfters?.[source] ?? [], [filteredRunAfters, source]);
-  const showRunAfter = runAfterStatuses.length;
+  const runAfterCount = Object.keys(filteredRunAfters).length;
+  const showRunAfter = runAfterStatuses.length && runAfterCount < 6;
+  const showCollapsedRunAfter = runAfterStatuses.length && runAfterCount > 5 && Object.keys(filteredRunAfters)[0] === source;
 
   const showSourceButton = edgeTargets[edgeTargets.length - 1] === target;
   const showTargetButton = edgeSources?.[edgeSources.length - 1] === source;
@@ -187,6 +189,18 @@ const ButtonEdge: React.FC<EdgeProps<LogicAppsEdgeProps>> = ({
           <RunAfterIndicator statuses={runAfterStatuses} sourceNodeId={source} />
         </foreignObject>
       ) : null}
+      {/* RUN AFTER INDICATOR WHEN COLLAPSED */}
+      {showCollapsedRunAfter ? (
+        <foreignObject
+          id="msla-run-after-traffic-light"
+          width={runAfterWidth}
+          height={runAfterHeight}
+          x={targetX - runAfterWidth / 2}
+          y={targetY - runAfterHeight}
+        >
+          <CollapsedRunAfterIndicator filteredRunAfters={filteredRunAfters} runAfterCount={runAfterCount} />
+        </foreignObject>
+      ) : null}
     </>
   );
 };

libs/designer/src/lib/ui/connections/runAfterIndicator/index.tsx

@@ -1,5 +1,5 @@
 import { Text, useTheme } from '@fluentui/react';
-import { Tooltip } from '@fluentui/react-components';
+import { Divider, Tooltip } from '@fluentui/react-components';
 import { EmptyTrafficLightDot, Failed, Skipped, Succeeded, TimedOut, TrafficLightDot } from '@microsoft/designer-ui';
 import { idDisplayCase, RUN_AFTER_COLORS, RUN_AFTER_STATUS } from '@microsoft/logic-apps-shared';
 import { useCallback } from 'react';
@@ -10,6 +10,11 @@ export interface RunAfterIndicatorProps {
   sourceNodeId: string;
 }
 
+export interface CollapsedRunAfterIndicatorProps {
+  filteredRunAfters: Record<string, string[]>;
+  runAfterCount: number;
+}
+
 export function RunAfterIndicator({ statuses, sourceNodeId }: RunAfterIndicatorProps): JSX.Element {
   const intl = useIntl();
   const { isInverted } = useTheme();
@@ -99,3 +104,80 @@ export function RunAfterIndicator({ statuses, sourceNodeId }: RunAfterIndicatorP
     </Tooltip>
   );
 }
+
+export function CollapsedRunAfterIndicator({ filteredRunAfters, runAfterCount }: CollapsedRunAfterIndicatorProps): JSX.Element {
+  const intl = useIntl();
+
+  const StatusStrings: Record<string, string> = {
+    SUCCEEDED_STATUS: intl.formatMessage({
+      defaultMessage: 'Is successful',
+      id: 'rh5g4p',
+      description: 'Successful run',
+    }),
+    TIMEDOUT_STATUS: intl.formatMessage({
+      defaultMessage: 'Timed out',
+      id: '/2V8bQ',
+      description: 'Timed out run',
+    }),
+    SKIPPED_STATUS: intl.formatMessage({
+      defaultMessage: 'Is skipped',
+      id: 'I3mifR',
+      description: 'Skipped run',
+    }),
+    FAILED_STATUS: intl.formatMessage({
+      defaultMessage: 'Has failed',
+      id: 'O+3Y9f',
+      description: 'Failed run',
+    }),
+  };
+
+  const StatusLabel = ({ text, status }: { text: string; status: RUN_AFTER_STATUS }) => {
+    const checkboxLabelBadge: Record<string, JSX.Element> = {
+      [RUN_AFTER_STATUS.SUCCEEDED]: <Succeeded />,
+      [RUN_AFTER_STATUS.SKIPPED]: <Skipped />,
+      [RUN_AFTER_STATUS.FAILED]: <Failed />,
+      [RUN_AFTER_STATUS.TIMEDOUT]: <TimedOut />,
+    };
+
+    return (
+      <div className="msla-run-after-label">
+        <div className="msla-run-after-label-badge">{checkboxLabelBadge[status.toUpperCase()]}</div>
+        <Text>{text}</Text>
+      </div>
+    );
+  };
+
+  const defaultMessage = {
+    defaultMessage: 'Run after {sourceNodeId}',
+    id: 'PytMJ0',
+    description: 'The text that shows the node after which the target node is run.',
+  };
+
+  const tooltipContents: JSX.Element[] = [];
+
+  Object.entries(filteredRunAfters).forEach(([source, statuses], index) => {
+    const normalizedStatuses = statuses.map((status) => status.toUpperCase()) as RUN_AFTER_STATUS[];
+
+    const tooltipHeaderText = intl.formatMessage(defaultMessage, {
+      sourceNodeId: <strong>{idDisplayCase(source)}</strong>,
+    });
+
+    const tooltipContent = (
+      <div className="msla-run-after-tooltip-container">
+        <Text style={{ fontWeight: '600' }}>{tooltipHeaderText}</Text>
+        {normalizedStatuses.map((status) => (
+          <StatusLabel key={status} text={StatusStrings[status + '_STATUS']} status={status} />
+        ))}
+        {index !== runAfterCount - 1 && <Divider />}
+      </div>
+    );
+
+    tooltipContents.push(tooltipContent);
+  });
+
+  return (
+    <Tooltip relationship={'description'} withArrow content={<div className="msla-run-after-content">{tooltipContents}</div>}>
+      <span className="msla-run-after-overflow">&times;{runAfterCount}</span>
+    </Tooltip>
+  );
+}

libs/designer/src/lib/ui/connections/runAfterIndicator/styles.less

@@ -26,6 +26,29 @@
   display: flex;
 }
 
+.msla-theme-dark {
+  .msla-run-after-overflow {
+    background: #323130;
+  }
+}
+
+.msla-run-after-overflow {
+  box-sizing: border-box;
+  font-family: 'Segoe UI Semibold', sans-serif;
+  font-size: 10px;
+  line-height: 1.2;
+  background-color: #d3d3d3;
+  border-radius: 8px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+}
+
+.msla-run-after-content {
+  height: 360px;
+  overflow-y: auto;
+}
+
 .msla-run-after-tooltip-container {
   display: flex;
   flex-direction: column;