feat(designer): Add Resubmit from action to the action panel for easi…

…er visibility (#4182) feat(designer): Add Resubmit from action to the action panel for easier discoverability
Azure · Feb 13, 2024 · fd0a041 · fd0a041
1 parent 609c4c5
commit fd0a041
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 1 deletion.
diff --git a/libs/designer-ui/src/lib/panel/panelcontainer.tsx b/libs/designer-ui/src/lib/panel/panelcontainer.tsx
@@ -46,6 +46,8 @@ export type PanelContainerProps = {
   nodeId: string;
   title?: string;
   layerProps?: ILayerProps;
+  canResubmit?: boolean;
+  resubmitOperation?: () => void;
   trackEvent(data: PageActionTelemetryData): void;
   toggleCollapse: () => void;
   onCommentChange: (panelCommentChangeEvent?: string) => void;
@@ -66,6 +68,8 @@ export const PanelContainer = ({
   headerMenuItems,
   selectedTab,
   selectTab,
+  canResubmit,
+  resubmitOperation,
   showCommentBox,
   readOnlyMode,
   tabs,
@@ -99,6 +103,8 @@ export const PanelContainer = ({
           isError={isError}
           isLoading={isLoading}
           comment={comment}
+          canResubmit={canResubmit}
+          resubmitOperation={resubmitOperation}
           horizontalPadding={horizontalPadding}
           commentChange={onCommentChange}
           toggleCollapse={toggleCollapse}
@@ -120,6 +126,8 @@ export const PanelContainer = ({
       isError,
       isLoading,
       comment,
+      canResubmit,
+      resubmitOperation,
       onCommentChange,
       toggleCollapse,
       onTitleChange,

diff --git a/libs/designer-ui/src/lib/panel/panelheader/panelheader.tsx b/libs/designer-ui/src/lib/panel/panelheader/panelheader.tsx
@@ -38,6 +38,8 @@ export interface PanelHeaderProps {
   title?: string;
   nodeId: string;
   horizontalPadding: string;
+  canResubmit?: boolean;
+  resubmitOperation?: () => void;
   commentChange(panelCommentChangeEvent?: string): void;
   onRenderWarningMessage?(): JSX.Element;
   toggleCollapse: () => void;
@@ -64,6 +66,8 @@ export const PanelHeader = ({
   title,
   nodeId,
   horizontalPadding,
+  canResubmit,
+  resubmitOperation,
   commentChange,
   onRenderWarningMessage,
   toggleCollapse,
@@ -73,6 +77,10 @@ export const PanelHeader = ({
 
   const menuButtonRef = React.createRef<IButton>();
 
+  const resubmitButtonText = intl.formatMessage({
+    defaultMessage: 'Submit from this action',
+    description: 'Button label for submitting a workflow to rerun from this action',
+  });
   useEffect(() => {
     menuButtonRef.current?.focus();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -182,6 +190,15 @@ export const PanelHeader = ({
               commentChange={commentChange}
             />
           ) : null}
+          {canResubmit ? (
+            <Button
+              style={{ marginLeft: '2rem', marginTop: '1rem', marginBottom: 0 }}
+              icon={<Icon iconName="PlaybackRate1x" />}
+              onClick={() => resubmitOperation?.()}
+            >
+              {resubmitButtonText}
+            </Button>
+          ) : null}
         </>
       ) : null}
     </div>

diff --git a/libs/designer/src/lib/ui/panel/nodeDetailsPanel/nodeDetailsPanel.tsx b/libs/designer/src/lib/ui/panel/nodeDetailsPanel/nodeDetailsPanel.tsx
@@ -15,12 +15,13 @@ import { useIconUri, useOperationErrorInfo } from '../../../core/state/operation
 import { useIsPanelCollapsed, useSelectedPanelTabId } from '../../../core/state/panel/panelSelectors';
 import { expandPanel, updatePanelLocation, selectPanelTab, setSelectedNodeId } from '../../../core/state/panel/panelSlice';
 import { useOperationQuery } from '../../../core/state/selectors/actionMetadataSelector';
-import { useNodeDescription } from '../../../core/state/workflow/workflowSelectors';
+import { useNodeDescription, useRunData, useRunInstance } from '../../../core/state/workflow/workflowSelectors';
 import { setNodeDescription, replaceId } from '../../../core/state/workflow/workflowSlice';
 import { isRootNodeInGraph, isOperationNameValid } from '../../../core/utils/graph';
 import { CommentMenuItem } from '../../menuItems/commentMenuItem';
 import { DeleteMenuItem } from '../../menuItems/deleteMenuItem';
 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/utils-logic-apps';
@@ -39,6 +40,7 @@ export const NodeDetailsPanel = (props: CommonPanelProps): JSX.Element => {
 
   const collapsed = useIsPanelCollapsed();
   const selectedNode = useSelectedNodeId();
+  const runData = useRunData(selectedNode);
   const { isTriggerNode, nodesMetadata, idReplacements } = useSelector((state: RootState) => ({
     isTriggerNode: isRootNodeInGraph(selectedNode, 'root', state.workflow.nodesMetadata),
     nodesMetadata: state.workflow.nodesMetadata,
@@ -107,6 +109,14 @@ export const NodeDetailsPanel = (props: CommonPanelProps): JSX.Element => {
     return opQuery.isLoading;
   }, [nodeMetaData?.subgraphType, opQuery.isLoading]);
 
+  const runInstance = useRunInstance();
+
+  const resubmitClick = useCallback(() => {
+    if (!runInstance) return;
+    WorkflowService().resubmitWorkflow?.(runInstance?.name ?? '', [selectedNode]);
+    dispatch(clearPanel());
+  }, [dispatch, runInstance, selectedNode]);
+
   const layerProps = {
     hostId: 'msla-layer-host',
     eventBubblingEnabled: true,
@@ -137,6 +147,8 @@ export const NodeDetailsPanel = (props: CommonPanelProps): JSX.Element => {
       selectTab={(tabId: string) => dispatch(selectPanelTab(tabId))}
       nodeId={selectedNode}
       readOnlyMode={readOnly}
+      canResubmit={runData?.canResubmit ?? false}
+      resubmitOperation={resubmitClick}
       toggleCollapse={() => {
         // Only run validation when collapsing the panel
         if (!collapsed) {