chore(aggregations): move 'modifying pipeline ...' banner to the pipe…

…line toolbar (#5179)
mongodb-js · Dec 1, 2023 · aa41922 · aa41922
1 parent 8fe70a4
commit aa41922
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 27 deletions.
diff --git a/packages/compass-aggregations/src/components/modify-source-banner/modify-source-banner.tsx b/packages/compass-aggregations/src/components/modify-source-banner/modify-source-banner.tsx
@@ -3,23 +3,25 @@ import PropTypes from 'prop-types';
 import { Badge, BadgeVariant, css } from '@mongodb-js/compass-components';
 
 const modifySourceBannerStyles = css({
-  textAlign: 'center',
-  margin: '5px auto',
-  marginTop: '20px',
-  zIndex: 500,
+  display: 'inline-block',
+  minWidth: 0,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
 });
 
 /**
  * The blue banner displayed when modifying a source pipeline.
  */
-const ModifySourceBanner = (props: { editViewName: React.ReactNode }) => {
+const ModifySourceBanner = (props: { editViewName: string }) => {
+  const bannerText = `Modifying pipeline backing "${props.editViewName}"`;
   return (
     <Badge
       className={modifySourceBannerStyles}
       variant={BadgeVariant.Blue}
       data-testid="modify-source-banner"
+      title={bannerText}
     >
-      Modifying pipeline backing &quot;{props.editViewName}&quot;
+      {bannerText}
     </Badge>
   );
 };

diff --git a/...gations/src/components/pipeline-builder-workspace/pipeline-builder-ui-workspace/index.tsx b/...gations/src/components/pipeline-builder-workspace/pipeline-builder-ui-workspace/index.tsx
@@ -10,7 +10,6 @@ import {
   addStage,
   moveStage,
 } from '../../../modules/pipeline-builder/stage-editor';
-import ModifySourceBanner from '../../modify-source-banner';
 import AggregationSidePanel from '../../aggregation-side-panel';
 import { addWizard } from '../../../modules/pipeline-builder/stage-editor';
 import PipelineBuilderInputDocuments from '../../pipeline-builder-input-documents';
@@ -37,7 +36,6 @@ const pipelineWorkspaceStyles = css({
 
 export type PipelineBuilderUIWorkspaceProps = {
   stagesIdAndType: StageIdAndType[];
-  editViewName?: string | null;
   isSidePanelOpen: boolean;
   onStageMoveEnd: (from: number, to: number) => void;
   onStageAddAfterEnd: (after?: number) => void;
@@ -52,7 +50,6 @@ export const PipelineBuilderUIWorkspace: React.FunctionComponent<
   PipelineBuilderUIWorkspaceProps
 > = ({
   stagesIdAndType,
-  editViewName,
   isSidePanelOpen,
   onStageMoveEnd,
   onStageAddAfterEnd,
@@ -69,7 +66,6 @@ export const PipelineBuilderUIWorkspace: React.FunctionComponent<
         className={pipelineWorkspaceContainerStyles}
       >
         <div className={pipelineWorkspaceStyles}>
-          {editViewName && <ModifySourceBanner editViewName={editViewName} />}
           <PipelineBuilderInputDocuments />
           <SortableList
             stagesIdAndType={stagesIdAndType}
@@ -106,7 +102,6 @@ export const PipelineBuilderUIWorkspace: React.FunctionComponent<
 const mapState = (state: RootState) => {
   return {
     stagesIdAndType: state.pipelineBuilder.stageEditor.stagesIdAndType,
-    editViewName: state.editViewName,
     isSidePanelOpen: state.sidePanel.isPanelOpen,
   };
 };

diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/index.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/index.tsx
@@ -10,29 +10,30 @@ import { getIsPipelineInvalidFromBuilderState } from '../../../modules/pipeline-
 import { confirmNewPipeline } from '../../../modules/is-new-pipeline-confirm';
 import { usePreference } from 'compass-preferences-model';
 import { hiddenOnNarrowPipelineToolbarStyles } from '../pipeline-toolbar-container';
+import ModifySourceBanner from '../../modify-source-banner';
 
 const containerStyles = css({
-  display: 'grid',
+  display: 'flex',
   gap: spacing[2],
-  gridTemplateAreas: '"settings extraSettings"',
-  gridTemplateColumns: '1fr auto',
   alignItems: 'center',
+  justifyContent: 'space-between',
   whiteSpace: 'nowrap',
 });
 
 const settingsStyles = css({
   display: 'flex',
   gap: spacing[2],
   alignItems: 'center',
+  flex: 'none',
 });
 
 const extraSettingsStyles = css({
-  gridArea: 'extraSettings',
   display: 'flex',
+  flex: 'none',
 });
 
 type PipelineSettingsProps = {
-  isEditingViewPipeline?: boolean;
+  editViewName?: string;
   isExportToLanguageEnabled?: boolean;
   onExportToLanguage: () => void;
   onCreateNewPipeline: () => void;
@@ -41,7 +42,7 @@ type PipelineSettingsProps = {
 export const PipelineSettings: React.FunctionComponent<
   PipelineSettingsProps
 > = ({
-  isEditingViewPipeline = false,
+  editViewName,
   isExportToLanguageEnabled,
   onExportToLanguage,
   onCreateNewPipeline,
@@ -51,8 +52,8 @@ export const PipelineSettings: React.FunctionComponent<
     React
   );
   const isSavePipelineDisplayed =
-    !isEditingViewPipeline && enableSavedAggregationsQueries;
-  const isCreatePipelineDisplayed = !isEditingViewPipeline;
+    !editViewName && enableSavedAggregationsQueries;
+  const isCreatePipelineDisplayed = !editViewName;
 
   return (
     <div className={containerStyles} data-testid="pipeline-settings">
@@ -87,6 +88,9 @@ export const PipelineSettings: React.FunctionComponent<
           </span>
         </Button>
       </div>
+      {editViewName && (
+        <ModifySourceBanner editViewName={editViewName}></ModifySourceBanner>
+      )}
       <div className={extraSettingsStyles}>
         <PipelineExtraSettings />
       </div>
@@ -98,7 +102,7 @@ export default connect(
   (state: RootState) => {
     const hasSyntaxErrors = getIsPipelineInvalidFromBuilderState(state, false);
     return {
-      isEditingViewPipeline: !!state.editViewName,
+      editViewName: state.editViewName ?? undefined,
       isExportToLanguageEnabled: !hasSyntaxErrors,
     };
   },

diff --git a/...ggregations/src/components/pipeline-toolbar/pipeline-settings/pipeline-extra-settings.tsx b/...ggregations/src/components/pipeline-toolbar/pipeline-settings/pipeline-extra-settings.tsx
@@ -19,7 +19,10 @@ import type { PipelineMode } from '../../../modules/pipeline-builder/pipeline-mo
 import { getIsPipelineInvalidFromBuilderState } from '../../../modules/pipeline-builder/builder-helpers';
 import { toggleSidePanel } from '../../../modules/side-panel';
 import { usePreference } from 'compass-preferences-model';
-import { hiddenOnNarrowPipelineToolbarStyles } from '../pipeline-toolbar-container';
+import {
+  hiddenOnNarrowPipelineToolbarStyles,
+  smallPipelineToolbar,
+} from '../pipeline-toolbar-container';
 
 const containerStyles = css({
   display: 'flex',
@@ -39,6 +42,17 @@ const toggleLabelStyles = css({
   textTransform: 'uppercase',
 });
 
+const segmentControlStyles = css({
+  [smallPipelineToolbar()]: {
+    // NB: leafygreen renders labels near icons, that's the most "stable" way of
+    // targeting it so we can hide it on smaller toolbar sizes. This can still
+    // break if they drastically change how segmented control is rendered
+    '& [data-segmented-control-icon] + span': {
+      display: 'none',
+    },
+  },
+});
+
 const toggleStageWizardStyles = css({ margin: 'auto' });
 
 type PipelineExtraSettingsProps = {
@@ -99,15 +113,17 @@ export const PipelineExtraSettings: React.FunctionComponent<
           disabled={isPipelineModeDisabled}
           data-testid="pipeline-builder-toggle-builder-ui"
           value="builder-ui"
-          glyph={<Icon glyph="CurlyBraces"></Icon>}
+          glyph={<Icon data-segmented-control-icon glyph="CurlyBraces"></Icon>}
+          className={segmentControlStyles}
         >
           Stages
         </SegmentedControlOption>
         <SegmentedControlOption
           disabled={isPipelineModeDisabled}
           data-testid="pipeline-builder-toggle-as-text"
           value="as-text"
-          glyph={<Icon glyph="Code"></Icon>}
+          glyph={<Icon data-segmented-control-icon glyph="Code"></Icon>}
+          className={segmentControlStyles}
         >
           Text
         </SegmentedControlOption>

diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-toolbar-container.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-toolbar-container.tsx
@@ -19,11 +19,14 @@ const containerDisplayStyles = css({
   `,
 });
 
+export const smallPipelineToolbar = () => {
+  return `@container ${WorkspaceContainer.toolbarContainerQueryName} (width < 900px)`;
+};
+
 export const hiddenOnNarrowPipelineToolbarStyles = css({
-  [`@container ${WorkspaceContainer.toolbarContainerQueryName} (width < 900px)`]:
-    {
-      display: 'none',
-    },
+  [smallPipelineToolbar()]: {
+    display: 'none',
+  },
 });
 
 export const PipelineToolbarContainer = ({