disable the create index button when data is not complete

Author: rubydong

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/index-flow-section.tsx

@@ -15,6 +15,7 @@ import {
 import React, { useState, useCallback } from 'react';
 import type { Field } from '../../modules/create-index';
 import MDBCodeViewer from './mdb-code-viewer';
+import { areAllFieldsFilledIn } from '../../utils/create-index-modal-validation';
 
 const flexContainerStyles = css({
   display: 'flex',
@@ -152,16 +153,12 @@ const IndexFlowSection = ({
   const [isCodeEquivalentToggleChecked, setIsCodeEquivalentToggleChecked] =
     useState(false);
 
-  const areAllFieldsFilledIn = fields.every((field) => {
-    return field.name && field.type;
-  });
-
   const hasUnsupportedQueryTypes = fields.some((field) => {
     return field.type === '2dsphere' || field.type === 'text';
   });
 
   const isCoveredQueriesButtonDisabled =
-    !areAllFieldsFilledIn || hasUnsupportedQueryTypes;
+    !areAllFieldsFilledIn(fields) || hasUnsupportedQueryTypes;
 
   const indexNameTypeMap = fields.reduce<Record<string, string>>(
     (accumulator, currentValue) => {

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

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

packages/compass-indexes/src/utils/create-index-modal-validation.ts

@@ -0,0 +1,5 @@
+import type { Field } from '../modules/create-index';
+
+export const areAllFieldsFilledIn = (fields: Field[]) => {
+  return fields.every((field) => field.name && field.type);
+};