chore(compass-aggregations): fully convert to TS + new plugin interface COMPASS-7478 (#5163)

Author: addaleax

package-lock.json

@@ -101,6 +101,14 @@ export class AtlasService {
     this.emitter.off(evt, listener);
     return this;
   }
+  removeListener<T extends keyof AtlasServiceEvents>(
+    evt: T,
+    listener: (...args: AtlasServiceEvents[T]) => void
+  ): this;
+  removeListener(evt: string, listener: (...args: any[]) => void): this {
+    this.emitter.off(evt, listener);
+    return this;
+  }
 
   emit<T extends keyof AtlasServiceEvents>(
     evt: T,

packages/atlas-service/src/renderer.ts

@@ -2,13 +2,12 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { expect } from 'chai';
 
-import Aggregations from '../aggregations';
+import Aggregations from '.';
 import configureStore from '../../../test/configure-store';
-import styles from './aggregations.module.less';
 import { Provider } from 'react-redux';
 
 describe('Aggregations [Component]', function () {
-  let component;
+  let component: ReturnType<typeof mount> | null;
 
   beforeEach(function () {
     component = mount(
@@ -23,11 +22,11 @@ describe('Aggregations [Component]', function () {
   });
 
   afterEach(function () {
-    component.unmount();
+    component?.unmount();
     component = null;
   });
 
   it('renders the correct root classname', function () {
-    expect(component.find(`.${styles.aggregations}`)).to.be.present();
+    expect(component?.find(`[data-testid="compass-aggregations"]`)).exist;
   });
 });

…ations/src/components/add-stage/index.js …ations/src/components/add-stage/index.tspackages/compass-aggregations/src/components/add-stage/index.js renamed to packages/compass-aggregations/src/components/add-stage/index.ts packages/compass-aggregations/src/components/add-stage/index.js renamed to packages/compass-aggregations/src/components/add-stage/index.ts

@@ -14,26 +14,35 @@ import {
   savingPipelineNameChanged,
   savingPipelineApply,
   savingPipelineCancel,
-  savingPipelineOpen,
 } from '../../modules/saving-pipeline';
 import { dismissViewError } from '../../modules/update-view';
 
-import styles from './aggregations.module.less';
+import type { RootState } from '../../modules';
+import type { PipelineProps } from '../pipeline/pipeline';
+import { css, palette } from '@mongodb-js/compass-components';
+
+const aggregationsStyles = css({
+  display: 'flex',
+  alignItems: 'flex-start',
+  backgroundColor: palette.gray.light3,
+  position: 'relative',
+  width: '100%',
+  zIndex: 0,
+  height: '100%',
+});
 
 /**
  * The core aggregations component.
  */
-class Aggregations extends Component {
+class Aggregations extends Component<PipelineProps> {
   static displayName = 'AggregationsComponent';
 
   /**
    * Render Aggregations component.
-   *
-   * @returns {React.Component} The rendered component.
    */
   render() {
     return (
-      <div className={styles.aggregations}>
+      <div className={aggregationsStyles} data-testid="compass-aggregations">
         <Pipeline {...this.props} />
       </div>
     );
@@ -47,7 +56,7 @@ class Aggregations extends Component {
  *
  * @returns {Object} The mapped properties.
  */
-const mapStateToProps = (state) => ({
+const mapStateToProps = (state: RootState) => ({
   namespace: state.namespace,
   name: state.name,
   collationString: state.collationString,
@@ -77,7 +86,6 @@ const MappedAggregations = connect(mapStateToProps, {
   savingPipelineNameChanged,
   savingPipelineApply,
   savingPipelineCancel,
-  savingPipelineOpen,
   dismissViewError,
 })(Aggregations);
 

packages/compass-aggregations/src/components/aggregations/aggregations.module.less

@@ -22,21 +22,21 @@ const renderFocusMode = () => {
 describe('FocusMode', function () {
   it('does not show modal when closed', function () {
     const store = renderFocusMode();
-    store.dispatch(disableFocusMode());
+    store.dispatch(disableFocusMode() as any);
     expect(() => {
       screen.getByTestId('focus-mode-modal');
     }).to.throw;
   });
 
   it('shows modal when open', function () {
     const store = renderFocusMode();
-    store.dispatch(enableFocusMode(0));
+    store.dispatch(enableFocusMode(0) as any);
     expect(screen.getByTestId('focus-mode-modal')).to.exist;
   });
 
   it('hides modal when close button is clicked', function () {
     const store = renderFocusMode();
-    store.dispatch(enableFocusMode(0));
+    store.dispatch(enableFocusMode(0) as any);
     screen.getByLabelText(/close modal/i).click();
 
     expect(() => {

…nents/aggregations/aggregations.spec.jsx …nents/aggregations/aggregations.spec.tsxpackages/compass-aggregations/src/components/aggregations/aggregations.spec.jsx renamed to packages/compass-aggregations/src/components/aggregations/aggregations.spec.tsx packages/compass-aggregations/src/components/aggregations/aggregations.spec.jsx renamed to packages/compass-aggregations/src/components/aggregations/aggregations.spec.tsx

@@ -80,15 +80,13 @@ const editorAreaExpanded = css({
 
 type FocusModeProps = {
   isModalOpen: boolean;
-  isAutoPreviewEnabled: boolean;
+  isAutoPreviewEnabled: boolean | undefined;
   onCloseModal: () => void;
 };
 
 const FocusModeContent = ({
   isAutoPreviewEnabled,
-}: {
-  isAutoPreviewEnabled: boolean;
-}) => {
+}: Pick<FocusModeProps, 'isAutoPreviewEnabled'>) => {
   const darkMode = useDarkMode();
   if (!isAutoPreviewEnabled) {
     return (