feat(Designer): Hide side panel when no node is selected and we are s…

…uppressing default node click functionality (#4653) Empty panel is now hidden when we suppress default node select functionality Co-authored-by: Riley Evans <rileyevans@microsoft.com>
Azure · Apr 19, 2024 · 24f8794 · 24f8794
1 parent 6648d7c
commit 24f8794
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 2 deletions.
diff --git a/apps/Standalone/src/designer/app/AzureLogicAppsDesigner/laDesigner.tsx b/apps/Standalone/src/designer/app/AzureLogicAppsDesigner/laDesigner.tsx
@@ -82,6 +82,7 @@ const DesignerEditor = () => {
     hostOptions,
     showConnectionsPanel,
     showPerformanceDebug,
+    suppressDefaultNodeSelect,
   } = useSelector((state: RootState) => state.workflowLoader);
 
   const workflowName = workflowId.split('/').splice(-1)[0];
@@ -306,6 +307,7 @@ const DesignerEditor = () => {
           isDarkMode,
           readOnly: isReadOnly,
           isMonitoringView,
+          suppressDefaultNodeSelectFunctionality: suppressDefaultNodeSelect,
           hostOptions: {
             ...hostOptions,
             recurrenceInterval: { interval: 1, frequency: 'Minute' },

diff --git a/apps/Standalone/src/designer/app/AzureLogicAppsDesigner/laDesignerConsumption.tsx b/apps/Standalone/src/designer/app/AzureLogicAppsDesigner/laDesignerConsumption.tsx
@@ -67,6 +67,7 @@ const DesignerEditorConsumption = () => {
     showChatBot,
     hostOptions,
     showConnectionsPanel,
+    suppressDefaultNodeSelect,
     showPerformanceDebug,
     language,
   } = useSelector((state: RootState) => state.workflowLoader);
@@ -219,6 +220,7 @@ const DesignerEditorConsumption = () => {
           isMonitoringView,
           useLegacyWorkflowParameters: true,
           showConnectionsPanel,
+          suppressDefaultNodeSelectFunctionality: suppressDefaultNodeSelect,
           hostOptions: {
             ...hostOptions,
             recurrenceInterval: Constants.RECURRENCE_OPTIONS.CONSUMPTION,

diff --git a/apps/Standalone/src/designer/app/LocalDesigner/localDesigner.tsx b/apps/Standalone/src/designer/app/LocalDesigner/localDesigner.tsx
@@ -165,6 +165,7 @@ export const LocalDesigner = () => {
     areCustomEditorsEnabled,
     showConnectionsPanel,
     hostOptions,
+    suppressDefaultNodeSelect,
   } = useSelector((state: RootState) => state.workflowLoader);
   editorService.areCustomEditorsEnabled = !!areCustomEditorsEnabled;
   connectionParameterEditorService.areCustomEditorsEnabled = !!areCustomEditorsEnabled;
@@ -189,6 +190,7 @@ export const LocalDesigner = () => {
     isDarkMode,
     useLegacyWorkflowParameters: isConsumption,
     showConnectionsPanel,
+    suppressDefaultNodeSelectFunctionality: suppressDefaultNodeSelect,
     hostOptions,
   };
 

diff --git a/apps/Standalone/src/designer/app/SettingsSections/contextSettings.tsx b/apps/Standalone/src/designer/app/SettingsSections/contextSettings.tsx
@@ -7,6 +7,7 @@ import {
   useShowConnectionsPanel,
   useHostOptions,
   useShowPerformanceDebug,
+  useSuppressDefaultNodeSelect,
 } from '../../state/workflowLoadingSelectors';
 import {
   setDarkMode,
@@ -18,6 +19,7 @@ import {
   setShowConnectionsPanel,
   setHostOptions,
   setShowPerformanceDebug,
+  setSuppressDefaultNodeSelect,
 } from '../../state/workflowLoadingSlice';
 import { Checkbox } from '@fluentui/react';
 import { useCallback } from 'react';
@@ -29,6 +31,7 @@ const ContextSettings = () => {
   const isDarkMode = useIsDarkMode();
   const showConnectionsPanel = useShowConnectionsPanel();
   const areCustomEditorsEnabled = useAreCustomEditorsEnabled();
+  const suppressDefaultNodeSelect = useSuppressDefaultNodeSelect();
   const hostOptions = useHostOptions();
   const showPerformanceDebug = useShowPerformanceDebug();
   const dispatch = useDispatch<AppDispatch>();
@@ -74,6 +77,11 @@ const ContextSettings = () => {
         checked={hostOptions.forceEnableSplitOn}
         onChange={(_, checked) => dispatch(setHostOptions({ forceEnableSplitOn: !!checked }))}
       />
+      <Checkbox
+        label="Suppress default node click"
+        checked={suppressDefaultNodeSelect}
+        onChange={(_, checked) => dispatch(setSuppressDefaultNodeSelect(!!checked))}
+      />
       <Checkbox
         label="Show Performance Debug"
         checked={showPerformanceDebug}

diff --git a/apps/Standalone/src/designer/state/workflowLoadingSelectors.ts b/apps/Standalone/src/designer/state/workflowLoadingSelectors.ts
@@ -53,6 +53,10 @@ export const useAreCustomEditorsEnabled = () => {
   return useSelector((state: RootState) => state.workflowLoader.areCustomEditorsEnabled);
 };
 
+export const useSuppressDefaultNodeSelect = () => {
+  return useSelector((state: RootState) => state.workflowLoader.suppressDefaultNodeSelect);
+};
+
 export const useShowPerformanceDebug = () => {
   return useSelector((state: RootState) => state.workflowLoader.showPerformanceDebug);
 };
diff --git a/apps/Standalone/src/designer/state/workflowLoadingSlice.ts b/apps/Standalone/src/designer/state/workflowLoadingSlice.ts
@@ -24,6 +24,7 @@ export interface WorkflowLoadingState {
   workflowKind?: string;
   language: string;
   areCustomEditorsEnabled?: boolean;
+  suppressDefaultNodeSelect?: boolean;
   hostOptions: {
     displayRuntimeInfo: boolean; // show info about where the action is run(i.e. InApp/Shared/Custom)
     forceEnableSplitOn?: boolean; // force enable split on for all actions
@@ -47,6 +48,7 @@ const initialState: WorkflowLoadingState = {
   workflowKind: 'stateful',
   language: 'en',
   areCustomEditorsEnabled: false,
+  suppressDefaultNodeSelect: false,
   hostOptions: {
     displayRuntimeInfo: true,
   },
@@ -163,6 +165,9 @@ export const workflowLoadingSlice = createSlice({
     setAreCustomEditorsEnabled: (state, action: PayloadAction<boolean>) => {
       state.areCustomEditorsEnabled = action.payload;
     },
+    setSuppressDefaultNodeSelect: (state, action: PayloadAction<boolean>) => {
+      state.suppressDefaultNodeSelect = action.payload;
+    },
     setHostOptions: (state, action: PayloadAction<Partial<WorkflowLoadingState['hostOptions']>>) => {
       state.hostOptions = { ...state.hostOptions, ...action.payload };
     },
@@ -209,6 +214,7 @@ export const {
   setLanguage,
   loadLastWorkflow,
   setAreCustomEditorsEnabled,
+  setSuppressDefaultNodeSelect,
   setHostOptions,
   setShowPerformanceDebug,
 } = workflowLoadingSlice.actions;

diff --git a/libs/designer-ui/src/lib/panel/panelcontainer.tsx b/libs/designer-ui/src/lib/panel/panelcontainer.tsx
@@ -44,6 +44,7 @@ export type PanelContainerProps = {
   errorMessage?: string;
   isLoading?: boolean;
   panelScope: PanelScope;
+  suppressDefaultNodeSelectFunctionality?: boolean;
   pivotDisabled?: boolean;
   headerMenuItems: JSX.Element[];
   selectedTab?: string;
@@ -75,6 +76,7 @@ export const PanelContainer = ({
   errorMessage,
   isLoading,
   panelScope,
+  suppressDefaultNodeSelectFunctionality,
   headerMenuItems,
   selectedTab,
   selectTab,
@@ -109,6 +111,7 @@ export const PanelContainer = ({
           showCommentBox={showCommentBox}
           noNodeSelected={noNodeSelected}
           panelScope={panelScope}
+          suppressDefaultNodeSelectFunctionality={suppressDefaultNodeSelectFunctionality}
           headerMenuItems={headerMenuItems}
           readOnlyMode={readOnlyMode}
           titleId={headerTextId}
@@ -134,6 +137,7 @@ export const PanelContainer = ({
       showCommentBox,
       noNodeSelected,
       panelScope,
+      suppressDefaultNodeSelectFunctionality,
       headerMenuItems,
       readOnlyMode,
       title,

diff --git a/libs/designer-ui/src/lib/panel/panelheader/panelheader.tsx b/libs/designer-ui/src/lib/panel/panelheader/panelheader.tsx
@@ -32,6 +32,7 @@ export interface PanelHeaderProps {
   headerMenuItems: JSX.Element[];
   noNodeSelected?: boolean;
   panelScope: PanelScope;
+  suppressDefaultNodeSelectFunctionality?: boolean;
   readOnlyMode?: boolean;
   renameTitleDisabled?: boolean;
   showCommentBox?: boolean;
@@ -59,6 +60,7 @@ export const PanelHeader = ({
   isError,
   isLoading,
   panelScope,
+  suppressDefaultNodeSelectFunctionality,
   titleId,
   headerMenuItems,
   readOnlyMode,
@@ -92,6 +94,7 @@ export const PanelHeader = ({
   const isRight = headerLocation === PanelLocation.Right;
 
   const noNodeOnCardLevel = noNodeSelected && panelScope === PanelScope.CardLevel;
+  const shouldHideCollapseButton = noNodeOnCardLevel && suppressDefaultNodeSelectFunctionality;
 
   // collapsed -> loading -> connector icon -> error -> backup loading
   const iconComponent = useMemo(
@@ -169,7 +172,7 @@ export const PanelHeader = ({
 
   return (
     <div className="msla-panel-header" id={noNodeOnCardLevel ? titleId : title}>
-      <CollapseButton />
+      {shouldHideCollapseButton ? undefined : <CollapseButton />}
       {!noNodeOnCardLevel && !isCollapsed ? (
         <>
           <div className={'msla-panel-card-header'} style={isRight ? {} : { paddingLeft: horizontalPadding }}>

diff --git a/libs/designer/src/lib/ui/panel/nodeDetailsPanel/nodeDetailsPanel.tsx b/libs/designer/src/lib/ui/panel/nodeDetailsPanel/nodeDetailsPanel.tsx
@@ -10,7 +10,7 @@ import {
   validateParameter,
 } from '../../../core';
 import { renameCustomCode } from '../../../core/state/customcode/customcodeSlice';
-import { useReadOnly } from '../../../core/state/designerOptions/designerOptionsSelectors';
+import { useReadOnly, useSuppressDefaultNodeSelectFunctionality } from '../../../core/state/designerOptions/designerOptionsSelectors';
 import { setShowDeleteModal } from '../../../core/state/designerView/designerViewSlice';
 import { ErrorLevel, updateParameterEditorViewModel } from '../../../core/state/operation/operationMetadataSlice';
 import { useIconUri, useOperationErrorInfo } from '../../../core/state/operation/operationSelector';
@@ -67,6 +67,8 @@ export const NodeDetailsPanel = (props: CommonPanelProps): JSX.Element => {
   let showCommentBox = !isNullOrUndefined(comment);
   const errorInfo = useOperationErrorInfo(selectedNode);
 
+  const suppressDefaultNodeSelectFunctionality = useSuppressDefaultNodeSelectFunctionality();
+
   useEffect(() => {
     collapsed ? setWidth(PanelSize.Auto) : setWidth(PanelSize.Medium);
   }, [collapsed]);
@@ -200,6 +202,7 @@ export const NodeDetailsPanel = (props: CommonPanelProps): JSX.Element => {
       errorMessage={errorInfo?.message}
       isLoading={isLoading}
       panelScope={PanelScope.CardLevel}
+      suppressDefaultNodeSelectFunctionality={suppressDefaultNodeSelectFunctionality}
       headerMenuItems={headerMenuItems}
       showCommentBox={showCommentBox}
       tabs={panelTabs}