feat(schema): add schema export modal, feature flag gated COMPASS-8703

packages/compass-aggregations/package.json

@@ -91,7 +91,7 @@
     "mongodb-instance-model": "^12.26.0",
     "mongodb-ns": "^2.4.2",
     "mongodb-query-parser": "^4.3.0",
-    "mongodb-schema": "^12.2.0",
+    "mongodb-schema": "^12.3.2",
     "prop-types": "^15.7.2",
     "re-resizable": "^6.9.0",
     "react": "^17.0.2",

packages/compass-e2e-tests/helpers/selectors.ts

@@ -1011,6 +1011,10 @@ export const AggregationWizardSortFormDirectionSelect = (idx: number) =>
 
 // Schema tab
 export const AnalyzeSchemaButton = '[data-testid="analyze-schema-button"]';
+export const ExportSchemaButton = '[data-testid="open-schema-export-button"]';
+export const ExportSchemaFormatOptions =
+  '[data-testid="export-schema-format-type-box-group"]';
+export const ExportSchemaOutput = '[data-testid="export-schema-content"]';
 export const SchemaFieldList = '[data-testid="schema-field-list"]';
 export const AnalysisMessage =
   '[data-testid="schema-content"] [data-testid="schema-analysis-message"]';

packages/compass-e2e-tests/tests/collection-schema-tab.test.ts

@@ -109,6 +109,54 @@ describe('Collection schema tab', function () {
     });
   }
 
+  describe('with the enableExportSchema feature flag enabled', function () {
+    beforeEach(async function () {
+      // TODO(COMPASS-8819): remove web skip when defaulted true.
+      skipForWeb(this, "can't toggle features in compass-web");
+      await browser.setFeature('enableExportSchema', true);
+    });
+
+    it('shows an exported schema to copy', async function () {
+      await browser.navigateToCollectionTab(
+        DEFAULT_CONNECTION_NAME_1,
+        'test',
+        'numbers',
+        'Schema'
+      );
+      await browser.clickVisible(Selectors.AnalyzeSchemaButton);
+
+      const element = browser.$(Selectors.SchemaFieldList);
+      await element.waitForDisplayed();
+
+      await browser.clickVisible(Selectors.ExportSchemaButton);
+
+      const exportModal = browser.$(Selectors.ExportSchemaFormatOptions);
+      await exportModal.waitForDisplayed();
+
+      const exportSchemaContent = browser.$(Selectors.ExportSchemaOutput);
+      await exportSchemaContent.waitForDisplayed();
+      const text = await browser.$(Selectors.ExportSchemaOutput).getText();
+      const parsedText = JSON.parse(text);
+      delete parsedText.$defs;
+      expect(parsedText).to.deep.equal({
+        $schema: 'https://json-schema.org/draft/2020-12/schema',
+        type: 'object',
+        required: ['_id', 'i', 'j'],
+        properties: {
+          _id: {
+            $ref: '#/$defs/ObjectId',
+          },
+          i: {
+            type: 'integer',
+          },
+          j: {
+            type: 'integer',
+          },
+        },
+      });
+    });
+  });
+
   it('analyzes the schema with a query');
   it('can reset the query');
   it('can create a geoquery from a map');

packages/compass-field-store/package.json

@@ -73,7 +73,7 @@
     "@mongodb-js/compass-logging": "^1.6.0",
     "hadron-app-registry": "^9.4.0",
     "lodash": "^4.17.21",
-    "mongodb-schema": "^12.2.0",
+    "mongodb-schema": "^12.3.2",
     "react": "^17.0.2",
     "react-redux": "^8.1.3",
     "redux": "^4.2.1",

packages/compass-generative-ai/package.json

@@ -62,7 +62,7 @@
     "compass-preferences-model": "^2.33.0",
     "hadron-app-registry": "^9.4.0",
     "mongodb": "^6.12.0",
-    "mongodb-schema": "^12.2.0",
+    "mongodb-schema": "^12.3.2",
     "react": "^17.0.2",
     "react-redux": "^8.1.3",
     "redux": "^4.2.1",

packages/compass-import-export/package.json

@@ -68,7 +68,7 @@
     "mongodb-data-service": "^22.25.0",
     "mongodb-ns": "^2.4.2",
     "mongodb-query-parser": "^4.3.0",
-    "mongodb-schema": "^12.2.0",
+    "mongodb-schema": "^12.3.2",
     "papaparse": "^5.3.2",
     "react": "^17.0.2",
     "react-redux": "^8.1.3",

packages/compass-preferences-model/src/feature-flags.ts

@@ -17,6 +17,7 @@ export type FeatureFlags = {
   enableOidc: boolean; // Not capitalized "OIDC" for spawn arg casing.
   newExplainPlan: boolean;
   showInsights: boolean;
+  enableExportSchema: boolean;
   enableRenameCollectionModal: boolean;
   enableQueryHistoryAutocomplete: boolean;
   enableProxySupport: boolean;
@@ -100,4 +101,14 @@ export const featureFlags: Required<{
       short: 'Enable Global Writes tab in Atlas Cloud',
     },
   },
+
+  /**
+   * Feature flag for export schema. Epic: COMPASS-6862.
+   */
+  enableExportSchema: {
+    stage: 'development',
+    description: {
+      short: 'Enable schema export',
+    },
+  },
 };

packages/compass-query-bar/package.json

@@ -87,7 +87,7 @@
     "mongodb-ns": "^2.4.2",
     "mongodb-query-parser": "^4.3.0",
     "mongodb-query-util": "^2.4.0",
-    "mongodb-schema": "^12.2.0",
+    "mongodb-schema": "^12.3.2",
     "react": "^17.0.2",
     "react-redux": "^8.1.3",
     "redux": "^4.2.1",

packages/compass-schema/package.json

@@ -91,7 +91,7 @@
     "lodash": "^4.17.21",
     "mongodb": "^6.12.0",
     "mongodb-query-util": "^2.4.0",
-    "mongodb-schema": "^12.2.0",
+    "mongodb-schema": "^12.3.2",
     "numeral": "^1.5.6",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",

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

@@ -36,7 +36,9 @@ import { getAtlasPerformanceAdvisorLink } from '../utils';
 import { useIsLastAppliedQueryOutdated } from '@mongodb-js/compass-query-bar';
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 import type { RootState } from '../stores/store';
-import { startAnalysis, stopAnalysis } from '../stores/reducer';
+import { startAnalysis, stopAnalysis } from '../stores/schema-analysis-reducer';
+import { openExportSchema } from '../stores/schema-export-reducer';
+import ExportSchemaModal from './export-schema-modal';
 
 const rootStyles = css({
   width: '100%',
@@ -373,13 +375,15 @@ const Schema: React.FunctionComponent<{
   schema: MongodbSchema | null;
   count?: number;
   resultId?: string;
+  onExportSchemaClicked: () => void;
   onStartAnalysis: () => Promise<void>;
   onStopAnalysis: () => void;
 }> = ({
   analysisState,
   errorMessage,
   schema,
   resultId,
+  onExportSchemaClicked,
   onStartAnalysis,
   onStopAnalysis,
 }) => {
@@ -393,47 +397,54 @@ const Schema: React.FunctionComponent<{
     'enablePerformanceAdvisorBanner'
   );
 
+  const enableExportSchema = usePreference('enableExportSchema');
+
   return (
-    <div className={rootStyles}>
-      <WorkspaceContainer
-        toolbar={
-          <SchemaToolbar
-            onAnalyzeSchemaClicked={onApplyClicked}
-            onResetClicked={onApplyClicked}
-            analysisState={analysisState}
-            errorMessage={errorMessage || ''}
-            isOutdated={!!outdated}
-            sampleSize={schema ? schema.count : 0}
-            schemaResultId={resultId || ''}
-          />
-        }
-      >
-        <div className={contentStyles}>
-          {enablePerformanceAdvisorBanner && <PerformanceAdvisorBanner />}
-          {analysisState === ANALYSIS_STATE_INITIAL && (
-            <InitialScreen onApplyClicked={onApplyClicked} />
-          )}
-          {analysisState === ANALYSIS_STATE_ANALYZING && (
-            <AnalyzingScreen onCancelClicked={onStopAnalysis} />
-          )}
-          {analysisState === ANALYSIS_STATE_COMPLETE && (
-            <FieldList schema={schema} analysisState={analysisState} />
-          )}
-        </div>
-      </WorkspaceContainer>
-    </div>
+    <>
+      <div className={rootStyles}>
+        <WorkspaceContainer
+          toolbar={
+            <SchemaToolbar
+              onAnalyzeSchemaClicked={onApplyClicked}
+              onExportSchemaClicked={onExportSchemaClicked}
+              onResetClicked={onApplyClicked}
+              analysisState={analysisState}
+              errorMessage={errorMessage || ''}
+              isOutdated={!!outdated}
+              sampleSize={schema ? schema.count : 0}
+              schemaResultId={resultId || ''}
+            />
+          }
+        >
+          <div className={contentStyles}>
+            {enablePerformanceAdvisorBanner && <PerformanceAdvisorBanner />}
+            {analysisState === ANALYSIS_STATE_INITIAL && (
+              <InitialScreen onApplyClicked={onApplyClicked} />
+            )}
+            {analysisState === ANALYSIS_STATE_ANALYZING && (
+              <AnalyzingScreen onCancelClicked={onStopAnalysis} />
+            )}
+            {analysisState === ANALYSIS_STATE_COMPLETE && (
+              <FieldList schema={schema} analysisState={analysisState} />
+            )}
+          </div>
+        </WorkspaceContainer>
+      </div>
+      {enableExportSchema && <ExportSchemaModal />}
+    </>
   );
 };
 
 export default connect(
   (state: RootState) => ({
-    analysisState: state.analysisState,
-    errorMessage: state.errorMessage,
-    schema: state.schema,
-    resultId: state.resultId,
+    analysisState: state.schemaAnalysis.analysisState,
+    errorMessage: state.schemaAnalysis.errorMessage,
+    schema: state.schemaAnalysis.schema,
+    resultId: state.schemaAnalysis.resultId,
   }),
   {
     onStartAnalysis: startAnalysis,
     onStopAnalysis: stopAnalysis,
+    onExportSchemaClicked: openExportSchema,
   }
 )(Schema);

packages/compass-schema/src/components/coordinates-minichart/coordinates-minichart.jsx

@@ -22,7 +22,7 @@ import {
   geoLayerAdded,
   geoLayersDeleted,
   geoLayersEdited,
-} from '../../stores/reducer';
+} from '../../stores/schema-analysis-reducer';
 
 // TODO: Disable boxZoom handler for circle lasso.
 //