feat: Create actual indexes and fix up state + error logic CLOUDP-317945 (#6933)

* add index from index suggestions

* disable the create index button when data is not complete

* add disable show suggested index button logic

* disable covered queries button if there's no changes to fields

* adjusting error message and added analytics for error parsing

* finished adding error and segment event for covered queries

* fix lint issues for opening from nudge

* fix more typing and clear error when there's new changes

* more linting + error handling

* fixed initialQuery typing, wrapped validation inside useMemo, and added comments for cleaning

* fixed up typing more

* fixed index flow section test by wrapping it in provider

* changed document to use mongodb one

* added provider to create-index-form.spec.tsx too

* fix tests for create-index-actions.spec.tsx

* add typing for the spys

---------

Co-authored-by: Sergey Petushkov <[email protected]>

Author: rubydong

packages/compass-crud/src/stores/crud-store.ts

@@ -1852,7 +1852,7 @@ class CrudStoreImpl
 
   openCreateIndexModal() {
     this.localAppRegistry.emit('open-create-index-modal', {
-      query: EJSON.serialize(this.queryBar.getLastAppliedQuery('crud')),
+      query: EJSON.serialize(this.queryBar.getLastAppliedQuery('crud')?.filter),
     });
   }
 

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

@@ -8,13 +8,16 @@ import {
   userEvent,
   within,
 } from '@mongodb-js/testing-library-compass';
+import { setupStore } from '../../../test/setup-store';
+import { Provider } from 'react-redux';
 
-import CreateIndexActions from '../create-index-actions';
+import CreateIndexActions from '.';
 
 describe('CreateIndexActions Component', function () {
-  let clearErrorSpy;
-  let onCreateIndexClickSpy;
-  let closeCreateIndexModalSpy;
+  let clearErrorSpy: any;
+  let onCreateIndexClickSpy: any;
+  let closeCreateIndexModalSpy: any;
+  const store = setupStore();
 
   beforeEach(function () {
     clearErrorSpy = sinon.spy();
@@ -28,30 +31,29 @@ describe('CreateIndexActions Component', function () {
     closeCreateIndexModalSpy = null;
   });
 
-  it('renders a cancel button', function () {
+  const renderComponent = (error?: string) => {
     render(
-      <CreateIndexActions
-        error={null}
-        onErrorBannerCloseClick={clearErrorSpy}
-        onCreateIndexClick={onCreateIndexClickSpy}
-        onCancelCreateIndexClick={closeCreateIndexModalSpy}
-      />
+      <Provider store={store}>
+        <CreateIndexActions
+          error={error || null}
+          onErrorBannerCloseClick={clearErrorSpy}
+          onCreateIndexClick={onCreateIndexClickSpy}
+          onCancelCreateIndexClick={closeCreateIndexModalSpy}
+          showIndexesGuidanceVariant={false}
+        />
+      </Provider>
     );
+  };
+  it('renders a cancel button', function () {
+    renderComponent();
 
     const button = screen.getByTestId('create-index-actions-cancel-button');
     expect(button.textContent).to.be.equal('Cancel');
   });
 
   context('onCancel', function () {
     it('calls the closeCreateIndexModal function', function () {
-      render(
-        <CreateIndexActions
-          error={null}
-          onErrorBannerCloseClick={clearErrorSpy}
-          onCreateIndexClick={onCreateIndexClickSpy}
-          onCancelCreateIndexClick={closeCreateIndexModalSpy}
-        />
-      );
+      renderComponent();
 
       const button = screen.getByTestId('create-index-actions-cancel-button');
       userEvent.click(button);
@@ -61,14 +63,7 @@ describe('CreateIndexActions Component', function () {
 
   context('onConfirm', function () {
     it('calls the onCreateIndexClick function', function () {
-      render(
-        <CreateIndexActions
-          error={null}
-          onErrorBannerCloseClick={clearErrorSpy}
-          onCreateIndexClick={onCreateIndexClickSpy}
-          onCancelCreateIndexClick={closeCreateIndexModalSpy}
-        />
-      );
+      renderComponent();
 
       const button = screen.getByTestId(
         'create-index-actions-create-index-button'
@@ -79,15 +74,7 @@ describe('CreateIndexActions Component', function () {
   });
 
   it('renders a create index button', function () {
-    render(
-      <CreateIndexActions
-        error={null}
-        onErrorBannerCloseClick={clearErrorSpy}
-        onCreateIndexClick={onCreateIndexClickSpy}
-        onCancelCreateIndexClick={closeCreateIndexModalSpy}
-      />
-    );
-
+    renderComponent();
     const button = screen.getByTestId(
       'create-index-actions-create-index-button'
     );
@@ -96,14 +83,7 @@ describe('CreateIndexActions Component', function () {
 
   context('with error', function () {
     it('renders error banner', function () {
-      render(
-        <CreateIndexActions
-          error={'Some error happened!'}
-          onErrorBannerCloseClick={clearErrorSpy}
-          onCreateIndexClick={onCreateIndexClickSpy}
-          onCancelCreateIndexClick={closeCreateIndexModalSpy}
-        />
-      );
+      renderComponent('Some error happened!');
 
       const errorBanner = screen.getByTestId(
         'create-index-actions-error-banner-wrapper'
@@ -112,14 +92,7 @@ describe('CreateIndexActions Component', function () {
     });
 
     it('closes error banner', function () {
-      render(
-        <CreateIndexActions
-          error={'Some error happened!'}
-          onErrorBannerCloseClick={clearErrorSpy}
-          onCreateIndexClick={onCreateIndexClickSpy}
-          onCancelCreateIndexClick={closeCreateIndexModalSpy}
-        />
-      );
+      renderComponent('Some error happened!');
 
       const errorBanner = screen.getByTestId(
         'create-index-actions-error-banner-wrapper'
@@ -133,14 +106,7 @@ describe('CreateIndexActions Component', function () {
 
   context('without error', function () {
     it('does not render error banner', function () {
-      render(
-        <CreateIndexActions
-          error={null}
-          onErrorBannerCloseClick={clearErrorSpy}
-          onCreateIndexClick={onCreateIndexClickSpy}
-          onCancelCreateIndexClick={closeCreateIndexModalSpy}
-        />
-      );
+      renderComponent();
 
       const errorBanner = screen.queryByTestId(
         'create-index-actions-error-banner-wrapper'

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

@@ -1,5 +1,9 @@
 import React from 'react';
 import { css, Banner, spacing, Button } from '@mongodb-js/compass-components';
+import { connect } from 'react-redux';
+import { areAllFieldsFilledIn } from '../../utils/create-index-modal-validation';
+import type { Field, Tab } from '../../modules/create-index';
+import type { RootState } from '../../modules';
 
 const containerStyles = css({
   display: 'flex',
@@ -27,12 +31,37 @@ function CreateIndexActions({
   onErrorBannerCloseClick,
   onCreateIndexClick,
   onCancelCreateIndexClick,
+  fields,
+  currentTab,
+  showIndexesGuidanceVariant,
+  indexSuggestions,
 }: {
   error: string | null;
   onErrorBannerCloseClick: () => void;
   onCreateIndexClick: () => void;
   onCancelCreateIndexClick: () => void;
+  fields: Field[];
+  currentTab: Tab;
+  showIndexesGuidanceVariant: boolean;
+  indexSuggestions: Record<string, number> | null;
 }) {
+  let isCreateIndexButtonDisabled = false;
+
+  if (showIndexesGuidanceVariant) {
+    // Disable create index button if the user is in Query Flow and has no suggestions
+    if (currentTab === 'QueryFlow') {
+      if (indexSuggestions === null) {
+        isCreateIndexButtonDisabled = true;
+      }
+    }
+    // Or if they are in the Index Flow but have not completed the fields
+    else {
+      if (!areAllFieldsFilledIn(fields)) {
+        isCreateIndexButtonDisabled = true;
+      }
+    }
+  }
+
   return (
     <div className={containerStyles}>
       {error && (
@@ -61,11 +90,21 @@ function CreateIndexActions({
         onClick={onCreateIndexClick}
         variant="primary"
         className={createIndexButtonStyles}
+        disabled={isCreateIndexButtonDisabled}
       >
         Create Index
       </Button>
     </div>
   );
 }
 
-export default CreateIndexActions;
+const mapState = ({ createIndex }: RootState) => {
+  const { fields, currentTab, indexSuggestions } = createIndex;
+  return {
+    fields,
+    currentTab,
+    indexSuggestions,
+  };
+};
+
+export default connect(mapState)(CreateIndexActions);

packages/compass-indexes/src/components/create-index-form/create-index-form.spec.tsx

@@ -5,10 +5,13 @@ import type { Field } from '../../modules/create-index';
 import { expect } from 'chai';
 import type { SinonSpy } from 'sinon';
 
+import { setupStore } from '../../../test/setup-store';
 import sinon from 'sinon';
+import { Provider } from 'react-redux';
 
 describe('CreateIndexForm', () => {
   let onTabClickSpy: SinonSpy;
+  const store = setupStore();
 
   beforeEach(function () {
     onTabClickSpy = sinon.spy();
@@ -20,24 +23,26 @@ describe('CreateIndexForm', () => {
     showIndexesGuidanceVariant?: boolean;
   }) => {
     render(
-      <CreateIndexForm
-        namespace="testNamespace"
-        fields={
-          [
-            { name: 'field1', type: 'string' },
-            { name: 'field2', type: 'number' },
-          ] as Field[]
-        }
-        serverVersion="5.0.0"
-        currentTab="IndexFlow"
-        onSelectFieldNameClick={() => {}}
-        onSelectFieldTypeClick={() => {}}
-        onAddFieldClick={() => {}}
-        onRemoveFieldClick={() => {}}
-        onTabClick={onTabClickSpy}
-        showIndexesGuidanceVariant={showIndexesGuidanceVariant || false}
-        query={null}
-      />
+      <Provider store={store}>
+        <CreateIndexForm
+          namespace="testNamespace"
+          fields={
+            [
+              { name: 'field1', type: 'string' },
+              { name: 'field2', type: 'number' },
+            ] as Field[]
+          }
+          serverVersion="5.0.0"
+          currentTab="IndexFlow"
+          onSelectFieldNameClick={() => {}}
+          onSelectFieldTypeClick={() => {}}
+          onAddFieldClick={() => {}}
+          onRemoveFieldClick={() => {}}
+          onTabClick={onTabClickSpy}
+          showIndexesGuidanceVariant={showIndexesGuidanceVariant || false}
+          query={null}
+        />
+      </Provider>
     );
   };
 

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

@@ -21,7 +21,7 @@ import { usePreference } from 'compass-preferences-model/provider';
 import IndexFlowSection from './index-flow-section';
 import QueryFlowSection from './query-flow-section';
 import toNS from 'mongodb-ns';
-import type { Document } from 'bson';
+import type { Document } from 'mongodb';
 
 const createIndexModalFieldsStyles = css({
   margin: `${spacing[600]}px 0 ${spacing[800]}px 0`,

packages/compass-indexes/src/components/create-index-form/index-flow-section.spec.tsx

@@ -3,8 +3,11 @@ import { render, screen } from '@mongodb-js/testing-library-compass';
 import IndexFlowSection from './index-flow-section';
 import { expect } from 'chai';
 import type { Field } from '../../modules/create-index';
+import { Provider } from 'react-redux';
+import { setupStore } from '../../../test/setup-store';
 
 describe('IndexFlowSection', () => {
+  const store = setupStore();
   const renderComponent = ({
     createIndexFieldsComponent,
     fields,
@@ -13,12 +16,14 @@ describe('IndexFlowSection', () => {
     fields?: Field[];
   }) => {
     render(
-      <IndexFlowSection
-        createIndexFieldsComponent={createIndexFieldsComponent ?? null}
-        fields={fields || []}
-        dbName={'fakeDBName'}
-        collectionName={'fakeCollectionName'}
-      />
+      <Provider store={store}>
+        <IndexFlowSection
+          createIndexFieldsComponent={createIndexFieldsComponent ?? null}
+          fields={fields || []}
+          dbName={'fakeDBName'}
+          collectionName={'fakeCollectionName'}
+        />
+      </Provider>
     );
   };