@finos/legend-application-studio 13.1.0 → 14.0.0

package/src/components/editor/edit-panel/external-format-editor/SchemaSetElementEditor.tsx

@@ -24,7 +24,6 @@ import {
   ResizablePanelSplitterLine,
   LockIcon,
   PlusIcon,
-  RefreshIcon,
   PanelLoadingIndicator,
   UploadIcon,
   Dialog,
@@ -33,25 +32,17 @@ import {
   MenuContent,
   MenuContentItem,
 } from '@finos/legend-art';
-import {
-  type GenerationProperty,
-  ExternalFormatSchema as Schema,
-} from '@finos/legend-graph';
+import { ExternalFormatSchema as Schema } from '@finos/legend-graph';
 import { flowResult } from 'mobx';
-import { useMemo } from 'react';
 import {
   SchemaSetEditorState,
+  type InnerSchemaSetEditorState,
   SCHEMA_SET_TAB_TYPE,
 } from '../../../../stores/editor-state/element-editor-state/external-format/SchemaSetEditorState.js';
 import { EDITOR_LANGUAGE } from '@finos/legend-application';
 import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
 import { getEditorLanguageFromFormat } from '../../../../stores/editor-state/FileGenerationViewerState.js';
-import {
-  debounce,
-  guaranteeNonNullable,
-  prettyCONSTName,
-} from '@finos/legend-shared';
-import { GenerationPropertyEditor } from '../element-generation-editor/FileGenerationEditor.js';
+import { guaranteeNonNullable, prettyCONSTName } from '@finos/legend-shared';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
   externalFormat_schemaSet_addSchema,
@@ -60,9 +51,12 @@ import {
   externalFormat_schema_setId,
   externalFormat_schema_setLocation,
 } from '../../../../stores/graphModifier/DSLExternalFormat_GraphModifierHelper.js';
+import { SchemaSetModelGenerationEditor } from './SchemaSetModelGenerationEditor.js';
 
 const SchemaLoader = observer(
-  (props: { schemaSetEditorState: SchemaSetEditorState }) => {
+  (props: {
+    schemaSetEditorState: InnerSchemaSetEditorState | SchemaSetEditorState;
+  }) => {
     const { schemaSetEditorState } = props;
     const importState = schemaSetEditorState.importSchemaContentState;
     const onClose = (): void => importState.closeModal();
@@ -199,19 +193,23 @@ const SchemaBasicEditor = observer(
   },
 );
 
-const SchemaSetGeneralEditor = observer(
-  (props: { schemaSetEditorState: SchemaSetEditorState }) => {
-    const { schemaSetEditorState } = props;
+export const SchemaSetGeneralEditor = observer(
+  (props: {
+    schemaSetEditorState: InnerSchemaSetEditorState | SchemaSetEditorState;
+    isReadOnly: boolean;
+  }) => {
+    const { schemaSetEditorState, isReadOnly } = props;
     const schemaSet = schemaSetEditorState.schemaSet;
     const applicationStore = schemaSetEditorState.editorStore.applicationStore;
     const importSchemaContentState =
       schemaSetEditorState.importSchemaContentState;
     const currentSchema = schemaSetEditorState.currentSchema;
-    const isReadOnly = schemaSetEditorState.isReadOnly;
     const description =
       schemaSetEditorState.schemaSetModelGenerationState.description;
     // TEMPROARY engine api should return `fileformat`.
-    const language = getEditorLanguageFromFormat(description.name);
+    const language = description
+      ? getEditorLanguageFromFormat(description.name)
+      : EDITOR_LANGUAGE.TEXT;
     const changeState =
       (schema: Schema): (() => void) =>
       (): void => {
@@ -246,7 +244,10 @@ const SchemaSetGeneralEditor = observer(
         }
       };
     const validateSchema = (): void => {
-      if (currentSchema) {
+      if (
+        currentSchema &&
+        schemaSetEditorState instanceof SchemaSetEditorState
+      ) {
         flowResult(schemaSetEditorState.validateSchema(currentSchema)).catch(
           applicationStore.alertUnhandledError,
         );
@@ -332,15 +333,17 @@ const SchemaSetGeneralEditor = observer(
                 </div>
               </div>
               <div className="panel__header__actions">
-                <button
-                  className="btn--dark model-loader__header__load-btn"
-                  onClick={validateSchema}
-                  disabled={!currentSchema}
-                  tabIndex={-1}
-                  title="Validate Schema"
-                >
-                  Validate
-                </button>
+                {schemaSetEditorState instanceof SchemaSetEditorState && (
+                  <button
+                    className="btn--dark model-loader__header__load-btn"
+                    onClick={validateSchema}
+                    disabled={!currentSchema}
+                    tabIndex={-1}
+                    title="Validate Schema"
+                  >
+                    Validate
+                  </button>
+                )}
               </div>
             </div>
             <div className="schema-set-panel__content">
@@ -366,133 +369,6 @@ const SchemaSetGeneralEditor = observer(
   },
 );
 
-const SchemaSetModelGenerationEditor = observer(
-  (props: { schemaSetEditorState: SchemaSetEditorState }) => {
-    const { schemaSetEditorState } = props;
-    const applicationStore = schemaSetEditorState.editorStore.applicationStore;
-    const schemaSet = schemaSetEditorState.schemaSet;
-    const modelGenerationState =
-      schemaSetEditorState.schemaSetModelGenerationState;
-    const description = modelGenerationState.description;
-    const properties = description.modelGenerationProperties;
-    const isReadOnly = schemaSetEditorState.isReadOnly;
-    const debouncedRegenerate = useMemo(
-      () =>
-        debounce(() => flowResult(modelGenerationState.generateModel()), 500),
-      [modelGenerationState],
-    );
-    const update = (
-      generationProperty: GenerationProperty,
-      newValue: object,
-    ): void => {
-      debouncedRegenerate.cancel();
-      modelGenerationState.updateGenerationParameters(
-        generationProperty,
-        newValue,
-      );
-      debouncedRegenerate()?.catch(applicationStore.alertUnhandledError);
-    };
-    const regenerate = (): void => {
-      modelGenerationState.generateModel();
-    };
-    const getConfigValue = (name: string): unknown | undefined =>
-      modelGenerationState.getConfigValue(name);
-
-    const importGeneratedElements = (): void => {
-      modelGenerationState.importGrammar();
-    };
-    return (
-      <div className="panel__content file-generation-editor__content">
-        <ResizablePanelGroup orientation="vertical">
-          <ResizablePanel size={250} minSize={50}>
-            <div className="panel file-generation-editor__configuration">
-              <div className="panel__header">
-                <div className="panel__header__title">
-                  <div className="panel__header__title__label">{`${schemaSet.format} configuration`}</div>
-                </div>
-                <div className="panel__header__actions">
-                  <button
-                    className="panel__header__action file-generation-editor__configuration__reset-btn"
-                    tabIndex={-1}
-                    disabled={isReadOnly || !properties.length}
-                    onClick={regenerate}
-                    title={'Reset to default configuration'}
-                  >
-                    <RefreshIcon />
-                  </button>
-                </div>
-              </div>
-              <div className="panel__content">
-                <div className="file-generation-editor__configuration__content">
-                  {modelGenerationState.modelGenerationProperties.map(
-                    (abstractGenerationProperty) => (
-                      <GenerationPropertyEditor
-                        key={abstractGenerationProperty.name}
-                        update={update}
-                        isReadOnly={isReadOnly}
-                        getConfigValue={getConfigValue}
-                        property={abstractGenerationProperty}
-                      />
-                    ),
-                  )}
-                </div>
-              </div>
-            </div>
-          </ResizablePanel>
-          <ResizablePanelSplitter>
-            <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
-          </ResizablePanelSplitter>
-          <ResizablePanel>
-            <div className="panel generation-result-viewer__file">
-              <div className="panel__header">
-                <div className="panel__header__title">
-                  <div className="panel__header__title__label">result</div>
-                </div>
-                <div className="panel__header__actions">
-                  <button
-                    className={clsx(
-                      'panel__header__action  generation-result-viewer__regenerate-btn',
-                      {
-                        ' generation-result-viewer__regenerate-btn--loading':
-                          modelGenerationState.isGenerating,
-                      },
-                    )}
-                    tabIndex={-1}
-                    disabled={modelGenerationState.isGenerating}
-                    onClick={regenerate}
-                    title={'Re-generate'}
-                  >
-                    <RefreshIcon />
-                  </button>
-                  <button
-                    className="btn--dark model-loader__header__load-btn"
-                    onClick={importGeneratedElements}
-                    disabled={modelGenerationState.generationValue === ''}
-                    tabIndex={-1}
-                    title="Import generated elements"
-                  >
-                    Import
-                  </button>
-                </div>
-              </div>
-              <div className="panel__content">
-                <PanelLoadingIndicator
-                  isLoading={modelGenerationState.isGenerating}
-                />
-                <StudioTextInputEditor
-                  inputValue={modelGenerationState.generationValue}
-                  isReadOnly={true}
-                  language={EDITOR_LANGUAGE.PURE}
-                />
-              </div>
-            </div>
-          </ResizablePanel>
-        </ResizablePanelGroup>
-      </div>
-    );
-  },
-);
-
 export const SchemaSetEditor = observer(() => {
   const editorStore = useEditorStore();
   const schemaSetEditorState =
@@ -513,17 +389,23 @@ export const SchemaSetEditor = observer(() => {
         <BlankPanelContent>Fetching format descriptions</BlankPanelContent>
       );
     }
-    if (currentTab === SCHEMA_SET_TAB_TYPE.GENERAL) {
+    if (currentTab === SCHEMA_SET_TAB_TYPE.SCHEMAS) {
       return (
-        <SchemaSetGeneralEditor schemaSetEditorState={schemaSetEditorState} />
+        <SchemaSetGeneralEditor
+          schemaSetEditorState={schemaSetEditorState}
+          isReadOnly={isReadOnly}
+        />
       );
     }
     const supportsModelGeneraiton =
       schemaSetEditorState.schemaSetModelGenerationState.description
-        .supportsModelGeneration;
+        ?.supportsModelGeneration;
     return supportsModelGeneraiton ? (
       <SchemaSetModelGenerationEditor
-        schemaSetEditorState={schemaSetEditorState}
+        modelGenerationState={
+          schemaSetEditorState.schemaSetModelGenerationState
+        }
+        isReadOnly={isReadOnly}
       />
     ) : (
       <BlankPanelContent>
@@ -531,11 +413,12 @@ export const SchemaSetEditor = observer(() => {
       </BlankPanelContent>
     );
   };
+
   return (
     <div className="panel schema-set-panel">
       <div className="schema-set-panel__header">
         <div className="schema-set-panel__header__title">
-          {isReadOnly && (
+          {schemaSetEditorState.isReadOnly && (
             <div className="schema-set-panel__header__lock">
               <LockIcon />
             </div>
@@ -544,7 +427,7 @@ export const SchemaSetEditor = observer(() => {
             Schema Set
           </div>
           <div className="schema-set-panel__header__title__content">
-            {schemaSet.name}
+            {schemaSetEditorState.schemaSet.name}
           </div>
         </div>
       </div>
@@ -568,13 +451,14 @@ export const SchemaSetEditor = observer(() => {
         </div>
 
         <div className="panel__content file-generation-editor__content">
-          {currentTab === SCHEMA_SET_TAB_TYPE.GENERAL && (
+          {currentTab === SCHEMA_SET_TAB_TYPE.SCHEMAS && (
             <SchemaSetGeneralEditor
               schemaSetEditorState={schemaSetEditorState}
+              isReadOnly={isReadOnly}
             />
           )}
 
-          {currentTab === SCHEMA_SET_TAB_TYPE.MODEL_GENERATION &&
+          {currentTab === SCHEMA_SET_TAB_TYPE.GENERATE_MODEL &&
             renderMainEditPanel()}
         </div>
       </div>

package/src/components/editor/edit-panel/external-format-editor/SchemaSetModelGenerationEditor.tsx

@@ -0,0 +1,226 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { type GenerationProperty, isValidFullPath } from '@finos/legend-graph';
+import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { useMemo } from 'react';
+import type { SchemaSetModelGenerationState } from '../../../../stores/editor-state/element-editor-state/external-format/SchemaSetEditorState.js';
+import { debounce } from '@finos/legend-shared';
+import {
+  clsx,
+  InputWithInlineValidation,
+  PanelLoadingIndicator,
+  RefreshIcon,
+  ResizablePanel,
+  ResizablePanelGroup,
+  ResizablePanelSplitter,
+  ResizablePanelSplitterLine,
+} from '@finos/legend-art';
+import { GenerationPropertyEditor } from '../element-generation-editor/FileGenerationEditor.js';
+import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
+import { EDITOR_LANGUAGE } from '@finos/legend-application';
+
+enum HIDDEN_CONFIGURATION_PROPERTIES {
+  FORMAT = 'format',
+}
+
+export const SchemaSetModelGenerationEditor = observer(
+  (props: {
+    modelGenerationState: SchemaSetModelGenerationState;
+    isReadOnly: boolean;
+  }) => {
+    const { modelGenerationState, isReadOnly } = props;
+    const applicationStore = modelGenerationState.editorStore.applicationStore;
+    const format = modelGenerationState.schemaSet.format;
+    const description = modelGenerationState.description;
+    const properties = description?.modelGenerationProperties ?? [];
+    const debouncedRegenerate = useMemo(
+      () =>
+        debounce(() => flowResult(modelGenerationState.generateModel()), 500),
+      [modelGenerationState],
+    );
+    const update = (
+      generationProperty: GenerationProperty,
+      newValue: object,
+    ): void => {
+      debouncedRegenerate.cancel();
+      modelGenerationState.updateGenerationParameters(
+        generationProperty,
+        newValue,
+      );
+      debouncedRegenerate()?.catch(applicationStore.alertUnhandledError);
+    };
+    const regenerate = (): void => {
+      modelGenerationState.generateModel();
+    };
+    const getConfigValue = (name: string): unknown | undefined =>
+      modelGenerationState.getConfigValue(name);
+    const targetBindingPathValidationMessage =
+      Boolean(modelGenerationState.targetBinding) &&
+      !isValidFullPath(modelGenerationState.targetBinding)
+        ? 'Invalid target binding path'
+        : undefined;
+
+    const changeTargetBindingPath: React.ChangeEventHandler<
+      HTMLInputElement
+    > = (event) => {
+      modelGenerationState.setTargetBindingPath(event.target.value);
+      if (
+        !modelGenerationState.targetBinding ||
+        (modelGenerationState.targetBinding &&
+          isValidFullPath(modelGenerationState.targetBinding))
+      ) {
+        modelGenerationState.handleTargetBindingPathChange();
+        debouncedRegenerate()?.catch(applicationStore.alertUnhandledError);
+      }
+    };
+    const importGeneratedElements = (): void => {
+      modelGenerationState.importGeneratedModelsIntoGraph();
+    };
+
+    return (
+      <div className="panel__content file-generation-editor__content">
+        <ResizablePanelGroup orientation="vertical">
+          <ResizablePanel size={250} minSize={50}>
+            <div className="panel file-generation-editor__configuration">
+              <div className="panel__header">
+                <div className="panel__header__title">
+                  <div className="panel__header__title__label">{`${format} configuration`}</div>
+                </div>
+                <div className="panel__header__actions">
+                  <button
+                    className="panel__header__action file-generation-editor__configuration__reset-btn"
+                    tabIndex={-1}
+                    disabled={isReadOnly || !properties.length}
+                    onClick={regenerate}
+                    title={'Reset to default configuration'}
+                  >
+                    <RefreshIcon />
+                  </button>
+                </div>
+              </div>
+              <div className="panel__content">
+                <div className="file-generation-editor__configuration__content">
+                  <div className="panel__content__form__section">
+                    <div className="panel__content__form__section__header__label">
+                      {'Target Binding Path'}
+                    </div>
+                    <div className="panel__content__form__section__header__prompt">
+                      {
+                        'If path is provided, a binding will be generated alongside the models. The binding will ensure the schema and models are compatible through compile time validations.'
+                      }
+                    </div>
+                    <InputWithInlineValidation
+                      className="query-builder__parameters__parameter__name__input input-group__input"
+                      spellCheck={false}
+                      value={modelGenerationState.targetBinding}
+                      onChange={changeTargetBindingPath}
+                      placeholder={`Target binding path`}
+                      validationErrorMessage={
+                        targetBindingPathValidationMessage
+                      }
+                    />
+                  </div>
+
+                  {modelGenerationState.modelGenerationProperties
+                    .filter(
+                      (property) =>
+                        !Object.values(
+                          HIDDEN_CONFIGURATION_PROPERTIES,
+                        ).includes(
+                          property.name as HIDDEN_CONFIGURATION_PROPERTIES,
+                        ),
+                    )
+                    .map((abstractGenerationProperty) => (
+                      <GenerationPropertyEditor
+                        key={abstractGenerationProperty.name}
+                        update={update}
+                        isReadOnly={isReadOnly}
+                        getConfigValue={getConfigValue}
+                        property={abstractGenerationProperty}
+                      />
+                    ))}
+                </div>
+              </div>
+            </div>
+          </ResizablePanel>
+          <ResizablePanelSplitter>
+            <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
+          </ResizablePanelSplitter>
+          <ResizablePanel>
+            <div className="panel generation-result-viewer__file">
+              <div className="panel__header">
+                <div className="panel__header__title">
+                  <div className="panel__header__title__label">result</div>
+                </div>
+                <div className="panel__header__actions">
+                  <button
+                    className={clsx(
+                      'panel__header__action  generation-result-viewer__regenerate-btn',
+                      {
+                        ' generation-result-viewer__regenerate-btn--loading':
+                          modelGenerationState.generatingModelsState
+                            .isInProgress ||
+                          modelGenerationState.importGeneratedElementsState
+                            .isInProgress,
+                      },
+                    )}
+                    tabIndex={-1}
+                    disabled={
+                      modelGenerationState.generatingModelsState.isInProgress ||
+                      modelGenerationState.importGeneratedElementsState
+                        .isInProgress
+                    }
+                    onClick={regenerate}
+                    title={'Re-generate'}
+                  >
+                    <RefreshIcon />
+                  </button>
+                  {!modelGenerationState.isolatedGraph && (
+                    <button
+                      className="btn--dark model-loader__header__load-btn"
+                      onClick={importGeneratedElements}
+                      disabled={modelGenerationState.generationValue === ''}
+                      tabIndex={-1}
+                      title="Import generated elements"
+                    >
+                      Import
+                    </button>
+                  )}
+                </div>
+              </div>
+              <div className="panel__content">
+                <PanelLoadingIndicator
+                  isLoading={
+                    modelGenerationState.generatingModelsState.isInProgress ||
+                    modelGenerationState.importGeneratedElementsState
+                      .isInProgress
+                  }
+                />
+                <StudioTextInputEditor
+                  inputValue={modelGenerationState.generationValue}
+                  isReadOnly={true}
+                  language={EDITOR_LANGUAGE.PURE}
+                />
+              </div>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    );
+  },
+);

package/src/components/editor/edit-panel/service-editor/testable/ServiceTestDataEditor.tsx

@@ -212,12 +212,14 @@ export const NewConnectionDataModal = observer(
     const dataElementOptions = testDataState.editorStore.dataOptions;
     const newConnectionState = testDataState.newConnectionDataState;
     const dataElement = newConnectionState.dataElement;
-    const selectedOption = dataElement ? buildElementOption(dataElement) : null;
+    const selectedDataElement = dataElement
+      ? buildElementOption(dataElement)
+      : null;
     const onDataElementChange = (val: {
       label: string;
       value?: DataElement;
     }): void => {
-      if (val.value !== selectedOption?.value && val.value) {
+      if (val.value !== selectedDataElement?.value && val.value) {
         newConnectionState.setDataElement(val.value);
       }
     };
@@ -265,7 +267,7 @@ export const NewConnectionDataModal = observer(
     // external format
     const selectedEmbeddedType = newConnectionState.embeddedDataType
       ? {
-          label: prettyCONSTName(newConnectionState.embeddedDataType.label),
+          label: prettyCONSTName(newConnectionState.embeddedDataType.value),
           value: newConnectionState.embeddedDataType.value,
         }
       : undefined;
@@ -301,42 +303,67 @@ export const NewConnectionDataModal = observer(
       >
         <form
           onSubmit={handleSubmit}
-          className="modal modal--dark search-modal"
+          className="modal service-test-data-modal modal--dark"
         >
-          <div className="modal__title">Create a connection test data</div>
-          <div className="explorer__new-element-modal__driver">
-            <CustomSelectorInput
-              className="explorer__new-element-modal__driver__dropdown"
-              options={connectionOptions}
-              onChange={onConnectionSelectionChange}
-              value={selectedConnection}
-              isClearable={false}
-              darkMode={true}
-            />
+          <div className="modal__header">
+            <div className="modal__title">Create a connection test data</div>
           </div>
-          <div className="explorer__new-element-modal__driver">
-            <CustomSelectorInput
-              className="explorer__new-element-modal__driver__dropdown"
-              options={embeddedOptions}
-              onChange={onEmbeddedTypeChange}
-              value={selectedEmbeddedType}
-              isClearable={false}
-              darkMode={true}
-            />
-          </div>
-          {selectedEmbeddedType?.value === EmbeddedDataType.DATA_ELEMENT && (
-            <div className="explorer__new-element-modal__driver">
-              <CustomSelectorInput
-                className="panel__content__form__section__dropdown data-element-reference-editor__value__dropdown"
-                disabled={isReadOnly}
-                options={dataElementOptions}
-                onChange={onDataElementChange}
-                value={selectedOption}
-                darkMode={true}
-              />
+          <div className="modal__body">
+            <div className="panel__content__form__section">
+              <div className="panel__content__form__section__header__label">
+                Connection ID
+              </div>
+              <div className="panel__content__form__section__header__prompt">
+                Connection in runtime to povide test data for
+              </div>
+              <div className="explorer__new-element-modal__driver">
+                <CustomSelectorInput
+                  className="explorer__new-element-modal__driver__dropdown"
+                  options={connectionOptions}
+                  onChange={onConnectionSelectionChange}
+                  value={selectedConnection}
+                  isClearable={false}
+                  darkMode={true}
+                />
+              </div>
             </div>
-          )}
-          <div className="search-modal__actions">
+            <div className="panel__content__form__section">
+              <div className="panel__content__form__section__header__label">
+                Data Type
+              </div>
+              <div className="panel__content__form__section__header__prompt">
+                Test data type that will be loaded to your test connection
+              </div>
+              <div className="explorer__new-element-modal__driver">
+                <CustomSelectorInput
+                  className="explorer__new-element-modal__driver__dropdown"
+                  options={embeddedOptions}
+                  onChange={onEmbeddedTypeChange}
+                  value={selectedEmbeddedType}
+                  isClearable={false}
+                  darkMode={true}
+                />
+              </div>
+            </div>
+            {selectedEmbeddedType?.value === EmbeddedDataType.DATA_ELEMENT && (
+              <div className="panel__content__form__section">
+                <div className="panel__content__form__section__header__label">
+                  Data Element
+                </div>
+                <div className="explorer__new-element-modal__driver">
+                  <CustomSelectorInput
+                    className="panel__content__form__section__dropdown data-element-reference-editor__value__dropdown"
+                    disabled={isReadOnly}
+                    options={dataElementOptions}
+                    onChange={onDataElementChange}
+                    value={selectedDataElement}
+                    darkMode={true}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="modal__footer">
             <button
               type="button"
               className="btn btn--dark"