feat(Designer): Node details panel updates (#4600)

* Updated some fluent components in node settings, cleaned up css * Adjusted scroll behavior to happen in the panel content and not the whole panel * Cleanup * String file update * Fixed playwright test * Updated strings file * Updated Snapshot * Updated Snapshot * Fixed playwright test * Updated strings file * Revert "Updated strings file" This reverts commit 32c4323. * Updated playwright test
Azure · Apr 11, 2024 · 5fba416 · 5fba416
1 parent 8d33b52
commit 5fba416
Show file tree

Hide file tree

Showing 16 changed files with 186 additions and 259 deletions.
diff --git a/Localize/lang/strings.json b/Localize/lang/strings.json
@@ -294,7 +294,6 @@
   "AGCm1p": "Name",
   "AHB418": "Filter Actions",
   "ANGw2o": "Click for more information on Static Result",
-  "AO6T9u": "Done",
   "AQ7Zxc": "Returns the index for a value's n-th occurrence in a string (case-insensitive, invariant culture).",
   "Af+Ve0": "(UTC+11:00) Bougainville Island",
   "AheXMN": "Select frequency.",
@@ -1201,7 +1200,6 @@
   "_AGCm1p.comment": "Header for resource name",
   "_AHB418.comment": "Filter Actions",
   "_ANGw2o.comment": "button label to show more information on static result",
-  "_AO6T9u.comment": "Done Label for button",
   "_AQ7Zxc.comment": "Label for description of custom nthIndexOf Function",
   "_Af+Ve0.comment": "Time zone value ",
   "_AheXMN.comment": "Placeholder for Frequency",

diff --git a/e2e/designer/app.spec.ts b/e2e/designer/app.spec.ts
@@ -18,7 +18,7 @@ test('Sanity Check', async ({ page }) => {
   await page.getByRole('button', { name: 'Collapsed Run After, Click to Expand' }).click();
   await page.getByRole('button', { name: 'Expanded Tracking, Click to Collapse' }).click();
   await page.getByRole('button', { name: 'Collapsed Tracking, Click to Expand' }).click();
-  await page.getByRole('button', { name: 'Expand Initialize variable Initialize variable Initialize variable' }).click();
-  await page.getByRole('button', { name: 'Collapse Initialize variable Initialize variable Initialize variable' }).click();
+  await page.getByRole('button', { name: 'Expand Initialize variable' }).click();
+  await page.getByRole('button', { name: 'Collapse Initialize variable' }).click();
   expect(true).toBeTruthy();
 });
diff --git a/libs/designer-ui/src/lib/panel/__test__/__snapshots__/panelContent.spec.tsx.snap b/libs/designer-ui/src/lib/panel/__test__/__snapshots__/panelContent.spec.tsx.snap
@@ -25,3 +25,30 @@ exports[`ui/workflowparameters/workflowparameter > should construct. 1`] = `
   />
 </div>
 `;
+
+exports[`ui/workflowparameters/workflowparameter > should construct. 2`] = `
+<div
+  className="msla-node-details-panel"
+  id="msla-node-details-panel-"
+>
+  <ForwardRef
+    aria-label="more panels"
+  >
+    <TabList
+      onTabSelect={[Function]}
+      style={
+        {
+          "margin": "0px -12px",
+        }
+      }
+    >
+      <OverflowMenu
+        tabs={[]}
+      />
+    </TabList>
+  </ForwardRef>
+  <div
+    className="msla-panel-content-container"
+  />
+</div>
+`;
diff --git a/libs/designer-ui/src/lib/panel/__test__/__snapshots__/panelcontainer.spec.tsx.snap b/libs/designer-ui/src/lib/panel/__test__/__snapshots__/panelcontainer.spec.tsx.snap
@@ -39,3 +39,47 @@ exports[`ui/workflowparameters/workflowparameter > should construct. 1`] = `
   </React.Fragment>
 </StyledPanelBase>
 `;
+
+exports[`ui/workflowparameters/workflowparameter > should construct. 2`] = `
+<StyledPanelBase
+  aria-label="panel"
+  className="msla-panel-container"
+  customWidth="630px"
+  focusTrapZoneProps={
+    {
+      "disabled": false,
+    }
+  }
+  hasCloseButton={false}
+  headerClassName="msla-panel-header"
+  headerText="test title"
+  isBlocking={false}
+  isOpen={true}
+  onRenderHeader={[Function]}
+  styles={
+    {
+      "content": {
+        "height": "100%",
+        "overflow": "hidden",
+        "padding": "1rem 2rem 0rem",
+      },
+      "main": {
+        "overflow": "hidden",
+      },
+      "scrollableContent": {
+        "display": "flex",
+        "flexDirection": "column",
+        "height": "100%",
+      },
+    }
+  }
+  type={7}
+>
+  <React.Fragment>
+    <PanelContent
+      tabs={{}}
+      trackEvent={[MockFunction spy]}
+    />
+  </React.Fragment>
+</StyledPanelBase>
+`;
diff --git a/libs/designer-ui/src/lib/panel/panel.less b/libs/designer-ui/src/lib/panel/panel.less
@@ -142,9 +142,18 @@
   }
 
   .msla-panel-content-container {
-    margin-top: 12px;
+    margin: 0px -2rem;
+		padding: 1rem 2rem;
+		overflow-y: auto;
+		height: -webkit-fill-available;
   }
 
+	.msla-node-details-panel {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
   .msla-tab-component-container {
     .msla-panel-about-container {
       flex-direction: column;

diff --git a/libs/designer-ui/src/lib/panel/panelcontainer.tsx b/libs/designer-ui/src/lib/panel/panelcontainer.tsx
@@ -15,12 +15,19 @@ import { useCallback } from 'react';
 import { useIntl } from 'react-intl';
 
 const horizontalPadding = '2rem';
-const verticalPadding = '1rem';
 
 const panelStyles: Partial<IPanelStyles> = {
-  content: { padding: verticalPadding + ' ' + horizontalPadding },
+  content: {
+    padding: '1rem 2rem 0rem',
+    overflow: 'hidden',
+    height: '100%',
+  },
   main: { overflow: 'hidden' },
-  scrollableContent: { height: '100%' },
+  scrollableContent: {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+  },
 };
 
 const panelStylesCollapsed: Partial<IPanelStyles> = {

diff --git a/libs/designer-ui/src/lib/panel/panelcontent.tsx b/libs/designer-ui/src/lib/panel/panelcontent.tsx
@@ -52,7 +52,7 @@ export const PanelContent = ({ nodeId, tabs = [], selectedTab, selectTab }: Pane
   });
 
   return (
-    <div id={`msla-node-details-panel-${nodeId}`}>
+    <div id={`msla-node-details-panel-${nodeId}`} className="msla-node-details-panel">
       <Overflow aria-label={overflowLabel}>
         <TabList selectedValue={selectedTabId} onTabSelect={onTabSelected} style={{ margin: '0px -12px' }}>
           {tabs.map(({ id, visible, hasErrors, title }) =>

diff --git a/libs/designer-ui/src/lib/peek/index.tsx b/libs/designer-ui/src/lib/peek/index.tsx
@@ -1,16 +1,11 @@
 import { MonacoEditor } from '../editor/monaco';
-import { PrimaryButton } from '@fluentui/react/lib/Button';
 import { EditorLanguage } from '@microsoft/logic-apps-shared';
-import { useIntl } from 'react-intl';
 
 export interface PeekProps {
   input: string;
-  onOKClick?(): void;
 }
 
-export function Peek({ input, onOKClick }: PeekProps): JSX.Element {
-  const intl = useIntl();
-
+export function Peek({ input }: PeekProps): JSX.Element {
   const options = {
     contextmenu: false,
     fontSize: 13,
@@ -21,32 +16,16 @@ export function Peek({ input, onOKClick }: PeekProps): JSX.Element {
     defaultValue: '',
   };
 
-  const doneLabel = intl.formatMessage({ defaultMessage: 'Done', id: 'AO6T9u', description: 'Done Label for button' });
-
   return (
     <div className="msla-card-inner-body msla-peek">
-      <div className="msla-peek-json">
-        <MonacoEditor
-          className={'msla-monaco-peek'}
-          value={input}
-          fontSize={options.fontSize}
-          readOnly={options.readOnly}
-          language={EditorLanguage.json}
-          height={getEditorStyle(input)}
-        />
-      </div>
-      {onOKClick ? (
-        <div className="msla-card-config-button-container msla-code-view-done-button">
-          <PrimaryButton className="msla-card-button-primary" onClick={onOKClick}>
-            {doneLabel}
-          </PrimaryButton>
-        </div>
-      ) : null}
+      <MonacoEditor
+        className={'msla-monaco-peek'}
+        value={input}
+        fontSize={options.fontSize}
+        readOnly={options.readOnly}
+        language={EditorLanguage.json}
+        monacoContainerStyle={{ height: '100%' }}
+      />
     </div>
   );
 }
-
-// Monaco should be at least 3 rows high (19*3 px) but no more than 40 rows high (19*40 px).
-function getEditorStyle(input = ''): string {
-  return Math.min(Math.max(input?.split('\n').length * 20, 57), 760) + 'px';
-}
diff --git a/libs/designer-ui/src/lib/peek/peek.less b/libs/designer-ui/src/lib/peek/peek.less
@@ -1,15 +1,6 @@
 @import (reference) '../variables.less';
 
 .msla-peek {
-  padding-top: 10px;
-  .msla-peek-json {
-    border: 1px solid @defaultBorderColor;
-    text-align: left;
-  }
-}
-
-.msla-tab-component-container {
-  .msla-card-config-button-container.msla-code-view-done-button {
-    display: none;
-  }
+	height: 99%; // For some reason 100% causes a scrollbar to appear
+	border: 1px solid @defaultBorderColor;
 }
diff --git a/libs/designer-ui/src/lib/settings/settings.less b/libs/designer-ui/src/lib/settings/settings.less
@@ -49,30 +49,12 @@
   .msla-setting-section-content {
     width: 100%;
     height: auto;
+		margin-bottom: 8px;
 
     .msla-setting-section-header {
-      display: flex;
-      width: 100%;
-      vertical-align: middle;
-      border: none;
-
-      .msla-setting-section-header-icon {
-        padding-left: 10px;
-        padding-top: 12px;
-        padding-bottom: 12px;
-        width: 20px;
-      }
-
-      .msla-setting-section-header-text {
-        border: none;
-        text-align: left;
-        font-size: 14px;
-        font-weight: 600;
-        font-family: @font-family;
-        min-width: 80%;
-        line-height: 40px;
-        padding-left: 10px;
-      }
+      width: inherit;
+			justify-content: flex-start;
+			padding: 8px;
     }
 
     .msla-setting-section-dropdown {
@@ -81,17 +63,10 @@
     }
 
     .msla-setting-section-settings {
-      margin-top: 10px;
-      margin-bottom: -10px;
-    }
-
-    .msla-setting-section-setting {
-      margin-left: 44px;
-      margin-bottom: 8px;
-    }
-
-    .msla-setting-section-run-after-setting {
-      margin-left: 44px;
+			padding: 16px 0px 16px 36px;
+      display: flex;
+			flex-direction: column;
+			gap: 8px;
     }
 
     .msla-setting-section-row {
@@ -108,11 +83,8 @@
       color: var(--colorNeutralForeground3);
     }
 
-    .msla-setting-section-separator {
-      padding: 0px;
-      width: 100%;
-      display: inline-block;
-      color: #6b6b6b;
+    .msla-setting-section-divider {
+      margin-top: 8px;
     }
 
     .msla-setting-label-container {
@@ -165,10 +137,6 @@
   }
 }
 
-.msla-card-section-description {
-  margin-bottom: 5px;
-}
-
 .msla-trigger-condition-expression {
   display: inherit;
   margin-left: 12px;
@@ -187,8 +155,6 @@
 .msla-setting-section-expression-field {
   display: flex;
   flex-wrap: wrap;
-  margin-left: 48px;
-  margin-bottom: 5px;
 
   .msla-setting-label-container {
     display: flex;
@@ -232,29 +198,3 @@
     display: inline-block;
   }
 }
-
-.msla-theme-light {
-  .msla-setting-section-header {
-    background-color: white;
-    &:hover {
-      background-color: #f3f3f3;
-      cursor: pointer;
-    }
-    &:active {
-      background-color: #e9e9e9;
-    }
-  }
-}
-
-.msla-theme-dark {
-  .msla-setting-section-header {
-    background-color: @ms-color-secondaryBackground;
-    &:hover {
-      background-color: @ms-color-primaryBackground;
-      cursor: pointer;
-    }
-    &:active {
-      background-color: @ms-color-primaryBackgroundHover;
-    }
-  }
-}
diff --git a/libs/designer/src/lib/ui/panel/panelRoot.tsx b/libs/designer/src/lib/ui/panel/panelRoot.tsx
@@ -58,7 +58,7 @@ export const PanelRoot = (props: PanelRootProps): JSX.Element => {
       width,
       layerProps,
       panelLocation: customLocation ?? panelLocation ?? PanelLocation.Right,
-      isResizeable: isResizeable,
+      isResizeable,
     };
   }, [customPanelLocations, collapsed, dismissPanel, width, panelLocation, isResizeable, currentPanelMode]);