feat: replace partial filter expression input with editor COMPASS-6017, COMPASS-6034

packages/compass-components/src/components/collapsible-field-set.tsx

@@ -16,6 +16,10 @@ const collapsibleFieldsetStyles = css({
   },
 });
 
+const checkboxStyles = css({
+  padding: `${spacing[2]}px 0`,
+});
+
 export type CollapsibleFieldSetProps = {
   darkMode?: boolean;
   dataTestId?: string;
@@ -73,6 +77,7 @@ const UnthemedCollapsibleFieldSet = ({
         checked={toggled}
         id={labelId}
         darkMode={darkMode}
+        className={checkboxStyles}
       />
       {toggled && <fieldset>{children}</fieldset>}
     </fieldset>

packages/compass-indexes/src/components/create-index-actions/create-index-actions.spec.jsx

@@ -0,0 +1,224 @@
+import React from 'react';
+import { expect } from 'chai';
+import sinon from 'sinon';
+
+import {
+  render,
+  screen,
+  cleanup,
+  fireEvent,
+  within,
+} from '@testing-library/react';
+
+import CreateIndexActions from '../create-index-actions';
+
+describe('CreateIndexActions Component', function () {
+  let toggleIsVisibleSpy;
+  let clearErrorSpy;
+  let createIndexSpy;
+  let resetFormSpy;
+
+  beforeEach(function () {
+    toggleIsVisibleSpy = sinon.spy();
+    clearErrorSpy = sinon.spy();
+    createIndexSpy = sinon.spy();
+    resetFormSpy = sinon.spy();
+  });
+
+  afterEach(function () {
+    toggleIsVisibleSpy = null;
+    clearErrorSpy = null;
+    createIndexSpy = null;
+    resetFormSpy = null;
+
+    cleanup();
+  });
+
+  it('renders a cancel button', function () {
+    render(
+      <CreateIndexActions
+        toggleIsVisible={toggleIsVisibleSpy}
+        resetForm={resetFormSpy}
+        error={null}
+        clearError={clearErrorSpy}
+        inProgress={false}
+        createIndex={createIndexSpy}
+      />
+    );
+
+    const button = screen.getByTestId('create-index-actions-cancel-button');
+    expect(button.textContent).to.be.equal('Cancel');
+  });
+
+  context('onCancel', function () {
+    it('calls the toggleIsVisible function', function () {
+      render(
+        <CreateIndexActions
+          toggleIsVisible={toggleIsVisibleSpy}
+          resetForm={resetFormSpy}
+          error={null}
+          clearError={clearErrorSpy}
+          inProgress={false}
+          createIndex={createIndexSpy}
+        />
+      );
+
+      const button = screen.getByTestId('create-index-actions-cancel-button');
+      fireEvent.click(button);
+      expect(toggleIsVisibleSpy).to.have.been.calledWith(false);
+    });
+
+    it('calls the resetForm function', function () {
+      render(
+        <CreateIndexActions
+          toggleIsVisible={toggleIsVisibleSpy}
+          resetForm={resetFormSpy}
+          error={null}
+          clearError={clearErrorSpy}
+          inProgress={false}
+          createIndex={createIndexSpy}
+        />
+      );
+
+      const button = screen.getByTestId('create-index-actions-cancel-button');
+      fireEvent.click(button);
+      expect(resetFormSpy).to.have.been.calledOnce;
+    });
+  });
+
+  context('onConfirm', function () {
+    it('calls the createIndex function', function () {
+      render(
+        <CreateIndexActions
+          toggleIsVisible={toggleIsVisibleSpy}
+          resetForm={resetFormSpy}
+          error={null}
+          clearError={clearErrorSpy}
+          inProgress={false}
+          createIndex={createIndexSpy}
+        />
+      );
+
+      const button = screen.getByTestId(
+        'create-index-actions-create-index-button'
+      );
+      fireEvent.click(button);
+      expect(createIndexSpy).to.have.been.calledOnce;
+    });
+  });
+
+  it('renders a create index button', function () {
+    render(
+      <CreateIndexActions
+        toggleIsVisible={toggleIsVisibleSpy}
+        resetForm={resetFormSpy}
+        error={null}
+        clearError={clearErrorSpy}
+        inProgress={false}
+        createIndex={createIndexSpy}
+      />
+    );
+
+    const button = screen.getByTestId(
+      'create-index-actions-create-index-button'
+    );
+    expect(button.textContent).to.be.equal('Create Index');
+  });
+
+  context('with error', function () {
+    it('renders error banner', function () {
+      render(
+        <CreateIndexActions
+          toggleIsVisible={toggleIsVisibleSpy}
+          resetForm={resetFormSpy}
+          error={'Some error happened!'}
+          clearError={clearErrorSpy}
+          inProgress={false}
+          createIndex={createIndexSpy}
+        />
+      );
+
+      const errorBanner = screen.getByTestId(
+        'create-index-actions-error-banner-wrapper'
+      );
+      expect(errorBanner).to.contain.text('Some error happened!');
+    });
+
+    it('closes error banner', function () {
+      render(
+        <CreateIndexActions
+          toggleIsVisible={toggleIsVisibleSpy}
+          resetForm={resetFormSpy}
+          error={'Some error happened!'}
+          clearError={clearErrorSpy}
+          inProgress={false}
+          createIndex={createIndexSpy}
+        />
+      );
+
+      const errorBanner = screen.getByTestId(
+        'create-index-actions-error-banner-wrapper'
+      );
+      const closeIcon = within(errorBanner).getByLabelText('X Icon');
+
+      fireEvent.click(closeIcon);
+      expect(clearErrorSpy).to.have.been.calledOnce;
+    });
+
+    it('does not render in progress banner', function () {
+      render(
+        <CreateIndexActions
+          toggleIsVisible={toggleIsVisibleSpy}
+          resetForm={resetFormSpy}
+          error={'Some error happened!'}
+          clearError={clearErrorSpy}
+          inProgress={true}
+          createIndex={createIndexSpy}
+        />
+      );
+
+      const inProgressBanner = screen.queryByTestId(
+        'create-index-actions-in-progress-banner-wrapper'
+      );
+      expect(inProgressBanner).to.not.exist;
+    });
+  });
+
+  context('without error', function () {
+    it('does not render error banner', function () {
+      render(
+        <CreateIndexActions
+          toggleIsVisible={toggleIsVisibleSpy}
+          resetForm={resetFormSpy}
+          error={null}
+          clearError={clearErrorSpy}
+          inProgress={false}
+          createIndex={createIndexSpy}
+        />
+      );
+
+      const errorBanner = screen.queryByTestId(
+        'create-index-actions-error-banner-wrapper'
+      );
+      expect(errorBanner).to.not.exist;
+    });
+
+    it('renders in progress banner', function () {
+      render(
+        <CreateIndexActions
+          toggleIsVisible={toggleIsVisibleSpy}
+          resetForm={resetFormSpy}
+          error={null}
+          clearError={clearErrorSpy}
+          inProgress={true}
+          createIndex={createIndexSpy}
+        />
+      );
+
+      const inProgressBanner = screen.getByTestId(
+        'create-index-actions-in-progress-banner-wrapper'
+      );
+      expect(inProgressBanner).to.contain.text('Create in Progress');
+    });
+  });
+});

packages/compass-indexes/src/components/create-index-actions/create-index-actions.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import {
+  css,
+  withTheme,
+  Banner,
+  spacing,
+  Button,
+} from '@mongodb-js/compass-components';
+
+const bannerStyles = css({
+  margin: `${spacing[3]}px 0`,
+});
+
+const createIndexButtonStyles = css({
+  marginLeft: spacing[2],
+});
+
+const modalFooterActionsStyles = css({
+  display: 'flex',
+  justifyContent: 'flex-end',
+  gap: spacing[2],
+});
+
+/**
+ * Create index actions.
+ */
+function CreateIndexActions({
+  darkMode,
+  toggleIsVisible,
+  resetForm,
+  error,
+  clearError,
+  inProgress,
+  createIndex,
+}: {
+  darkMode?: boolean;
+  toggleIsVisible: (isVisible: boolean) => void;
+  resetForm: () => void;
+  error: string | null;
+  clearError: () => void;
+  inProgress: boolean;
+  createIndex: () => void;
+}) {
+  const renderError = () => {
+    if (!error) {
+      return;
+    }
+
+    return (
+      <div data-testid="create-index-actions-error-banner-wrapper">
+        <Banner
+          className={bannerStyles}
+          variant="danger"
+          dismissible
+          onClose={clearError}
+        >
+          {error}
+        </Banner>
+      </div>
+    );
+  };
+
+  const renderInProgress = () => {
+    if (error || !inProgress) {
+      return;
+    }
+
+    return (
+      <div data-testid="create-index-actions-in-progress-banner-wrapper">
+        <Banner className={bannerStyles} variant="info">
+          Create in Progress
+        </Banner>
+      </div>
+    );
+  };
+
+  const onCancel = () => {
+    toggleIsVisible(false);
+    resetForm();
+  };
+
+  const onConfirm = () => {
+    createIndex();
+  };
+
+  return (
+    <>
+      <div>
+        {renderError()}
+        {renderInProgress()}
+      </div>
+      <div className={modalFooterActionsStyles}>
+        <Button
+          data-testid="create-index-actions-create-index-button"
+          onClick={onConfirm}
+          variant="primary"
+          className={createIndexButtonStyles}
+          darkMode={darkMode}
+        >
+          Create Index
+        </Button>
+        <Button
+          data-testid="create-index-actions-cancel-button"
+          darkMode={darkMode}
+          onClick={onCancel}
+        >
+          Cancel
+        </Button>
+      </div>
+    </>
+  );
+}
+
+export default withTheme(CreateIndexActions);

packages/compass-indexes/src/components/create-index-actions/index.ts

@@ -0,0 +1,3 @@
+import CreateIndexActions from './create-index-actions';
+
+export default CreateIndexActions;