feat(compass-aggregations): update pipeline options to Leafy Green components COMPASS-6048 (#3438)

Author: Anemy

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-options/index.spec.tsx

@@ -17,7 +17,7 @@ describe('PipelineOptions', function () {
     container = screen.getByTestId('pipeline-options');
   });
 
-  it('renders legacy collation toolbar', function () {
-    expect(within(container).getByTestId('legacy-collation-toolbar')).to.exist;
+  it('renders the collation toolbar', function () {
+    expect(within(container).getByTestId('collation-toolbar')).to.exist;
   });
 });

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-options/pipeline-collation.spec.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { expect } from 'chai';
+import { Provider } from 'react-redux';
+import userEvent from '@testing-library/user-event';
+
+import configureStore from '../../../stores/store';
+import PipelineCollation from './pipeline-collation';
+
+describe('PipelineCollation', function () {
+  let store: ReturnType<typeof configureStore>;
+  beforeEach(function () {
+    store = configureStore();
+    render(
+      <Provider store={store}>
+        <PipelineCollation />
+      </Provider>
+    );
+  });
+
+  it('renders the collation toolbar', function () {
+    expect(screen.getByTestId('collation-toolbar')).to.exist;
+  });
+
+  it('updates the store when a new collation value is typed', function() {
+    userEvent.tab();
+    expect(screen.getByTestId('collation-string')).to.eq(document.activeElement);
+    userEvent.keyboard('8');
+    const storeState = store.getState();
+    expect(storeState.collationString.value).to.equal(8);
+  });
+
+  it('updates the store when a new max time ms value is typed', function() {
+    userEvent.tab();
+    userEvent.tab();
+    expect(screen.getByTestId('max-time-ms')).to.eq(document.activeElement);
+    userEvent.keyboard('5');
+    const storeState = store.getState();
+    expect(storeState.maxTimeMS).to.equal(5);
+  });
+});

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-options/pipeline-collation.tsx

@@ -1,43 +1,130 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { connect } from 'react-redux';
 import type { ConnectedProps } from 'react-redux';
+import { css, cx, Label, spacing, TextInput, uiColors } from '@mongodb-js/compass-components';
 
 import type { RootState } from '../../../modules';
 import { collationStringChanged } from '../../../modules/collation-string';
-import { openLink } from '../../../modules/link';
 import { maxTimeMSChanged } from '../../../modules/max-time-ms';
+import { DEFAULT_MAX_TIME_MS } from '../../../constants';
 
-import LegacyPipelineCollation from '../../pipeline/collation-toolbar';
+const pipelineOptionsContainerStyles = css({
+  paddingTop: spacing[1],
+  display: 'flex',
+  alignItems: 'center',
+});
+
+const labelStyles = css({
+  // A bit of vertical padding so users can click the label easier.
+  padding: `${spacing[2]}px 0`,
+  marginRight: spacing[2],
+});
+
+const collationInputStyles = css({
+  flexGrow: 1,
+  marginRight: spacing[2],
+});
+
+const inputStyles = css({
+  input: {
+    borderColor: 'transparent',
+  },
+});
+
+const inputWithErrorStyles = css({
+  input: {
+    borderColor: uiColors.red.base,
+  },
+});
+
+const collationLabelId = 'aggregations-collation-toolbar-input-label';
+const collationInputId = 'aggregations-collation-toolbar-input';
+
+const maxTimeMSLabelId = 'aggregations-max-time-ms-toolbar-input-label';
+const maxTimeMSInputId = 'aggregations-max-time-ms-toolbar-input';
 
 const PipelineCollation: React.FunctionComponent<PipelineCollationProps> = ({
-  collationString,
+  collationValue,
+  collationHasError,
   collationStringChanged,
-  maxTimeMS,
+  maxTimeMSValue,
   maxTimeMSChanged,
-  openLink,
 }) => {
-  const props = {
-    collationString,
-    collationStringChanged,
-    maxTimeMS,
-    maxTimeMSChanged,
-    openLink,
-  };
-  return <LegacyPipelineCollation {...props} />;
+  const onMaxTimeMSChanged = useCallback((evt: React.ChangeEvent<HTMLInputElement>) => {
+    if (maxTimeMSChanged) {
+      maxTimeMSChanged(parseInt(evt.currentTarget.value, 10));
+    }
+  }, [ maxTimeMSChanged]);
+
+  return (
+    <div
+      className={pipelineOptionsContainerStyles}
+      data-testid="collation-toolbar"
+    >
+      <Label
+        data-testid="collation-toolbar-input-label"
+        htmlFor={collationInputId}
+        id={collationLabelId}
+        className={labelStyles}
+      >
+        Collation
+      </Label>
+      <TextInput
+        aria-labelledby={collationLabelId}
+        id={collationInputId}
+        data-testid="collation-string"
+        className={cx(
+          collationInputStyles,
+          inputStyles,
+          collationHasError && inputWithErrorStyles
+        )}
+        type="text"
+        sizeVariant="small"
+        state={collationHasError ? 'error' : 'none'}
+        value={`${collationValue}`}
+        onChange={(evt: React.ChangeEvent<HTMLInputElement>) =>
+          collationStringChanged(evt.target.value)
+        }
+        placeholder="{ locale: 'simple' }"
+      />
+      <Label
+        data-testid="maxtimems-toolbar-input-label"
+        htmlFor={maxTimeMSInputId}
+        id={maxTimeMSLabelId}
+        className={labelStyles}
+      >
+        Max Time MS
+      </Label>
+      <TextInput
+        aria-labelledby={maxTimeMSLabelId}
+        id={maxTimeMSInputId}
+        data-testid="max-time-ms"
+        className={inputStyles}
+        placeholder={`${DEFAULT_MAX_TIME_MS}`}
+        type="number"
+        min="0"
+        sizeVariant="small"
+        value={`${maxTimeMSValue ?? ''}`}
+        onChange={onMaxTimeMSChanged}
+      />
+    </div>
+  );
 };
 
 const mapState = ({
   collationString,
-  settings: { maxTimeMS: defaultMaxTimeMS, isDirty },
+  settings: { maxTimeMS: defaultMaxTimeMSFromSettings, isDirty },
   maxTimeMS,
 }: RootState) => ({
-  collationString,
-  maxTimeMS: isDirty ? defaultMaxTimeMS : maxTimeMS,
+  collationValue: collationString.text,
+  collationHasError: !collationString.isValid,
+  maxTimeMSValue: maxTimeMS,
+  maxTimeMS: isDirty ? defaultMaxTimeMSFromSettings : maxTimeMS,
 });
+
 const mapDispatch = {
   collationStringChanged,
   maxTimeMSChanged,
-  openLink,
 };
 const connector = connect(mapState, mapDispatch);
 type PipelineCollationProps = ConnectedProps<typeof connector>;