@finos/legend-application-studio 28.18.137 → 28.18.139

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-application-studio",
-  "version": "28.18.137",
+  "version": "28.18.139",
   "description": "Legend Studio application core",
   "keywords": [
     "legend",
@@ -47,11 +47,11 @@
   "dependencies": {
     "@finos/legend-application": "16.0.48",
     "@finos/legend-art": "7.1.102",
-    "@finos/legend-code-editor": "2.0.79",
-    "@finos/legend-data-cube": "0.2.11",
-    "@finos/legend-graph": "32.1.37",
-    "@finos/legend-lego": "2.0.84",
-    "@finos/legend-query-builder": "4.16.45",
+    "@finos/legend-code-editor": "2.0.81",
+    "@finos/legend-data-cube": "0.2.13",
+    "@finos/legend-graph": "32.1.39",
+    "@finos/legend-lego": "2.0.86",
+    "@finos/legend-query-builder": "4.16.47",
     "@finos/legend-server-depot": "6.0.92",
     "@finos/legend-server-sdlc": "5.3.58",
     "@finos/legend-server-showcase": "0.2.54",

package/src/__lib__/LegendStudioEvent.ts

@@ -77,4 +77,7 @@ export enum LEGEND_STUDIO_APP_EVENT {
   TEXT_MODE_ACTION_KEYBOARD_SHORTCUT_GO_TO_DEFINITION__LAUNCH = 'editor.text-mode.action.keyboard.shortcut.go-to-element.launch',
   TEXT_MODE_ACTION_KEYBOARD_SHORTCUT_GO_TO_DEFINITION__ERROR = 'editor.text-mode.action.keyboard.shortcut.go-to-element.error',
   TEXT_MODE_ACTION_KEYBOARD_SHORTCUT_GO_TO_DEFINITION__SUCCESS = 'editor.text-mode.action.keyboard.shortcut.go-to-element.success',
+
+  // Ingestion
+  INGESTION_DEPLOY_SUCCESS_URN = 'editor.ingestion.deployment.success.urn',
 }

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

@@ -43,6 +43,11 @@ import {
   ModalFooter,
   ModalFooterButton,
   PencilEditIcon,
+  PanelFormTextField,
+  ControlledDropdownMenu,
+  MenuContent,
+  MenuContentItem,
+  CaretDownIcon,
 } from '@finos/legend-art';
 import React, { useRef, useState, useEffect } from 'react';
 import { filterByType } from '@finos/legend-shared';
@@ -51,7 +56,10 @@ import { action, flowResult } from 'mobx';
 import { useAuth } from 'react-oidc-context';
 import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
 import { CodeEditor } from '@finos/legend-lego/code-editor';
-import type { LakehouseAccessPoint } from '@finos/legend-graph';
+import {
+  LakehouseTargetEnv,
+  type LakehouseAccessPoint,
+} from '@finos/legend-graph';
 
 const NewAccessPointAccessPOint = observer(
   (props: { dataProductEditorState: DataProductEditorState }) => {
@@ -225,6 +233,12 @@ export const LakehouseDataProductAcccessPointEditor = observer(
       action((accessPoint.description = event.target.value));
     };
 
+    const updateAccessPointTargetEnvironment = action(
+      (targetEnvironment: LakehouseTargetEnv) => {
+        accessPoint.targetEnvironment = targetEnvironment;
+      },
+    );
+
     return (
       <div
         className={clsx('access-point-editor', {
@@ -268,11 +282,44 @@ export const LakehouseDataProductAcccessPointEditor = observer(
           <div className="access-point-editor__info">
             <div
               className={clsx('access-point-editor__type')}
-              title={accessPoint.targetEnvironment}
+              title={'Change target environment'}
             >
               <div className="access-point-editor__type__label">
                 {accessPoint.targetEnvironment}
               </div>
+              <div
+                style={{
+                  background: 'transparent',
+                  height: '100%',
+                  alignItems: 'center',
+                  display: 'flex',
+                }}
+              >
+                <ControlledDropdownMenu
+                  className="access-point-editor__dropdown"
+                  content={
+                    <MenuContent>
+                      {Object.values(LakehouseTargetEnv).map((environment) => (
+                        <MenuContentItem
+                          key={environment}
+                          className="btn__dropdown-combo__option"
+                          onClick={() =>
+                            updateAccessPointTargetEnvironment(environment)
+                          }
+                        >
+                          {environment}
+                        </MenuContentItem>
+                      ))}
+                    </MenuContent>
+                  }
+                  menuProps={{
+                    anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+                    transformOrigin: { vertical: 'top', horizontal: 'right' },
+                  }}
+                >
+                  <CaretDownIcon />
+                </ControlledDropdownMenu>
+              </div>
             </div>
           </div>
         </div>
@@ -365,7 +412,7 @@ const DataProductDeploymentResponseModal = observer(
           className="editor-modal"
         >
           <ModalHeader>
-            <ModalTitle title="Validation Error" />
+            <ModalTitle title="Data Product Deployment Response" />
           </ModalHeader>
           <ModalBody>
             <PanelContent>
@@ -430,6 +477,19 @@ export const DataProductEditor = observer(() => {
     }
   };
 
+  const updateDataProductTitle = action((val: string | undefined): void => {
+    if (val === undefined) {
+      return;
+    }
+    product.name = val;
+  });
+
+  const updateDataProductDescription = action(
+    (val: string | undefined): void => {
+      product.description = val;
+    },
+  );
+
   useEffect(() => {
     flowResult(dataProductEditorState.convertAccessPointsFuncObjects()).catch(
       dataProductEditorState.editorStore.applicationStore.alertUnhandledError,
@@ -459,7 +519,6 @@ export const DataProductEditor = observer(() => {
               </div>
             )}
             <div className="panel__header__title__label">data product</div>
-            <div className="panel__header__title__content">{product.name}</div>
           </div>
           <PanelHeaderActions>
             <div className="btn__dropdown-combo btn__dropdown-combo--primary">
@@ -476,10 +535,26 @@ export const DataProductEditor = observer(() => {
             </div>
           </PanelHeaderActions>
         </div>
+        <div className="panel" style={{ padding: '1rem' }}>
+          <PanelFormTextField
+            name="Title"
+            value={product.name}
+            prompt="Provide a title for this Lakehouse Data Product."
+            update={updateDataProductTitle}
+            placeholder="Enter title"
+          />
+          <PanelFormTextField
+            name="Description"
+            value={product.description}
+            prompt="Provide a description for this Lakehouse Data Product."
+            update={updateDataProductDescription}
+            placeholder="Enter description"
+          />
+        </div>
         <div className="panel">
           <PanelHeader>
             <div className="panel__header__title">
-              <div className="panel__header__title__content">ACCESS POINTS</div>
+              <div className="panel__header__title__label">access points</div>
             </div>
             <PanelHeaderActions>
               <PanelHeaderActionItem
@@ -492,22 +567,38 @@ export const DataProductEditor = observer(() => {
               </PanelHeaderActionItem>
             </PanelHeaderActions>
           </PanelHeader>
-          <PanelContent>
-            {accessPointStates
-              .filter(filterByType(LakehouseAccessPointState))
-              .map((apState) => (
-                <LakehouseDataProductAcccessPointEditor
-                  key={apState.accessPoint.id}
-                  isReadOnly={isReadOnly}
-                  accessPointState={apState}
+          <div style={{ overflow: 'auto' }}>
+            <PanelContent>
+              {dataProductEditorState.accessPointGroupStates.map(
+                (groupState) => (
+                  <div
+                    key={groupState.value.id}
+                    className="access-point-editor__group-container"
+                  >
+                    <div className="access-point-editor__group-container__title">
+                      <div className="panel__header__title__content">
+                        {groupState.value.id}
+                      </div>
+                    </div>
+                    {groupState.accessPointStates
+                      .filter(filterByType(LakehouseAccessPointState))
+                      .map((apState) => (
+                        <LakehouseDataProductAcccessPointEditor
+                          key={apState.accessPoint.id}
+                          isReadOnly={isReadOnly}
+                          accessPointState={apState}
+                        />
+                      ))}
+                  </div>
+                ),
+              )}
+              {!accessPointStates.length && (
+                <DataProductEditorSplashScreen
+                  dataProductEditorState={dataProductEditorState}
                 />
-              ))}
-            {!accessPointStates.length && (
-              <DataProductEditorSplashScreen
-                dataProductEditorState={dataProductEditorState}
-              />
-            )}
-          </PanelContent>
+              )}
+            </PanelContent>
+          </div>
           {dataProductEditorState.accessPointModal && (
             <NewAccessPointAccessPOint
               dataProductEditorState={dataProductEditorState}

package/src/components/editor/editor-group/ingest-editor/IngestDefinitionEditor.tsx

@@ -17,6 +17,8 @@
 import { observer } from 'mobx-react-lite';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
+  CheckCircleIcon,
+  CopyIcon,
   Dialog,
   Modal,
   ModalBody,
@@ -34,50 +36,91 @@ import {
   IngestDefinitionEditorState,
 } from '../../../../stores/editor/editor-state/element-editor-state/ingest/IngestDefinitionEditorState.js';
 import { CodeEditor } from '@finos/legend-lego/code-editor';
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
 import { flowResult } from 'mobx';
 import { useAuth } from 'react-oidc-context';
+import {
+  type IngestDefinitionDeploymentResponse,
+  IngestDefinitionValidationResponse,
+} from '../../../../stores/ingestion/IngestionDeploymentResponse.js';
 
-const IngestDepoymentModal = observer(
-  (props: { state: IngestDefinitionEditorState }) => {
-    const { state } = props;
+const IngestValidationError = observer(
+  (props: {
+    state: IngestDefinitionEditorState;
+    validateResponse: IngestDefinitionValidationResponse;
+  }) => {
+    const { state, validateResponse } = props;
     const applicationStore = state.editorStore.applicationStore;
+    const closeModal = (): void =>
+      state.setValidateAndDeployResponse(undefined);
     return (
       <Dialog
-        open={state.deploymentState.isInProgress}
-        classes={{ container: 'search-modal__container' }}
+        open={true}
+        classes={{
+          root: 'editor-modal__root-container',
+          container: 'editor-modal__container',
+          paper: 'editor-modal__content',
+        }}
+        onClose={closeModal}
       >
         <Modal
           darkMode={
             !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
           }
-          className="database-builder"
+          className="editor-modal"
         >
           <ModalHeader>
-            <ModalTitle title="Deploy Ingestion" />
+            <ModalTitle title={'Validation Error'} />
           </ModalHeader>
           <ModalBody>
-            <div>{state.deploymentState.message}</div>
+            <PanelContent>
+              <CodeEditor
+                inputValue={JSON.stringify(validateResponse, null, 2)}
+                isReadOnly={true}
+                language={CODE_EDITOR_LANGUAGE.JSON}
+              />
+            </PanelContent>
           </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              onClick={closeModal}
+              text="Close"
+              type="secondary"
+            />
+          </ModalFooter>
         </Modal>
       </Dialog>
     );
   },
 );
 
-const IngestValidationError = observer(
-  (props: { state: IngestDefinitionEditorState }) => {
-    const { state } = props;
+// TODO: show full report i.e write envs etc
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const IngestDeploymentResponseModal = observer(
+  (props: {
+    state: IngestDefinitionEditorState;
+    deploymentResponse: IngestDefinitionDeploymentResponse;
+  }) => {
+    const { state, deploymentResponse } = props;
     const applicationStore = state.editorStore.applicationStore;
-    const validationError = state.validationError;
-    if (!validationError) {
-      return null;
-    }
-    const closeModal = (): void => state.setValError(undefined);
+    const closeModal = (): void =>
+      state.setValidateAndDeployResponse(undefined);
+    const copyURN = (text: string): void => {
+      state.editorStore.applicationStore.clipboardService
+        .copyTextToClipboard(text)
+        .then(() =>
+          state.editorStore.applicationStore.notificationService.notifySuccess(
+            'Ingest URN copied to clipboard',
+            undefined,
+            2500,
+          ),
+        )
+        .catch(state.editorStore.applicationStore.alertUnhandledError);
+    };
     return (
       <Dialog
-        open={Boolean(state.validationError)}
+        open={true}
         classes={{
           root: 'editor-modal__root-container',
           container: 'editor-modal__container',
@@ -92,19 +135,34 @@ const IngestValidationError = observer(
           className="editor-modal"
         >
           <ModalHeader>
-            <ModalTitle title="Validation Error" />
+            <ModalTitle
+              icon={<CheckCircleIcon />}
+              title="Deployment URN"
+            ></ModalTitle>
           </ModalHeader>
           <ModalBody>
             <PanelContent>
-              <CodeEditor
-                inputValue={JSON.stringify(
-                  state.validationError ?? {},
-                  null,
-                  2,
-                )}
-                isReadOnly={true}
-                language={CODE_EDITOR_LANGUAGE.JSON}
-              />
+              <div>
+                <div>Ingestion URN</div>
+                <div>{deploymentResponse.ingestDefinitionUrn}</div>
+
+                <div className="data-space__viewer__quickstart__tds__query-text__actions">
+                  <button
+                    className="data-space__viewer__quickstart__tds__query-text__action"
+                    tabIndex={-1}
+                    title="Copy"
+                    onClick={() => {
+                      copyURN(deploymentResponse.ingestDefinitionUrn);
+                    }}
+                  >
+                    <CopyIcon />
+                  </button>
+                  <button
+                    className="data-space__viewer__quickstart__tds__query-text__action"
+                    tabIndex={-1}
+                  ></button>
+                </div>
+              </div>
             </PanelContent>
           </ModalBody>
           <ModalFooter>
@@ -153,6 +211,20 @@ export const IngestDefinitionEditor = observer(() => {
     }
   };
 
+  const renderDeploymentResponse = (): React.ReactNode => {
+    const response = ingestDefinitionEditorState.deploymentResponse;
+    if (response instanceof IngestDefinitionValidationResponse) {
+      return (
+        <IngestValidationError
+          state={ingestDefinitionEditorState}
+          validateResponse={response}
+        />
+      );
+    }
+
+    return null;
+  };
+
   const isValid = ingestDefinitionEditorState.validForDeployment;
   useEffect(() => {
     ingestDefinitionEditorState.generateElementGrammar();
@@ -202,12 +274,7 @@ export const IngestDefinitionEditor = observer(() => {
             language={CODE_EDITOR_LANGUAGE.PURE}
           />
         </PanelContent>
-        {ingestDefinitionEditorState.deploymentState.isInProgress && (
-          <IngestDepoymentModal state={ingestDefinitionEditorState} />
-        )}
-        {ingestDefinitionEditorState.validationError && (
-          <IngestValidationError state={ingestDefinitionEditorState} />
-        )}
+        {renderDeploymentResponse()}
       </PanelContent>
     </div>
   );

package/src/components/editor/side-bar/CreateNewElementModal.tsx

@@ -27,7 +27,6 @@ import {
   NewServiceDriver,
   CONNECTION_TYPE,
   type RuntimeOption,
-  NewLakehouseDataProductDriver,
 } from '../../../stores/editor/NewElementState.js';
 import { Dialog, compareLabelFn, CustomSelectorInput } from '@finos/legend-art';
 import type { EditorStore } from '../../../stores/editor/EditorStore.js';
@@ -441,27 +440,11 @@ const NewServiceDriverEditor = observer(() => {
 });
 
 const NewLakehouseDataProductEditor = observer(() => {
-  const editorStore = useEditorStore();
-  const newProductDriver = editorStore.newElementState.getNewElementDriver(
-    NewLakehouseDataProductDriver,
-  );
-  const handleTitleChangee: React.ChangeEventHandler<HTMLInputElement> = (
-    event,
-  ) => newProductDriver.setTitle(event.target.value);
-  return (
-    <>
-      <div className="panel__content__form__section__header__label">Title</div>
-      <div className="explorer__new-element-modal__driver">
-        <input
-          className="input--dark explorer__new-element-modal__name-input"
-          spellCheck={false}
-          value={newProductDriver.title}
-          onChange={handleTitleChangee}
-          placeholder={`Data Product Title`}
-        />
-      </div>
-    </>
-  );
+  // const editorStore = useEditorStore();
+  // const newProductDriver = editorStore.newElementState.getNewElementDriver(
+  //   NewLakehouseDataProductDriver,
+  // );
+  return null;
 });
 
 const NewFileGenerationDriverEditor = observer(() => {

package/src/stores/editor/NewElementState.ts

@@ -496,7 +496,7 @@ export class NewLakehouseDataProductDriver extends NewElementDriver<DataProduct>
   }
 
   override get isValid(): boolean {
-    return Boolean(this.title);
+    return true;
   }
 
   setTitle(val: string) {

package/src/stores/editor/editor-state/element-editor-state/ingest/IngestDefinitionEditorState.ts

@@ -23,12 +23,21 @@ import {
   assertTrue,
   guaranteeNonNullable,
   guaranteeType,
+  LogEvent,
   removePrefix,
   type GeneratorFn,
 } from '@finos/legend-shared';
 import type { IngestionManager } from '../../../../ingestion/IngestionManager.js';
-import { action, flow, flowResult, makeObservable, observable } from 'mobx';
+import {
+  action,
+  computed,
+  flow,
+  flowResult,
+  makeObservable,
+  observable,
+} from 'mobx';
 import type {
+  IngestDefinitionDeploymentResponse,
   IngestDefinitionValidationResponse,
   ValidateAndDeploymentResponse,
 } from '../../../../ingestion/IngestionDeploymentResponse.js';
@@ -38,6 +47,11 @@ import {
 } from '../ElementEditorInitialConfiguration.js';
 import type { AuthContextProps } from 'react-oidc-context';
 import { EXTERNAL_APPLICATION_NAVIGATION__generateUrlWithEditorConfig } from '../../../../../__lib__/LegendStudioNavigation.js';
+import {
+  ActionAlertActionType,
+  ActionAlertType,
+} from '@finos/legend-application';
+import { LEGEND_STUDIO_APP_EVENT } from '../../../../../__lib__/LegendStudioEvent.js';
 
 const createEditorInitialConfiguration = (): EditorInitialConfiguration => {
   const config = new EditorInitialConfiguration();
@@ -63,7 +77,7 @@ export const generateUrlToDeployOnOpen = (
 
 const PARSER_SECTION = `###Lakehouse`;
 export class IngestDefinitionEditorState extends ElementEditorState {
-  validationError: IngestDefinitionValidationResponse | undefined;
+  validateAndDeployResponse: ValidateAndDeploymentResponse | undefined;
   deploymentState = ActionState.create();
   deployOnOpen = false;
 
@@ -78,8 +92,9 @@ export class IngestDefinitionEditorState extends ElementEditorState {
       deploymentState: observable,
       deployOnOpen: observable,
       setDeployOnOpen: observable,
-      validationError: observable,
-      setValError: action,
+      validateAndDeployResponse: observable,
+      deploymentResponse: computed,
+      setValidateAndDeployResponse: action,
       init_with_deploy: flow,
       deploy: flow,
     });
@@ -89,12 +104,24 @@ export class IngestDefinitionEditorState extends ElementEditorState {
     }
   }
 
+  get deploymentResponse():
+    | IngestDefinitionDeploymentResponse
+    | IngestDefinitionValidationResponse
+    | undefined {
+    return (
+      this.validateAndDeployResponse?.deploymentResponse ??
+      this.validateAndDeployResponse?.validationResponse
+    );
+  }
+
   get ingestionManager(): IngestionManager | undefined {
     return this.editorStore.ingestionManager;
   }
 
-  setValError(val: IngestDefinitionValidationResponse | undefined): void {
-    this.validationError = val;
+  setValidateAndDeployResponse(
+    val: ValidateAndDeploymentResponse | undefined,
+  ): void {
+    this.validateAndDeployResponse = val;
   }
 
   setDeployOnOpen(value: boolean): void {
@@ -140,24 +167,57 @@ export class IngestDefinitionEditorState extends ElementEditorState {
           }),
         token,
       )) as unknown as ValidateAndDeploymentResponse;
+      this.editorStore.applicationStore.alertService.setBlockingAlert(
+        undefined,
+      );
       const deploymentResponse = response.deploymentResponse;
       if (deploymentResponse) {
-        this.editorStore.applicationStore.notificationService.notifySuccess(
-          `Ingest definition successfully deployed on ${deploymentResponse.ingestDefinitionUrn}`,
+        this.editorStore.applicationStore.logService.info(
+          LogEvent.create(LEGEND_STUDIO_APP_EVENT.INGESTION_DEPLOY_SUCCESS_URN),
+          deploymentResponse.ingestDefinitionUrn,
         );
+        this.editorStore.applicationStore.alertService.setActionAlertInfo({
+          title: `Ingest Definition Deployment`,
+          message: `Ingest definition deployed successfully. You may use URN for ingestion of Data`,
+          prompt: `${deploymentResponse.ingestDefinitionUrn}`,
+          type: ActionAlertType.STANDARD,
+          actions: [
+            {
+              label: 'Copy URN',
+              type: ActionAlertActionType.PROCEED,
+              handler: (): void => {
+                this.editorStore.applicationStore.clipboardService
+                  .copyTextToClipboard(deploymentResponse.ingestDefinitionUrn)
+                  .then(() =>
+                    this.editorStore.applicationStore.notificationService.notifySuccess(
+                      'Ingest URN copied to clipboard',
+                      undefined,
+                      2500,
+                    ),
+                  )
+                  .catch(this.editorStore.applicationStore.alertUnhandledError);
+              },
+              default: true,
+            },
+            {
+              label: 'Close',
+              type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+            },
+          ],
+        });
       } else {
-        this.setValError(response.validationResponse);
+        this.setValidateAndDeployResponse(response);
       }
     } catch (error) {
+      this.editorStore.applicationStore.alertService.setBlockingAlert(
+        undefined,
+      );
       assertErrorThrown(error);
       this.editorStore.applicationStore.notificationService.notifyError(
         `Ingest definition failed to deploy: ${error.message}`,
       );
     } finally {
       this.deploymentState.complete();
-      this.editorStore.applicationStore.alertService.setBlockingAlert(
-        undefined,
-      );
     }
   }