rules generation wip

Author: paula-stacho

README.md

@@ -51,6 +51,7 @@ Is there anything else you’d like to see in Compass? Let us know by submitting
 - [**@mongodb-js/compass-maybe-protect-connection-string**](packages/compass-maybe-protect-connection-string): Utility for protecting connection strings if requested
 - [**@mongodb-js/compass-settings**](packages/compass-settings): Settings for compass
 - [**@mongodb-js/compass-telemetry**](packages/compass-telemetry): Compass telemetry
+- [**@mongodb-js/compass-schema-analysis**](packages/compass-schema-analysis): Compass schema analysis
 - [**@mongodb-js/compass-test-server**](packages/compass-test-server): Wrapper around mongodb-runner to manage test servers for Compass
 - [**@mongodb-js/compass-user-data**](packages/compass-user-data): undefined
 - [**@mongodb-js/compass-utils**](packages/compass-utils): Utilities for MongoDB Compass Development

package-lock.json

@@ -79,6 +79,7 @@
     "@mongodb-js/compass-logging": "^1.6.5",
     "@mongodb-js/compass-telemetry": "^1.4.5",
     "@mongodb-js/compass-workspaces": "^0.31.5",
+    "@mongodb-js/compass-schema-analysis": "^1.0.0",
     "bson": "^6.10.3",
     "compass-preferences-model": "^2.33.5",
     "hadron-app-registry": "^9.4.5",

packages/compass-schema-validation/package.json

@@ -10,7 +10,7 @@ import {
   spacing,
 } from '@mongodb-js/compass-components';
 import { connect } from 'react-redux';
-import { usePreference } from 'compass-preferences-model/provider';
+import { usePreferences } from 'compass-preferences-model/provider';
 import { changeZeroState } from '../modules/zero-state';
 import type { RootState } from '../modules';
 import ValidationEditor from './validation-editor';
@@ -19,6 +19,10 @@ import { ZeroGraphic } from './zero-graphic';
 
 const validationStatesStyles = css({ padding: spacing[3] });
 const contentContainerStyles = css({ height: '100%' });
+const zeroStateButtonsStyles = css({
+  display: 'flex',
+  gap: spacing[400],
+});
 
 /**
  * Warnings for the banner.
@@ -110,7 +114,10 @@ export function ValidationStates({
   changeZeroState,
   editMode,
 }: ValidationStatesProps) {
-  const readOnly = usePreference('readOnly');
+  const { readOnly, enableExportSchema } = usePreferences([
+    'readOnly',
+    'enableExportSchema',
+  ]);
 
   const isEditable =
     !editMode.collectionReadOnly &&
@@ -130,18 +137,31 @@ export function ValidationStates({
           {isZeroState ? (
             <EmptyContent
               icon={ZeroGraphic}
-              title="Add validation rules"
-              subTitle="Create rules to enforce data structure of documents on updates and inserts."
+              title="Create validation rules"
+              subTitle="Generate rules via schema analysis from existing sample data or add them manually to enforce document structure during updates and inserts"
               callToAction={
-                <Button
-                  data-testid="add-rule-button"
-                  disabled={!isEditable}
-                  onClick={() => changeZeroState(false)}
-                  variant={ButtonVariant.Primary}
-                  size="small"
-                >
-                  Add Rule
-                </Button>
+                <div className={zeroStateButtonsStyles}>
+                  {enableExportSchema && (
+                    <Button
+                      data-testid="generate-rules-button"
+                      disabled={!isEditable}
+                      onClick={() => changeZeroState(false)}
+                      variant={ButtonVariant.Primary}
+                      size="small"
+                    >
+                      Generate rules
+                    </Button>
+                  )}
+                  <Button
+                    data-testid="add-rule-button"
+                    disabled={!isEditable}
+                    onClick={() => changeZeroState(false)}
+                    variant={ButtonVariant.PrimaryOutline}
+                    size="small"
+                  >
+                    Add Rule
+                  </Button>
+                </div>
               }
               callToActionLink={
                 <Link href={DOC_SCHEMA_VALIDATION} target="_blank">

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

@@ -1,5 +1,12 @@
 import React, { useMemo } from 'react';
-import { palette, useDarkMode } from '@mongodb-js/compass-components';
+import {
+  css,
+  palette,
+  spacing,
+  useDarkMode,
+} from '@mongodb-js/compass-components';
+
+const svgStyles = css({ marginLeft: spacing[300] });
 
 const ZeroGraphic: React.FunctionComponent = () => {
   const darkMode = useDarkMode();
@@ -16,6 +23,7 @@ const ZeroGraphic: React.FunctionComponent = () => {
       viewBox="0 0 72 72"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      className={svgStyles}
     >
       <path
         d="M41 16V4.00001L55 18H43C41.8954 18 41 17.1046 41 16Z"

packages/compass-schema-validation/src/components/zero-graphic.tsx

@@ -24,7 +24,11 @@ const CompassSchemaValidationHadronPlugin = registerHadronPlugin(
   },
   {
     dataService: dataServiceLocator as DataServiceLocator<
-      'aggregate' | 'collectionInfo' | 'updateCollection'
+      | 'aggregate'
+      | 'collectionInfo'
+      | 'updateCollection'
+      | 'sample'
+      | 'isCancelError'
     >,
     connectionInfoRef: connectionInfoRefLocator,
     instance: mongoDBInstanceLocator,