@finos/legend-application-studio 28.19.51 → 28.19.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-application-studio",
-  "version": "28.19.51",
+  "version": "28.19.52",
   "description": "Legend Studio application core",
   "keywords": [
     "legend",
@@ -47,14 +47,14 @@
   "dependencies": {
     "@finos/legend-application": "16.0.75",
     "@finos/legend-art": "7.1.126",
-    "@finos/legend-code-editor": "2.0.125",
-    "@finos/legend-data-cube": "0.3.35",
-    "@finos/legend-extension-dsl-data-product": "0.0.11",
-    "@finos/legend-graph": "32.3.6",
-    "@finos/legend-lego": "2.0.136",
-    "@finos/legend-query-builder": "4.17.48",
+    "@finos/legend-code-editor": "2.0.126",
+    "@finos/legend-data-cube": "0.3.36",
+    "@finos/legend-extension-dsl-data-product": "0.0.12",
+    "@finos/legend-graph": "32.3.7",
+    "@finos/legend-lego": "2.0.137",
+    "@finos/legend-query-builder": "4.17.49",
     "@finos/legend-server-depot": "6.1.1",
-    "@finos/legend-server-lakehouse": "0.3.6",
+    "@finos/legend-server-lakehouse": "0.3.7",
     "@finos/legend-server-sdlc": "5.3.65",
     "@finos/legend-server-showcase": "0.2.61",
     "@finos/legend-shared": "11.0.20",

package/src/components/editor/editor-group/dataProduct/DataProductEditor.tsx

@@ -94,27 +94,28 @@ import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
 import { CodeEditor } from '@finos/legend-lego/code-editor';
 import {
   type DataProduct,
+  type DataProductElement,
+  type DataProductElementScope,
+  type DataProductRuntimeInfo,
+  type Expertise,
   type GraphManagerState,
   type LakehouseAccessPoint,
-  type V1_DataProductArtifactAccessPointGroup,
-  type V1_DataProductArtifactAccessPointImplementation,
-  type V1_DataProductArtifactGeneration,
   type Mapping,
-  type PackageableRuntime,
-  type DataProductRuntimeInfo,
   type PackageableElement,
-  type DataProductElementScope,
-  type DataProductElement,
+  type PackageableRuntime,
+  type V1_AccessPointGroupInfo,
+  type V1_AccessPointImplementation,
+  type V1_DataProductArtifact,
   DataProductEmbeddedImageIcon,
   DataProductLibraryIcon,
   Email,
   LakehouseTargetEnv,
   StereotypeExplicitReference,
+  V1_DataProduct,
   V1_DataProductIconLibraryId,
-  validate_PureExecutionMapping,
   V1_PureGraphManager,
   V1_RemoteEngine,
-  V1_DataProduct,
+  validate_PureExecutionMapping,
 } from '@finos/legend-graph';
 import {
   accessPoint_setClassification,
@@ -134,6 +135,10 @@ import {
   runtimeInfo_setDescription,
   supportInfo_setSupportUrl,
   supportInfo_setWebsite,
+  expertise_setDescription,
+  expertise_addId,
+  expertise_deleteId,
+  dataProduct_deleteExpertise,
 } from '../../../../stores/graph-modifier/DSL_DataProduct_GraphModifierHelper.js';
 import { LEGEND_STUDIO_TEST_ID } from '../../../../__lib__/LegendStudioTesting.js';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
@@ -156,6 +161,7 @@ import {
   ProductViewer,
 } from '@finos/legend-extension-dsl-data-product';
 import type { LegendStudioApplicationStore } from '../../../../stores/LegendStudioBaseStore.js';
+import type { DepotServerClient } from '@finos/legend-server-depot';
 
 export enum AP_GROUP_MODAL_ERRORS {
   GROUP_NAME_EMPTY = 'Group Name is empty',
@@ -489,16 +495,15 @@ export const LakehouseDataProductAccessPointEditor = observer(
         if (dataProductContent) {
           const contentJson = JSON.parse(
             dataProductContent,
-          ) as V1_DataProductArtifactGeneration;
+          ) as V1_DataProductArtifact;
           const apPlanGeneration = contentJson.accessPointGroups
             .find(
-              (group: V1_DataProductArtifactAccessPointGroup) =>
+              (group: V1_AccessPointGroupInfo) =>
                 group.id === groupState.value.id,
             )
             ?.accessPointImplementations.find(
-              (
-                apImplementation: V1_DataProductArtifactAccessPointImplementation,
-              ) => apImplementation.id === accessPoint.id,
+              (apImplementation: V1_AccessPointImplementation) =>
+                apImplementation.id === accessPoint.id,
             );
 
           setDebugOutput(JSON.stringify(apPlanGeneration, null, 2));
@@ -1933,6 +1938,145 @@ const HomeTab = observer(
   },
 );
 
+const ExpertiseEditor = observer(
+  (props: { dataProductEditorState: DataProductEditorState }) => {
+    const { dataProductEditorState } = props;
+    const product = dataProductEditorState.product;
+
+    const NewExpertIdComponent = observer(
+      (newElementProps: { expertise: Expertise }) => {
+        const { expertise } = newElementProps;
+        const [title, setTitle] = useState('');
+
+        return (
+          <div className="data-product-editor__support-info__expertise-id-container">
+            <div className="panel__content__form__section__list__new-item__input">
+              <input
+                className="input input-group__input panel__content__form__section__input input--dark"
+                type="title"
+                placeholder="Enter User ID"
+                value={title}
+                onChange={(event) => {
+                  setTitle(event.target.value);
+                }}
+              />
+            </div>
+            <button
+              className="panel__content__form__section__list__new-item__add-btn btn btn--dark"
+              onClick={() => {
+                expertise_addId(expertise, title);
+                setTitle('');
+              }}
+            >
+              Save
+            </button>
+          </div>
+        );
+      },
+    );
+
+    const addNewExpertise = () => {
+      dataProductEditorState.createExpertise();
+    };
+
+    const updateExpertiseDescription = (
+      expertise: Expertise,
+      val: string | undefined,
+    ): void => {
+      if (val) {
+        expertise_setDescription(expertise, val);
+      }
+    };
+
+    const handleRemoveId = (expertise: Expertise, id: string) => {
+      expertise_deleteId(expertise, id);
+    };
+
+    const handleRemoveExpertise = (expertise: Expertise) => {
+      dataProduct_deleteExpertise(product, expertise);
+    };
+
+    return (
+      <>
+        <PanelHeader className="panel__header--access-point">
+          <div className="panel__content__form__section__header__label">
+            Expertise
+          </div>
+          <PanelHeaderActions>
+            <PanelHeaderActionItem
+              className="panel__header__action"
+              onClick={addNewExpertise}
+              title="Add new expertise"
+            >
+              <PlusIcon />
+            </PanelHeaderActionItem>
+          </PanelHeaderActions>
+        </PanelHeader>
+        {dataProductEditorState.product.expertise?.map((expertise) => (
+          <>
+            <div className="data-product-editor__expertise">
+              <div className="panel__content__form__section">
+                <div className="panel__content__form__section__header__prompt">
+                  Description
+                </div>
+                <textarea
+                  className="panel__content__form__section__textarea"
+                  spellCheck={false}
+                  disabled={dataProductEditorState.isReadOnly}
+                  value={expertise.description ?? ''}
+                  onChange={(event) =>
+                    updateExpertiseDescription(expertise, event.target.value)
+                  }
+                  style={{
+                    height: '100%',
+                  }}
+                />
+              </div>
+              <div className="panel__content__form__section">
+                <div className="panel__content__form__section__header__prompt">
+                  User IDs
+                </div>
+                <div className="panel__content__form__section__list__id-list">
+                  {expertise.expertIds?.map((id) => (
+                    <div
+                      className="panel__content__form__section__list__item"
+                      key={id}
+                    >
+                      {id}
+
+                      <button
+                        className="panel__content__form__section__list__item__remove-btn"
+                        disabled={dataProductEditorState.isReadOnly}
+                        onClick={() => handleRemoveId(expertise, id)}
+                        tabIndex={-1}
+                      >
+                        <TimesIcon />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+                <NewExpertIdComponent expertise={expertise} />
+              </div>
+              <div className="data-product-editor__expertise__actions">
+                <button
+                  className="access-point-editor__generic-entry__remove-btn--group"
+                  onClick={() => {
+                    handleRemoveExpertise(expertise);
+                  }}
+                  tabIndex={-1}
+                  title="Remove Expertise"
+                >
+                  <TimesIcon />
+                </button>
+              </div>
+            </div>
+          </>
+        ))}
+      </>
+    );
+  },
+);
+
 const SupportTab = observer(
   (props: {
     dataProductEditorState: DataProductEditorState;
@@ -2192,6 +2336,7 @@ const SupportTab = observer(
           isReadOnly={isReadOnly}
           emptyMessage="No emails specified"
         />
+        <ExpertiseEditor dataProductEditorState={dataProductEditorState} />
       </div>
     );
   },
@@ -2201,6 +2346,7 @@ const getDataProductViewerState = (
   product: DataProduct,
   graphManagerState: GraphManagerState,
   applicationStore: LegendStudioApplicationStore,
+  depotServerClient: DepotServerClient,
 ) => {
   const graphManager = guaranteeType(
     graphManagerState.graphManager,
@@ -2211,16 +2357,19 @@ const getDataProductViewerState = (
     V1_DataProduct,
   );
   const remoteEngine = guaranteeType(graphManager.engine, V1_RemoteEngine);
-  return new DataProductViewerState(
+  const dataProductViewerState = new DataProductViewerState(
     v1_dataProduct,
     applicationStore,
     remoteEngine.getEngineServerClient(),
+    depotServerClient,
     graphManagerState,
     applicationStore.config.options.dataProductConfig,
     undefined,
     undefined,
     {},
   );
+  dataProductViewerState.init();
+  return dataProductViewerState;
 };
 
 export const DataProductEditor = observer(() => {
@@ -2230,14 +2379,9 @@ export const DataProductEditor = observer(() => {
   const product = dataProductEditorState.product;
   const isReadOnly = dataProductEditorState.isReadOnly;
   const auth = useAuth();
-  const [showPreview, setshowPreview] = useState(false);
-  const [dataProductViewerState, setDataProductViewerState] = useState(
-    getDataProductViewerState(
-      product,
-      editorStore.graphManagerState,
-      editorStore.applicationStore,
-    ),
-  );
+  const [showPreview, setShowPreview] = useState(false);
+  const [dataProductViewerState, setDataProductViewerState] =
+    useState<DataProductViewerState>();
 
   const deployDataProduct = (): void => {
     // Trigger OAuth flow if not authenticated
@@ -2319,6 +2463,7 @@ export const DataProductEditor = observer(() => {
                 product,
                 editorStore.graphManagerState,
                 editorStore.applicationStore,
+                editorStore.depotServerClient,
               ),
             );
           }
@@ -2328,6 +2473,7 @@ export const DataProductEditor = observer(() => {
     [
       editorStore.applicationStore,
       editorStore.graphManagerState,
+      editorStore.depotServerClient,
       product,
       showPreview,
     ],
@@ -2349,7 +2495,21 @@ export const DataProductEditor = observer(() => {
             <div className="btn__dropdown-combo btn__dropdown-combo--primary">
               <button
                 className="btn__dropdown-combo__label"
-                onClick={() => setshowPreview(!showPreview)}
+                onClick={() => {
+                  setShowPreview((prev) => {
+                    if (!prev) {
+                      setDataProductViewerState(
+                        getDataProductViewerState(
+                          product,
+                          editorStore.graphManagerState,
+                          editorStore.applicationStore,
+                          editorStore.depotServerClient,
+                        ),
+                      );
+                    }
+                    return !prev;
+                  });
+                }}
                 title={showPreview ? 'Hide Preview' : 'Preview Description'}
                 tabIndex={-1}
                 style={{
@@ -2396,8 +2556,10 @@ export const DataProductEditor = observer(() => {
           <DataProductSidebar dataProductEditorState={dataProductEditorState} />
           <ResizablePanelGroup orientation="vertical">
             <ResizablePanel>{renderActivivtyBarTab()}</ResizablePanel>
-            {showPreview && <ResizablePanelSplitter />}
-            {showPreview && (
+            {showPreview && dataProductViewerState && (
+              <ResizablePanelSplitter />
+            )}
+            {showPreview && dataProductViewerState && (
               <ResizablePanel>
                 <div className="data-product-editor__preview-container theme__hc-light">
                   <ProductViewer productViewerState={dataProductViewerState} />

package/src/stores/editor/editor-state/element-editor-state/dataProduct/DataProductEditorState.ts

@@ -43,6 +43,7 @@ import {
   DataProductRuntimeInfo,
   type DataProductElement,
   type Mapping,
+  Expertise,
   observe_DataProductElementScope,
   DataProductElementScope,
   validate_PureExecutionMapping,
@@ -78,6 +79,7 @@ import {
   accessPointGroup_swapAccessPoints,
   dataProduct_addAccessPoint,
   dataProduct_addAccessPointGroup,
+  dataProduct_addExpertise,
   dataProduct_deleteAccessPoint,
   dataProduct_deleteAccessPointGroup,
   dataProduct_swapAccessPointGroups,
@@ -726,6 +728,11 @@ export class DataProductEditorState extends ElementEditorState {
     });
   }
 
+  createExpertise() {
+    const newExpertise = new Expertise();
+    dataProduct_addExpertise(this.product, newExpertise);
+  }
+
   *deploy(token: string | undefined): GeneratorFn<void> {
     try {
       assertTrue(

package/src/stores/graph-modifier/DSL_DataProduct_GraphModifierHelper.ts

@@ -34,6 +34,8 @@ import {
   type DataProductDiagram,
   type DataProductElementScope,
   observe_APG,
+  observe_Expertise,
+  type Expertise,
 } from '@finos/legend-graph';
 import { addUniqueEntry, deleteEntry, swapEntry } from '@finos/legend-shared';
 import { action } from 'mobx';
@@ -178,6 +180,45 @@ export const dataProduct_deleteAccessPointGroup = action(
   },
 );
 
+export const dataProduct_addExpertise = action(
+  (product: DataProduct, expertise: Expertise) => {
+    const observedExpertise = observe_Expertise(expertise);
+    if (!product.expertise) {
+      product.expertise = [observedExpertise];
+    } else {
+      addUniqueEntry(product.expertise, observedExpertise);
+    }
+  },
+);
+
+export const dataProduct_deleteExpertise = action(
+  (product: DataProduct, expertise: Expertise) => {
+    if (product.expertise) {
+      deleteEntry(product.expertise, expertise);
+    }
+  },
+);
+
+export const expertise_setDescription = action(
+  (expertise: Expertise, desc: string) => {
+    expertise.description = desc;
+  },
+);
+
+export const expertise_addId = action((expertise: Expertise, id: string) => {
+  if (expertise.expertIds) {
+    addUniqueEntry(expertise.expertIds, id);
+  } else {
+    expertise.expertIds = [id];
+  }
+});
+
+export const expertise_deleteId = action((expertise: Expertise, id: string) => {
+  if (expertise.expertIds) {
+    deleteEntry(expertise.expertIds, id);
+  }
+});
+
 export const dataProduct_swapAccessPointGroups = action(
   (
     product: DataProduct,