feat: validation rules generation COMPASS-8859

Author: paula-stacho

packages/compass-schema-validation/src/components/validation-states.tsx

@@ -3,7 +3,9 @@ import {
   Banner,
   Button,
   ButtonVariant,
+  CancelLoader,
   EmptyContent,
+  ErrorSummary,
   Link,
   WarningSummary,
   css,
@@ -16,14 +18,27 @@ import type { RootState } from '../modules';
 import ValidationEditor from './validation-editor';
 import { SampleDocuments } from './sample-documents';
 import { ZeroGraphic } from './zero-graphic';
+import {
+  clearRulesGenerationError,
+  generateValidationRules,
+} from '../modules/validation';
 
-const validationStatesStyles = css({ padding: spacing[3] });
+const validationStatesStyles = css({
+  padding: spacing[400],
+  height: '100%',
+});
 const contentContainerStyles = css({ height: '100%' });
 const zeroStateButtonsStyles = css({
   display: 'flex',
   gap: spacing[400],
 });
 
+const loaderStyles = css({
+  height: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+});
+
 /**
  * Warnings for the banner.
  */
@@ -50,8 +65,12 @@ const DOC_UPGRADE_REVISION =
 
 type ValidationStatesProps = {
   isZeroState: boolean;
+  isRulesGenerationInProgress?: boolean;
+  rulesGenerationError?: string;
   isLoaded: boolean;
   changeZeroState: (value: boolean) => void;
+  generateValidationRules: () => void;
+  clearRulesGenerationError: () => void;
   editMode: {
     collectionTimeSeries?: boolean;
     collectionReadOnly?: boolean;
@@ -108,10 +127,29 @@ function ValidationBanners({
   return null;
 }
 
+const GeneratingScreen: React.FunctionComponent<{
+  onCancelClicked: () => void;
+}> = ({ onCancelClicked }) => {
+  return (
+    <div className={loaderStyles}>
+      <CancelLoader
+        data-testid="generating-rules"
+        progressText="Generating rules"
+        cancelText="Stop"
+        onCancel={onCancelClicked}
+      />
+    </div>
+  );
+};
+
 export function ValidationStates({
   isZeroState,
+  isRulesGenerationInProgress,
+  rulesGenerationError,
   isLoaded,
   changeZeroState,
+  generateValidationRules,
+  clearRulesGenerationError,
   editMode,
 }: ValidationStatesProps) {
   const { readOnly, enableExportSchema } = usePreferences([
@@ -131,10 +169,17 @@ export function ValidationStates({
       className={validationStatesStyles}
       data-testid="schema-validation-states"
     >
+      {rulesGenerationError && (
+        <ErrorSummary
+          errors={rulesGenerationError}
+          dismissible={true}
+          onDismiss={clearRulesGenerationError}
+        />
+      )}
       <ValidationBanners editMode={editMode} />
       {isLoaded && (
         <>
-          {isZeroState ? (
+          {isZeroState && !isRulesGenerationInProgress && (
             <EmptyContent
               icon={ZeroGraphic}
               title="Create validation rules"
@@ -145,7 +190,7 @@ export function ValidationStates({
                     <Button
                       data-testid="generate-rules-button"
                       disabled={!isEditable}
-                      onClick={() => changeZeroState(false)}
+                      onClick={generateValidationRules}
                       variant={ButtonVariant.Primary}
                       size="small"
                     >
@@ -169,7 +214,11 @@ export function ValidationStates({
                 </Link>
               }
             />
-          ) : (
+          )}
+          {isZeroState && isRulesGenerationInProgress && (
+            <GeneratingScreen onCancelClicked={() => ({})} />
+          )}
+          {!isZeroState && (
             <div className={contentContainerStyles}>
               <ValidationEditor isEditable={isEditable} />
               <SampleDocuments />
@@ -192,11 +241,15 @@ const mapStateToProps = (state: RootState) => ({
   isZeroState: state.isZeroState,
   isLoaded: state.isLoaded,
   editMode: state.editMode,
+  isRulesGenerationInProgress: state.validation.isRulesGenerationInProgress,
+  rulesGenerationError: state.validation.rulesGenerationError,
 });
 
 /**
  * Connect the redux store to the component (dispatch).
  */
 export default connect(mapStateToProps, {
   changeZeroState,
+  generateValidationRules,
+  clearRulesGenerationError,
 })(ValidationStates);

packages/compass-schema-validation/src/modules/index.ts

@@ -77,6 +77,7 @@ export type SchemaValidationExtraArgs = {
   workspaces: WorkspacesService;
   logger: Logger;
   track: TrackFunction;
+  rulesGenerationAbortControllerRef: { current?: AbortController };
 };
 
 export type SchemaValidationThunkAction<

packages/compass-schema-validation/src/modules/validation.ts

@@ -7,12 +7,14 @@ import { zeroStateChanged } from './zero-state';
 import { isLoadedChanged } from './is-loaded';
 import { isEqual, pick } from 'lodash';
 import type { ThunkDispatch } from 'redux-thunk';
-import { disableEditRules } from './edit-mode';
+import { disableEditRules, enableEditRules } from './edit-mode';
 import { analyzeSchema } from '@mongodb-js/compass-schema-analysis';
 
 export type ValidationServerAction = 'error' | 'warn';
 export type ValidationLevel = 'off' | 'moderate' | 'strict';
 
+const SAMPLE_SIZE = 1000;
+
 /**
  * The module action prefix.
  */
@@ -93,8 +95,20 @@ interface RulesGenerationStartedAction {
 export const RULES_GENERATION_FAILED =
   `${PREFIX}/RULES_GENERATION_FAILED` as const;
 interface RulesGenerationFailedAction {
-  type: typeof RULES_GENERATION_STARTED;
-  syntaxError: null | { message: string };
+  type: typeof RULES_GENERATION_FAILED;
+  message: string;
+}
+
+export const RULES_GENERATION_CLEAR_ERROR =
+  `${PREFIX}/RULES_GENERATION_CLEAR_ERROR` as const;
+interface RulesGenerationClearErrorAction {
+  type: typeof RULES_GENERATION_CLEAR_ERROR;
+}
+
+export const RULES_GENERATION_FINISHED =
+  `${PREFIX}/RULES_GENERATION_FINISHED` as const;
+interface RulesGenerationFinishedAction {
+  type: typeof RULES_GENERATION_FINISHED;
 }
 
 export type ValidationAction =
@@ -104,7 +118,11 @@ export type ValidationAction =
   | ValidationFetchedAction
   | ValidationActionChangedAction
   | ValidationLevelChangedAction
-  | SyntaxErrorOccurredAction;
+  | SyntaxErrorOccurredAction
+  | RulesGenerationStartedAction
+  | RulesGenerationFinishedAction
+  | RulesGenerationFailedAction
+  | RulesGenerationClearErrorAction;
 
 export interface Validation {
   validator: string;
@@ -124,8 +142,8 @@ export interface ValidationState extends Validation {
   syntaxError: null | { message: string };
   error: null | { message: string };
   prevValidation?: Validation;
-  rulesGenerationStatus?: 'in-progress' | 'failed';
-  rulesGenerationErrorMessage?: string;
+  isRulesGenerationInProgress?: boolean;
+  rulesGenerationError?: string;
 }
 
 /**
@@ -205,6 +223,34 @@ const setSyntaxError = (
   syntaxError: action.syntaxError,
 });
 
+const startRulesGeneration = (state: ValidationState): ValidationState => ({
+  ...state,
+  isRulesGenerationInProgress: true,
+  rulesGenerationError: undefined,
+});
+
+const finishRulesGeneration = (state: ValidationState): ValidationState => ({
+  ...state,
+  isRulesGenerationInProgress: undefined,
+  rulesGenerationError: undefined,
+});
+
+const markRulesGenerationFailure = (
+  state: ValidationState,
+  action: RulesGenerationFailedAction
+): ValidationState => ({
+  ...state,
+  isRulesGenerationInProgress: undefined,
+  rulesGenerationError: action.message,
+});
+
+const unsetRulesGenerationError = (
+  state: ValidationState
+): ValidationState => ({
+  ...state,
+  rulesGenerationError: undefined,
+});
+
 /**
  * Set validation.
  */
@@ -307,6 +353,10 @@ const MAPPINGS: {
   [VALIDATION_ACTION_CHANGED]: changeValidationAction,
   [VALIDATION_LEVEL_CHANGED]: changeValidationLevel,
   [SYNTAX_ERROR_OCCURRED]: setSyntaxError,
+  [RULES_GENERATION_STARTED]: startRulesGeneration,
+  [RULES_GENERATION_FINISHED]: finishRulesGeneration,
+  [RULES_GENERATION_FAILED]: markRulesGenerationFailure,
+  [RULES_GENERATION_CLEAR_ERROR]: unsetRulesGenerationError,
 };
 
 /**
@@ -397,6 +447,11 @@ export const syntaxErrorOccurred = (
   syntaxError,
 });
 
+export const clearRulesGenerationError =
+  (): RulesGenerationClearErrorAction => ({
+    type: RULES_GENERATION_CLEAR_ERROR,
+  });
+
 export const fetchValidation = (namespace: {
   database: string;
   collection: string;
@@ -553,39 +608,92 @@ export const activateValidation = (): SchemaValidationThunkAction<void> => {
   };
 };
 
+export const stopRulesGeneration = (): SchemaValidationThunkAction<void> => {
+  return (
+    dispatch,
+    getState,
+    { rulesGenerationAbortControllerRef, connectionInfoRef, track }
+  ) => {
+    if (!rulesGenerationAbortControllerRef.current) return;
+    // const analysisTime =
+    //   Date.now() - (getState().schemaAnalysis.analysisStartTime ?? 0);
+    // track(
+    //   'Schema Analysis Cancelled',
+    //   {
+    //     analysis_time_ms: analysisTime,
+    //     with_filter: Object.entries(query.filter ?? {}).length > 0,
+    //   },
+    //   connectionInfoRef.current
+    // );
+
+    rulesGenerationAbortControllerRef.current?.abort('Analysis cancelled');
+  };
+};
+
 /**
  * Get $jsonSchema from schema analysis
  * @returns
  */
 export const generateValidationRules = (): SchemaValidationThunkAction<
   Promise<void>
 > => {
-  return async (dispatch, getState, { dataService, logger, preferences }) => {
+  return async (
+    dispatch,
+    getState,
+    { dataService, logger, preferences, rulesGenerationAbortControllerRef }
+  ) => {
     dispatch({ type: RULES_GENERATION_STARTED });
+    console.log('START');
+
+    rulesGenerationAbortControllerRef.current = new AbortController();
+    const abortSignal = rulesGenerationAbortControllerRef.current.signal;
+
+    const { namespace } = getState();
+    const { maxTimeMS } = preferences.getPreferences();
 
     try {
-      ///// TODO
-      const samplingOptions = {};
-      const driverOptions = {};
-      const abortSignal = new AbortSignal();
-      const namespace = '';
+      const samplingOptions = {
+        query: {},
+        size: SAMPLE_SIZE,
+        fields: undefined,
+      };
+      const driverOptions = {
+        maxTimeMS,
+      };
+      console.log('ANALYZING');
       const schemaAccessor = await analyzeSchema(
         dataService,
         abortSignal,
-        namespace,
+        namespace.toString(),
         samplingOptions,
         driverOptions,
         logger,
         preferences
       );
+      if (abortSignal?.aborted) {
+        throw new Error(abortSignal?.reason || new Error('Operation aborted'));
+      }
 
-      const jsonSchema = await schemaAccessor?.getMongoDBJsonSchema();
+      console.log('CONVERTING');
+      const jsonSchema = await schemaAccessor?.getMongoDBJsonSchema({
+        signal: abortSignal,
+      });
+      if (abortSignal?.aborted) {
+        throw new Error(abortSignal?.reason || new Error('Operation aborted'));
+      }
+      console.log('STRINGIFYING');
       const validator = JSON.stringify(jsonSchema, undefined, 2);
-
+      console.log('DONE');
       dispatch(validationLevelChanged('moderate'));
       dispatch(validatorChanged(validator));
+      dispatch(enableEditRules());
+      dispatch({ type: RULES_GENERATION_FINISHED });
+      dispatch(zeroStateChanged(false));
     } catch (error) {
-      dispatch({ type: RULES_GENERATION_FAILED });
+      dispatch({
+        type: RULES_GENERATION_FAILED,
+        message: `Rules generation failed: ${(error as Error).message}`,
+      });
     }
   };
 };

packages/compass-schema-validation/src/stores/store.ts

@@ -45,13 +45,21 @@ export function configureStore(
     | 'connectionInfoRef'
   >
 ) {
+  const rulesGenerationAbortControllerRef = {
+    current: undefined,
+  };
   return createStore(
     reducer,
     {
       ...INITIAL_STATE,
       ...state,
     },
-    applyMiddleware(thunk.withExtraArgument(services))
+    applyMiddleware(
+      thunk.withExtraArgument({
+        ...services,
+        rulesGenerationAbortControllerRef,
+      })
+    )
   );
 }