feat(designer-ui): Add PinMenuItem component & styles (#5159)

* Add 'pin action' menu item (not displayed)

* Update tests

* Fix test name

* Fix snapshot after updating test name

Author: ek68794998

Localize/lang/strings.json

@@ -799,6 +799,7 @@
   "U7yRwM": "Validation Error",
   "UCNM4L": "To reference a parameter, use the dynamic content list.",
   "UEryJE": "Delete Workflow Action",
+  "UFMpGk": "Unpin Action",
   "UHCVNK": "Replaces a string with a given string",
   "UMPuUJ": "Delete {expressionValue}",
   "UPsZSw": "The entered identity is not associated with this logic app.",
@@ -1763,6 +1764,7 @@
   "_U7yRwM.comment": "The title of the validation error field in the static result parseJson action",
   "_UCNM4L.comment": "Description for Workflow Parameters Part 2",
   "_UEryJE.comment": "Title for operation node",
+  "_UFMpGk.comment": "Text indicating a menu button to unpin a pinned action from the side panel",
   "_UHCVNK.comment": "Label for description of custom replace Function",
   "_UMPuUJ.comment": "Label to delete a value",
   "_UPsZSw.comment": "error message for invalid user",
@@ -2593,6 +2595,7 @@
   "_yuJBmK.comment": "Placeholder description for a newly inserted Number parameter",
   "_yucvJE.comment": "Time zone value ",
   "_yxctQw.comment": "Label for connection reference logical name",
+  "_yy7jg4.comment": "Text indicating a menu button to pin an action to the side panel",
   "_yzqXMp.comment": "The text for the 'Learn more' link.",
   "_z/UY4k.comment": "a label that shows which folder the user will be able to dig deeper into",
   "_z3VuE+.comment": "Menu label",
@@ -3285,6 +3288,7 @@
   "yuJBmK": "Please enter a number",
   "yucvJE": "(UTC+01:00) Sarajevo, Skopje, Warsaw, Zagreb",
   "yxctQw": "Logical name",
+  "yy7jg4": "Pin Action",
   "yzqXMp": "Learn more",
   "z/UY4k": "Navigate to {folderName} folder",
   "z3VuE+": "Menu",

libs/designer-ui/src/lib/card/__test__/__snapshots__/card.spec.tsx.snap

@@ -337,6 +337,87 @@ exports[`lib/card > should render as inactive 1`] = `
 </div>
 `;
 
+exports[`lib/card > should render as pinned 1`] = `
+<div
+  style={
+    {
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="msla-panel-card-container"
+    data-automation-id="card-title"
+    data-testid="card-title"
+    id="msla-node-id"
+    onClick={[Function]}
+    onContextMenu={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    style={
+      {
+        "borderLeft": "4px solid rgba(71,71,71, 1)",
+        "borderRadius": "2px",
+      }
+    }
+    tabIndex={2}
+  >
+    <div
+      className="msla-selection-box pinned"
+    />
+    <div
+      className="panel-card-main"
+    >
+      <div
+        aria-label=" operation"
+        className="panel-card-header"
+        role="button"
+      >
+        <div
+          className="panel-card-content-container"
+        >
+          <div
+            className="panel-card-content-gripper-section"
+          />
+          <div
+            className="panel-card-content-icon-section"
+          >
+            <div
+              className="fui-Spinner r1k3z50n msla-card-header-spinner"
+              role="progressbar"
+            >
+              <span
+                className="fui-Spinner__spinner rvgcg50 ___ruqntd0_k4fqbj0 fjamq6b f64fuq3 f1v3ph3m"
+              >
+                <span
+                  className="fui-Spinner__spinnerTail r1lregi5"
+                />
+              </span>
+            </div>
+          </div>
+          <div
+            className="panel-card-top-content"
+          >
+            <div
+              className="panel-msla-title"
+            >
+              title
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="msla-card-v2-footer"
+      >
+        <div
+          className="msla-badges"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`lib/card > should render as selected 1`] = `
 <div
   style={

libs/designer-ui/src/lib/card/__test__/card.spec.tsx

@@ -1,7 +1,9 @@
 import type { CardProps } from '../index';
 import { Card } from '../index';
+import React from 'react';
 import renderer from 'react-test-renderer';
 import { describe, vi, beforeEach, afterEach, beforeAll, afterAll, it, test, expect } from 'vitest';
+
 describe('lib/card', () => {
   let minimal: CardProps;
 
@@ -39,7 +41,12 @@ describe('lib/card', () => {
   });
 
   it('should render as selected', () => {
-    const tree = renderer.create(<Card {...minimal} selected={true} />).toJSON();
+    const tree = renderer.create(<Card {...minimal} selectionMode="selected" />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render as pinned', () => {
+    const tree = renderer.create(<Card {...minimal} selectionMode="pinned" />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 

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

@@ -704,6 +704,9 @@
       outline-offset: -3px;
     }
   }
+  &.pinned {
+    border: 2px solid @pinned-item-color;
+  }
 }
 
 .msla-panel-card-container {
@@ -764,6 +767,10 @@
     }
   }
 
+  .msla-selection-box {
+    border-left: 0;
+  }
+
   .panel-card-main {
     display: flex;
     flex-direction: column;

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

@@ -38,7 +38,7 @@ export interface CardProps {
   operationName?: string;
   readOnly?: boolean;
   rootRef?: React.RefObject<HTMLDivElement>;
-  selected?: boolean;
+  selectionMode?: 'selected' | 'pinned' | false;
   staticResultsEnabled?: boolean;
   title: string;
   onClick?(): void;
@@ -82,7 +82,7 @@ export const Card: React.FC<CardProps> = ({
   isMonitoringView,
   isLoading,
   operationName,
-  selected,
+  selectionMode,
   staticResultsEnabled,
   title,
   onClick,
@@ -175,7 +175,7 @@ export const Card: React.FC<CardProps> = ({
         id={`msla-node-${id}`}
         className={css(
           'msla-panel-card-container',
-          selected && 'msla-panel-card-container-selected',
+          selectionMode === 'selected' && 'msla-panel-card-container-selected',
           !active && 'inactive',
           cloned && 'msla-card-ghost-image',
           isDragging && 'dragging'
@@ -199,7 +199,7 @@ export const Card: React.FC<CardProps> = ({
             resubmittedResults={runData?.executionMode === 'ResubmittedResults'}
           />
         ) : null}
-        <div className={css('msla-selection-box', selected && 'selected')} />
+        <div className={css('msla-selection-box', selectionMode)} />
         <div className="panel-card-main">
           <div aria-label={cardAltText} className="panel-card-header" role="button">
             <div className="panel-card-content-container">

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

@@ -34,7 +34,7 @@ export const ScopeCard: React.FC<ScopeCardProps> = ({
   onClick,
   onDeleteClick,
   handleCollapse,
-  selected,
+  selectionMode,
   contextMenuItems = [],
   runData,
   setFocus,
@@ -84,7 +84,7 @@ export const ScopeCard: React.FC<ScopeCardProps> = ({
             />
           ) : null}
           <div className="msla-scope-card-content">
-            <div className={css('msla-selection-box', 'white-outline', selected && 'selected')} />
+            <div className={css('msla-selection-box', 'white-outline', selectionMode)} />
             <button
               id={`msla-node-${id}`}
               className="msla-scope-card-title-button"

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

@@ -3,6 +3,7 @@ import NodeCollapseToggle from '../../nodeCollapseToggle';
 import { CardContextMenu } from '../cardcontextmenu';
 import { ErrorBanner } from '../errorbanner';
 import { useCardContextMenu, useCardKeyboardInteraction } from '../hooks';
+import type { CardProps } from '..';
 import type { MessageBarType } from '@fluentui/react';
 import { css } from '@fluentui/react';
 import type { SubgraphType } from '@microsoft/logic-apps-shared';
@@ -16,7 +17,7 @@ interface SubgraphCardProps {
   subgraphType: SubgraphType;
   collapsed?: boolean;
   handleCollapse?: () => void;
-  selected?: boolean;
+  selectionMode?: CardProps['selectionMode'];
   readOnly?: boolean;
   onClick?(id?: string): void;
   onDeleteClick?(): void;
@@ -33,7 +34,7 @@ export const SubgraphCard: React.FC<SubgraphCardProps> = ({
   subgraphType,
   collapsed,
   handleCollapse,
-  selected = false,
+  selectionMode = false,
   readOnly = false,
   onClick,
   onDeleteClick,
@@ -126,7 +127,7 @@ export const SubgraphCard: React.FC<SubgraphCardProps> = ({
   if (data.size === 'large') {
     return (
       <div className={css('msla-subgraph-card', data.size)} style={colorVars} tabIndex={-1}>
-        <div className={css('msla-selection-box', 'white-outline', selected && 'selected')} tabIndex={-1} />
+        <div className={css('msla-selection-box', 'white-outline', selectionMode)} tabIndex={-1} />
         <button
           id={`msla-node-${id}`}
           className="msla-subgraph-title"
@@ -162,7 +163,7 @@ export const SubgraphCard: React.FC<SubgraphCardProps> = ({
           onKeyDown={collapseKeyboardInteraction.keyUp}
           onKeyUp={collapseKeyboardInteraction.keyDown}
         >
-          <div className={css('msla-selection-box', 'white-outline', selected && 'selected')} tabIndex={-1} />
+          <div className={css('msla-selection-box', 'white-outline', selectionMode)} tabIndex={-1} />
           <div className="msla-subgraph-title msla-subgraph-title-text">{data.title}</div>
           <NodeCollapseToggle disabled collapsed={collapsed} onSmallCard />
         </div>

libs/designer-ui/src/lib/variables.less

@@ -132,6 +132,8 @@
 @brandColor: #0058ad;
 @brandColorLight: #3aa0f3;
 
+@pinned-item-color: #f2610c;
+
 @token-picker-offset-top: -150px;
 
 @badge-width: 30px;

libs/designer/src/lib/core/state/panelV2/panelSelectors.ts

@@ -5,3 +5,5 @@ import { useSelector } from 'react-redux';
 const getPanelState = (state: RootState) => state.panelV2;
 
 export const usePinnedNodeId = () => useSelector(createSelector(getPanelState, (state) => state.operationContent.pinnedNodeId ?? ''));
+
+export const useIsNodePinned = (nodeId: string) => usePinnedNodeId() === nodeId;

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

@@ -21,7 +21,8 @@ import {
   useOperationVisuals,
 } from '../../core/state/operation/operationSelector';
 import { useIsNodeSelected } from '../../core/state/panel/panelSelectors';
-import { changePanelNode, selectPanelTab, setSelectedNodeId } from '../../core/state/panel/panelSlice';
+import { useIsNodePinned } from '../../core/state/panelV2/panelSelectors';
+import { changePanelNode, selectPanelTab, setSelectedNodeId } from '../../core/state/panelV2/panelSlice';
 import {
   useAllOperations,
   useConnectorName,
@@ -172,6 +173,7 @@ const DefaultNode = ({ targetPosition = Position.Top, sourcePosition = Position.
   );
 
   const selected = useIsNodeSelected(id);
+  const isPinned = useIsNodePinned(id);
   const nodeComment = useNodeDescription(id);
   const connectionResult = useNodeConnectionName(id);
   const isConnectionRequired = useIsConnectionRequired(operationInfo);
@@ -363,7 +365,7 @@ const DefaultNode = ({ targetPosition = Position.Top, sourcePosition = Position.
             onDeleteClick={deleteClick}
             onCopyClick={copyClick}
             operationName={operationSummary?.result}
-            selected={selected}
+            selectionMode={selected ? 'selected' : isPinned ? 'pinned' : false}
             contextMenuItems={contextMenuItems}
             setFocus={shouldFocus}
             staticResultsEnabled={!!staticResults}

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

@@ -48,6 +48,7 @@ import { CopyMenuItem } from '../menuItems';
 import { copyScopeOperation } from '../../core/actions/bjsworkflow/copypaste';
 import { Tooltip } from '@fluentui/react-components';
 import { useHotkeys } from 'react-hotkeys-hook';
+import { useIsNodePinned } from '../../core/state/panelV2/panelSelectors';
 import { RunAfterMenuItem } from '../menuItems/runAfterMenuItem';
 import { RUN_AFTER_PANEL_TAB } from './constants';
 import { shouldDisplayRunAfter } from './helpers';
@@ -155,6 +156,7 @@ const ScopeCardNode = ({ data, targetPosition = Position.Top, sourcePosition = P
     [readOnly, metadata]
   );
 
+  const isPinned = useIsNodePinned(scopeId);
   const selected = useIsNodeSelected(scopeId);
   const brandColor = useBrandColor(scopeId);
   const iconUri = useIconUri(scopeId);
@@ -345,7 +347,7 @@ const ScopeCardNode = ({ data, targetPosition = Position.Top, sourcePosition = P
             readOnly={readOnly}
             onClick={nodeClick}
             onDeleteClick={deleteClick}
-            selected={selected}
+            selectionMode={selected ? 'selected' : isPinned ? 'pinned' : false}
             contextMenuItems={contextMenuItems}
             runData={runData}
             commentBox={comment}

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

@@ -7,6 +7,7 @@ import { useMonitoringView, useReadOnly } from '../../core/state/designerOptions
 import { setShowDeleteModal } from '../../core/state/designerView/designerViewSlice';
 import { useIconUri, useParameterValidationErrors } from '../../core/state/operation/operationSelector';
 import { useIsNodeSelected } from '../../core/state/panel/panelSelectors';
+import { useIsNodePinned } from '../../core/state/panelV2/panelSelectors';
 import { changePanelNode, setSelectedNodeId } from '../../core/state/panel/panelSlice';
 import {
   useActionMetadata,
@@ -38,6 +39,7 @@ const SubgraphCardNode = ({ data, targetPosition = Position.Top, sourcePosition
   const readOnly = useReadOnly();
   const dispatch = useDispatch<AppDispatch>();
 
+  const isPinned = useIsNodePinned(subgraphId);
   const selected = useIsNodeSelected(subgraphId);
   const isLeaf = useIsLeafNode(id);
   const metadata = useNodeMetadata(subgraphId);
@@ -133,7 +135,7 @@ const SubgraphCardNode = ({ data, targetPosition = Position.Top, sourcePosition
                 parentId={metadata?.graphId}
                 subgraphType={metadata.subgraphType}
                 title={label}
-                selected={selected}
+                selectionMode={selected ? 'selected' : isPinned ? 'pinned' : false}
                 readOnly={readOnly}
                 onClick={subgraphClick}
                 collapsed={graphCollapsed}