@finos/legend-application-studio 28.18.136 → 28.18.138

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-application-studio",
-  "version": "28.18.136",
+  "version": "28.18.138",
   "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.78",
-    "@finos/legend-data-cube": "0.2.10",
-    "@finos/legend-graph": "32.1.36",
-    "@finos/legend-lego": "2.0.83",
-    "@finos/legend-query-builder": "4.16.44",
+    "@finos/legend-code-editor": "2.0.80",
+    "@finos/legend-data-cube": "0.2.12",
+    "@finos/legend-graph": "32.1.38",
+    "@finos/legend-lego": "2.0.85",
+    "@finos/legend-query-builder": "4.16.46",
     "@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/LegendStudioWebApplication.tsx

@@ -20,7 +20,13 @@ import { Editor } from './editor/Editor.js';
 import { ProjectReviewer } from './project-reviewer/ProjectReviewer.js';
 import { ProjectViewer } from './project-view/ProjectViewer.js';
 import { observer } from 'mobx-react-lite';
-import { clsx, GhostIcon, MarkdownTextViewer } from '@finos/legend-art';
+import {
+  clsx,
+  CubesLoadingIndicator,
+  CubesLoadingIndicatorIcon,
+  GhostIcon,
+  MarkdownTextViewer,
+} from '@finos/legend-art';
 import {
   LEGEND_STUDIO_ROUTE_PATTERN,
   LEGEND_STUDIO_SDLC_BYPASSED_ROUTE_PATTERN,
@@ -44,11 +50,10 @@ import { PureCompatibilityTestManager } from './pct/PureCompatibilityTest.js';
 import { ShowcaseViewer } from './showcase/ShowcaseViewer.js';
 import {
   AuthProvider,
-  useAuth,
+  withAuthenticationRequired,
   type AuthProviderProps,
 } from 'react-oidc-context';
 import type { User } from 'oidc-client-ts';
-import { assertErrorThrown } from '@finos/legend-shared';
 
 const NotFoundPage = observer(() => {
   const applicationStore = useApplicationStore();
@@ -293,33 +298,6 @@ export const LegendStudioWebApplicationRouter = observer(() => {
 const LegendStudioWebProvider: React.FC<{
   baseUrl: string;
 }> = ({ baseUrl }) => {
-  const applicationStore = useLegendStudioApplicationStore();
-
-  const enableOauthFlow = applicationStore.config.options.enableOauthFlow;
-  const auth = useAuth();
-
-  useEffect(() => {
-    const tryLogin = async () => {
-      if (enableOauthFlow) {
-        try {
-          const user = auth.user;
-          if ((!user || user.expired) && !auth.isLoading) {
-            await auth.signinRedirect({
-              state: window.location.pathname + window.location.search,
-            });
-          }
-        } catch (error) {
-          assertErrorThrown(error);
-          applicationStore.logUnhandledError(error);
-        }
-      }
-    };
-
-    tryLogin().catch((error) => {
-      assertErrorThrown(error);
-    });
-  }, [enableOauthFlow, applicationStore, auth]);
-
   return (
     <BrowserEnvironmentProvider baseUrl={baseUrl}>
       <LegendStudioFrameworkProvider>
@@ -329,6 +307,20 @@ const LegendStudioWebProvider: React.FC<{
   );
 };
 
+const AuthenticatedLegendStudioWebProvider = withAuthenticationRequired(
+  LegendStudioWebProvider,
+  {
+    OnRedirecting: () => (
+      <CubesLoadingIndicator isLoading={true}>
+        <CubesLoadingIndicatorIcon />
+      </CubesLoadingIndicator>
+    ),
+    signinRedirectArgs: {
+      state: `${window.location.pathname}${window.location.search}`,
+    },
+  },
+);
+
 export const LegendStudioWebApplication = observer(
   (props: { baseUrl: string }) => {
     const { baseUrl } = props;
@@ -337,6 +329,7 @@ export const LegendStudioWebApplication = observer(
     const oidcConfig =
       applicationStore.config.options.ingestDeploymentConfig?.deployment
         .oidcConfig;
+    const enableOauthFlow = applicationStore.config.options.enableOauthFlow;
     if (oidcConfig) {
       const onSigninCallback = (_user: User | undefined) => {
         window.location.href = (_user?.state as string | undefined) ?? '/';
@@ -346,10 +339,16 @@ export const LegendStudioWebApplication = observer(
         ...oidcConfig.authProviderProps,
         redirect_uri: `${window.location.origin}${oidcConfig.redirectPath}`,
         silent_redirect_uri: `${window.location.origin}${oidcConfig.silentRedirectPath}`,
-        automaticSilentRenew: true,
         onSigninCallback,
       };
 
+      if (enableOauthFlow) {
+        return (
+          <AuthProvider {...mergedOIDCConfig}>
+            <AuthenticatedLegendStudioWebProvider baseUrl={baseUrl} />
+          </AuthProvider>
+        );
+      }
       return (
         <AuthProvider {...mergedOIDCConfig}>
           <LegendStudioWebProvider baseUrl={baseUrl} />
@@ -357,12 +356,6 @@ export const LegendStudioWebApplication = observer(
       );
     }
 
-    return (
-      <BrowserEnvironmentProvider baseUrl={baseUrl}>
-        <LegendStudioFrameworkProvider>
-          <LegendStudioWebApplicationRouter />
-        </LegendStudioFrameworkProvider>
-      </BrowserEnvironmentProvider>
-    );
+    return <LegendStudioWebProvider baseUrl={baseUrl} />;
   },
 );

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

@@ -42,14 +42,17 @@ import {
   ModalBody,
   ModalFooter,
   ModalFooterButton,
+  PencilEditIcon,
+  PanelFormTextField,
 } from '@finos/legend-art';
-import { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { filterByType } from '@finos/legend-shared';
 import { InlineLambdaEditor } from '@finos/legend-query-builder';
-import { flowResult } from 'mobx';
+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';
 
 const NewAccessPointAccessPOint = observer(
   (props: { dataProductEditorState: DataProductEditorState }) => {
@@ -163,6 +166,32 @@ const NewAccessPointAccessPOint = observer(
   },
 );
 
+interface DescriptionTextAreaProps {
+  accessPoint: LakehouseAccessPoint;
+  handleMouseOver: (event: React.MouseEvent<HTMLDivElement>) => void;
+  handleMouseOut: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+const DescriptionTextArea: React.FC<DescriptionTextAreaProps> = ({
+  accessPoint,
+  handleMouseOver,
+  handleMouseOut,
+}) => {
+  return (
+    <div onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
+      {accessPoint.description}
+    </div>
+  );
+};
+
+const hoverIcon = () => {
+  return (
+    <div>
+      <PencilEditIcon />
+    </div>
+  );
+};
+
 export const LakehouseDataProductAcccessPointEditor = observer(
   (props: {
     accessPointState: LakehouseAccessPointState;
@@ -175,6 +204,28 @@ export const LakehouseDataProductAcccessPointEditor = observer(
     const propertyHasParserError = productEditorState.accessPointStates
       .filter(filterByType(LakehouseAccessPointState))
       .find((pm) => pm.lambdaState.parserError);
+    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 updateAccessPointDescription: React.ChangeEventHandler<
+      HTMLTextAreaElement
+    > = (event) => {
+      action((accessPoint.description = event.target.value));
+    };
+
     return (
       <div
         className={clsx('access-point-editor', {
@@ -187,6 +238,34 @@ export const LakehouseDataProductAcccessPointEditor = observer(
               {accessPoint.id}
             </div>
           </div>
+          {editingDescription ? (
+            <textarea
+              className="panel__content__form__section__input"
+              spellCheck={false}
+              value={accessPoint.description ?? ''}
+              onChange={updateAccessPointDescription}
+              placeholder="Access Point description"
+              onBlur={handleBlur}
+              style={{
+                overflow: 'hidden',
+                resize: 'none',
+                padding: '0.25rem',
+              }}
+            />
+          ) : (
+            <div
+              onClick={handleEdit}
+              title="Click to edit description"
+              className="access-point-editor__description-container"
+            >
+              <DescriptionTextArea
+                accessPoint={accessPoint}
+                handleMouseOver={handleMouseOver}
+                handleMouseOut={handleMouseOut}
+              />
+              {isHovering && hoverIcon()}
+            </div>
+          )}
           <div className="access-point-editor__info">
             <div
               className={clsx('access-point-editor__type')}
@@ -287,7 +366,7 @@ const DataProductDeploymentResponseModal = observer(
           className="editor-modal"
         >
           <ModalHeader>
-            <ModalTitle title="Validation Error" />
+            <ModalTitle title="Data Product Deployment Response" />
           </ModalHeader>
           <ModalBody>
             <PanelContent>
@@ -352,6 +431,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,
@@ -381,7 +473,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">
@@ -398,10 +489,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
@@ -414,22 +521,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) {