@finos/legend-application-studio 13.0.0

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

@@ -0,0 +1,482 @@
+/**
+ * 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 { observer } from 'mobx-react-lite';
+import {
+  type SelectComponent,
+  clsx,
+  CustomSelectorInput,
+  ResizablePanel,
+  ResizablePanelGroup,
+  ResizablePanelSplitter,
+  ResizablePanelSplitterLine,
+  TimesIcon,
+  LockIcon,
+} from '@finos/legend-art';
+import {
+  filterByType,
+  guaranteeNonNullable,
+  prettyCONSTName,
+} from '@finos/legend-shared';
+import {
+  BINDING_TAB_TYPE,
+  BindingEditorState,
+} from '../../../../stores/editor-state/element-editor-state/external-format/BindingEditorState.js';
+import {
+  PackageableElementExplicitReference,
+  SchemaSet,
+  type PackageableElement,
+  type PackageableElementReference,
+} from '@finos/legend-graph';
+import { useCallback, useRef } from 'react';
+import { useDrop } from 'react-dnd';
+import { useEditorStore } from '../../EditorStoreProvider.js';
+import { getElementIcon } from '../../../shared/ElementIconUtils.js';
+import {
+  CORE_DND_TYPE,
+  type ElementDragSource,
+  type UMLEditorElementDropTarget,
+} from '../../../../stores/shared/DnDUtil.js';
+import {
+  externalFormat_Binding_setContentType,
+  externalFormat_Binding_setSchemaId,
+  externalFormat_Binding_setSchemaSet,
+  externalFormat_modelUnit_addPackageableElementExcludes,
+  externalFormat_modelUnit_addPackageableElementIncludes,
+  externalFormat_modelUnit_deletePackageableElementExcludes,
+  externalFormat_modelUnit_deletePackageableElementIncludes,
+} from '../../../../stores/graphModifier/DSLExternalFormat_GraphModifierHelper.js';
+
+const BindingScopeEntryEditor = observer(
+  (props: {
+    elementRef: PackageableElementReference<PackageableElement>;
+    removeElement: (
+      val: PackageableElementReference<PackageableElement>,
+    ) => void;
+    isReadOnly: boolean;
+  }) => {
+    const { elementRef, removeElement, isReadOnly } = props;
+    const editorStore = useEditorStore();
+    return (
+      <div
+        key={elementRef.value.path}
+        className="panel__content__form__section__list__item"
+      >
+        <>
+          <div className="panel__content__form__section__list__item__value binding-scope-entry-editor__element">
+            {
+              <div className="binding-scope-entry-editor__element__icon">
+                {getElementIcon(editorStore, elementRef.value)}
+              </div>
+            }
+            <div className="binding-scope-entry-editor__element__path">
+              {elementRef.value.path}
+            </div>
+          </div>
+          <div className="panel__content__form__section__list__item__actions">
+            <button
+              className="panel__content__form__section__list__item__remove-btn"
+              disabled={isReadOnly}
+              onClick={(): void => removeElement(elementRef)}
+              tabIndex={-1}
+            >
+              <TimesIcon />
+            </button>
+          </div>
+        </>
+      </div>
+    );
+  },
+);
+
+const BindingScopeEditor = observer(
+  (props: {
+    elements: PackageableElementReference<PackageableElement>[];
+    addElement: () => void;
+    removeElement: (
+      val: PackageableElementReference<PackageableElement>,
+    ) => void;
+    allowAddingElement: boolean;
+    handleDropElement: (item: UMLEditorElementDropTarget) => void;
+    isReadOnly: boolean;
+  }) => {
+    const {
+      elements,
+      addElement,
+      removeElement,
+      allowAddingElement,
+      handleDropElement,
+      isReadOnly,
+    } = props;
+    const [{ isElementDragOver }, dropElementRef] = useDrop(
+      () => ({
+        accept: [
+          CORE_DND_TYPE.PROJECT_EXPLORER_ENUMERATION,
+          CORE_DND_TYPE.PROJECT_EXPLORER_PACKAGE,
+          CORE_DND_TYPE.PROJECT_EXPLORER_CLASS,
+          CORE_DND_TYPE.PROJECT_EXPLORER_PROFILE,
+          CORE_DND_TYPE.PROJECT_EXPLORER_ASSOCIATION,
+          CORE_DND_TYPE.PROJECT_EXPLORER_FUNCTION,
+        ],
+        drop: (item: ElementDragSource): void => handleDropElement(item),
+        collect: (monitor): { isElementDragOver: boolean } => ({
+          isElementDragOver: monitor.isOver({ shallow: true }),
+        }),
+      }),
+      [handleDropElement],
+    );
+
+    return (
+      <div className="binding-scope-editor">
+        <div
+          ref={dropElementRef}
+          className="binding-scope-editor__panel__content dnd__overlay__container"
+        >
+          <div
+            className={clsx({ dnd__overlay: isElementDragOver && !isReadOnly })}
+          />
+          <div className="binding-scope-editor__panel__content__form">
+            <div className="binding-scope-editor__panel__content__form__section">
+              <div className="binding-scope-editor__panel__content__form__section__list">
+                {elements.map((elementRef) => (
+                  <BindingScopeEntryEditor
+                    key={elementRef.value._UUID}
+                    elementRef={elementRef}
+                    removeElement={removeElement}
+                    isReadOnly={isReadOnly}
+                  />
+                ))}
+                <div className="binding-scope-editor__panel__content__form__section__list__new-item__add">
+                  <button
+                    className="binding-scope-editor__panel__content__form__section__list__new-item__add-btn btn btn--dark"
+                    disabled={!allowAddingElement}
+                    tabIndex={-1}
+                    onClick={addElement}
+                    title="Add Element"
+                  >
+                    Add Value
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+const BindingGeneralEditor = observer(
+  (props: { editorState: BindingEditorState; isReadOnly: boolean }) => {
+    const { editorState, isReadOnly } = props;
+    const editorStore = useEditorStore();
+    const binding = editorState.binding;
+    const schemaSets = Array.from(
+      editorStore.graphManagerState.graph.allOwnElements,
+    ).filter(filterByType(SchemaSet));
+    const schemaSetOptions = schemaSets.map((e) => ({
+      value: e,
+      label: e.path,
+    }));
+    const onSchemaSetChange = (val: {
+      label: string;
+      value: SchemaSet;
+    }): void => {
+      externalFormat_Binding_setSchemaId(binding, undefined);
+      return externalFormat_Binding_setSchemaSet(
+        binding,
+        PackageableElementExplicitReference.create(val.value),
+      );
+    };
+    const selectedSchemaSet = {
+      value: binding.schemaSet,
+      label: binding.schemaSet?.valueForSerialization,
+    };
+    const schemaIdOptions = selectedSchemaSet.value?.value.schemas.map((e) => ({
+      value: e.id,
+      label: e.id,
+    }));
+    const onSchemaIdChange = (
+      val: { label: string; value: string } | null,
+    ): void => externalFormat_Binding_setSchemaId(binding, val?.value);
+    const selectedSchemaId = {
+      value: binding.schemaId,
+      label: binding.schemaId,
+    };
+    const projectSelectorRef = useRef<SelectComponent>(null);
+    const contentTypeOptions =
+      editorStore.graphState.graphGenerationState.externalFormatState.formatContentTypes.map(
+        (e) => ({
+          value: e,
+          label: e,
+        }),
+      );
+    const onContentTypeChange = (val: { label: string; value: string }): void =>
+      externalFormat_Binding_setContentType(binding, val.value);
+    const selectedContentType = {
+      value: binding.contentType,
+      label: binding.contentType,
+    };
+    return (
+      <div className="binding-general-editor">
+        <div className="binding-general-editor__section__header__label">
+          Content Type
+        </div>
+        <div>
+          <CustomSelectorInput
+            className="binding-general-editor__section__dropdown"
+            disabled={isReadOnly}
+            options={contentTypeOptions}
+            onChange={onContentTypeChange}
+            value={selectedContentType}
+            placeholder="Choose a content type"
+            darkMode={true}
+          />
+        </div>
+        <div className="binding-general-editor__section__header__label">
+          Schema Set
+        </div>
+        <div className="binding-general-editor__content">
+          <CustomSelectorInput
+            className="binding-general-editor__section__dropdown"
+            disabled={isReadOnly}
+            ref={projectSelectorRef}
+            options={schemaSetOptions}
+            onChange={onSchemaSetChange}
+            value={selectedSchemaSet}
+            isClearable={true}
+            placeholder="Choose a schema set"
+            darkMode={true}
+          />
+        </div>
+        <div className="binding-general-editor__section__header__label">
+          Schema ID
+        </div>
+        <div className="binding-general-editor__content">
+          <CustomSelectorInput
+            className="binding-general-editor__section__dropdown"
+            disabled={isReadOnly}
+            ref={projectSelectorRef}
+            options={schemaIdOptions}
+            onChange={onSchemaIdChange}
+            value={selectedSchemaId}
+            isClearable={true}
+            placeholder="Choose a schema ID"
+            darkMode={true}
+          />
+        </div>
+      </div>
+    );
+  },
+);
+
+export const BindingEditor = observer(() => {
+  const editorStore = useEditorStore();
+  const editorState = editorStore.getCurrentEditorState(BindingEditorState);
+  const binding = editorState.binding;
+  const modelUnit = binding.modelUnit;
+  const isReadOnly = editorState.isReadOnly;
+  const selectedTab = editorState.selectedTab;
+  const changeTab =
+    (tab: BINDING_TAB_TYPE): (() => void) =>
+    (): void =>
+      editorState.setSelectedTab(tab);
+  const graph = editorStore.graphManagerState.graph;
+  const allowedElements = [
+    ...graph.ownProfiles,
+    ...graph.ownEnumerations,
+    ...graph.ownClasses,
+    ...graph.ownAssociations,
+    ...graph.ownFunctions,
+  ];
+  const elements = allowedElements.filter(
+    (element) =>
+      !modelUnit.packageableElementIncludes
+        .map((e) => e.value)
+        .includes(element) &&
+      !modelUnit.packageableElementExcludes
+        .map((e) => e.value)
+        .includes(element),
+  );
+  const allowAddingElement = !isReadOnly && Boolean(elements.length);
+  const addInclusion = (): void => {
+    if (allowAddingElement) {
+      externalFormat_modelUnit_addPackageableElementIncludes(
+        modelUnit,
+        PackageableElementExplicitReference.create(
+          guaranteeNonNullable(elements[0]),
+        ),
+      );
+    }
+  };
+  const addExclusion = (): void => {
+    if (allowAddingElement) {
+      externalFormat_modelUnit_addPackageableElementExcludes(
+        modelUnit,
+        PackageableElementExplicitReference.create(
+          guaranteeNonNullable(elements[0]),
+        ),
+      );
+    }
+  };
+  const removeInclusion = (
+    val: PackageableElementReference<PackageableElement>,
+  ): void =>
+    externalFormat_modelUnit_deletePackageableElementIncludes(modelUnit, val);
+  const removeExclusion = (
+    val: PackageableElementReference<PackageableElement>,
+  ): void =>
+    externalFormat_modelUnit_deletePackageableElementExcludes(modelUnit, val);
+  const handleDropInclusion = useCallback(
+    (item: UMLEditorElementDropTarget): void => {
+      const element = item.data.packageableElement;
+      if (
+        !isReadOnly &&
+        !modelUnit.packageableElementIncludes
+          .map((e) => e.value)
+          .includes(element)
+      ) {
+        externalFormat_modelUnit_addPackageableElementIncludes(
+          modelUnit,
+          PackageableElementExplicitReference.create(element),
+        );
+      }
+    },
+    [isReadOnly, modelUnit],
+  );
+  const handleDropExclusion = useCallback(
+    (item: UMLEditorElementDropTarget): void => {
+      const element = item.data.packageableElement;
+      if (
+        !isReadOnly &&
+        !modelUnit.packageableElementExcludes
+          .map((e) => e.value)
+          .includes(element)
+      ) {
+        externalFormat_modelUnit_addPackageableElementExcludes(
+          modelUnit,
+          PackageableElementExplicitReference.create(element),
+        );
+      }
+    },
+    [isReadOnly, modelUnit],
+  );
+  return (
+    <div className="binding-editor">
+      <div className="binding-editor__header">
+        <div className="binding-editor__header__title">
+          {isReadOnly && (
+            <div className="binding-editor__header__lock">
+              <LockIcon />
+            </div>
+          )}
+          <div className="binding-editor__header__title__label">Binding</div>
+          <div className="binding-editor__header__title__content">
+            {binding.name}
+          </div>
+        </div>
+      </div>
+      <div className="uml-element-editor__tabs">
+        {Object.values(BINDING_TAB_TYPE).map((tab) => (
+          <div
+            key={tab}
+            onClick={changeTab(tab)}
+            className={clsx('relational-connection-editor__tab', {
+              'relational-connection-editor__tab--active': tab === selectedTab,
+            })}
+          >
+            {prettyCONSTName(tab)}
+          </div>
+        ))}
+      </div>
+      <div className="binding-editor_content">
+        {selectedTab === BINDING_TAB_TYPE.GENERAL && (
+          <>
+            <div className="binding-editor__header">
+              <div className="binding-editor__header__title">
+                {isReadOnly && (
+                  <div className="element-editor__header__lock">
+                    <LockIcon />
+                  </div>
+                )}
+                <div className="binding-editor__header__title__label">
+                  General
+                </div>
+              </div>
+            </div>
+            <div className="binding-editor__content">
+              <div className="binding-editor__content__lists">
+                <BindingGeneralEditor
+                  editorState={editorState}
+                  isReadOnly={isReadOnly}
+                />
+              </div>
+            </div>
+          </>
+        )}
+        {selectedTab === BINDING_TAB_TYPE.MODELS && (
+          <ResizablePanelGroup orientation="vertical">
+            <ResizablePanel minSize={280} maxSize={550}>
+              <div className="binding-editor__header">
+                <div className="binding-editor__header__title">
+                  <div className="binding-editor__header__title__label">
+                    Model Includes
+                  </div>
+                </div>
+              </div>
+              <div className="binding-editor__header__prompt">
+                Specifies the list of models included
+              </div>
+              <BindingScopeEditor
+                key={editorState.uuid}
+                elements={modelUnit.packageableElementIncludes}
+                addElement={addInclusion}
+                removeElement={removeInclusion}
+                allowAddingElement={allowAddingElement}
+                handleDropElement={handleDropInclusion}
+                isReadOnly={isReadOnly}
+              />
+            </ResizablePanel>
+            <ResizablePanelSplitter>
+              <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
+            </ResizablePanelSplitter>
+            <ResizablePanel>
+              <div className="binding-editor__header">
+                <div className="binding-editor__header__title">
+                  <div className="binding-editor__header__title__label">
+                    Model Excludes
+                  </div>
+                </div>
+              </div>
+              <div className="binding-editor__header__prompt">
+                Specifies the list of models excluded
+              </div>
+              <BindingScopeEditor
+                key={editorState.uuid}
+                elements={modelUnit.packageableElementExcludes}
+                addElement={addExclusion}
+                removeElement={removeExclusion}
+                allowAddingElement={allowAddingElement}
+                handleDropElement={handleDropExclusion}
+                isReadOnly={isReadOnly}
+              />
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        )}
+      </div>
+    </div>
+  );
+});

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

@@ -0,0 +1,98 @@
+/**
+ * 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 { observer } from 'mobx-react-lite';
+import {
+  ExternalFormatConnection,
+  PackageableElementExplicitReference,
+  UrlStream,
+  type Binding,
+} from '@finos/legend-graph';
+import { computed, makeObservable } from 'mobx';
+import { ConnectionValueState } from '../../../../stores/editor-state/element-editor-state/connection/ConnectionEditorState.js';
+import type { EditorStore } from '../../../../stores/EditorStore.js';
+import { NewConnectionValueDriver } from '../../../../stores/editor/NewElementState.js';
+import { externalFormat_urlStream_setUrl } from '../../../../stores/graphModifier/DSLExternalFormat_GraphModifierHelper.js';
+
+export class ExternalFormatConnectionValueState extends ConnectionValueState {
+  override connection: ExternalFormatConnection;
+
+  constructor(editorStore: EditorStore, connection: ExternalFormatConnection) {
+    super(editorStore, connection);
+    this.connection = connection;
+  }
+
+  label(): string {
+    return 'external format connection';
+  }
+}
+
+export const ExternalFormatConnectionEditor = observer(
+  (props: {
+    connectionValueState: ExternalFormatConnectionValueState;
+    isReadOnly: boolean;
+  }) => {
+    const { connectionValueState, isReadOnly } = props;
+    const connection = connectionValueState.connection;
+    const changeUrl: React.ChangeEventHandler<HTMLTextAreaElement> = (event) =>
+      externalFormat_urlStream_setUrl(
+        connection.externalSource,
+        event.target.value,
+      );
+    return (
+      <div className="external-format-connection-editor">
+        <div className="external-format-connection-editor__section">
+          <div className="external-format-connection-editor__section__header__label">
+            URL
+          </div>
+          <div className="external-format-connection-editor__section__header__prompt">
+            Specifies the connection URL
+          </div>
+          <textarea
+            className="external-format-connection-editor__section__textarea"
+            spellCheck={false}
+            value={connection.externalSource.url}
+            onChange={changeUrl}
+            disabled={isReadOnly}
+          />
+        </div>
+      </div>
+    );
+  },
+);
+
+export class NewExternalFormatConnectionDriver extends NewConnectionValueDriver<ExternalFormatConnection> {
+  constructor(editorStore: EditorStore) {
+    super(editorStore);
+
+    makeObservable(this, {
+      isValid: computed,
+    });
+  }
+
+  get isValid(): boolean {
+    return true;
+  }
+
+  createConnection(store: Binding): ExternalFormatConnection {
+    const externalFormatConnection = new ExternalFormatConnection(
+      PackageableElementExplicitReference.create(store),
+    );
+    const urlStream = new UrlStream();
+    externalFormat_urlStream_setUrl(urlStream, '');
+    externalFormatConnection.externalSource = urlStream;
+    return externalFormatConnection;
+  }
+}

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

@@ -0,0 +1,92 @@
+/**
+ * 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 { CustomSelectorInput } from '@finos/legend-art';
+import { SchemaSet } from '@finos/legend-graph';
+import { guaranteeNonNullable } from '@finos/legend-shared';
+import { makeObservable, observable, action } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { useEditorStore } from '../../EditorStoreProvider.js';
+import type { EditorStore } from '../../../../stores/EditorStore.js';
+import { externalFormat_schemaSet_setFormat } from '../../../../stores/graphModifier/DSLExternalFormat_GraphModifierHelper.js';
+import { NewElementDriver } from '../../../../stores/editor/NewElementState.js';
+import type { ExternalFormatTypeOption } from '../../../../stores/editor-state/ExternalFormatState.js';
+
+export class NewSchemaSetDriver extends NewElementDriver<SchemaSet> {
+  formatOption?: ExternalFormatTypeOption | undefined;
+
+  constructor(editorStore: EditorStore) {
+    super(editorStore);
+
+    makeObservable(this, {
+      formatOption: observable,
+      setFormatOption: action,
+    });
+
+    this.formatOption = editorStore.graphState.graphGenerationState
+      .externalFormatState.formatTypeOptions.length
+      ? editorStore.graphState.graphGenerationState.externalFormatState
+          .formatTypeOptions[0]
+      : undefined;
+  }
+
+  setFormatOption(typeOption: ExternalFormatTypeOption | undefined): void {
+    this.formatOption = typeOption;
+  }
+
+  get isValid(): boolean {
+    return Boolean(this.formatOption);
+  }
+
+  createElement(name: string): SchemaSet {
+    const schemaSet = new SchemaSet(name);
+    externalFormat_schemaSet_setFormat(
+      schemaSet,
+      guaranteeNonNullable(this.formatOption).value,
+    );
+    return schemaSet;
+  }
+}
+
+export const NewSchemaSetDriverEditor = observer(() => {
+  const editorStore = useEditorStore();
+  const newConnectionDriver =
+    editorStore.newElementState.getNewElementDriver(NewSchemaSetDriver);
+  const options =
+    editorStore.graphState.graphGenerationState.externalFormatState
+      .formatTypeOptions;
+  const onTypeSelectionChange = (
+    val: ExternalFormatTypeOption | null,
+  ): void => {
+    if (!val) {
+      newConnectionDriver.setFormatOption(undefined);
+    } else {
+      newConnectionDriver.setFormatOption(val);
+    }
+  };
+  return (
+    <div>
+      <div className="">
+        <CustomSelectorInput
+          className="sub-panel__content__form__section__dropdown"
+          options={options}
+          onChange={onTypeSelectionChange}
+          value={newConnectionDriver.formatOption}
+        />
+      </div>
+    </div>
+  );
+});