@finos/legend-application-studio 28.19.5 → 28.19.7

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

@@ -37,6 +37,7 @@ import {
   PlusIcon,
   PanelHeaderActionItem,
   RocketIcon,
+  ListEditor,
   Modal,
   ModalHeader,
   ModalTitle,
@@ -50,21 +51,53 @@ import {
   MenuContentItem,
   CaretDownIcon,
   WarningIcon,
+  PanelFormSection,
 } from '@finos/legend-art';
-import React, { useRef, useState, useEffect } from 'react';
+import React, {
+  useRef,
+  useState,
+  useEffect,
+  type ChangeEventHandler,
+} from 'react';
 import { filterByType } from '@finos/legend-shared';
 import { InlineLambdaEditor } from '@finos/legend-query-builder';
 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 { LakehouseTargetEnv } from '@finos/legend-graph';
+import { LakehouseTargetEnv, Email } from '@finos/legend-graph';
 import {
   accessPointGroup_setDescription,
   accessPointGroup_setName,
   dataProduct_setDescription,
+  dataProduct_setSupportInfoIfAbsent,
   dataProduct_setTitle,
+  supportInfo_setDocumentationUrl,
+  supportInfo_setWebsite,
+  supportInfo_setFaqUrl,
+  supportInfo_setSupportUrl,
+  supportInfo_addEmail,
+  supportInfo_deleteEmail,
 } 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';
+import {
+  ActionAlertActionType,
+  ActionAlertType,
+  useApplicationNavigationContext,
+} from '@finos/legend-application';
+
+export enum AP_GROUP_MODAL_ERRORS {
+  GROUP_NAME_EMPTY = 'Group Name is empty',
+  GROUP_NAME_EXISTS = 'Group Name already exists',
+  GROUP_DESCRIPTION_EMPTY = 'Group Description is empty',
+  AP_NAME_EMPTY = 'Access Point Name is empty',
+  AP_NAME_EXISTS = 'Access Point Name already exists',
+  AP_DESCRIPTION_EMPTY = 'Access Point Description is empty',
+}
+
+export const AP_EMPTY_DESC_WARNING =
+  'Describe the data this access point produces';
 
 const NewAccessPointAccessPOint = observer(
   (props: { dataProductEditorState: DataProductEditorState }) => {
@@ -106,15 +139,17 @@ const NewAccessPointAccessPOint = observer(
       dataProductEditorState.accessPoints.map((e) => e.id).includes(id);
     const nameErrors =
       id === ''
-        ? `Name is empty`
+        ? AP_GROUP_MODAL_ERRORS.AP_NAME_EMPTY
         : dataProductEditorState.accessPoints
               .map((e) => e.id)
               .includes(id ?? '')
-          ? `Name already exists`
+          ? AP_GROUP_MODAL_ERRORS.AP_NAME_EXISTS
           : undefined;
 
     const descriptionErrors =
-      description === '' ? `Description is empty` : undefined;
+      description === ''
+        ? AP_GROUP_MODAL_ERRORS.AP_DESCRIPTION_EMPTY
+        : undefined;
     return (
       <Dialog
         open={true}
@@ -156,9 +191,9 @@ const NewAccessPointAccessPOint = observer(
               })}
               ref={accessPointInputRef}
               spellCheck={false}
-              value={id}
+              value={id ?? ''}
               onChange={handleIdChange}
-              placeholder="Access Point ID"
+              placeholder="Access Point Name"
               error={nameErrors}
             />
           </div>
@@ -171,7 +206,7 @@ const NewAccessPointAccessPOint = observer(
                 'input--dark': true,
               })}
               spellCheck={false}
-              value={description}
+              value={description ?? ''}
               onChange={handleDescriptionChange}
               placeholder="Access Point Description"
               error={descriptionErrors}
@@ -228,24 +263,28 @@ const NewAccessPointGroupModal = observer(
 
     const groupNameErrors =
       groupName === ''
-        ? `Group Name is empty`
+        ? AP_GROUP_MODAL_ERRORS.GROUP_NAME_EMPTY
         : dataProductEditorState.accessPointGroupStates
               .map((e) => e.value.id)
               .includes(groupName ?? '')
-          ? `Group Name already exists`
+          ? AP_GROUP_MODAL_ERRORS.GROUP_NAME_EXISTS
           : undefined;
     const groupDescriptionErrors =
-      groupDescription === '' ? `Group Description is empty` : undefined;
+      groupDescription === ''
+        ? AP_GROUP_MODAL_ERRORS.GROUP_DESCRIPTION_EMPTY
+        : undefined;
     const apNameErrors =
       apName === ''
-        ? `Access Point Name is empty`
+        ? AP_GROUP_MODAL_ERRORS.AP_NAME_EMPTY
         : dataProductEditorState.accessPoints
               .map((e) => e.id)
               .includes(apName ?? '')
-          ? `Access Point Name already exists`
+          ? AP_GROUP_MODAL_ERRORS.AP_NAME_EXISTS
           : undefined;
     const apDescriptionErrors =
-      apDescription === '' ? `Access Point Description is empty` : undefined;
+      apDescription === ''
+        ? AP_GROUP_MODAL_ERRORS.AP_DESCRIPTION_EMPTY
+        : undefined;
 
     const disableCreateButton =
       !groupName ||
@@ -314,7 +353,7 @@ const NewAccessPointGroupModal = observer(
               })}
               ref={accessPointGroupInputRef}
               spellCheck={false}
-              value={groupName}
+              value={groupName ?? ''}
               onChange={handleGroupNameChange}
               placeholder="Access Point Group Name"
               error={groupNameErrors}
@@ -329,7 +368,7 @@ const NewAccessPointGroupModal = observer(
                 'input--dark': true,
               })}
               spellCheck={false}
-              value={groupDescription}
+              value={groupDescription ?? ''}
               onChange={handleGroupDescriptionChange}
               placeholder="Access Point Group Description"
               error={groupDescriptionErrors}
@@ -348,7 +387,7 @@ const NewAccessPointGroupModal = observer(
                   'input--dark': true,
                 })}
                 spellCheck={false}
-                value={apName}
+                value={apName ?? ''}
                 onChange={handleApNameChange}
                 placeholder="Access Point Name"
                 error={apNameErrors}
@@ -361,7 +400,7 @@ const NewAccessPointGroupModal = observer(
                   'input--dark': true,
                 })}
                 spellCheck={false}
-                value={apDescription}
+                value={apDescription ?? ''}
                 onChange={handleApDescriptionChange}
                 placeholder="Access Point Description"
                 error={apDescriptionErrors}
@@ -411,7 +450,7 @@ const HoverTextArea: React.FC<HoverTextAreaProps> = ({
 
 const hoverIcon = () => {
   return (
-    <div>
+    <div data-testid={LEGEND_STUDIO_TEST_ID.HOVER_EDIT_ICON}>
       <PencilEditIcon />
     </div>
   );
@@ -445,11 +484,10 @@ export const LakehouseDataProductAcccessPointEditor = observer(
       setIsHovering(false);
     };
 
-    const updateAccessPointDescription: React.ChangeEventHandler<
-      HTMLTextAreaElement
-    > = (event) => {
-      action((accessPoint.description = event.target.value));
-    };
+    const updateAccessPointDescription: React.ChangeEventHandler<HTMLTextAreaElement> =
+      action((event) => {
+        accessPoint.description = event.target.value;
+      });
 
     const updateAccessPointTargetEnvironment = action(
       (targetEnvironment: LakehouseTargetEnv) => {
@@ -502,7 +540,7 @@ export const LakehouseDataProductAcccessPointEditor = observer(
                   onMouseOut={handleMouseOut}
                 >
                   <WarningIcon />
-                  Describe the data this access point produces
+                  {AP_EMPTY_DESC_WARNING}
                 </div>
               )}
 
@@ -673,6 +711,7 @@ const DataProductDeploymentResponseModal = observer(
 const AccessPointGroupSection = observer(
   (props: { groupState: AccessPointGroupState; isReadOnly: boolean }) => {
     const { groupState, isReadOnly } = props;
+    const editorStore = useEditorStore();
     const productEditorState = groupState.state;
     const [editingDescription, setEditingDescription] = useState(false);
     const [isHoveringDescription, setIsHoveringDescription] = useState(false);
@@ -715,6 +754,27 @@ const AccessPointGroupSection = observer(
       }
     };
 
+    const handleRemoveAccessPointGroup = (): void => {
+      editorStore.applicationStore.alertService.setActionAlertInfo({
+        message: `Deleting access point group ${groupState.value.id} will permanently remove it and all associated access points. Are you sure you want to proceed?`,
+        type: ActionAlertType.CAUTION,
+        actions: [
+          {
+            label: 'Cancel',
+            type: ActionAlertActionType.PROCEED,
+            default: true,
+          },
+          {
+            label: 'Proceed',
+            type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+            handler: (): void => {
+              productEditorState.deleteAccessPointGroup(groupState);
+            },
+          },
+        ],
+      });
+    };
+
     const openNewModal = () => {
       productEditorState.setEditingGroupState(groupState);
       productEditorState.setAccessPointModal(true);
@@ -755,7 +815,8 @@ const AccessPointGroupSection = observer(
           <button
             className="access-point-editor__generic-entry__remove-btn--group"
             onClick={() => {
-              productEditorState.deleteAccessPointGroup(groupState);
+              // productEditorState.deleteAccessPointGroup(groupState);
+              handleRemoveAccessPointGroup();
             }}
             tabIndex={-1}
             title="Remove Access Point Group"
@@ -879,9 +940,42 @@ export const DataProductEditor = observer(() => {
   const updateDataProductTitle = (val: string | undefined): void => {
     dataProduct_setTitle(product, val ?? '');
   };
-  const updateDataProductDescription = (val: string | undefined): void => {
-    dataProduct_setDescription(product, val ?? '');
+  const updateDataProductDescription: ChangeEventHandler<
+    HTMLTextAreaElement
+  > = (event) => {
+    dataProduct_setDescription(product, event.target.value);
+  };
+
+  const updateSupportInfoDocumentationUrl = (val: string | undefined): void => {
+    dataProduct_setSupportInfoIfAbsent(product);
+    if (product.supportInfo) {
+      supportInfo_setDocumentationUrl(product.supportInfo, val ?? '');
+    }
+  };
+
+  const updateSupportInfoWebsite = (val: string | undefined): void => {
+    dataProduct_setSupportInfoIfAbsent(product);
+    if (product.supportInfo) {
+      supportInfo_setWebsite(product.supportInfo, val ?? '');
+    }
+  };
+
+  const updateSupportInfoFaqUrl = (val: string | undefined): void => {
+    dataProduct_setSupportInfoIfAbsent(product);
+    if (product.supportInfo) {
+      supportInfo_setFaqUrl(product.supportInfo, val ?? '');
+    }
+  };
+
+  const updateSupportInfoSupportUrl = (val: string | undefined): void => {
+    dataProduct_setSupportInfoIfAbsent(product);
+    if (product.supportInfo) {
+      supportInfo_setSupportUrl(product.supportInfo, val ?? '');
+    }
   };
+  useApplicationNavigationContext(
+    LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.DATA_PRODUCT_EDITOR,
+  );
 
   useEffect(() => {
     flowResult(dataProductEditorState.convertAccessPointsFuncObjects()).catch(
@@ -901,6 +995,84 @@ export const DataProductEditor = observer(() => {
     dataProductEditorState,
   ]);
 
+  const handleSupportInfoEmailAdd = (address: string, title: string): void => {
+    dataProduct_setSupportInfoIfAbsent(product);
+    if (product.supportInfo) {
+      supportInfo_addEmail(product.supportInfo, new Email(address, title));
+    }
+  };
+
+  const handleSupportInfoEmailRemove = (email: Email): void => {
+    if (product.supportInfo) {
+      supportInfo_deleteEmail(product.supportInfo, email);
+    }
+  };
+
+  const SupportEmailComponent = observer(
+    (props: { item: Email }): React.ReactElement => {
+      const { item } = props;
+
+      return (
+        <div className="panel__content__form__section__list__item__rows">
+          <div className="row">
+            <label className="label">Address</label>
+            <div className="textbox">{item.address}</div>
+          </div>
+          <div className="row">
+            <label className="label">Title</label>
+            <div className="textbox">{item.title}</div>
+          </div>
+        </div>
+      );
+    },
+  );
+
+  const NewSupportEmailComponent = observer(
+    (props: { onFinishEditing: () => void }) => {
+      const { onFinishEditing } = props;
+      const [address, setAddress] = useState('');
+      const [title, setTitle] = useState('');
+
+      return (
+        <div className="data-product-editor__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={address}
+              onChange={(event) => {
+                setAddress(event.target.value);
+              }}
+            />
+          </div>
+          <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 title"
+              value={title}
+              onChange={(event) => {
+                setTitle(event.target.value);
+              }}
+            />
+          </div>
+          <button
+            className="panel__content__form__section__list__new-item__add-btn btn btn--dark"
+            onClick={() => {
+              handleSupportInfoEmailAdd(address, title);
+              setAddress('');
+              setTitle('');
+              onFinishEditing();
+            }}
+          >
+            Save
+          </button>
+        </div>
+      );
+    },
+  );
+
   return (
     <div className="data-product-editor">
       <div className="panel">
@@ -936,13 +1108,69 @@ export const DataProductEditor = observer(() => {
             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 style={{ margin: '1rem' }}>
+            <div className="panel__content__form__section__header__label">
+              Description
+            </div>
+            <div className="panel__content__form__section__header__prompt">
+              Provide a description for this Lakehouse Data Product.
+            </div>
+            <textarea
+              className="panel__content__form__section__textarea"
+              spellCheck={false}
+              disabled={isReadOnly}
+              value={product.description}
+              onChange={updateDataProductDescription}
+              style={{
+                padding: '0.5rem',
+                width: '45rem',
+                maxWidth: '45rem !important',
+              }}
+            />
+          </div>
+
+          <PanelFormSection>
+            <div className="panel__content__form__section__header__label">
+              Support Information
+            </div>
+            <div className="panel__content__form__section__header__prompt">
+              Configure support information for this Lakehouse Data Product.
+            </div>
+            <PanelFormTextField
+              name="Documentation URL"
+              value={product.supportInfo?.documentationUrl ?? ''}
+              update={updateSupportInfoDocumentationUrl}
+              placeholder="Enter Documentation URL"
+            />
+            <PanelFormTextField
+              name="Website"
+              value={product.supportInfo?.website}
+              update={updateSupportInfoWebsite}
+              placeholder="Enter Website"
+            />
+            <PanelFormTextField
+              name="FAQ URL"
+              value={product.supportInfo?.faqUrl}
+              update={updateSupportInfoFaqUrl}
+              placeholder="Enter FAQ URL"
+            />
+            <PanelFormTextField
+              name="Support URL"
+              value={product.supportInfo?.supportUrl}
+              update={updateSupportInfoSupportUrl}
+              placeholder="Enter Support URL"
+            />
+            <ListEditor
+              title="Emails"
+              items={product.supportInfo?.emails}
+              keySelector={(email: Email) => email.address + email.title}
+              ItemComponent={SupportEmailComponent}
+              NewItemComponent={NewSupportEmailComponent}
+              handleRemoveItem={handleSupportInfoEmailRemove}
+              isReadOnly={isReadOnly}
+              emptyMessage="No emails specified"
+            />
+          </PanelFormSection>
         </div>
         <div className="panel" style={{ overflow: 'auto' }}>
           <PanelHeader>
@@ -983,12 +1211,6 @@ export const DataProductEditor = observer(() => {
               />
             )}
           </PanelContent>
-
-          {/* {dataProductEditorState.accessPointModal && (
-            <NewAccessPointAccessPOint
-              dataProductEditorState={dataProductEditorState}
-            />
-          )} */}
           {dataProductEditorState.accessPointGroupModal && (
             <NewAccessPointGroupModal
               dataProductEditorState={dataProductEditorState}

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

@@ -44,6 +44,8 @@ import {
   IngestDefinitionDeploymentResponse,
   IngestDefinitionValidationResponse,
 } from '@finos/legend-server-lakehouse';
+import { useApplicationNavigationContext } from '@finos/legend-application';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
 
 const IngestValidationError = observer(
   (props: {
@@ -259,6 +261,10 @@ export const IngestDefinitionEditor = observer(() => {
     ingestDefinitionEditorState.generateElementGrammar();
   }, [ingestDefinitionEditorState]);
 
+  useApplicationNavigationContext(
+    LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.INGEST_DEFINITION_EDITOR,
+  );
+
   useEffect(() => {
     if (ingestDefinitionEditorState.deployOnOpen) {
       flowResult(ingestDefinitionEditorState.init_with_deploy(auth)).catch(

package/src/stores/editor/GraphEditFormModeState.ts

@@ -540,6 +540,7 @@ export class GraphEditFormModeState extends GraphEditorMode {
         this.editorStore.graphState.error = error;
         this.editorStore.applicationStore.notificationService.notifyWarning(
           `Compilation failed: ${error.message}`,
+          error.trace,
         );
         this.editorStore.graphState.setMostRecentCompilationOutcome(
           GraphCompilationOutcome.FAILED,

package/src/stores/editor/GraphEditGrammarModeState.ts

@@ -449,6 +449,7 @@ export class GraphEditGrammarModeState extends GraphEditorMode {
       this.editorStore.graphState.setMostRecentCompilationGraphHash(
         currentGraphHash,
       );
+      let detail: string | undefined = undefined;
       if (error instanceof EngineError) {
         this.editorStore.graphState.error = error;
         if (error.sourceInformation) {
@@ -457,6 +458,7 @@ export class GraphEditGrammarModeState extends GraphEditorMode {
             column: error.sourceInformation.startColumn,
           });
         }
+        detail = error.trace;
       }
       if (
         !this.editorStore.applicationStore.notificationService.notification ||
@@ -464,6 +466,7 @@ export class GraphEditGrammarModeState extends GraphEditorMode {
       ) {
         this.editorStore.applicationStore.notificationService.notifyWarning(
           `Compilation failed: ${error.message}`,
+          detail,
         );
       }
       this.editorStore.graphState.setMostRecentCompilationOutcome(

package/src/stores/editor/editor-state/element-editor-state/RuntimeEditorState.ts

@@ -968,7 +968,11 @@ export class LakehouseRuntimeEditorState extends EngineRuntimeEditorState {
           token,
         )) as unknown as IngestDeploymentServerConfig[] | undefined;
         this.setEnvSummaries(res);
-        if (!this.runtimeValue.environment && this.envOptions.length) {
+        if (
+          this.lakehouseRuntimeType === LakehouseRuntimeType.ENVIRONMENT &&
+          !this.runtimeValue.environment &&
+          this.envOptions.length
+        ) {
           this.runtimeValue.environment = this.envOptions[0]?.value;
         }
       }

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

@@ -32,7 +32,14 @@ import {
 } from '@finos/legend-graph';
 import type { EditorStore } from '../../../EditorStore.js';
 import { ElementEditorState } from '../ElementEditorState.js';
-import { action, computed, flow, makeObservable, observable } from 'mobx';
+import {
+  action,
+  computed,
+  flow,
+  makeObservable,
+  observable,
+  runInAction,
+} from 'mobx';
 import {
   guaranteeType,
   addUniqueEntry,
@@ -391,8 +398,10 @@ export class DataProductEditorState extends ElementEditorState {
 
   deleteAccessPointGroup(val: AccessPointGroupState): void {
     const state = this.accessPointGroupStates.find((a) => a === val);
-    deleteEntry(this.accessPointGroupStates, state);
-    dataProduct_deleteAccessPointGroup(this.product, val.value);
+    runInAction(() => {
+      deleteEntry(this.accessPointGroupStates, state);
+      dataProduct_deleteAccessPointGroup(this.product, val.value);
+    });
   }
 
   *deploy(token: string | undefined): GeneratorFn<void> {

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

@@ -18,8 +18,12 @@ import {
   type AccessPoint,
   type AccessPointGroup,
   type DataProduct,
+  type Email,
   observe_AccessPoint,
   observe_AccessPointGroup,
+  observe_SupportInfo,
+  observe_Email,
+  SupportInfo,
 } from '@finos/legend-graph';
 import { addUniqueEntry, deleteEntry } from '@finos/legend-shared';
 
@@ -75,3 +79,50 @@ export const dataProduct_setDescription = action(
     product.description = description;
   },
 );
+
+export const dataProduct_setSupportInfoIfAbsent = action(
+  (product: DataProduct) => {
+    if (!product.supportInfo) {
+      product.supportInfo = observe_SupportInfo(new SupportInfo());
+    }
+  },
+);
+
+export const supportInfo_setDocumentationUrl = action(
+  (supportInfo: SupportInfo, documentationUrl: string) => {
+    supportInfo.documentationUrl = documentationUrl;
+  },
+);
+
+export const supportInfo_setWebsite = action(
+  (supportInfo: SupportInfo, website: string) => {
+    supportInfo.website = website;
+  },
+);
+
+export const supportInfo_setFaqUrl = action(
+  (supportInfo: SupportInfo, faqUrl: string) => {
+    supportInfo.faqUrl = faqUrl;
+  },
+);
+
+export const supportInfo_setSupportUrl = action(
+  (supportInfo: SupportInfo, supportUrl: string) => {
+    supportInfo.supportUrl = supportUrl;
+  },
+);
+
+export const supportInfo_addEmail = action(
+  (supportInfo: SupportInfo, email: Email) => {
+    addUniqueEntry(supportInfo.emails, observe_Email(email));
+  },
+);
+
+export const supportInfo_deleteEmail = action(
+  (supportInfo: SupportInfo, email: Email): void => {
+    const index = supportInfo.emails.indexOf(email);
+    if (index !== -1) {
+      supportInfo.emails.splice(index, 1);
+    }
+  },
+);