chore(compass-aggregations): remove pipeline text from toolbar COMPASS-7742 (#5579)

mabaasit · web-flow · commit aecfc3ab136a · 2024-03-18T11:35:36.000+01:00
remove pipeline text
diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/index.spec.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/index.spec.tsx
@@ -40,8 +40,6 @@ describe('PipelineToolbar', function () {
       const header = within(toolbar).getByTestId('pipeline-header');
       expect(header).to.exist;
 
-      expect(within(header).getByText('Pipeline'), 'shows pipeline text').to
-        .exist;
       expect(
         within(header).getByTestId('pipeline-toolbar-open-pipelines-button'),
         'shows open saved pipelines button'
diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/index.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/index.tsx
@@ -23,7 +23,7 @@ const headerAndOptionsRowStyles = css({
   border: '1px solid',
   borderRadius: '6px',
   borderColor: palette.gray.light2,
-  padding: `${spacing[2]}px ${spacing[2]}px ${spacing[2]}px ${spacing[3]}px`,
+  padding: spacing[2],
   background: palette.white,
 });
 
diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/index.spec.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/index.spec.tsx
@@ -33,10 +33,6 @@ describe('PipelineHeader', function () {
     container = screen.getByTestId('pipeline-header');
   });
 
-  it('renders pipeline text heading', function () {
-    expect(within(container).getByText('Pipeline')).to.exist;
-  });
-
   it('open saved pipelines button', async function () {
     const button = within(container).getByTestId(
       'pipeline-toolbar-open-pipelines-button'
diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/index.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/index.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import {
-  Body,
   Icon,
   css,
   cx,
@@ -22,12 +21,6 @@ const containerStyles = css({
   alignItems: 'center',
 });
 
-const pipelineTextAndOpenStyles = css({
-  display: 'flex',
-  gap: spacing[2],
-  alignItems: 'center',
-});
-
 const openSavedPipelinesStyles = cx(
   css({
     border: 'none',
@@ -119,29 +112,23 @@ export const PipelineHeader: React.FunctionComponent<PipelineHeaderProps> = ({
 }) => {
   const isSavingAggregationsEnabled = !!usePipelineStorage();
   return (
-    <div>
-      <div className={containerStyles} data-testid="pipeline-header">
-        <div
-          data-testid="saved-pipelines-popover"
-          className={pipelineTextAndOpenStyles}
-        >
-          <Body weight="medium">Pipeline</Body>
-          {isOpenPipelineVisible && isSavingAggregationsEnabled && (
-            <SavedPipelinesButton></SavedPipelinesButton>
-          )}
-        </div>
-        <div className={pipelineStagesStyles}>
-          <PipelineStages />
-        </div>
-        <div className={pipelineActionStyles}>
-          <PipelineActions
-            onToggleOptions={onToggleOptions}
-            isOptionsVisible={isOptionsVisible}
-            showRunButton={showRunButton}
-            showExportButton={showExportButton}
-            showExplainButton={showExplainButton}
-          />
-        </div>
+    <div className={containerStyles} data-testid="pipeline-header">
+      <div data-testid="saved-pipelines-popover">
+        {isOpenPipelineVisible && isSavingAggregationsEnabled && (
+          <SavedPipelinesButton></SavedPipelinesButton>
+        )}
+      </div>
+      <div className={pipelineStagesStyles}>
+        <PipelineStages />
+      </div>
+      <div className={pipelineActionStyles}>
+        <PipelineActions
+          onToggleOptions={onToggleOptions}
+          isOptionsVisible={isOptionsVisible}
+          showRunButton={showRunButton}
+          showExportButton={showExportButton}
+          showExplainButton={showExplainButton}
+        />
       </div>
     </div>
   );
diff --git a/packages/compass-query-bar/src/components/query-bar.tsx b/packages/compass-query-bar/src/components/query-bar.tsx
@@ -67,7 +67,6 @@ const queryBarFirstRowStyles = css({
   // to account for their height individually.
   alignItems: 'flex-start',
   gap: spacing[2],
-  paddingLeft: spacing[1],
 });
 
 const moreOptionsContainerStyles = css({
@@ -101,6 +100,9 @@ const queryOptionsContainerStyles = css({
 
 const queryAIContainerStyles = css({
   margin: `0px ${spacing[2]}px`,
+});
+
+const visibleAIContainerStyles = css({
   marginTop: '2px',
 });
 
@@ -312,7 +314,12 @@ export const QueryBar: React.FunctionComponent<QueryBarProps> = ({
           </div>
         )}
       {isAIFeatureEnabled && (
-        <div className={queryAIContainerStyles}>
+        <div
+          className={cx(
+            queryAIContainerStyles,
+            isAIInputVisible && visibleAIContainerStyles
+          )}
+        >
           <QueryAI
             onClose={() => {
               onHideAIInputClick?.();
