feat: disable create index button if fields aren't filled in for control CLOUDP-323669 (#7013)

* disable create index button if fields are filled in for control

* update test and remove unused prop

Author: rubydong

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

@@ -12,6 +12,7 @@ import { setupStore } from '../../../test/setup-store';
 import { Provider } from 'react-redux';
 
 import CreateIndexActions from '.';
+import { ActionTypes } from '../../modules/create-index';
 
 describe('CreateIndexActions Component', function () {
   let clearErrorSpy: any;
@@ -39,7 +40,6 @@ describe('CreateIndexActions Component', function () {
           onErrorBannerCloseClick={clearErrorSpy}
           onCreateIndexClick={onCreateIndexClickSpy}
           onCancelCreateIndexClick={closeCreateIndexModalSpy}
-          showIndexesGuidanceVariant={false}
         />
       </Provider>
     );
@@ -62,9 +62,24 @@ describe('CreateIndexActions Component', function () {
   });
 
   context('onConfirm', function () {
+    it('will not call onCreateIndexClick function if fields are not valid and the button will be disabled', function () {
+      renderComponent();
+      const button = screen.getByTestId(
+        'create-index-actions-create-index-button'
+      );
+      userEvent.click(button);
+      expect(button.ariaDisabled).to.equal('true');
+      expect(onCreateIndexClickSpy).not.to.have.been.calledOnce;
+    });
+
     it('calls the onCreateIndexClick function', function () {
       renderComponent();
 
+      // populate with valid fields first
+      store.dispatch({
+        type: ActionTypes.FieldsChanged,
+        fields: [{ name: 'a', type: '1' }],
+      });
       const button = screen.getByTestId(
         'create-index-actions-create-index-button'
       );

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

@@ -34,7 +34,6 @@ function CreateIndexActions({
   onCancelCreateIndexClick,
   fields,
   currentTab,
-  showIndexesGuidanceVariant,
   indexSuggestions,
 }: {
   error: string | null;
@@ -43,25 +42,21 @@ function CreateIndexActions({
   onCancelCreateIndexClick: () => void;
   fields: Field[];
   currentTab: Tab;
-  showIndexesGuidanceVariant: boolean;
   indexSuggestions: Record<string, number> | null;
 }) {
   const track = useTelemetry();
 
   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;
-      }
+  // 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;
-      }
+  }
+  // Or if they are in the Index Flow but have not completed the fields
+  else {
+    if (!areAllFieldsFilledIn(fields)) {
+      isCreateIndexButtonDisabled = true;
     }
   }
 

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

@@ -127,7 +127,6 @@ function CreateIndexModal({
           onErrorBannerCloseClick={onErrorBannerCloseClick}
           onCreateIndexClick={onCreateIndexClick}
           onCancelCreateIndexClick={onCancelCreateIndexClick}
-          showIndexesGuidanceVariant={showIndexesGuidanceVariant}
         />
       </ModalFooter>
     </Modal>

packages/compass-indexes/src/modules/create-index.spec.ts

@@ -29,25 +29,6 @@ describe('create-index module', function () {
       store.dispatch(fieldTypeUpdated(0, 'text'));
     });
 
-    it('validates field name & type', function () {
-      Object.assign(store.getState(), {
-        createIndex: {
-          ...store.getState().createIndex,
-          fields: [
-            {
-              name: '',
-              type: '',
-            },
-          ],
-        },
-      });
-      store.dispatch(createIndexFormSubmitted());
-
-      expect(store.getState().createIndex.error).to.equal(
-        'You must select a field name and type'
-      );
-    });
-
     it('validates collation', function () {
       Object.assign(store.getState(), {
         createIndex: {

packages/compass-indexes/src/modules/create-index.tsx

@@ -507,17 +507,6 @@ export const createIndexFormSubmitted = (): IndexesThunkAction<
           : undefined,
     });
 
-    // Check for field errors.
-    if (
-      !isQueryFlow &&
-      getState().createIndex.fields.some(
-        (field: Field) => field.name === '' || field.type === ''
-      )
-    ) {
-      dispatch(errorEncountered('You must select a field name and type'));
-      return;
-    }
-
     const formIndexOptions = getState().createIndex.options;
 
     let spec: Record<string, IndexDirection> = {};