@finos/legend-application-studio 28.19.56 → 28.19.58

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

@@ -30,13 +30,16 @@ import {
   PanelHeader,
   PanelHeaderActions,
   RocketIcon,
+  EyeIcon,
+  ModalHeaderActions,
+  CustomSelectorInput,
 } from '@finos/legend-art';
 import {
   generateUrlToDeployOnOpen,
   IngestDefinitionEditorState,
 } from '../../../../stores/editor/editor-state/element-editor-state/ingest/IngestDefinitionEditorState.js';
 import { CodeEditor } from '@finos/legend-lego/code-editor';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
 import { flowResult } from 'mobx';
 import { useAuth } from 'react-oidc-context';
@@ -46,6 +49,11 @@ import {
 } from '@finos/legend-server-lakehouse';
 import { useApplicationNavigationContext } from '@finos/legend-application';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
+import {
+  LINEAGE_VIEW_MODE,
+  LineageViewerContent,
+} from '@finos/legend-query-builder';
+import type { MatViewDataSet } from '@finos/legend-graph';
 
 const IngestValidationError = observer(
   (props: {
@@ -186,6 +194,124 @@ const IngestDeploymentResponseModal = observer(
   },
 );
 
+export const IngestLineageModal = observer(
+  (props: { ingestDefinitionEditorState: IngestDefinitionEditorState }) => {
+    const { ingestDefinitionEditorState } = props;
+
+    const matviewFunctions =
+      ingestDefinitionEditorState.ingest.TEMPORARY_MATVIEW_FUNCTION_DATA_SETS;
+    const matviewNames =
+      ingestDefinitionEditorState.ingest.TEMPORARY_MATVIEW_FUNCTION_DATA_SETS?.map(
+        (dataset) => dataset.name,
+      ) ?? [];
+    const [selectedMatview, setSelectedMatview] = useState<
+      MatViewDataSet | undefined
+    >(undefined);
+
+    useEffect(() => {
+      if (!selectedMatview && matviewFunctions && matviewFunctions.length > 0) {
+        setSelectedMatview(matviewFunctions[0]);
+      }
+    }, [matviewFunctions, selectedMatview]);
+
+    useEffect(() => {
+      ingestDefinitionEditorState.lineageState.setSelectedTab(
+        LINEAGE_VIEW_MODE.DATABASE_LINEAGE,
+      );
+    }, [ingestDefinitionEditorState.lineageState]);
+
+    if (!matviewFunctions || matviewFunctions.length === 0) {
+      return null;
+    }
+
+    const isDarkMode =
+      !ingestDefinitionEditorState.lineageState.applicationStore.layoutService
+        .TEMPORARY__isLightColorThemeEnabled;
+
+    const closeLineageViewer = (): void => {
+      ingestDefinitionEditorState.lineageState.setLineageData(undefined);
+      ingestDefinitionEditorState.lineageState.setSelectedTab(
+        LINEAGE_VIEW_MODE.DATABASE_LINEAGE,
+      );
+      ingestDefinitionEditorState.lineageState.clearPropertySelections();
+    };
+
+    type DatasetOption = {
+      label: string;
+      value: MatViewDataSet;
+    };
+
+    const datasetOptions: DatasetOption[] = matviewNames
+      .map((name, index) => {
+        const dataset = matviewFunctions[index];
+        if (dataset) {
+          return {
+            label: name,
+            value: dataset,
+          };
+        }
+        return null;
+      })
+      .filter((option): option is DatasetOption => option !== null);
+
+    const handleDatasetChange = (option: DatasetOption | null): void => {
+      if (option?.value) {
+        setSelectedMatview(option.value);
+        flowResult(
+          ingestDefinitionEditorState.generateLineage(option.value),
+        ).catch(
+          ingestDefinitionEditorState.editorStore.applicationStore
+            .alertUnhandledError,
+        );
+      }
+    };
+
+    return (
+      <>
+        <Dialog
+          open={Boolean(ingestDefinitionEditorState.lineageState.lineageData)}
+          onClose={closeLineageViewer}
+        >
+          <Modal className="editor-modal" darkMode={isDarkMode}>
+            <ModalHeader>
+              <ModalTitle title="LineageViewer" />
+              <ModalHeaderActions>
+                <CustomSelectorInput
+                  options={datasetOptions}
+                  onChange={handleDatasetChange}
+                  value={
+                    selectedMatview
+                      ? {
+                          label: selectedMatview.name,
+                          value: selectedMatview,
+                        }
+                      : null
+                  }
+                  darkMode={isDarkMode}
+                />
+              </ModalHeaderActions>
+            </ModalHeader>
+            <ModalBody>
+              <div className="lineage-viewer" style={{ height: '100%' }}>
+                <LineageViewerContent
+                  lineageState={ingestDefinitionEditorState.lineageState}
+                />
+              </div>
+            </ModalBody>
+            <ModalFooter className="editor-modal__footer">
+              <ModalFooterButton
+                onClick={closeLineageViewer}
+                text="Close"
+                type="secondary"
+              />
+            </ModalFooter>
+          </Modal>
+        </Dialog>
+      </>
+    );
+  },
+);
+
 export const IngestDefinitionEditor = observer(() => {
   const editorStore = useEditorStore();
   const ingestDefinitionEditorState =
@@ -257,6 +383,7 @@ export const IngestDefinitionEditor = observer(() => {
   };
 
   const isValid = ingestDefinitionEditorState.validForDeployment;
+  const isValidForLineage = ingestDefinitionEditorState.validForLineageViewer;
   useEffect(() => {
     ingestDefinitionEditorState.generateElementGrammar();
   }, [ingestDefinitionEditorState]);
@@ -277,6 +404,21 @@ export const IngestDefinitionEditor = observer(() => {
     ingestDefinitionEditorState,
   ]);
 
+  const viewLineage = () => {
+    const firstMatViewQuery =
+      ingestDefinitionEditorState.ingest
+        .TEMPORARY_MATVIEW_FUNCTION_DATA_SETS?.[0];
+    if (firstMatViewQuery) {
+      flowResult(
+        ingestDefinitionEditorState.generateLineage(firstMatViewQuery),
+      ).catch(editorStore.applicationStore.alertUnhandledError);
+    } else {
+      editorStore.applicationStore.notificationService.notifyError(
+        'No MatView datasets available for lineage generation',
+      );
+    }
+  };
+
   return (
     <div className="data-product-editor">
       <PanelHeader
@@ -288,17 +430,34 @@ export const IngestDefinitionEditor = observer(() => {
       <PanelContent>
         <PanelHeader title="deployment" darkMode={true}>
           <PanelHeaderActions>
-            <div className="btn__dropdown-combo btn__dropdown-combo--primary">
-              <button
-                className="btn__dropdown-combo__label"
-                onClick={deployIngest}
-                title={ingestDefinitionEditorState.validationMessage}
-                tabIndex={-1}
-                disabled={!isValid}
-              >
-                <RocketIcon className="btn__dropdown-combo__label__icon" />
-                <div className="btn__dropdown-combo__label__title">Deploy</div>
-              </button>
+            <div className="panel__header__actions">
+              <div className="btn__dropdown-combo btn__dropdown-combo--primary">
+                <button
+                  className="btn__dropdown-combo__label"
+                  onClick={viewLineage}
+                  tabIndex={-1}
+                  disabled={!isValidForLineage}
+                >
+                  <EyeIcon className="btn__dropdown-combo__label__icon" />
+                  <div className="btn__dropdown-combo__label__title">
+                    Lineage
+                  </div>
+                </button>
+              </div>
+              <div className="btn__dropdown-combo btn__dropdown-combo--primary">
+                <button
+                  className="btn__dropdown-combo__label"
+                  onClick={deployIngest}
+                  title={ingestDefinitionEditorState.validationMessage}
+                  tabIndex={-1}
+                  disabled={!isValid}
+                >
+                  <RocketIcon className="btn__dropdown-combo__label__icon" />
+                  <div className="btn__dropdown-combo__label__title">
+                    Deploy
+                  </div>
+                </button>
+              </div>
             </div>
           </PanelHeaderActions>
         </PanelHeader>
@@ -309,6 +468,9 @@ export const IngestDefinitionEditor = observer(() => {
             language={CODE_EDITOR_LANGUAGE.PURE}
           />
         </PanelContent>
+        <IngestLineageModal
+          ingestDefinitionEditorState={ingestDefinitionEditorState}
+        />
         {renderDeploymentResponse()}
       </PanelContent>
     </div>

package/src/components/editor/editor-group/mapping-editor/EnumerationMappingEditor.tsx

@@ -129,15 +129,17 @@ const EnumerationMappingSourceSelectorModal = observer(
       <Dialog
         open={open}
         onClose={closeModal}
-        TransitionProps={{
-          onEnter: handleEnter,
-        }}
         classes={{
           container: 'search-modal__container',
         }}
-        PaperProps={{
-          classes: {
-            root: 'search-modal__inner-container',
+        slotProps={{
+          transition: {
+            onEnter: handleEnter,
+          },
+          paper: {
+            classes: {
+              root: 'search-modal__inner-container',
+            },
           },
         }}
       >

package/src/components/editor/editor-group/mapping-editor/InstanceSetImplementationSourceSelectorModal.tsx

@@ -242,15 +242,17 @@ export const InstanceSetImplementationSourceSelectorModal = observer(
       <Dialog
         open={true}
         onClose={closeModal}
-        TransitionProps={{
-          onEnter: handleEnter,
-        }}
         classes={{
           container: 'search-modal__container',
         }}
-        PaperProps={{
-          classes: {
-            root: 'search-modal__inner-container',
+        slotProps={{
+          transition: {
+            onEnter: handleEnter,
+          },
+          paper: {
+            classes: {
+              root: 'search-modal__inner-container',
+            },
           },
         }}
       >

package/src/components/editor/editor-group/mapping-editor/MappingExecutionBuilder.tsx

@@ -151,11 +151,15 @@ export const ClassMappingSelectorModal = observer(
       <Dialog
         open={true}
         onClose={hideClassMappingSelectorModal}
-        TransitionProps={{
-          onEnter: handleEnterClassMappingSelectorModal,
-        }}
         classes={{ container: 'search-modal__container' }}
-        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+        slotProps={{
+          transition: {
+            onEnter: handleEnterClassMappingSelectorModal,
+          },
+          paper: {
+            classes: { root: 'search-modal__inner-container' },
+          },
+        }}
       >
         <Modal
           className={clsx('search-modal', {

package/src/components/editor/editor-group/mapping-editor/MappingTestableEditor.tsx

@@ -191,11 +191,15 @@ const CreateTestSuiteModal = observer(
       <Dialog
         open={true}
         onClose={close}
-        TransitionProps={{
-          onEnter: handleEnter,
-        }}
         classes={{ container: 'search-modal__container' }}
-        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+        slotProps={{
+          transition: {
+            onEnter: handleEnter,
+          },
+          paper: {
+            classes: { root: 'search-modal__inner-container' },
+          },
+        }}
       >
         <Modal
           darkMode={
@@ -338,7 +342,11 @@ const CreateTestModal = observer(
         open={mappingSuiteState.showCreateModal}
         onClose={close}
         classes={{ container: 'search-modal__container' }}
-        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+        slotProps={{
+          paper: {
+            classes: { root: 'search-modal__inner-container' },
+          },
+        }}
       >
         <Modal
           darkMode={
@@ -521,7 +529,11 @@ const CreateStoreTestDataModal = observer(
         open={mappingTestableDataState.showNewModal}
         onClose={close}
         classes={{ container: 'search-modal__container' }}
-        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+        slotProps={{
+          paper: {
+            classes: { root: 'search-modal__inner-container' },
+          },
+        }}
       >
         <Modal
           darkMode={

package/src/components/editor/editor-group/mapping-editor/NewMappingElementModal.tsx

@@ -210,15 +210,17 @@ export const NewMappingElementModal = observer(() => {
     <Dialog
       open={Boolean(spec)}
       onClose={handleClose}
-      TransitionProps={{
-        onEnter: handleEnter,
-      }}
       classes={{
         container: 'search-modal__container',
       }}
-      PaperProps={{
-        classes: {
-          root: 'search-modal__inner-container',
+      slotProps={{
+        transition: {
+          onEnter: handleEnter,
+        },
+        paper: {
+          classes: {
+            root: 'search-modal__inner-container',
+          },
         },
       }}
     >

package/src/components/editor/editor-group/service-editor/NewServiceModal.tsx

@@ -89,12 +89,14 @@ export const NewServiceModal = observer(
       <Dialog
         open={showModal}
         onClose={close}
-        TransitionProps={{
-          onEnter: handleEnter,
-        }}
-        PaperProps={{
-          classes: {
-            root: 'search-modal__inner-container',
+        slotProps={{
+          transition: {
+            onEnter: handleEnter,
+          },
+          paper: {
+            classes: {
+              root: 'search-modal__inner-container',
+            },
           },
         }}
       >

package/src/components/editor/editor-group/service-editor/ServiceExecutionEditor.tsx

@@ -417,7 +417,11 @@ export const ChangeExecutionModal = observer(
         open={executionState.showChangeExecModal}
         onClose={closeModal}
         classes={{ container: 'search-modal__container' }}
-        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+        slotProps={{
+          paper: {
+            classes: { root: 'search-modal__inner-container' },
+          },
+        }}
       >
         <form
           onSubmit={(event) => {
@@ -580,7 +584,11 @@ export const NewExecutionParameterModal = observer(
         open={executionState.newKeyParameterModal}
         onClose={closeModal}
         classes={{ container: 'search-modal__container' }}
-        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+        slotProps={{
+          paper: {
+            classes: { root: 'search-modal__inner-container' },
+          },
+        }}
       >
         <form
           onSubmit={(event) => {
@@ -634,7 +642,11 @@ const RenameModal = observer(
         open={showModal}
         onClose={closeModal}
         classes={{ container: 'search-modal__container' }}
-        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+        slotProps={{
+          paper: {
+            classes: { root: 'search-modal__inner-container' },
+          },
+        }}
       >
         <form
           onSubmit={(event) => {

package/src/components/editor/editor-group/service-editor/testable/ServiceTestDataEditor.tsx

@@ -385,7 +385,11 @@ export const UseDataElementModal = observer(
         open={useSharedModal}
         onClose={closeModal}
         classes={{ container: 'search-modal__container' }}
-        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+        slotProps={{
+          paper: {
+            classes: { root: 'search-modal__inner-container' },
+          },
+        }}
       >
         <Modal
           darkMode={
@@ -795,7 +799,11 @@ export const NewConnectionDataModal = observer(
         open={newConnectionState.showModal}
         onClose={closeModal}
         classes={{ container: 'search-modal__container' }}
-        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+        slotProps={{
+          paper: {
+            classes: { root: 'search-modal__inner-container' },
+          },
+        }}
       >
         <form
           onSubmit={(event) => {

package/src/components/editor/editor-group/service-editor/testable/ServiceTestsEditor.tsx

@@ -107,7 +107,11 @@ export const NewParameterModal = observer(
         open={setupState.showNewParameterModal}
         onClose={closeModal}
         classes={{ container: 'search-modal__container' }}
-        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+        slotProps={{
+          paper: {
+            classes: { root: 'search-modal__inner-container' },
+          },
+        }}
       >
         <form
           onSubmit={(event) => {

package/src/components/editor/editor-group/testable/TestableSharedComponents.tsx

@@ -121,7 +121,11 @@ export const SharedDataElementModal = observer(
         open={true}
         onClose={close}
         classes={{ container: 'search-modal__container' }}
-        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+        slotProps={{
+          paper: {
+            classes: { root: 'search-modal__inner-container' },
+          },
+        }}
       >
         <Modal
           darkMode={
@@ -193,7 +197,11 @@ export const RenameModal = observer(
         open={showModal}
         onClose={closeModal}
         classes={{ container: 'search-modal__container' }}
-        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+        slotProps={{
+          paper: {
+            classes: { root: 'search-modal__inner-container' },
+          },
+        }}
       >
         <form
           onSubmit={(event) => {
@@ -613,8 +621,10 @@ const AssertFailViewer = observer(
                 open={showGenericDiffModal}
                 onClose={() => setShowGenericDiffModal(false)}
                 classes={{ container: 'search-modal__container' }}
-                PaperProps={{
-                  classes: { root: 'search-modal__inner-container' },
+                slotProps={{
+                  paper: {
+                    classes: { root: 'search-modal__inner-container' },
+                  },
                 }}
               >
                 <Modal
@@ -952,7 +962,11 @@ export const ExternalFormatParameterEditorModal = observer(
         open={true}
         onClose={onClose}
         classes={{ container: 'search-modal__container' }}
-        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+        slotProps={{
+          paper: {
+            classes: { root: 'search-modal__inner-container' },
+          },
+        }}
       >
         <Modal
           darkMode={

package/src/components/editor/editor-group/uml-editor/ClassQueryBuilder.tsx

@@ -239,12 +239,14 @@ export const NewFunctionModal = observer(
       <Dialog
         open={showModal}
         onClose={close}
-        TransitionProps={{
-          onEnter: handleEnter,
-        }}
-        PaperProps={{
-          classes: {
-            root: 'search-modal__inner-container',
+        slotProps={{
+          transition: {
+            onEnter: handleEnter,
+          },
+          paper: {
+            classes: {
+              root: 'search-modal__inner-container',
+            },
           },
         }}
       >

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

@@ -660,11 +660,15 @@ export const CreateNewLocalConnectionModal = observer(() => {
     <Dialog
       open={newElementState.showModal}
       onClose={closeModal}
-      TransitionProps={{
-        onEnter: handleEnter,
-      }}
       classes={{ container: 'search-modal__container' }}
-      PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+      slotProps={{
+        transition: {
+          onEnter: handleEnter,
+        },
+        paper: {
+          classes: { root: 'search-modal__inner-container' },
+        },
+      }}
     >
       <form
         data-testid={LEGEND_STUDIO_TEST_ID.NEW_ELEMENT_MODAL}
@@ -773,11 +777,15 @@ export const CreateNewElementModal = observer(() => {
     <Dialog
       open={newElementState.showModal}
       onClose={closeModal}
-      TransitionProps={{
-        onEnter: handleEnter,
-      }}
       classes={{ container: 'search-modal__container' }}
-      PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+      slotProps={{
+        transition: {
+          onEnter: handleEnter,
+        },
+        paper: {
+          classes: { root: 'search-modal__inner-container' },
+        },
+      }}
     >
       <form
         data-testid={LEGEND_STUDIO_TEST_ID.NEW_ELEMENT_MODAL}

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

@@ -248,11 +248,15 @@ const ElementRenamer = observer(() => {
     <Dialog
       open={Boolean(element)}
       onClose={abort}
-      TransitionProps={{
-        onEnter: onEnter,
+      slotProps={{
+        transition: {
+          onEnter: onEnter,
+        },
+        paper: {
+          classes: { root: 'search-modal__inner-container' },
+        },
       }}
       classes={{ container: 'search-modal__container' }}
-      PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
     >
       <form className="modal modal--dark search-modal explorer__element-renamer">
         <div className="modal__title">Rename Element</div>
@@ -370,11 +374,15 @@ const SampleDataGenerator = observer(() => {
     <Dialog
       open={Boolean(selectedClass)}
       onClose={abort}
-      TransitionProps={{
-        onEnter: onEnter,
+      slotProps={{
+        transition: {
+          onEnter: onEnter,
+        },
+        paper: {
+          classes: { root: 'search-modal__inner-container' },
+        },
       }}
       classes={{ container: 'search-modal__container' }}
-      PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
     >
       <div className="modal modal--dark search-modal explorer__element-renamer">
         <div className="modal__title">Generate Sample Data</div>

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

@@ -107,7 +107,11 @@ export const WorkspaceSyncConflictResolver = observer(() => {
       open={updateConflictState.showModal}
       onClose={noop}
       classes={{ container: 'search-modal__container' }}
-      PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+      slotProps={{
+        paper: {
+          classes: { root: 'search-modal__inner-container' },
+        },
+      }}
     >
       <Modal
         darkMode={