@finos/legend-application-studio 28.18.146 → 28.18.148

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-application-studio",
-  "version": "28.18.146",
+  "version": "28.18.148",
   "description": "Legend Studio application core",
   "keywords": [
     "legend",
@@ -47,11 +47,11 @@
   "dependencies": {
     "@finos/legend-application": "16.0.49",
     "@finos/legend-art": "7.1.103",
-    "@finos/legend-code-editor": "2.0.83",
-    "@finos/legend-data-cube": "0.2.16",
-    "@finos/legend-graph": "32.1.41",
-    "@finos/legend-lego": "2.0.89",
-    "@finos/legend-query-builder": "4.16.52",
+    "@finos/legend-code-editor": "2.0.84",
+    "@finos/legend-data-cube": "0.2.18",
+    "@finos/legend-graph": "32.1.42",
+    "@finos/legend-lego": "2.0.90",
+    "@finos/legend-query-builder": "4.16.54",
     "@finos/legend-server-depot": "6.0.92",
     "@finos/legend-server-sdlc": "5.3.58",
     "@finos/legend-server-showcase": "0.2.54",

package/src/components/editor/editor-group/EditorGroup.tsx

@@ -371,14 +371,25 @@ export const EditorGroup = observer(() => {
     } else if (
       currentTabState instanceof QueryConnectionEndToEndWorkflowEditorState
     ) {
-      return (
-        <QueryConnectionWorflowEditor
-          connectionToQueryWorkflowState={
-            editorStore.globalEndToEndWorkflowState
-              .queryToConnectionWorkflowEditorState
-          }
-        />
-      );
+      if (
+        editorStore.globalEndToEndWorkflowState
+          .queryToConnectionWorkflowEditorState.packageableConnection
+          ?.connectionValue.store
+      ) {
+        return (
+          <QueryConnectionWorflowEditor
+            connectionToQueryWorkflowState={
+              editorStore.globalEndToEndWorkflowState
+                .queryToConnectionWorkflowEditorState
+            }
+          />
+        );
+      } else {
+        editorStore.applicationStore.notificationService.notifyError(
+          `Cannot open query to connection workflow editor because the connection does not have a store`,
+        );
+        return null;
+      }
     }
     // TODO: create an editor for unsupported tab
     return null;

package/src/components/editor/editor-group/RuntimeEditor.tsx

@@ -128,7 +128,9 @@ const getConnectionTooltipText = (
   } else if (connectionValue instanceof FlatDataConnection) {
     return `Flat-data connection \u2022 Flat-data store ${connectionValue.store.value.path}`;
   } else if (connectionValue instanceof RelationalDatabaseConnection) {
-    return `Relational database connection \u2020 database store ${connectionValue.store.value.path}`;
+    return connectionValue.store
+      ? `Relational database connection \u2020 database store ${connectionValue.store.value.path}`
+      : `Relational database connection`;
   } else if (connectionValue instanceof ModelChainConnection) {
     return `Model chain connection \u2022`;
   }

package/src/components/editor/editor-group/connection-editor/RelationalDatabaseConnectionEditor.tsx

@@ -1158,11 +1158,11 @@ const RelationalConnectionStoreEditor = observer(
     const stores =
       connectionValueState.editorStore.graphManagerState.graph.ownStores;
     const options = stores.map(buildElementOption);
-    const store = connection.store.value;
+    const store = connection.store?.value;
 
     const selectedStore = {
       value: store,
-      label: isStoreEmpty ? noStoreLabel : store.path,
+      label: isStoreEmpty ? noStoreLabel : store?.path,
     } as PackageableElementOption<Store>;
     const onStoreChange = (
       val: PackageableElementOption<Store> | null,
@@ -1202,6 +1202,7 @@ const RelationalConnectionStoreEditor = observer(
             <button
               className="relational-connection-editor-btn btn--dark"
               onClick={openDatabaseBuilder}
+              disabled={Boolean(isStoreEmpty)}
             >
               Build Database
             </button>

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

@@ -17,6 +17,7 @@
 import { observer } from 'mobx-react-lite';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
+  type AccessPointGroupState,
   DataProductEditorState,
   generateUrlToDeployOnOpen,
   LakehouseAccessPointState,
@@ -48,6 +49,7 @@ import {
   MenuContent,
   MenuContentItem,
   CaretDownIcon,
+  WarningIcon,
 } from '@finos/legend-art';
 import React, { useRef, useState, useEffect } from 'react';
 import { filterByType } from '@finos/legend-shared';
@@ -57,10 +59,12 @@ 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 AccessPointGroup,
   LakehouseTargetEnv,
   type LakehouseAccessPoint,
 } from '@finos/legend-graph';
 import {
+  accessPointGroup_setDescription,
   dataProduct_setDescription,
   dataProduct_setTitle,
 } from '../../../../stores/graph-modifier/DSL_DataProduct_GraphModifierHelper.js';
@@ -178,18 +182,24 @@ const NewAccessPointAccessPOint = observer(
 );
 
 interface DescriptionTextAreaProps {
-  accessPoint: LakehouseAccessPoint;
+  accessPoint: LakehouseAccessPoint | AccessPointGroup;
   handleMouseOver: (event: React.MouseEvent<HTMLDivElement>) => void;
   handleMouseOut: (event: React.MouseEvent<HTMLDivElement>) => void;
+  className?: string;
 }
 
 const DescriptionTextArea: React.FC<DescriptionTextAreaProps> = ({
   accessPoint,
   handleMouseOver,
   handleMouseOut,
+  className,
 }) => {
   return (
-    <div onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
+    <div
+      onMouseOver={handleMouseOver}
+      onMouseOut={handleMouseOut}
+      className={clsx(className)}
+    >
       {accessPoint.description}
     </div>
   );
@@ -444,6 +454,91 @@ const DataProductDeploymentResponseModal = observer(
   },
 );
 
+const AccessPointGroupSection = observer(
+  (props: { groupState: AccessPointGroupState; isReadOnly: boolean }) => {
+    const { groupState, isReadOnly } = props;
+    const [editingDescription, setEditingDescription] = useState(false);
+    const [isHovering, setIsHovering] = useState(false);
+
+    const handleEdit = () => setEditingDescription(true);
+    const handleBlur = () => {
+      setEditingDescription(false);
+      setIsHovering(false);
+    };
+    const handleMouseOver: React.MouseEventHandler<HTMLDivElement> = () => {
+      setIsHovering(true);
+    };
+    const handleMouseOut: React.MouseEventHandler<HTMLDivElement> = () => {
+      setIsHovering(false);
+    };
+
+    const updateGroupDescription = (val: string): void => {
+      accessPointGroup_setDescription(groupState.value, val);
+    };
+    return (
+      <div
+        key={groupState.value.id}
+        className="access-point-editor__group-container"
+      >
+        <div className="access-point-editor__group-container__title">
+          {groupState.value.id}
+        </div>
+        <div className="access-point-editor__group-container__description-editor">
+          {editingDescription ? (
+            <textarea
+              className="panel__content__form__section__input"
+              spellCheck={false}
+              value={groupState.value.description ?? ''}
+              onChange={(event) => updateGroupDescription(event.target.value)}
+              placeholder="Provide a description for this Access Point Group"
+              onBlur={handleBlur}
+              style={{
+                overflow: 'hidden',
+                resize: 'none',
+                padding: '0.25rem',
+              }}
+            />
+          ) : (
+            <div
+              onClick={handleEdit}
+              title="Click to edit description"
+              className="access-point-editor__description-container"
+            >
+              {groupState.value.description ? (
+                <DescriptionTextArea
+                  accessPoint={groupState.value}
+                  handleMouseOver={handleMouseOver}
+                  handleMouseOut={handleMouseOut}
+                  className="access-point-editor__group-container__description"
+                />
+              ) : (
+                <div
+                  className="access-point-editor__group-container__description--warning"
+                  onMouseOver={handleMouseOver}
+                  onMouseOut={handleMouseOut}
+                >
+                  <WarningIcon />
+                  No description provided
+                </div>
+              )}
+              {isHovering && hoverIcon()}
+            </div>
+          )}
+        </div>
+        {groupState.accessPointStates
+          .filter(filterByType(LakehouseAccessPointState))
+          .map((apState) => (
+            <LakehouseDataProductAcccessPointEditor
+              key={apState.accessPoint.id}
+              isReadOnly={isReadOnly}
+              accessPointState={apState}
+            />
+          ))}
+      </div>
+    );
+  },
+);
+
 export const DataProductEditor = observer(() => {
   const editorStore = useEditorStore();
   const dataProductEditorState =
@@ -565,38 +660,25 @@ export const DataProductEditor = observer(() => {
               </PanelHeaderActionItem>
             </PanelHeaderActions>
           </PanelHeader>
-          <div style={{ overflow: 'auto' }}>
-            <PanelContent>
+          <PanelContent>
+            <div style={{ overflow: 'auto' }}>
               {dataProductEditorState.accessPointGroupStates.map(
                 (groupState) => (
-                  <div
+                  <AccessPointGroupSection
                     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>
+                    groupState={groupState}
+                    isReadOnly={isReadOnly}
+                  />
                 ),
               )}
-              {!accessPointStates.length && (
-                <DataProductEditorSplashScreen
-                  dataProductEditorState={dataProductEditorState}
-                />
-              )}
-            </PanelContent>
-          </div>
+            </div>
+            {!accessPointStates.length && (
+              <DataProductEditorSplashScreen
+                dataProductEditorState={dataProductEditorState}
+              />
+            )}
+          </PanelContent>
+
           {dataProductEditorState.accessPointModal && (
             <NewAccessPointAccessPOint
               dataProductEditorState={dataProductEditorState}

package/src/components/editor/editor-group/function-activator/FunctionEditor.tsx

@@ -1046,7 +1046,6 @@ const FunctionDefinitionEditor = observer(
       }
       return <BlankPanelContent>Function Did Not Run</BlankPanelContent>;
     };
-
     return (
       <>
         <PanelLoadingIndicator
@@ -1154,7 +1153,15 @@ const FunctionDefinitionEditor = observer(
               })}
             >
               <LambdaEditor
-                className="function-editor__definition__lambda-editor lambda-editor--dark"
+                className={clsx(
+                  'function-editor__definition__lambda-editor lambda-editor--dark',
+                  {
+                    'function-editor__definition__lambda-editor-error': Boolean(
+                      lambdaEditorState.parserError ??
+                        lambdaEditorState.compilationError,
+                    ),
+                  },
+                )}
                 disabled={
                   lambdaEditorState.isConvertingFunctionBodyToString ||
                   isReadOnly

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

@@ -41,7 +41,7 @@ import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
 import { flowResult } from 'mobx';
 import { useAuth } from 'react-oidc-context';
 import {
-  type IngestDefinitionDeploymentResponse,
+  IngestDefinitionDeploymentResponse,
   IngestDefinitionValidationResponse,
 } from '../../../../stores/ingestion/IngestionDeploymentResponse.js';
 
@@ -95,75 +95,81 @@ const IngestValidationError = observer(
   },
 );
 
-// TODO: show full report i.e write envs etc
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const IngestDeploymentResponseModal = observer(
   (props: {
-    state: IngestDefinitionEditorState;
+    closeModal: () => void;
     deploymentResponse: IngestDefinitionDeploymentResponse;
+    copyHandler: (text: string, successMessage: string) => void;
   }) => {
-    const { state, deploymentResponse } = props;
-    const applicationStore = state.editorStore.applicationStore;
-    const closeModal = (): void =>
-      state.setValidateAndDeployResponse(undefined);
+    const { closeModal, deploymentResponse, copyHandler } = props;
     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);
+      copyHandler(text, 'Ingest URN copied to clipboard');
     };
     return (
       <Dialog
         open={true}
         classes={{
-          root: 'editor-modal__root-container',
-          container: 'editor-modal__container',
-          paper: 'editor-modal__content',
+          root: 'ingestion-modal__root-container',
+          container: 'ingestion-modal__container',
+          paper: 'ingestion-modal__content',
         }}
-        onClose={closeModal}
       >
-        <Modal
-          darkMode={
-            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
-          }
-          className="editor-modal"
-        >
+        <Modal darkMode={true} className="ingestion-modal">
           <ModalHeader>
             <ModalTitle
-              icon={<CheckCircleIcon />}
-              title="Deployment URN"
+              icon={<CheckCircleIcon className="ingestion-modal--success" />}
+              title="Deployment Response"
             ></ModalTitle>
           </ModalHeader>
           <ModalBody>
-            <PanelContent>
-              <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 className="ingestion-modal__urn">
+              <div className="ingestion-modal__urn__info">
+                <div className="panel__content__form__section__header__label">
+                  Deployment URN
+                </div>
+                <div className="ingestion-modal__urn__value">
+                  {deploymentResponse.ingestDefinitionUrn}
                 </div>
               </div>
-            </PanelContent>
+              <div className="ingestion-modal__urn__copy">
+                <button
+                  className="ingestion-modal__urn__copy--btn"
+                  tabIndex={-1}
+                  title="Copy"
+                  onClick={() => {
+                    copyURN(deploymentResponse.ingestDefinitionUrn);
+                  }}
+                >
+                  <CopyIcon />
+                </button>
+              </div>
+            </div>
+            <div className="ingestion-modal__write">
+              <div className="ingestion-modal__write__label">
+                Write Location
+              </div>
+              <div className="ingestion-modal__write--value">
+                {deploymentResponse.write_location ? (
+                  <CodeEditor
+                    inputValue={JSON.stringify(
+                      deploymentResponse.write_location,
+                      null,
+                      2,
+                    )}
+                    isReadOnly={true}
+                    language={CODE_EDITOR_LANGUAGE.JSON}
+                    extraEditorOptions={{
+                      wordWrap: 'on',
+                    }}
+                    hideActionBar={true}
+                  />
+                ) : (
+                  <div className="ingestion-modal__write--no-value">
+                    No write location provided
+                  </div>
+                )}
+              </div>
+            </div>
           </ModalBody>
           <ModalFooter>
             <ModalFooterButton
@@ -186,7 +192,6 @@ export const IngestDefinitionEditor = observer(() => {
     );
   const ingestDef = ingestDefinitionEditorState.ingest;
   const auth = useAuth();
-
   const deployIngest = (): void => {
     // Trigger OAuth flow if not authenticated
     if (!auth.isAuthenticated) {
@@ -220,8 +225,32 @@ export const IngestDefinitionEditor = observer(() => {
           validateResponse={response}
         />
       );
+    } else if (response instanceof IngestDefinitionDeploymentResponse) {
+      const copyHanlder = (text: string, successMessage: string): void => {
+        ingestDefinitionEditorState.editorStore.applicationStore.clipboardService
+          .copyTextToClipboard(text)
+          .then(() =>
+            ingestDefinitionEditorState.editorStore.applicationStore.notificationService.notifySuccess(
+              successMessage,
+              undefined,
+              2500,
+            ),
+          )
+          .catch(
+            ingestDefinitionEditorState.editorStore.applicationStore
+              .alertUnhandledError,
+          );
+      };
+      return (
+        <IngestDeploymentResponseModal
+          closeModal={() =>
+            ingestDefinitionEditorState.setValidateAndDeployResponse(undefined)
+          }
+          deploymentResponse={response}
+          copyHandler={copyHanlder}
+        />
+      );
     }
-
     return null;
   };
 

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

@@ -27,6 +27,7 @@ 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';
@@ -89,7 +90,7 @@ export const getElementTypeLabel = (
     case PACKAGEABLE_ELEMENT_TYPE.TEMPORARY__LOCAL_CONNECTION:
       return 'local connection';
     case PACKAGEABLE_ELEMENT_TYPE._DATA_PRODUCT:
-      return 'lakehouse data product';
+      return 'Lakehouse Data Product';
     default: {
       if (type) {
         const extraElementTypeLabelGetters = editorStore.pluginManager
@@ -440,11 +441,42 @@ const NewServiceDriverEditor = observer(() => {
 });
 
 const NewLakehouseDataProductEditor = observer(() => {
-  // const editorStore = useEditorStore();
-  // const newProductDriver = editorStore.newElementState.getNewElementDriver(
-  //   NewLakehouseDataProductDriver,
-  // );
-  return null;
+  const editorStore = useEditorStore();
+  const newProductDriver = editorStore.newElementState.getNewElementDriver(
+    NewLakehouseDataProductDriver,
+  );
+  const handleTitleChange: React.ChangeEventHandler<HTMLInputElement> = (
+    event,
+  ) => newProductDriver.setTitle(event.target.value);
+  const handleDescriptionChange: React.ChangeEventHandler<HTMLInputElement> = (
+    event,
+  ) => newProductDriver.setDescription(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={handleTitleChange}
+          placeholder={`Choose a title for this Data Product to display in Marketplace`}
+        />
+      </div>
+      <div className="panel__content__form__section__header__label">
+        Description
+      </div>
+      <div className="explorer__new-element-modal__driver">
+        <input
+          className="input--dark explorer__new-element-modal__name-input"
+          spellCheck={false}
+          value={newProductDriver.description}
+          onChange={handleDescriptionChange}
+          placeholder={`Provide a meaningful description for this Data Product`}
+        />
+      </div>
+    </>
+  );
 });
 
 const NewFileGenerationDriverEditor = observer(() => {

package/src/stores/editor/GraphEditFormModeState.ts

@@ -557,6 +557,7 @@ export class GraphEditFormModeState extends GraphEditorMode {
   *onLeave(): GeneratorFn<void> {
     this.editorStore.sqlPlaygroundState.setConnection(undefined);
     this.editorStore.tabManagerState.cacheAndClose();
+    this.editorStore.applicationStore.layoutService.setShowBackdrop(false);
   }
 
   *cleanupBeforeEntering(fallbackOptions?: {

package/src/stores/editor/NewElementState.ts

@@ -109,7 +109,10 @@ import {
 } from '@finos/legend-lego/graph-editor';
 import { EmbeddedDataType } from './editor-state/ExternalFormatState.js';
 import { createEmbeddedData } from './editor-state/element-editor-state/data/EmbeddedDataState.js';
-import { dataProduct_setTitle } from '../graph-modifier/DSL_DataProduct_GraphModifierHelper.js';
+import {
+  dataProduct_setDescription,
+  dataProduct_setTitle,
+} from '../graph-modifier/DSL_DataProduct_GraphModifierHelper.js';
 
 export const CUSTOM_LABEL = '(custom)';
 
@@ -484,27 +487,35 @@ export class NewPackageableConnectionDriver extends NewElementDriver<Packageable
 
 export class NewLakehouseDataProductDriver extends NewElementDriver<DataProduct> {
   title: string;
+  description: string;
 
   constructor(editorStore: EditorStore) {
     super(editorStore);
     this.title = '';
+    this.description = '';
     makeObservable(this, {
       title: observable,
+      description: observable,
       setTitle: action,
+      setDescription: action,
       isValid: computed,
     });
   }
 
   override get isValid(): boolean {
-    return true;
+    return Boolean(this.title && this.description);
   }
 
   setTitle(val: string) {
     this.title = val;
   }
+  setDescription(val: string) {
+    this.description = val;
+  }
   override createElement(name: string): DataProduct {
     const dataProduct = new DataProduct(name);
     dataProduct_setTitle(dataProduct, this.title);
+    dataProduct_setDescription(dataProduct, this.description);
     return dataProduct;
   }
 }

package/src/stores/editor/editor-state/element-editor-state/connection/ConnectionEditorState.ts

@@ -171,8 +171,9 @@ export class RelationalDatabaseConnectionValueState extends ConnectionValueState
   };
 
   get storeValidationResult(): ValidationIssue | undefined {
-    return isStubbed_PackageableElement(this.connection.store.value)
-      ? createValidationError(['Connection database cannot be empty'])
+    return !this.connection.store ||
+      isStubbed_PackageableElement(this.connection.store.value)
+      ? createValidationError(['Connection database is empty'])
       : undefined;
   }
 

package/src/stores/editor/editor-state/element-editor-state/connection/DatabaseBuilderState.ts

@@ -373,12 +373,15 @@ export class DatabaseSchemaExplorerState {
     });
 
     this.connection = connection;
-    this.database = guaranteeType(connection.store.value, Database);
+    this.database = guaranteeType(connection.store?.value, Database);
     this.editorStore = editorStore;
     this.targetDatabasePath = DEFAULT_DATABASE_PATH;
   }
 
   get isCreatingNewDatabase(): boolean {
+    if (!this.connection.store) {
+      return false;
+    }
     return isStubbed_PackageableElement(this.connection.store.value);
   }