@finos/legend-extension-dsl-data-space-studio 0.1.152 → 0.1.154

package/src/components/DataSpaceExecutionContextEditor.tsx

@@ -0,0 +1,692 @@
+/**
+ * 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 ElementDragSource,
+  type UMLEditorElementDropTarget,
+  CORE_DND_TYPE,
+  useEditorStore,
+} from '@finos/legend-application-studio';
+import { observer } from 'mobx-react-lite';
+import { useDrop } from 'react-dnd';
+import { DataSpaceEditorState } from '../stores/DataSpaceEditorState.js';
+import {
+  BlankPanelPlaceholder,
+  clsx,
+  ContextMenu,
+  CustomSelectorInput,
+  Dialog,
+  ErrorIcon,
+  ExclamationTriangleIcon,
+  InputWithInlineValidation,
+  LongArrowRightIcon,
+  MenuContent,
+  MenuContentItem,
+  ModalTitle,
+  PanelContent,
+  PanelDropZone,
+  PanelHeader,
+  PanelHeaderActionItem,
+  PanelHeaderActions,
+  PlusIcon,
+  PURE_MappingIcon,
+  PURE_RuntimeIcon,
+  ResizablePanel,
+  ResizablePanelGroup,
+  ResizablePanelSplitter,
+  ResizablePanelSplitterLine,
+} from '@finos/legend-art';
+import {
+  Mapping,
+  PackageableElementExplicitReference,
+  PackageableRuntime,
+  validate_PureExecutionMapping,
+} from '@finos/legend-graph';
+import {
+  dataSpace_setExecutionContextDefaultRuntime,
+  dataSpace_setExecutionContextMapping,
+  dataSpace_setExecutionContextTitle,
+  dataSpace_setExecutionContextDescription,
+} from '../stores/studio/DSL_DataSpace_GraphModifierHelper.js';
+import { guaranteeNonNullable } from '@finos/legend-shared';
+import { forwardRef, useCallback, useState } from 'react';
+import type { DataSpaceExecutionContextState } from '../stores/DataSpaceExecutionContextState.js';
+import type { DataSpaceExecutionContext } from '@finos/legend-extension-dsl-data-space/graph';
+import {
+  buildElementOption,
+  type PackageableElementOption,
+} from '@finos/legend-lego/graph-editor';
+import type { PropsValue } from 'react-select';
+
+const DataSpaceExecutionContextConfigurationEditor = observer(
+  (props: {
+    executionContextState: DataSpaceExecutionContextState;
+    executionContext: DataSpaceExecutionContext;
+  }) => {
+    const { executionContextState, executionContext } = props;
+    const isReadOnly = executionContextState.dataSpaceEditorState.isReadOnly;
+    const editorStore = executionContextState.editorStore;
+    const applicationStore = editorStore.applicationStore;
+
+    // Mapping
+    // TODO: this is not generic error handling, as there could be other problems
+    // with mapping, we need to genericize this
+    const isMappingEmpty = validate_PureExecutionMapping(
+      executionContext.mapping.value,
+    );
+    const mapping = executionContext.mapping.value;
+    const mappingOptions =
+      editorStore.graphManagerState.usableMappings.map(buildElementOption);
+    const noMappingLabel = (
+      <div
+        className="service-execution-editor__configuration__mapping-option--empty"
+        title={isMappingEmpty?.messages.join('\n') ?? ''}
+      >
+        <div className="service-execution-editor__configuration__mapping-option--empty__label">
+          (none)
+        </div>
+        <ErrorIcon />
+      </div>
+    );
+    const selectedMappingOption = {
+      value: mapping,
+      label: isMappingEmpty ? noMappingLabel : mapping.path,
+    } as PackageableElementOption<Mapping>;
+    const onMappingSelectionChange = (
+      val: PackageableElementOption<Mapping>,
+    ): void => {
+      if (val.value !== mapping) {
+        dataSpace_setExecutionContextMapping(
+          executionContext,
+          PackageableElementExplicitReference.create(val.value),
+        );
+        executionContextState.autoSelectRuntimeOnMappingChange(val.value);
+      }
+    };
+    const visitMapping = (): void =>
+      editorStore.graphEditorMode.openElement(mapping);
+
+    // Runtime
+    const defaultRuntime = executionContext.defaultRuntime;
+    // NOTE: for now, only include runtime associated with the mapping
+    // TODO?: Should we bring the runtime compatibility check from query to here?
+    const runtimes = editorStore.graphManagerState.graph.runtimes.filter((rt) =>
+      rt.runtimeValue.mappings.map((m) => m.value).includes(mapping),
+    );
+    const runtimeOptions = runtimes.map((rt) => ({
+      label: rt.path,
+      value: PackageableElementExplicitReference.create(rt),
+    }));
+    const runtimePointerWarning = !runtimes.includes(defaultRuntime.value) // if the runtime does not belong to the chosen mapping
+      ? `runtime is not associated with specified mapping '${mapping.path}'`
+      : undefined;
+    const selectedRuntimeOption = {
+      value: defaultRuntime,
+      label: (
+        <div
+          className="service-execution-editor__configuration__runtime-option__pointer"
+          title={undefined}
+        >
+          <div
+            className={clsx(
+              'service-execution-editor__configuration__runtime-option__pointer__label',
+              {
+                'service-execution-editor__configuration__runtime-option__pointer__label--with-warning':
+                  Boolean(runtimePointerWarning),
+              },
+            )}
+          >
+            {defaultRuntime.value.path}
+          </div>
+          {runtimePointerWarning && (
+            <div
+              className="service-execution-editor__configuration__runtime-option__pointer__warning"
+              title={runtimePointerWarning}
+            >
+              <ExclamationTriangleIcon />
+            </div>
+          )}
+        </div>
+      ),
+    } as unknown as PropsValue<{
+      label: string;
+      value: PackageableElementExplicitReference<PackageableRuntime>;
+    }>;
+    const onRuntimeSelectionChange = (val: {
+      label: string | React.ReactNode;
+      value:
+        | PackageableElementExplicitReference<PackageableRuntime>
+        | undefined;
+    }): void => {
+      if (
+        val.value?.value !== defaultRuntime.value &&
+        val.value !== undefined
+      ) {
+        dataSpace_setExecutionContextDefaultRuntime(
+          executionContext,
+          val.value,
+        );
+      }
+    };
+    const visitRuntime = (): void => {
+      editorStore.graphEditorMode.openElement(defaultRuntime.value);
+    };
+
+    // DnD
+    const handleMappingOrRuntimeDrop = useCallback(
+      (item: UMLEditorElementDropTarget): void => {
+        const element = item.data.packageableElement;
+        if (!isReadOnly) {
+          if (element instanceof Mapping) {
+            dataSpace_setExecutionContextMapping(
+              executionContext,
+              PackageableElementExplicitReference.create(element),
+            );
+            executionContextState.autoSelectRuntimeOnMappingChange(element);
+          } else if (
+            element instanceof PackageableRuntime &&
+            element.runtimeValue.mappings.map((m) => m.value).includes(mapping)
+          ) {
+            dataSpace_setExecutionContextDefaultRuntime(
+              executionContext,
+              PackageableElementExplicitReference.create(element),
+            );
+          }
+        }
+      },
+      [isReadOnly, mapping, executionContextState, executionContext],
+    );
+    const [{ isMappingOrRuntimeDragOver }, dropConnector] = useDrop<
+      ElementDragSource,
+      void,
+      { isMappingOrRuntimeDragOver: boolean }
+    >(
+      () => ({
+        accept: [
+          CORE_DND_TYPE.PROJECT_EXPLORER_MAPPING,
+          CORE_DND_TYPE.PROJECT_EXPLORER_RUNTIME,
+        ],
+        drop: (item) => handleMappingOrRuntimeDrop(item),
+        collect: (monitor) => ({
+          isMappingOrRuntimeDragOver: monitor.isOver({ shallow: true }),
+        }),
+      }),
+      [handleMappingOrRuntimeDrop],
+    );
+
+    return (
+      <PanelContent>
+        <PanelDropZone
+          dropTargetConnector={dropConnector}
+          isDragOver={isMappingOrRuntimeDragOver && !isReadOnly}
+        >
+          <div className="service-execution-editor__configuration__items">
+            <div className="service-execution-editor__configuration__item">
+              <div className="btn--sm service-execution-editor__configuration__item__label">
+                <PURE_MappingIcon />
+              </div>
+              <CustomSelectorInput
+                className="panel__content__form__section__dropdown service-execution-editor__configuration__item__dropdown"
+                disabled={isReadOnly}
+                options={mappingOptions}
+                onChange={onMappingSelectionChange}
+                value={selectedMappingOption}
+                darkMode={
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
+                hasError={Boolean(isMappingEmpty)}
+              />
+              <button
+                className="btn--dark btn--sm service-execution-editor__configuration__item__btn"
+                onClick={visitMapping}
+                tabIndex={-1}
+                title="See mapping"
+                disabled={Boolean(isMappingEmpty)}
+              >
+                <LongArrowRightIcon />
+              </button>
+            </div>
+            <div className="service-execution-editor__configuration__item">
+              <div className="btn--sm service-execution-editor__configuration__item__label">
+                <PURE_RuntimeIcon />
+              </div>
+              <CustomSelectorInput
+                className="panel__content__form__section__dropdown service-execution-editor__configuration__item__dropdown"
+                disabled={isReadOnly}
+                options={runtimeOptions}
+                onChange={onRuntimeSelectionChange}
+                value={selectedRuntimeOption}
+                darkMode={
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
+              />
+              <button
+                className="btn--sm btn--dark service-execution-editor__configuration__item__btn"
+                onClick={visitRuntime}
+                tabIndex={-1}
+                title="See runtime"
+              >
+                <LongArrowRightIcon />
+              </button>
+            </div>
+
+            {/* Title input */}
+            <div className="execution-context-editor__form-section">
+              <div className="execution-context-editor__form-section__label">
+                Title
+              </div>
+              <div className="execution-context-editor__form-section__content">
+                <input
+                  className="execution-context-editor__form-section__content__input panel__content__form__section__input"
+                  spellCheck={false}
+                  disabled={isReadOnly}
+                  value={executionContext.title ?? ''}
+                  onChange={(event): void =>
+                    dataSpace_setExecutionContextTitle(
+                      executionContext,
+                      event.target.value,
+                    )
+                  }
+                />
+              </div>
+            </div>
+
+            {/* Description input */}
+            <div className="execution-context-editor__form-section">
+              <div className="execution-context-editor__form-section__label">
+                Description
+              </div>
+              <div className="execution-context-editor__form-section__content">
+                <textarea
+                  className="execution-context-editor__form-section__content__textarea panel__content__form__section__input"
+                  spellCheck={false}
+                  disabled={isReadOnly}
+                  value={executionContext.description ?? ''}
+                  onChange={(event): void =>
+                    dataSpace_setExecutionContextDescription(
+                      executionContext,
+                      event.target.value,
+                    )
+                  }
+                  rows={4}
+                />
+              </div>
+            </div>
+
+            {/* Test Data input removed as it's not used */}
+          </div>
+        </PanelDropZone>
+      </PanelContent>
+    );
+  },
+);
+
+export const NewExecutionContextModal = observer(
+  (props: {
+    executionState: DataSpaceExecutionContextState;
+    isReadOnly: boolean;
+  }) => {
+    const { executionState, isReadOnly } = props;
+    const [name, setName] = useState('');
+    const validationMessage =
+      name === ''
+        ? `Execution context name can't be empty`
+        : executionState.executionContexts.find((e) => e.name === name)
+          ? 'Execution context name already exists'
+          : undefined;
+
+    const closeModal = (): void =>
+      executionState.setNewExecutionContextModal(false);
+    const onChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+      setName(event.target.value);
+    };
+    return (
+      <Dialog
+        open={executionState.newExecutionContextModal}
+        onClose={closeModal}
+        classes={{ container: 'search-modal__container' }}
+        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+      >
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            executionState.addExecutionContext(name);
+            setName('');
+            closeModal();
+          }}
+          className="modal modal--dark search-modal"
+        >
+          <ModalTitle title="New Execution Context" />
+          <div className="service-execution-editor__change__modal">
+            <InputWithInlineValidation
+              className="service-execution-editor__input input-group__input"
+              spellCheck={false}
+              value={name}
+              onChange={onChange}
+              placeholder="Key execution name"
+              error={validationMessage}
+            />
+          </div>
+          <div className="search-modal__actions">
+            <button
+              className="btn btn--dark"
+              disabled={isReadOnly || Boolean(validationMessage)}
+            >
+              Add
+            </button>
+          </div>
+        </form>
+      </Dialog>
+    );
+  },
+);
+
+export const RenameModal = observer(
+  (props: {
+    val: string;
+    isReadOnly: boolean;
+    setValue: (val: string) => void;
+    showModal: boolean;
+    closeModal: () => void;
+    executionContext: DataSpaceExecutionContext;
+  }) => {
+    const {
+      val,
+      isReadOnly,
+      showModal,
+      closeModal,
+      setValue,
+      executionContext,
+    } = props;
+    const [inputValue, setInputValue] = useState(val);
+    const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+      setInputValue(event.target.value);
+    };
+    return (
+      <Dialog
+        open={showModal}
+        onClose={closeModal}
+        classes={{ container: 'search-modal__container' }}
+        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+      >
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            setValue(inputValue);
+            closeModal();
+          }}
+          className="modal modal--dark search-modal"
+        >
+          <ModalTitle title="Edit Execution Context" />
+          <div className="execution-context-editor__form-section">
+            <div className="execution-context-editor__form-section__label">
+              Key
+            </div>
+            <div className="execution-context-editor__form-section__content">
+              <input
+                className="execution-context-editor__form-section__content__input panel__content__form__section__input"
+                spellCheck={false}
+                disabled={isReadOnly}
+                value={inputValue}
+                onChange={changeValue}
+              />
+            </div>
+          </div>
+
+          {/* Title input */}
+          <div className="execution-context-editor__form-section">
+            <div className="execution-context-editor__form-section__label">
+              Title
+            </div>
+            <div className="execution-context-editor__form-section__content">
+              <input
+                className="execution-context-editor__form-section__content__input panel__content__form__section__input"
+                spellCheck={false}
+                disabled={isReadOnly}
+                value={executionContext.title ?? ''}
+                onChange={(event): void =>
+                  dataSpace_setExecutionContextTitle(
+                    executionContext,
+                    event.target.value,
+                  )
+                }
+              />
+            </div>
+          </div>
+
+          {/* Description input */}
+          <div className="execution-context-editor__form-section">
+            <div className="execution-context-editor__form-section__label">
+              Description
+            </div>
+            <div className="execution-context-editor__form-section__content">
+              <textarea
+                className="execution-context-editor__form-section__content__textarea panel__content__form__section__input"
+                spellCheck={false}
+                disabled={isReadOnly}
+                value={executionContext.description ?? ''}
+                onChange={(event): void =>
+                  dataSpace_setExecutionContextDescription(
+                    executionContext,
+                    event.target.value,
+                  )
+                }
+                rows={4}
+              />
+            </div>
+          </div>
+
+          <div className="search-modal__actions">
+            <button className="btn btn--dark" disabled={isReadOnly}>
+              Done
+            </button>
+          </div>
+        </form>
+      </Dialog>
+    );
+  },
+);
+
+const ExecutionContextMenu = observer(
+  forwardRef<
+    HTMLDivElement,
+    {
+      dataSpaceExecutionContextState: DataSpaceExecutionContextState;
+      dataSpaceExecutionContext: DataSpaceExecutionContext;
+      isReadOnly: boolean;
+    }
+  >(function TestContainerContextMenu(props, ref) {
+    const { dataSpaceExecutionContextState, dataSpaceExecutionContext } = props;
+    const rename = (): void => {
+      dataSpaceExecutionContextState.setExecutionContextToRename(
+        dataSpaceExecutionContext,
+      );
+    };
+    const remove = (): void => {
+      dataSpaceExecutionContextState.removeExecutionContext(
+        dataSpaceExecutionContext,
+      );
+    };
+    const add = (): void => {
+      dataSpaceExecutionContextState.setNewExecutionContextModal(true);
+    };
+    return (
+      <MenuContent ref={ref}>
+        <MenuContentItem onClick={rename}>Rename</MenuContentItem>
+        <MenuContentItem onClick={remove}>Delete</MenuContentItem>
+        <MenuContentItem onClick={add}>Create a new key</MenuContentItem>
+      </MenuContent>
+    );
+  }),
+);
+
+const ExecutionContextItem = observer(
+  (props: {
+    dataSpaceExecutionContextState: DataSpaceExecutionContextState;
+    dataSpaceExecutionContext: DataSpaceExecutionContext;
+    isReadOnly: boolean;
+  }) => {
+    const {
+      dataSpaceExecutionContextState,
+      dataSpaceExecutionContext,
+      isReadOnly,
+    } = props;
+    const [isSelectedFromContextMenu, setIsSelectedFromContextMenu] =
+      useState(false);
+    const isActive =
+      dataSpaceExecutionContextState.selectedExecutionContext ===
+      dataSpaceExecutionContext;
+
+    const openKeyedExecution = (): void =>
+      dataSpaceExecutionContextState.setSelectedExecutionContext(
+        dataSpaceExecutionContext,
+      );
+    const onContextMenuOpen = (): void => setIsSelectedFromContextMenu(true);
+    const onContextMenuClose = (): void => setIsSelectedFromContextMenu(false);
+    return (
+      <ContextMenu
+        className={clsx(
+          'service-multi-execution-editor__item',
+          {
+            'service-multi-execution-editor__item--selected-from-context-menu':
+              !isActive && isSelectedFromContextMenu,
+          },
+          { 'service-multi-execution-editor__item--active': isActive },
+        )}
+        disabled={isReadOnly}
+        content={
+          <ExecutionContextMenu
+            dataSpaceExecutionContextState={dataSpaceExecutionContextState}
+            dataSpaceExecutionContext={dataSpaceExecutionContext}
+            isReadOnly={isReadOnly}
+          />
+        }
+        menuProps={{ elevation: 7 }}
+        onOpen={onContextMenuOpen}
+        onClose={onContextMenuClose}
+      >
+        <button
+          className={clsx('service-multi-execution-editor__item__label')}
+          onClick={openKeyedExecution}
+          tabIndex={-1}
+        >
+          {dataSpaceExecutionContext.name}
+        </button>
+      </ContextMenu>
+    );
+  },
+);
+
+export const DataSpaceExecutionContextEditor = observer(() => {
+  const editorStore = useEditorStore();
+
+  const dataSpaceState =
+    editorStore.tabManagerState.getCurrentEditorState(DataSpaceEditorState);
+  const executionContextState = dataSpaceState.executionContextState;
+
+  const addExecutionKey = (): void => {
+    executionContextState.setNewExecutionContextModal(true);
+  };
+
+  return (
+    <div className="service-execution-editor__execution">
+      <ResizablePanelGroup orientation="vertical">
+        <ResizablePanel size={300} minSize={200}>
+          <div className="service-multi-execution-editor__panel">
+            <PanelHeader>
+              <div className="panel__header__title">
+                <div className="panel__header__title__content">
+                  Execution Contexts
+                </div>
+              </div>
+              <PanelHeaderActions>
+                <PanelHeaderActionItem
+                  disabled={dataSpaceState.isReadOnly}
+                  onClick={addExecutionKey}
+                  title="Add an execution context"
+                >
+                  <PlusIcon />
+                </PanelHeaderActionItem>
+              </PanelHeaderActions>
+            </PanelHeader>
+
+            {executionContextState.executionContexts.map((executionContext) => (
+              <ExecutionContextItem
+                key={executionContext.name}
+                dataSpaceExecutionContextState={executionContextState}
+                dataSpaceExecutionContext={executionContext}
+                isReadOnly={dataSpaceState.isReadOnly}
+              />
+            ))}
+            {!executionContextState.executionContexts.length && (
+              <BlankPanelPlaceholder
+                text="Add an execution context"
+                onClick={addExecutionKey}
+                clickActionType="add"
+                tooltipText="Click to add an execution context"
+              />
+            )}
+          </div>
+          {executionContextState.newExecutionContextModal && (
+            <NewExecutionContextModal
+              executionState={executionContextState}
+              isReadOnly={dataSpaceState.isReadOnly}
+            />
+          )}
+          {executionContextState.executionContextToRename && (
+            <RenameModal
+              val={executionContextState.executionContextToRename.name}
+              isReadOnly={dataSpaceState.isReadOnly}
+              showModal={true}
+              closeModal={(): void =>
+                executionContextState.setExecutionContextToRename(undefined)
+              }
+              setValue={(val: string): void =>
+                executionContextState.renameExecutionContext(
+                  guaranteeNonNullable(
+                    executionContextState.executionContextToRename,
+                  ),
+                  val,
+                )
+              }
+              executionContext={executionContextState.executionContextToRename}
+            />
+          )}
+        </ResizablePanel>
+        <ResizablePanelSplitter>
+          <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
+        </ResizablePanelSplitter>
+        <ResizablePanel minSize={56}>
+          {executionContextState.selectedExecutionContext ? (
+            <DataSpaceExecutionContextConfigurationEditor
+              executionContextState={executionContextState}
+              executionContext={executionContextState.selectedExecutionContext}
+            />
+          ) : (
+            <BlankPanelPlaceholder
+              text="Add an execution context"
+              onClick={addExecutionKey}
+              clickActionType="add"
+              tooltipText="Click to add an execution context"
+            />
+          )}
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  );
+});