chore(aggregation): final alignment with design for rebranding (#3894)

mcasimir · web-flow · commit 6b18b1fed2c5 · 2022-12-15T09:50:03.000+01:00
* chore(aggregation): remove empty state icon

* Add link for stages docs

* more improvements

* remove invalid test

* fix eslint
diff --git a/packages/compass-aggregations/src/components/add-stage/add-stage.jsx b/packages/compass-aggregations/src/components/add-stage/add-stage.jsx
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import { Button, Icon, css, spacing } from '@mongodb-js/compass-components';
+import { Button, Icon, css, spacing, Link } from '@mongodb-js/compass-components';
 
 import { addStage } from '../../modules/pipeline-builder/stage-editor';
 
@@ -13,6 +13,12 @@ const containerStyles = css({
   marginBottom: spacing[3]
 });
 
+const linkContainerStyles = css({
+  textAlign: 'center',
+  marginTop: spacing[3],
+  marginBottom: spacing[3],
+});
+
 export class AddStage extends PureComponent {
   static displayName = 'AddStageComponent';
 
@@ -35,6 +41,10 @@ export class AddStage extends PureComponent {
         <Button data-testid="add-stage" onClick={this.onClick} variant="primary" leftGlyph={<Icon glyph="Plus"></Icon>}>
           Add Stage
         </Button>
+
+        <div className={linkContainerStyles}>
+          <Link href='https://www.mongodb.com/docs/manual/reference/operator/aggregation-pipeline/'>Learn more about aggregation pipeline stages</Link>
+        </div>
       </div>
     );
   }
diff --git a/packages/compass-aggregations/src/components/pipeline-builder-input-documents.tsx b/packages/compass-aggregations/src/components/pipeline-builder-input-documents.tsx
@@ -77,13 +77,15 @@ function PipelineBuilderInputDocuments({
     toggleInputDocumentsCollapsed(!isExpanded);
   };
 
+  const expandTooltipText = isExpanded ? 'Collapse' : 'Expand';
+
   return (<KeylineCard className={cardStyles}>
     <div className={headerStyles}>
-      <IconButton onClick={toggleExpanded} aria-label={isExpanded ? 'Collapse' : 'Expand'}>
+      <IconButton onClick={toggleExpanded} title={expandTooltipText} aria-label={expandTooltipText}>
         <Icon glyph={isExpanded ? 'ChevronDown' : 'ChevronRight'} size="small"></Icon>
       </IconButton>
       <Body className={headerTextStyles}><b>{count} Document{count === 1 ? '' : 's'}</b> in the collection</Body>
-      <IconButton onClick={refreshInputDocuments} aria-label="Refresh">
+      <IconButton onClick={refreshInputDocuments} aria-label="Refresh" title="Refresh">
         <Icon glyph="Refresh" size="small" />
       </IconButton>
     </div>
diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/pipeline-extra-settings.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/pipeline-extra-settings.tsx
@@ -107,6 +107,7 @@ export const PipelineExtraSettings: React.FunctionComponent<
         </SegmentedControl>
       )}
       <IconButton
+        title="More Settings"
         aria-label="More Settings"
         onClick={() => onToggleSettings()}
         data-testid="pipeline-toolbar-settings-button"
diff --git a/packages/compass-aggregations/src/components/stage-editor-toolbar/add-after-stage.spec.jsx b/packages/compass-aggregations/src/components/stage-editor-toolbar/add-after-stage.spec.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { mount } from 'enzyme';
 import sinon from 'sinon';
 import { expect } from 'chai';
-import { Tooltip } from '@mongodb-js/compass-components';
 
 import { AddAfterStage } from './add-after-stage';
 
@@ -22,10 +21,6 @@ describe('AddAfterStage [Component]', function() {
     it('renders the icon', function() {
       expect(component.find('button').find('Icon').first()).to.have.prop('glyph', 'Plus');
     });
-
-    it('renders the tooltip', function() {
-      expect(component.find(Tooltip)).to.be.present();
-    });
   });
 
   context('when clicking on the button', function() {
diff --git a/packages/compass-aggregations/src/components/stage-editor-toolbar/add-after-stage.tsx b/packages/compass-aggregations/src/components/stage-editor-toolbar/add-after-stage.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { connect } from 'react-redux';
 
-import { IconButton, Icon, Tooltip } from '@mongodb-js/compass-components';
+import { IconButton, Icon } from '@mongodb-js/compass-components';
 
 import { addStage } from '../../modules/pipeline-builder/stage-editor';
 
@@ -26,20 +26,12 @@ export function AddAfterStage({
   }, [ onAddStageClick, index ]);
 
   return (
-    <Tooltip
-      trigger={({ children, ...props }) => (
-        <div {...props}>
-          <IconButton
-            data-testid="add-after-stage"
-            onClick={onStageAddedAfter}
-            aria-label="Add stage below"
-          ><Icon glyph="Plus" size="small" /></IconButton>
-          {children}
-        </div>
-      )}
-    >
-      Add stage below
-    </Tooltip>
+    <IconButton
+      data-testid="add-after-stage"
+      onClick={onStageAddedAfter}
+      title="Add stage below"
+      aria-label="Add stage below"
+    ><Icon glyph="Plus" size="small" /></IconButton>
   );
 }
 
diff --git a/packages/compass-aggregations/src/components/stage-editor-toolbar/stage-editor-toolbar.tsx b/packages/compass-aggregations/src/components/stage-editor-toolbar/stage-editor-toolbar.tsx
@@ -75,6 +75,10 @@ const toolbarStyles = css({
   cursor: 'grab'
 });
 
+const collapsedToolbarStyles = css({
+  borderBottomWidth: 0,
+});
+
 const toolbarStylesDark = css({
   borderBottomColor: palette.gray.dark2
 });
@@ -99,19 +103,21 @@ const rightStyles = css({
 });
 
 type StageEditorToolbarProps = {
-  stageOperator?: string | null,
-  index: number
-  isAutoPreviewing?: boolean,
-  hasSyntaxError?: boolean
-  hasServerError?: boolean
+  stageOperator?: string | null;
+  index: number;
+  isAutoPreviewing?: boolean;
+  hasSyntaxError?: boolean;
+  hasServerError?: boolean;
+  isCollapsed?: boolean;
 };
 
 function StageEditorToolbar({
   stageOperator,
   index,
   isAutoPreviewing,
   hasSyntaxError,
-  hasServerError
+  hasServerError,
+  isCollapsed,
 }: StageEditorToolbarProps) {
   const darkMode = useDarkMode();
 
@@ -122,7 +128,8 @@ function StageEditorToolbar({
         toolbarStyles,
         darkMode ? toolbarStylesDark : toolbarStylesLight,
         hasSyntaxError && toolbarWarningStyles,
-        hasServerError && toolbarErrorStyles
+        hasServerError && toolbarErrorStyles,
+        isCollapsed && collapsedToolbarStyles,
       )}>
       <StageCollapser index={index} />
       <StageOperatorSelect index={index} />
@@ -147,5 +154,6 @@ export default connect((state: RootState, ownProps: { index: number}) => {
     isAutoPreviewing: !!state.autoPreview,
     hasSyntaxError: hasSyntaxError(stage),
     hasServerError: !!stage.serverError,
+    isCollapsed: stage.collapsed,
   };
 })(StageEditorToolbar);
diff --git a/packages/compass-aggregations/src/components/stage-editor-toolbar/stage-operator-select.tsx b/packages/compass-aggregations/src/components/stage-editor-toolbar/stage-operator-select.tsx
@@ -19,7 +19,7 @@ const dropdownWidth = stageNameWidth + descriptionWidth;
 
 const inputHeight = spacing[4] - 2; // match other xs controls
 const comboboxStyles = css({
-  marginLeft: spacing[2],
+  marginLeft: spacing[1],
   marginRight: spacing[2],
   width: inputWidth,
   '& [role="combobox"]': {
diff --git a/packages/compass-aggregations/src/components/stage-editor-toolbar/toggle-stage.jsx b/packages/compass-aggregations/src/components/stage-editor-toolbar/toggle-stage.jsx
@@ -39,6 +39,7 @@ export class ToggleStage extends PureComponent {
         id="toggle-stage-button"
         checked={this.props.isEnabled}
         onChange={this.onStageToggled}
+        title={TOOLTIP}
         aria-label={TOOLTIP}
         size="xsmall"
         className={toggleStyle}
diff --git a/packages/compass-aggregations/src/components/stage-preview-toolbar/stage-preview-toolbar.tsx b/packages/compass-aggregations/src/components/stage-preview-toolbar/stage-preview-toolbar.tsx
@@ -22,6 +22,9 @@ const toolbarStyles = css({
   borderBottomStyle: 'solid',
 });
 
+const collapsedToolbarStyles = css({
+  borderBottomWidth: 0,
+});
 
 const toolbarStylesDark = css({
   borderBottomColor: palette.gray.dark2
@@ -103,6 +106,7 @@ type StagePreviewToolbarProps = {
   description?: string;
   link?: string;
   destination?: string;
+  isCollapsed?: boolean;
 };
 
 function StagePreviewToolbar({
@@ -113,7 +117,8 @@ function StagePreviewToolbar({
   previewSize,
   description,
   link,
-  destination
+  destination,
+  isCollapsed,
 }: StagePreviewToolbarProps) {
   const darkMode = useDarkMode();
 
@@ -123,7 +128,8 @@ function StagePreviewToolbar({
         toolbarStyles,
         darkMode ? toolbarStylesDark : toolbarStylesLight,
         hasSyntaxError && toolbarWarningStyles,
-        hasServerError && toolbarErrorStyles
+        hasServerError && toolbarErrorStyles,
+        isCollapsed && collapsedToolbarStyles,
       )}
     >
       {isEnabled ? (
@@ -162,6 +168,7 @@ export default connect((state: RootState, ownProps: { index: number }) => {
     hasServerError: !!stage.serverError,
     isEnabled: !stage.disabled,
     previewSize: stage.previewDocs?.length ?? 0,
+    isCollapsed: stage.collapsed,
     ...stageInfo
   };
 })(StagePreviewToolbar);
diff --git a/packages/compass-aggregations/src/components/stage-preview.tsx b/packages/compass-aggregations/src/components/stage-preview.tsx
@@ -194,16 +194,8 @@ function EmptyIcon() {
   const darkMode = useDarkMode();
 
   return (<div className={cx(emptyStyles, darkMode ? emptyStylesDark : emptyStylesLight)}>
-    <div>
-      <svg width="44" height="60" viewBox="0 0 44 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M21.9297 38.2988C23.4783 35.1247 27.7679 30.0989 32.5375 35.3879"/>
-        <path d="M1 10.7831V51.3133L9.61538 59M1 10.7831L35.4615 1L43 5.19277M1 10.7831L10.1538 15.6747M9.61538 59L43 45.7229C39.9487 34.0763 38 22.5957 43 5.19277M9.61538 59C5.5 34.9362 7.46154 20.3333 10.1538 15.6747M43 5.19277L10.1538 15.6747"/>
-        <path d="M19.7174 26.7113C19.7734 27.324 19.6719 27.8684 19.4884 28.2491C19.2999 28.6402 19.0726 28.7786 18.9038 28.7941C18.7349 28.8095 18.4862 28.7146 18.2299 28.3642C17.9804 28.0232 17.7818 27.5063 17.7257 26.8935C17.6696 26.2808 17.7711 25.7364 17.9546 25.3557C18.1432 24.9646 18.3704 24.8262 18.5393 24.8107C18.7082 24.7953 18.9568 24.8902 19.2132 25.2406C19.4627 25.5816 19.6613 26.0985 19.7174 26.7113Z" fill="#889397"/>
-        <path d="M32.481 23.5351C32.5371 24.1479 32.4356 24.6923 32.2521 25.0729C32.0636 25.464 31.8363 25.6025 31.6674 25.6179C31.4985 25.6334 31.2499 25.5385 30.9935 25.1881C30.744 24.847 30.5454 24.3301 30.4894 23.7174C30.4333 23.1046 30.5348 22.5602 30.7183 22.1796C30.9068 21.7885 31.1341 21.65 31.303 21.6346C31.4719 21.6191 31.7205 21.714 31.9769 22.0644C32.2264 22.4055 32.425 22.9224 32.481 23.5351Z" fill="#889397"/>
-      </svg>
-    </div>
     <Body>
-      <i data-testid="stage-preview-empty">No Preview Documents</i>
+      <span data-testid="stage-preview-empty">No Preview Documents</span>
     </Body>
   </div>);
 }
@@ -223,12 +215,11 @@ const documentContainerStyles = css({
   flex: 'none',
   flexShrink: 0,
   width: '384px',
-  minHeight: '170px',
   marginBottom: spacing[2]
 });
 
 const documentStyles = css({
-  flexBasis: '170px',
+  flexBasis: '164px',
   flexGrow: 1,
   flexShrink: 0,
   overflow: 'auto',
