feat(stage-wizard): dynamic stage wizard fields (#4268)

mabaasit · web-flow · commit 1f064ba7669c · 2023-04-19T12:09:42.000+02:00
diff --git a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/index.ts b/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/index.ts
@@ -6,6 +6,7 @@ export type StageWizardUseCase = {
   title: string;
   stageOperator: string;
   wizardComponent: React.FunctionComponent<{
+    fields: string[];
     onChange: (value: string, validationError: Error | null) => void;
   }>;
   serverVersion?: string;
@@ -15,7 +16,7 @@ export const STAGE_WIZARD_USE_CASES: StageWizardUseCase[] = [
   {
     id: 'sort',
     title:
-      'Sort documents in [ascending/descending] order based on a single or a set of fields.',
+      'Sort documents in [ascending/descending] order based on a single or a set of fields',
     stageOperator: '$sort',
     wizardComponent: SortUseCase,
   },
diff --git a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/sort/sort.tsx b/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/sort/sort.tsx
@@ -9,8 +9,6 @@ import {
   ComboboxWithCustomOption,
 } from '@mongodb-js/compass-components';
 import React, { useEffect, useMemo, useState } from 'react';
-import { connect } from 'react-redux';
-import type { RootState } from '../../../../modules';
 
 const SORT_DIRECTION_OPTIONS = [
   {
@@ -184,6 +182,4 @@ export const SortForm = ({
   );
 };
 
-export default connect((state: RootState) => ({
-  fields: state.fields.map((x: { name: string }) => x.name),
-}))(SortForm);
+export default SortForm;
diff --git a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/use-case-list.tsx b/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/use-case-list.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import {
-  Badge,
   Body,
   css,
   KeylineCard,
+  Link,
   spacing,
 } from '@mongodb-js/compass-components';
 import { STAGE_WIZARD_USE_CASES } from '.';
+import { getStageHelpLink } from '../../../utils/stage';
 
 const cardStyles = css({
   cursor: 'pointer',
@@ -30,7 +31,12 @@ const UseCaseList = ({ onSelect }: { onSelect: (id: string) => void }) => {
             className={cardStyles}
           >
             <Body className={cardTitleStyles}>{title}</Body>
-            <Badge>{stageOperator}</Badge>
+            <Link
+              target="_blank"
+              href={getStageHelpLink(stageOperator) as string}
+            >
+              {stageOperator}
+            </Link>
           </KeylineCard>
         );
       })}
diff --git a/packages/compass-aggregations/src/components/stage-wizard/index.spec.tsx b/packages/compass-aggregations/src/components/stage-wizard/index.spec.tsx
@@ -21,6 +21,7 @@ const renderStageWizard = (
       setNodeRef={() => {}}
       style={{}}
       listeners={undefined}
+      fields={[]}
       {...props}
     />
   );
diff --git a/packages/compass-aggregations/src/components/stage-wizard/index.tsx b/packages/compass-aggregations/src/components/stage-wizard/index.tsx
@@ -1,10 +1,10 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import {
-  Badge,
   Body,
   Button,
   css,
   KeylineCard,
+  Link,
   spacing,
   WarningSummary,
 } from '@mongodb-js/compass-components';
@@ -17,7 +17,12 @@ import {
   removeWizard,
   updateWizardValue,
 } from '../../modules/pipeline-builder/stage-editor';
-import type { Wizard } from '../../modules/pipeline-builder/stage-editor';
+import type {
+  StoreStage,
+  Wizard,
+} from '../../modules/pipeline-builder/stage-editor';
+import { getSchema } from '../../utils/get-schema';
+import { getStageHelpLink } from '../../utils/stage';
 import type { SortableProps } from '../pipeline-builder-workspace/pipeline-builder-ui-workspace/sortable-list';
 
 const containerStyles = css({
@@ -58,6 +63,7 @@ type StageWizardProps = SortableProps & {
   useCaseId: string;
   value: string | null;
   syntaxError: SyntaxError | null;
+  fields: string[];
   onChange: (value: string) => void;
   onCancel: () => void;
   onApply: () => void;
@@ -68,6 +74,7 @@ export const StageWizard = ({
   useCaseId,
   value,
   syntaxError,
+  fields,
   onChange,
   onCancel,
   onApply,
@@ -108,12 +115,20 @@ export const StageWizard = ({
         <div {...listeners}>
           <div className={headerStyles}>
             <Body weight="medium">{useCase.title}</Body>
-            <Badge>{useCase.stageOperator}</Badge>
+            <Link
+              target="_blank"
+              href={getStageHelpLink(useCase.stageOperator) as string}
+            >
+              {useCase.stageOperator}
+            </Link>
           </div>
         </div>
         <div className={wizardContentStyles}>
           <div data-testid="wizard-form">
-            <useCase.wizardComponent onChange={onChangeWizard} />
+            <useCase.wizardComponent
+              fields={fields}
+              onChange={onChangeWizard}
+            />
           </div>
           <div className={cardFooterStyles}>
             <div>
@@ -145,15 +160,37 @@ type WizardOwnProps = {
 
 export default connect(
   (state: RootState, ownProps: WizardOwnProps) => {
-    const wizard = state.pipelineBuilder.stageEditor.stages[
-      ownProps.index
-    ] as Wizard;
+    const {
+      autoPreview,
+      fields: initialFields,
+      pipelineBuilder: {
+        stageEditor: { stages },
+      },
+    } = state;
+
+    const wizard = stages[ownProps.index] as Wizard;
+
+    const previousStage = stages
+      .slice(0, ownProps.index)
+      .reverse()
+      .find((x): x is StoreStage => x.type === 'stage' && !x.disabled);
+
+    const mappedInitialFields = initialFields.map(
+      (x: { name: string }) => x.name
+    );
+    const previousStageFields = getSchema(previousStage?.previewDocs ?? []);
+
+    const fields =
+      previousStageFields.length > 0 && autoPreview
+        ? previousStageFields
+        : mappedInitialFields;
 
     return {
       id: wizard.id,
       syntaxError: wizard.syntaxError,
       useCaseId: wizard.useCaseId,
       value: wizard.value,
+      fields,
     };
   },
   (dispatch: PipelineBuilderThunkDispatch, ownProps: WizardOwnProps) => ({
diff --git a/packages/compass-aggregations/src/utils/get-schema.spec.ts b/packages/compass-aggregations/src/utils/get-schema.spec.ts
@@ -0,0 +1,112 @@
+import { expect } from 'chai';
+import bson from 'bson';
+import { getSchema } from './get-schema';
+
+const DATA = [
+  {
+    useCase: '_id is always the first one',
+    input: [
+      {
+        data: 'something',
+        _id: 123456,
+      },
+    ],
+    output: ['_id', 'data'],
+  },
+  {
+    useCase: 'simple json object',
+    input: [
+      {
+        name: 'hi',
+        data: 'hello',
+      },
+    ],
+    output: ['data', 'name'],
+  },
+  {
+    useCase: 'nested json object',
+    input: [
+      {
+        name: 'hi',
+        data: 'hello',
+        address: {
+          city: 'berlin',
+          street: {
+            name: 'Alt-Moabit',
+            number: 1,
+          },
+        },
+      },
+    ],
+    output: [
+      'address',
+      'address.city',
+      'address.street',
+      'address.street.name',
+      'address.street.number',
+      'data',
+      'name',
+    ],
+  },
+  {
+    useCase: 'multiple nested json object with array values',
+    input: [
+      {
+        data: 'hello',
+        name: 'hi',
+        streets: [
+          {
+            name: 'Alt-Moabit',
+            zip: 10555,
+          },
+          {
+            name: 'Alt-Moabit',
+            number: 12,
+          },
+        ],
+      },
+      {
+        data: 'hello',
+        name: 'hi',
+        streets: [
+          {
+            _id: 1234,
+            city: 'Berlin',
+          },
+        ],
+      },
+    ],
+    output: [
+      'data',
+      'name',
+      'streets',
+      'streets._id',
+      'streets.city',
+      'streets.name',
+      'streets.number',
+      'streets.zip',
+    ],
+  },
+  {
+    useCase: 'handles bson values',
+    input: [
+      {
+        _id: new bson.ObjectId(),
+        data: new bson.Int32(123),
+        address: {
+          street: 'Alt-Moabit',
+          number: new bson.Int32(18),
+        },
+      },
+    ],
+    output: ['_id', 'address', 'address.number', 'address.street', 'data'],
+  },
+];
+
+describe('get schema', function () {
+  DATA.forEach(({ useCase, input, output }) => {
+    it(useCase, function () {
+      expect(getSchema(input)).to.deep.equal(output);
+    });
+  });
+});
diff --git a/packages/compass-aggregations/src/utils/get-schema.ts b/packages/compass-aggregations/src/utils/get-schema.ts
@@ -0,0 +1,40 @@
+import type { Document } from 'mongodb';
+
+const getArrayKeys = (records: Document[]) => {
+  return records
+    .map((item) => getObjectKeys(item))
+    .flat()
+    .filter((x, i, a) => a.indexOf(x) === i)
+    .sort();
+};
+
+const getObjectKeys = (record: Document) => {
+  const keys: string[] = [];
+
+  if (!record) {
+    return keys;
+  }
+
+  for (const key in record) {
+    keys.push(key);
+    const value = record[key];
+
+    if (value && typeof value === 'object') {
+      const isBson = value._bsontype;
+      if (!isBson) {
+        const nestedKeys = Array.isArray(value)
+          ? getArrayKeys(value)
+          : getObjectKeys(value);
+        nestedKeys.forEach((nestedKey) => {
+          keys.push(`${key}.${nestedKey}`);
+        });
+      }
+    }
+  }
+
+  return keys;
+};
+
+export const getSchema = (data: Document[]) => {
+  return getArrayKeys(data);
+};
