@finos/legend-extension-dsl-data-space-studio 0.1.151 → 0.1.153

package/src/components/DataSpaceGeneralEditor/DataSpaceExecutablesSection.tsx

@@ -0,0 +1,114 @@
+/**
+ * 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 DataSpaceExecutable,
+  DataSpacePackageableElementExecutable,
+} from '@finos/legend-extension-dsl-data-space/graph';
+import { observer } from 'mobx-react-lite';
+import {
+  dataSpace_addExecutable,
+  dataSpace_removeExecutable,
+} from '../../stores/studio/DSL_DataSpace_GraphModifierHelper.js';
+import { useEditorStore } from '@finos/legend-application-studio';
+import { DataSpaceEditorState } from '../../stores/DataSpaceEditorState.js';
+import {
+  CustomSelectorInput,
+  ListEditor,
+  PanelFormSection,
+} from '@finos/legend-art';
+import {
+  type PackageableElement,
+  PackageableElementExplicitReference,
+} from '@finos/legend-graph';
+
+export const DataspaceExecutablesSection = observer(() => {
+  const editorStore = useEditorStore();
+
+  const dataSpaceState =
+    editorStore.tabManagerState.getCurrentEditorState(DataSpaceEditorState);
+  const dataSpace = dataSpaceState.dataSpace;
+
+  // Event handlers
+  const handleAddExecutable = (option: {
+    label: string;
+    value: PackageableElement;
+  }): void => {
+    if (typeof option.value === 'object') {
+      const element = option.value;
+      const executablePointer = new DataSpacePackageableElementExecutable();
+      executablePointer.executable =
+        PackageableElementExplicitReference.create(element);
+      executablePointer.title = element.name;
+      dataSpace_addExecutable(dataSpace, executablePointer);
+    }
+  };
+
+  const handleRemoveExecutable = (executable: DataSpaceExecutable): void => {
+    dataSpace_removeExecutable(dataSpace, executable);
+  };
+
+  // ListEditor component renderers
+  const ExecutableComponent = observer(
+    (props: { item: DataSpaceExecutable }): React.ReactElement => {
+      const { item } = props;
+
+      return (
+        <div className="panel__content__form__section__list__item__content">
+          <div className="panel__content__form__section__list__item__content__label">
+            {item.title}
+          </div>
+        </div>
+      );
+    },
+  );
+
+  const NewExecutableComponent = observer(
+    (props: { onFinishEditing: () => void }) => {
+      const { onFinishEditing } = props;
+
+      return (
+        <div className="panel__content__form__section__list__new-item__input">
+          <CustomSelectorInput
+            options={dataSpaceState.getDataSpaceExecutableOptions()}
+            onChange={(event: { label: string; value: PackageableElement }) => {
+              onFinishEditing();
+              handleAddExecutable(event);
+            }}
+            placeholder="Select an element to add..."
+            darkMode={true}
+          />
+        </div>
+      );
+    },
+  );
+
+  return (
+    <PanelFormSection className="dataSpace-editor__general__elements">
+      <ListEditor
+        title="Executables"
+        prompt="Add functions and services to display under Quick Start for users to see how this Data Product can be used."
+        items={dataSpace.executables}
+        keySelector={(element: DataSpaceExecutable) => element.hashCode}
+        ItemComponent={ExecutableComponent}
+        NewItemComponent={NewExecutableComponent}
+        handleRemoveItem={handleRemoveExecutable}
+        isReadOnly={dataSpaceState.isReadOnly}
+        emptyMessage="No executables specified"
+      />
+    </PanelFormSection>
+  );
+});

package/src/components/DataSpaceGeneralEditor/DataSpaceGeneralEditor.tsx

@@ -0,0 +1,81 @@
+/**
+ * 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 { useEditorStore } from '@finos/legend-application-studio';
+import {
+  PanelContentLists,
+  PanelForm,
+  PanelFormSection,
+  PanelFormTextField,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import { DataSpaceEditorState } from '../../stores/DataSpaceEditorState.js';
+import {
+  dataSpace_setDescription,
+  dataSpace_setTitle,
+} from '../../stores/studio/DSL_DataSpace_GraphModifierHelper.js';
+import { DataSpaceDefaultExecutionContextSection } from './DataSpaceDefaultExecutionContextSection.js';
+import { DataSpaceDiagramsSection } from './DataSpaceDiagramsSection.js';
+import { DataSpaceElementsSection } from './DataSpaceElementsSection.js';
+import { DataspaceExecutablesSection } from './DataSpaceExecutablesSection.js';
+import { DataSpaceSupportInfoSection } from './DataSpaceSupportInfoSection.js';
+
+export const DataSpaceGeneralEditor = observer(() => {
+  const editorStore = useEditorStore();
+
+  const dataSpaceState =
+    editorStore.tabManagerState.getCurrentEditorState(DataSpaceEditorState);
+  const dataSpace = dataSpaceState.dataSpace;
+
+  // Basic properties handlers
+  const handleTitleChange = (value: string | undefined): void => {
+    dataSpace_setTitle(dataSpace, value);
+  };
+
+  const handleDescriptionChange = (value: string | undefined): void => {
+    dataSpace_setDescription(dataSpace, value);
+  };
+
+  return (
+    <PanelContentLists className="dataSpace-editor__general">
+      <PanelForm>
+        <PanelFormSection>
+          <PanelFormTextField
+            name="Title"
+            value={dataSpace.title ?? ''}
+            prompt="Provide a title for this Data Product."
+            update={handleTitleChange}
+            placeholder="Enter title"
+          />
+        </PanelFormSection>
+        <PanelFormSection>
+          <PanelFormTextField
+            name="Description"
+            value={dataSpace.description ?? ''}
+            prompt="Provide a description for this Data Product."
+            update={handleDescriptionChange}
+            placeholder="Enter description"
+          />
+        </PanelFormSection>
+        <DataSpaceDefaultExecutionContextSection />
+        <DataSpaceDiagramsSection />
+        <DataSpaceElementsSection />
+        <DataspaceExecutablesSection />
+        <DataSpaceSupportInfoSection />
+      </PanelForm>
+    </PanelContentLists>
+  );
+});

package/src/components/DataSpaceGeneralEditor/DataSpaceSupportInfoSection.tsx

@@ -0,0 +1,276 @@
+/**
+ * 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 {
+  PanelFormSection,
+  CustomSelectorInput,
+  PanelFormTextField,
+  ListEditor,
+  WarningIcon,
+} from '@finos/legend-art';
+import {
+  DataSpaceSupportEmail,
+  DataSpaceSupportCombinedInfo,
+} from '@finos/legend-extension-dsl-data-space/graph';
+import { observer } from 'mobx-react-lite';
+import {
+  dataSpace_email_setSupportInfoEmail,
+  dataSpace_setDocumentationUrl,
+  dataSpace_combined_setWebsite,
+  dataSpace_combined_setFaqUrl,
+  dataSpace_combined_addEmail,
+  dataSpace_combined_deleteEmail,
+  dataSpace_setSupportInfo,
+} from '../../stores/studio/DSL_DataSpace_GraphModifierHelper.js';
+import { useEditorStore } from '@finos/legend-application-studio';
+import { DataSpaceEditorState } from '../../stores/DataSpaceEditorState.js';
+import { useState } from 'react';
+
+export const DataSpaceSupportInfoSection = observer(() => {
+  const editorStore = useEditorStore();
+
+  const dataSpaceState =
+    editorStore.tabManagerState.getCurrentEditorState(DataSpaceEditorState);
+  const dataSpace = dataSpaceState.dataSpace;
+
+  // Event handlers
+  const handleSupportInfoTypeChange = (option: { value: string }): void => {
+    if (typeof option !== 'object' || !('value' in option)) {
+      return;
+    }
+    const type = option.value;
+    if (
+      type === 'email' &&
+      !(dataSpace.supportInfo instanceof DataSpaceSupportEmail)
+    ) {
+      const supportInfo = new DataSpaceSupportEmail();
+      if (dataSpace.supportInfo instanceof DataSpaceSupportCombinedInfo) {
+        supportInfo.address = dataSpace.supportInfo.emails?.[0] ?? '';
+        supportInfo.documentationUrl = dataSpace.supportInfo.documentationUrl;
+      }
+      dataSpace_setSupportInfo(dataSpace, supportInfo);
+    } else if (
+      type === 'combined' &&
+      !(dataSpace.supportInfo instanceof DataSpaceSupportCombinedInfo)
+    ) {
+      const supportInfo = new DataSpaceSupportCombinedInfo();
+      if (
+        dataSpace.supportInfo instanceof DataSpaceSupportEmail &&
+        dataSpace.supportInfo.address
+      ) {
+        supportInfo.emails = [dataSpace.supportInfo.address];
+        supportInfo.documentationUrl = dataSpace.supportInfo.documentationUrl;
+      }
+      dataSpace_setSupportInfo(dataSpace, supportInfo);
+    } else {
+      dataSpace_setSupportInfo(dataSpace, undefined);
+    }
+  };
+
+  const handleSupportInfoEmailAdd = (email: string): void => {
+    if (dataSpace.supportInfo instanceof DataSpaceSupportCombinedInfo) {
+      dataSpace_combined_addEmail(dataSpace.supportInfo, email);
+    }
+  };
+
+  const handleSupportInfoEmailRemove = (email: string): void => {
+    if (dataSpace.supportInfo instanceof DataSpaceSupportCombinedInfo) {
+      dataSpace_combined_deleteEmail(dataSpace.supportInfo, email);
+    }
+  };
+
+  // ListEditor component renderers
+  const SupportEmailComponent = observer(
+    (props: { item: string }): React.ReactElement => {
+      const { item } = props;
+
+      return (
+        <div className="panel__content__form__section__list__item__content">
+          <div className="panel__content__form__section__header__label">
+            {item}
+          </div>
+        </div>
+      );
+    },
+  );
+
+  const NewSupportEmailComponent = observer(
+    (props: { onFinishEditing: () => void }) => {
+      const { onFinishEditing } = props;
+      const [email, setEmail] = useState('');
+
+      return (
+        <div className="dataSpace-editor__general__support-info__new-email">
+          <div className="panel__content__form__section__list__new-item__input">
+            <input
+              className="input input-group__input panel__content__form__section__input input--dark"
+              type="email"
+              placeholder="Enter email"
+              value={email}
+              onChange={(event) => {
+                setEmail(event.target.value);
+              }}
+            />
+          </div>
+          <button
+            className="panel__content__form__section__list__new-item__add-btn btn btn--dark"
+            onClick={() => {
+              handleSupportInfoEmailAdd(email);
+              setEmail('');
+              onFinishEditing();
+            }}
+          >
+            Save
+          </button>
+        </div>
+      );
+    },
+  );
+
+  return (
+    <PanelFormSection className="dataSpace-editor__general__support-info">
+      <div className="panel__content__form__section__header__label">
+        Support Information
+      </div>
+      <div className="panel__content__form__section__header__prompt">
+        Configure support information for this Data Product.
+      </div>
+      {!(dataSpace.supportInfo instanceof DataSpaceSupportCombinedInfo) && (
+        <CustomSelectorInput
+          options={[
+            { label: 'None', value: 'none' },
+            { label: 'Combined', value: 'combined' },
+          ]}
+          onChange={(option: { label: string; value: string }) =>
+            handleSupportInfoTypeChange(option)
+          }
+          value={{
+            label: dataSpace.supportInfo
+              ? dataSpace.supportInfo instanceof DataSpaceSupportEmail
+                ? 'Email'
+                : 'Combined'
+              : 'None',
+            value: dataSpace.supportInfo
+              ? dataSpace.supportInfo instanceof DataSpaceSupportEmail
+                ? 'email'
+                : 'combined'
+              : 'none',
+          }}
+          darkMode={true}
+        />
+      )}
+      {dataSpace.supportInfo ? (
+        dataSpace.supportInfo instanceof DataSpaceSupportEmail ? (
+          <PanelFormSection className="dataSpace-editor__general__support-info__content">
+            <PanelFormTextField
+              name="Email Address"
+              value={dataSpace.supportInfo.address}
+              update={(value) => {
+                if (dataSpace.supportInfo instanceof DataSpaceSupportEmail) {
+                  dataSpace_email_setSupportInfoEmail(
+                    dataSpace.supportInfo,
+                    value ?? '',
+                  );
+                }
+              }}
+              placeholder="Enter email address"
+            />
+            <PanelFormTextField
+              name="Documentation URL"
+              value={dataSpace.supportInfo.documentationUrl}
+              update={(value) => {
+                if (dataSpace.supportInfo) {
+                  dataSpace_setDocumentationUrl(
+                    dataSpace.supportInfo,
+                    value ?? '',
+                  );
+                }
+              }}
+              placeholder="Enter documentation URL"
+            />
+          </PanelFormSection>
+        ) : dataSpace.supportInfo instanceof DataSpaceSupportCombinedInfo ? (
+          <PanelFormSection className="dataSpace-editor__general__support-info__content">
+            <ListEditor
+              title="Emails"
+              items={dataSpace.supportInfo.emails}
+              keySelector={(element: string) => element}
+              ItemComponent={SupportEmailComponent}
+              NewItemComponent={NewSupportEmailComponent}
+              handleRemoveItem={handleSupportInfoEmailRemove}
+              isReadOnly={dataSpaceState.isReadOnly}
+              emptyMessage="No emails specified"
+            />
+            {(dataSpace.supportInfo.emails === undefined ||
+              dataSpace.supportInfo.emails.length === 0) && (
+              <div className="service-editor__owner__validation">
+                <WarningIcon />
+                <div className="service-editor__owner__validation-label">
+                  At least one email is required
+                </div>
+              </div>
+            )}
+            <PanelFormTextField
+              name="Documentation URL"
+              value={dataSpace.supportInfo.documentationUrl}
+              update={(value) => {
+                if (dataSpace.supportInfo) {
+                  dataSpace_setDocumentationUrl(
+                    dataSpace.supportInfo,
+                    value ?? '',
+                  );
+                }
+              }}
+              placeholder="Enter documentation URL"
+            />
+            <PanelFormTextField
+              name="Website"
+              value={dataSpace.supportInfo.website}
+              update={(value) => {
+                if (
+                  dataSpace.supportInfo instanceof DataSpaceSupportCombinedInfo
+                ) {
+                  dataSpace_combined_setWebsite(
+                    dataSpace.supportInfo,
+                    value ?? '',
+                  );
+                }
+              }}
+              placeholder="Enter website URL"
+            />
+            <PanelFormTextField
+              name="FAQ URL"
+              value={dataSpace.supportInfo.faqUrl}
+              update={(value) => {
+                if (
+                  dataSpace.supportInfo instanceof DataSpaceSupportCombinedInfo
+                ) {
+                  dataSpace_combined_setFaqUrl(
+                    dataSpace.supportInfo,
+                    value ?? '',
+                  );
+                }
+              }}
+              placeholder="Enter FAQ URL"
+            />
+          </PanelFormSection>
+        ) : (
+          <div>Unknown support info type</div>
+        )
+      ) : null}
+    </PanelFormSection>
+  );
+});

package/src/stores/DataSpaceEditorState.ts

@@ -14,30 +14,118 @@
  * limitations under the License.
  */
 
-import { action, computed, makeObservable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 import {
   type EditorStore,
   ElementEditorState,
 } from '@finos/legend-application-studio';
-import type { PackageableElement } from '@finos/legend-graph';
-import { DataSpace } from '@finos/legend-extension-dsl-data-space/graph';
+import {
+  type PackageableElement,
+  Package,
+  Class,
+  Enumeration,
+  Association,
+  Service,
+  ConcreteFunctionDefinition,
+} from '@finos/legend-graph';
+import { Diagram } from '@finos/legend-extension-dsl-diagram/graph';
+import {
+  DataSpace,
+  DataSpacePackageableElementExecutable,
+  type DataSpaceElement,
+} from '@finos/legend-extension-dsl-data-space/graph';
 import { guaranteeType } from '@finos/legend-shared';
+import { DataSpaceExecutionContextState } from './DataSpaceExecutionContextState.js';
 
 export class DataSpaceEditorState extends ElementEditorState {
+  executionContextState: DataSpaceExecutionContextState;
+
   constructor(editorStore: EditorStore, element: PackageableElement) {
     super(editorStore, element);
 
     makeObservable(this, {
+      executionContextState: observable,
       dataSpace: computed,
       reprocess: action,
+      isValidDataSpaceElement: action,
+      getDataSpaceElementOptions: action,
+      getDiagramOptions: action,
+      getDataSpaceExecutableOptions: action,
     });
+
+    this.executionContextState = new DataSpaceExecutionContextState(this);
+  }
+
+  isValidDataSpaceElement(
+    element: PackageableElement,
+  ): element is DataSpaceElement {
+    return (
+      element instanceof Package ||
+      element instanceof Class ||
+      element instanceof Enumeration ||
+      element instanceof Association
+    );
+  }
+
+  getDataSpaceElementOptions(): { label: string; value: DataSpaceElement }[] {
+    const currentElements =
+      this.dataSpace.elements?.map(
+        (elementPointer) => elementPointer.element.value,
+      ) ?? [];
+    return this.editorStore.graphManagerState.graph.allOwnElements
+      .filter((element) => this.isValidDataSpaceElement(element))
+      .filter((element) => !currentElements.includes(element))
+      .map((element) => ({
+        label: element.path,
+        value: element,
+      }));
+  }
+
+  getDataSpaceExecutableOptions(): {
+    label: string;
+    value: PackageableElement;
+  }[] {
+    const currentExecutables =
+      this.dataSpace.executables?.map((executablePointer) => {
+        if (
+          executablePointer instanceof DataSpacePackageableElementExecutable
+        ) {
+          return executablePointer.executable.value;
+        }
+        return undefined;
+      }) ?? [];
+    return this.editorStore.graphManagerState.graph.allOwnElements
+      .filter(
+        (element) =>
+          element instanceof Service ||
+          element instanceof ConcreteFunctionDefinition,
+      )
+      .filter((executable) => !currentExecutables.includes(executable))
+      .map((executable) => ({
+        label: executable.path,
+        value: executable,
+      }));
+  }
+
+  getDiagramOptions(): { label: string; value: Diagram }[] {
+    const currentDiagrams =
+      this.dataSpace.diagrams?.map(
+        (diagramPointer) => diagramPointer.diagram.value,
+      ) ?? [];
+    return this.editorStore.graphManagerState.graph.allOwnElements
+      .filter((element): element is Diagram => element instanceof Diagram)
+      .filter((diagram) => !currentDiagrams.includes(diagram))
+      .map((diagram) => ({
+        label: diagram.path,
+        value: diagram,
+      }));
   }
 
   get dataSpace(): DataSpace {
     return guaranteeType(
       this.element,
       DataSpace,
-      'Element inside text element editor state must be a text element',
+      'Element inside DataSpace editor state must be a DataSpace element',
     );
   }