@finos/legend-application-studio 26.1.4 → 26.1.6

package/src/components/editor/editor-group/service-editor/testable/ServiceTestsEditor.tsx

@@ -34,14 +34,26 @@ import {
   Dialog,
   RefreshIcon,
   TimesIcon,
+  FilledWindowMaximizeIcon,
+  Modal,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalTitle,
 } from '@finos/legend-art';
 import {
+  type Binding,
   type ValueSpecification,
+  PrimitiveInstanceValue,
   PrimitiveType,
   PureMultiExecution,
 } from '@finos/legend-graph';
-import { BasicValueSpecificationEditor } from '@finos/legend-query-builder';
 import {
+  BasicValueSpecificationEditor,
+  instanceValue_setValue,
+} from '@finos/legend-query-builder';
+import {
+  ContentType,
   filterByType,
   guaranteeNonNullable,
   prettyCONSTName,
@@ -71,6 +83,10 @@ import {
   TestAssertionEditor,
   TestAssertionItem,
 } from '../../testable/TestableSharedComponents.js';
+import {
+  CODE_EDITOR_LANGUAGE,
+  CodeEditor,
+} from '@finos/legend-lego/code-editor';
 
 export const NewParameterModal = observer(
   (props: { setupState: ServiceTestSetupState; isReadOnly: boolean }) => {
@@ -123,16 +139,106 @@ export const NewParameterModal = observer(
   },
 );
 
+export const ExternalFormatParameterEditorModal = observer(
+  (props: {
+    paramState: ServiceValueSpecificationTestParameterState;
+    isReadOnly: boolean;
+    onClose: () => void;
+    updateParamValue: (val: string) => void;
+    bindingParamPair: {
+      binding: Binding;
+      param: string;
+    };
+  }) => {
+    const {
+      paramState,
+      isReadOnly,
+      onClose,
+      updateParamValue,
+      bindingParamPair,
+    } = props;
+    return (
+      <Dialog
+        open={true}
+        onClose={onClose}
+        classes={{ container: 'search-modal__container' }}
+        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+      >
+        <Modal
+          darkMode={true}
+          className={clsx('editor-modal lambda-editor__popup__modal')}
+        >
+          <ModalHeader>
+            <ModalTitle title="Edit Parameter Value" />
+          </ModalHeader>
+          <ModalBody>
+            <div className="service-test-editor__setup__parameter__code-editor__container">
+              <div className="service-test-editor__setup__parameter__code-editor__container__content">
+                <CodeEditor
+                  key={paramState.uuid}
+                  inputValue={
+                    (paramState.valueSpec as PrimitiveInstanceValue)
+                      .values[0] as string
+                  }
+                  updateInput={updateParamValue}
+                  isReadOnly={isReadOnly}
+                  language={
+                    bindingParamPair.binding.contentType ===
+                    ContentType.APPLICATION_JSON.toString()
+                      ? CODE_EDITOR_LANGUAGE.JSON
+                      : CODE_EDITOR_LANGUAGE.TEXT
+                  }
+                />
+              </div>
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <button className="btn btn--dark" onClick={onClose}>
+              Close
+            </button>
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);
+
 const ServiceTestParameterEditor = observer(
   (props: {
     isReadOnly: boolean;
     paramState: ServiceValueSpecificationTestParameterState;
     serviceTestState: ServiceTestState;
+    bindingParamPair:
+      | {
+          binding: Binding;
+          param: string;
+        }
+      | undefined;
   }) => {
-    const { serviceTestState, paramState, isReadOnly } = props;
+    const { serviceTestState, paramState, isReadOnly, bindingParamPair } =
+      props;
+    const [showPopUp, setShowPopUp] = useState(false);
     const setupState = serviceTestState.setupState;
     const paramIsRequired =
       paramState.varExpression.multiplicity.lowerBound > 0;
+    const type = bindingParamPair
+      ? bindingParamPair.binding.contentType
+      : paramState.varExpression.genericType?.value.rawType.name ?? 'unknown';
+
+    const openInPopUp = (): void => setShowPopUp(!showPopUp);
+    const closePopUp = (): void => setShowPopUp(false);
+    const updateParamValue = (val: string): void => {
+      if (paramState.valueSpec instanceof PrimitiveInstanceValue) {
+        instanceValue_setValue(
+          paramState.valueSpec,
+          val,
+          0,
+          setupState.editorStore.changeDetectionState.observerContext,
+        );
+        paramState.updateValueSpecification(paramState.valueSpec);
+      }
+    };
+
     return (
       <div
         key={paramState.parameterValue.name}
@@ -143,48 +249,107 @@ const ServiceTestParameterEditor = observer(
           <button
             className={clsx('type-tree__node__type__label', {})}
             tabIndex={-1}
-            title={
-              paramState.varExpression.genericType?.value.rawType.name ?? ''
-            }
+            title={type}
           >
-            {paramState.varExpression.genericType?.value.rawType.name ??
-              'unknown'}
+            {type}
           </button>
         </div>
-        <div className="service-test-editor__setup__parameter__value">
-          <BasicValueSpecificationEditor
-            valueSpecification={paramState.valueSpec}
-            setValueSpecification={(val: ValueSpecification): void => {
-              paramState.updateValueSpecification(val);
-            }}
-            graph={setupState.editorStore.graphManagerState.graph}
-            obseverContext={
-              setupState.editorStore.changeDetectionState.observerContext
-            }
-            typeCheckOption={{
-              expectedType:
-                paramState.varExpression.genericType?.value.rawType ??
-                PrimitiveType.STRING,
-            }}
-            className="query-builder__parameters__value__editor"
-            resetValue={(): void => {
-              paramState.resetValueSpec();
-            }}
-          />
-          <div className="service-test-editor__setup__parameter__value__actions">
-            <button
-              className="btn--icon btn--dark btn--sm"
-              disabled={isReadOnly || paramIsRequired}
-              onClick={(): void => setupState.removeParamValueState(paramState)}
-              tabIndex={-1}
-              title={
-                paramIsRequired ? 'Parameter Required' : 'Remove Parameter'
-              }
-            >
-              <TimesIcon />
-            </button>
-          </div>
-        </div>
+        <>
+          {bindingParamPair ? (
+            <div className="service-test-editor__setup__parameter__code-editor">
+              <textarea
+                className="panel__content__form__section__textarea value-spec-editor__input"
+                spellCheck={false}
+                value={
+                  (paramState.valueSpec as PrimitiveInstanceValue)
+                    .values[0] as string
+                }
+                placeholder={
+                  ((paramState.valueSpec as PrimitiveInstanceValue)
+                    .values[0] as string) === ''
+                    ? '(empty)'
+                    : undefined
+                }
+                onChange={(event) => {
+                  updateParamValue(event.target.value);
+                }}
+              />
+              {showPopUp && (
+                <ExternalFormatParameterEditorModal
+                  paramState={paramState}
+                  isReadOnly={isReadOnly}
+                  onClose={closePopUp}
+                  updateParamValue={updateParamValue}
+                  bindingParamPair={bindingParamPair}
+                />
+              )}
+              <div className="service-test-editor__setup__parameter__value__actions">
+                <button
+                  className={clsx(
+                    'service-test-editor__setup__parameter__code-editor__expand-btn',
+                  )}
+                  onClick={openInPopUp}
+                  tabIndex={-1}
+                  title="Open in a popup..."
+                >
+                  <FilledWindowMaximizeIcon />
+                </button>
+                <button
+                  className={clsx(
+                    'btn--icon btn--dark btn--sm service-test-editor__setup__parameter__code-editor__expand-btn',
+                  )}
+                  disabled={isReadOnly || paramIsRequired}
+                  onClick={(): void =>
+                    setupState.removeParamValueState(paramState)
+                  }
+                  tabIndex={-1}
+                  title={
+                    paramIsRequired ? 'Parameter Required' : 'Remove Parameter'
+                  }
+                >
+                  <TimesIcon />
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div className="service-test-editor__setup__parameter__value">
+              <BasicValueSpecificationEditor
+                valueSpecification={paramState.valueSpec}
+                setValueSpecification={(val: ValueSpecification): void => {
+                  paramState.updateValueSpecification(val);
+                }}
+                graph={setupState.editorStore.graphManagerState.graph}
+                obseverContext={
+                  setupState.editorStore.changeDetectionState.observerContext
+                }
+                typeCheckOption={{
+                  expectedType:
+                    paramState.varExpression.genericType?.value.rawType ??
+                    PrimitiveType.STRING,
+                }}
+                className="query-builder__parameters__value__editor"
+                resetValue={(): void => {
+                  paramState.resetValueSpec();
+                }}
+              />
+              <div className="service-test-editor__setup__parameter__value__actions">
+                <button
+                  className="btn--icon btn--dark btn--sm"
+                  disabled={isReadOnly || paramIsRequired}
+                  onClick={(): void =>
+                    setupState.removeParamValueState(paramState)
+                  }
+                  tabIndex={-1}
+                  title={
+                    paramIsRequired ? 'Parameter Required' : 'Remove Parameter'
+                  }
+                >
+                  <TimesIcon />
+                </button>
+              </div>
+            </div>
+          )}
+        </>
       </div>
     );
   },
@@ -338,6 +503,12 @@ const ServiceTestSetupEditor = observer(
                         isReadOnly={isReadOnly}
                         paramState={paramState}
                         serviceTestState={serviceTestState}
+                        bindingParamPair={setupState
+                          .getBindingWithParamFromQuery()
+                          .find(
+                            (pair) =>
+                              pair.param === paramState.parameterValue.name,
+                          )}
                       />
                     ))}
                 </div>

package/src/stores/editor/editor-state/element-editor-state/service/testable/ServiceTestEditorState.ts

@@ -15,6 +15,7 @@
  */
 
 import {
+  type Binding,
   type ServiceTest,
   type Service,
   type ValueSpecification,
@@ -23,6 +24,13 @@ import {
   buildLambdaVariableExpressions,
   VariableExpression,
   PureMultiExecution,
+  PackageableElementImplicitReference,
+  matchFunctionName,
+  isStubbed_RawLambda,
+  InstanceValue,
+  LambdaFunctionInstanceValue,
+  SimpleFunctionExpression,
+  CollectionInstanceValue,
 } from '@finos/legend-graph';
 import { action, flow, makeObservable, observable } from 'mobx';
 import { TestableTestEditorState } from '../../testable/TestableEditorState.js';
@@ -37,6 +45,7 @@ import {
   service_setSerializationFormat,
 } from '../../../../../graph-modifier/DSL_Service_GraphModifierHelper.js';
 import {
+  type PlainObject,
   assertErrorThrown,
   deleteEntry,
   filterByType,
@@ -44,10 +53,15 @@ import {
   isNonNullable,
   returnUndefOnError,
   uuid,
-  type PlainObject,
+  getNullableFirstEntry,
+  LogEvent,
 } from '@finos/legend-shared';
 import type { EditorStore } from '../../../../EditorStore.js';
-import { generateVariableExpressionMockValue } from '@finos/legend-query-builder';
+import {
+  QUERY_BUILDER_SUPPORTED_FUNCTIONS,
+  generateVariableExpressionMockValue,
+} from '@finos/legend-query-builder';
+import { LEGEND_STUDIO_APP_EVENT } from '../../../../../../__lib__/LegendStudioEvent.js';
 
 export enum SERIALIZATION_FORMAT {
   PURE = 'PURE',
@@ -180,6 +194,7 @@ export class ServiceTestSetupState {
       addServiceTestAssertKeys: action,
       syncWithQuery: action,
       removeParamValueState: action,
+      getBindingWithParamFromQuery: action,
     });
     this.parameterValueStates = this.buildParameterStates();
   }
@@ -221,6 +236,105 @@ export class ServiceTestSetupState {
     }));
   }
 
+  getBindingWithParamFromQuery(): {
+    binding: Binding;
+    param: string;
+  }[] {
+    const query =
+      this.testState.suiteState.testableState.serviceEditorState.serviceQuery;
+    if (query && !isStubbed_RawLambda(query)) {
+      // safely pass unsupported funtions when building ValueSpecification from Rawlambda
+      try {
+        const valueSpec =
+          this.editorStore.graphManagerState.graphManager.buildValueSpecification(
+            this.editorStore.graphManagerState.graphManager.serializeRawValueSpecification(
+              query,
+            ),
+            this.editorStore.graphManagerState.graph,
+          );
+
+        if (valueSpec instanceof LambdaFunctionInstanceValue) {
+          return this.getBindingWithParamRecursively(
+            valueSpec.values[0]?.expressionSequence[0],
+          );
+        }
+      } catch (error) {
+        this.editorStore.applicationStore.logService.error(
+          LogEvent.create(
+            LEGEND_STUDIO_APP_EVENT.TEST_DATA_GENERATION__SETUP__FAILURE,
+          ),
+          error,
+        );
+      }
+    }
+    return [];
+  }
+
+  getBindingWithParamRecursively(expression: ValueSpecification | undefined): {
+    binding: Binding;
+    param: string;
+  }[] {
+    let currentExpression = expression;
+    const res: {
+      binding: Binding;
+      param: string;
+    }[] = [];
+    // use if statement to safely scan service query without breaking the app
+    while (currentExpression instanceof SimpleFunctionExpression) {
+      if (
+        matchFunctionName(
+          currentExpression.functionName,
+          QUERY_BUILDER_SUPPORTED_FUNCTIONS.INTERNALIZE,
+        ) ||
+        matchFunctionName(
+          currentExpression.functionName,
+          QUERY_BUILDER_SUPPORTED_FUNCTIONS.GET_RUNTIME_WITH_MODEL_QUERY_CONNECTION,
+        )
+      ) {
+        if (currentExpression.parametersValues[1] instanceof InstanceValue) {
+          if (
+            currentExpression.parametersValues[1].values[0] instanceof
+              PackageableElementImplicitReference<Binding> &&
+            currentExpression.parametersValues[2] instanceof VariableExpression
+          ) {
+            res.push({
+              binding: currentExpression.parametersValues[1].values[0]
+                .value as Binding,
+              param: currentExpression.parametersValues[2].name,
+            });
+          }
+        }
+        currentExpression = currentExpression.parametersValues[1];
+      } else if (
+        matchFunctionName(
+          currentExpression.functionName,
+          QUERY_BUILDER_SUPPORTED_FUNCTIONS.FROM,
+        )
+      ) {
+        currentExpression = currentExpression.parametersValues[2];
+      } else if (
+        matchFunctionName(
+          currentExpression.functionName,
+          QUERY_BUILDER_SUPPORTED_FUNCTIONS.MERGERUNTIMES,
+        )
+      ) {
+        const collection = currentExpression.parametersValues[0];
+        if (collection instanceof CollectionInstanceValue) {
+          collection.values
+            .map((v) => this.getBindingWithParamRecursively(v))
+            .flat()
+            .map((p) => res.push(p));
+        }
+        currentExpression = collection;
+      } else {
+        currentExpression = getNullableFirstEntry(
+          currentExpression.parametersValues,
+        );
+      }
+    }
+    return res;
+  }
+
   addServiceTestAssertKeys(val: string[]): void {
     service_addAssertKeyForTest(this.testState.test, val);
   }