finished adding error and segment event for covered queries

Author: rubydong

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

@@ -13,9 +13,14 @@ import {
   Tooltip,
 } from '@mongodb-js/compass-components';
 import React, { useState, useCallback, useEffect } from 'react';
-import type { Field } from '../../modules/create-index';
+import { errorEncountered, type Field } from '../../modules/create-index';
 import MDBCodeViewer from './mdb-code-viewer';
 import { areAllFieldsFilledIn } from '../../utils/create-index-modal-validation';
+import { connect } from 'react-redux';
+import {
+  TrackFunction,
+  useTelemetry,
+} from '@mongodb-js/compass-telemetry/provider';
 
 const flexContainerStyles = css({
   display: 'flex',
@@ -78,10 +83,12 @@ export type IndexFlowSectionProps = {
   createIndexFieldsComponent: JSX.Element | null;
   dbName: string;
   collectionName: string;
+  onErrorEncountered: (error: string) => void;
 };
 
 const generateCoveredQueries = (
-  coveredQueriesArr: Array<Record<string, number>>
+  coveredQueriesArr: Array<Record<string, number>>,
+  track: TrackFunction
 ) => {
   const rows = [];
   for (let i = 0; i < coveredQueriesArr.length; i++) {
@@ -93,6 +100,14 @@ const generateCoveredQueries = (
     );
   }
 
+  if (rows.length === 0) {
+    track('Error generating covered queries', {
+      context: 'Create Index Modal',
+    });
+    throw new Error(
+      'Error generating covered query examples. Please try again later.'
+    );
+  }
   return <>{rows}</>;
 };
 
@@ -149,6 +164,7 @@ const IndexFlowSection = ({
   fields,
   dbName,
   collectionName,
+  onErrorEncountered,
 }: IndexFlowSectionProps) => {
   const [isCodeEquivalentToggleChecked, setIsCodeEquivalentToggleChecked] =
     useState(false);
@@ -157,6 +173,7 @@ const IndexFlowSection = ({
   const hasUnsupportedQueryTypes = fields.some((field) => {
     return field.type === '2dsphere' || field.type === 'text';
   });
+  const track = useTelemetry();
 
   const isCoveredQueriesButtonDisabled =
     !areAllFieldsFilledIn(fields) ||
@@ -188,13 +205,18 @@ const IndexFlowSection = ({
       return { [field.name]: index + 1 };
     });
 
-    setCoveredQueriesObj({
-      coveredQueries: generateCoveredQueries(coveredQueriesArr),
-      optimalQueries: generateOptimalQueries(coveredQueriesArr),
-      showCoveredQueries: true,
-    });
+    try {
+      setCoveredQueriesObj({
+        coveredQueries: generateCoveredQueries(coveredQueriesArr, track),
+        optimalQueries: generateOptimalQueries(coveredQueriesArr),
+        showCoveredQueries: true,
+      });
+    } catch (e) {
+      onErrorEncountered(e.message);
+    }
+
     setHasFieldChanges(false);
-  }, [fields]);
+  }, [fields, onErrorEncountered, track]);
 
   useEffect(() => {
     setHasFieldChanges(true);
@@ -320,4 +342,12 @@ const IndexFlowSection = ({
   );
 };
 
-export default IndexFlowSection;
+const mapState = () => {
+  return {};
+};
+
+const mapDispatch = {
+  onErrorEncountered: errorEncountered,
+};
+
+export default connect(mapState, mapDispatch)(IndexFlowSection);

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

@@ -81,6 +81,8 @@ const insightStyles = css({
   display: 'flex',
   alignItems: 'center',
   gap: spacing[100],
+  marginBottom: spacing[200],
+  height: spacing[500],
 });
 
 const QueryFlowSection = ({
@@ -107,9 +109,11 @@ const QueryFlowSection = ({
   initialQuery: Document | null;
 }) => {
   const [inputQuery, setInputQuery] = React.useState(
-    JSON.stringify(initialQuery?.filter ?? {}, null, 2)
+    JSON.stringify(initialQuery?.filter, null, 2)
+  );
+  const [hasNewChanges, setHasNewChanges] = React.useState(
+    initialQuery !== null
   );
-  const [hasNewChanges, setHasNewChanges] = React.useState(false);
   const completer = useMemo(
     () =>
       createQueryAutocompleter({

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

@@ -348,7 +348,7 @@ export const createIndexClosed = () => ({
   type: ActionTypes.CreateIndexClosed,
 });
 
-const errorEncountered = (error: string): ErrorEncounteredAction => ({
+export const errorEncountered = (error: string): ErrorEncounteredAction => ({
   type: ActionTypes.ErrorEncountered,
   error,
 });
@@ -497,16 +497,8 @@ export const createIndexFormSubmitted = (): IndexesThunkAction<
     });
 
     // Check for field errors.
-    if (isQueryFlow) {
-      if (!indexSuggestions) {
-        dispatch(
-          errorEncountered(
-            'No suggested index found. Please choose "Start with an Index" at the top to continue.'
-          )
-        );
-        return;
-      }
-    } else if (
+    if (
+      !isQueryFlow &&
       getState().createIndex.fields.some(
         (field: Field) => field.name === '' || field.type === ''
       )