@finos/legend-application-studio 28.18.130 → 28.18.132

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

@@ -18,6 +18,7 @@ import { observer } from 'mobx-react-lite';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
   DataProductEditorState,
+  generateUrlToDeployOnOpen,
   LakehouseAccessPointState,
 } from '../../../../stores/editor/editor-state/element-editor-state/dataProduct/DataProductEditorState.js';
 import {
@@ -34,11 +35,21 @@ import {
   TimesIcon,
   PlusIcon,
   PanelHeaderActionItem,
+  RocketIcon,
+  Modal,
+  ModalHeader,
+  ModalTitle,
+  ModalBody,
+  ModalFooter,
+  ModalFooterButton,
 } from '@finos/legend-art';
 import { useRef, useState, useEffect } from 'react';
 import { filterByType } from '@finos/legend-shared';
 import { InlineLambdaEditor } from '@finos/legend-query-builder';
 import { 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';
 
 const NewAccessPointAccessPOint = observer(
   (props: { dataProductEditorState: DataProductEditorState }) => {
@@ -48,12 +59,18 @@ const NewAccessPointAccessPOint = observer(
     const handleIdChange: React.ChangeEventHandler<HTMLInputElement> = (
       event,
     ) => setId(event.target.value);
+    const [description, setDescription] = useState<string | undefined>(
+      undefined,
+    );
+    const handleDescriptionChange: React.ChangeEventHandler<
+      HTMLInputElement
+    > = (event) => setDescription(event.target.value);
     const handleClose = () => {
       dataProductEditorState.setAccessPointModal(false);
     };
     const handleSubmit = () => {
       if (id) {
-        dataProductEditorState.addAccessPoint(id);
+        dataProductEditorState.addAccessPoint(id, description, 'default');
         handleClose();
       }
     };
@@ -63,14 +80,12 @@ const NewAccessPointAccessPOint = observer(
     const disableCreateButton =
       id === '' ||
       id === undefined ||
-      dataProductEditorState.accessPointStates
-        .map((e) => e.accessPoint.id)
-        .includes(id);
+      dataProductEditorState.accessPoints.map((e) => e.id).includes(id);
     const errors =
       id === ''
         ? `ID is empty`
-        : dataProductEditorState.accessPointStates
-              .map((e) => e.accessPoint.id)
+        : dataProductEditorState.accessPoints
+              .map((e) => e.id)
               .includes(id ?? '')
           ? `ID already exists`
           : undefined;
@@ -101,6 +116,9 @@ const NewAccessPointAccessPOint = observer(
         >
           <div className="modal__title">New Access Point</div>
           <div>
+            <div className="panel__content__form__section__header__label">
+              ID
+            </div>
             <InputWithInlineValidation
               className={clsx('input new-access-point-modal__id-input', {
                 'input--dark': true,
@@ -113,6 +131,21 @@ const NewAccessPointAccessPOint = observer(
               error={errors}
             />
           </div>
+          <div>
+            <div className="panel__content__form__section__header__label">
+              Description
+            </div>
+            <InputWithInlineValidation
+              className={clsx('input new-access-point-modal__id-input', {
+                'input--dark': true,
+              })}
+              spellCheck={false}
+              value={description}
+              onChange={handleDescriptionChange}
+              placeholder="Access Point Description"
+              error={errors}
+            />
+          </div>
           <PanelDivider />
           <div className="search-modal__actions">
             <button
@@ -172,7 +205,7 @@ export const LakehouseDataProductAcccessPointEditor = observer(
                 <InlineLambdaEditor
                   className={'access-point-editor__lambda-editor'}
                   disabled={
-                    lambdaEditorState.val.state
+                    lambdaEditorState.val.state.state
                       .isConvertingTransformLambdaObjects
                   }
                   lambdaEditorState={lambdaEditorState}
@@ -232,16 +265,119 @@ const DataProductEditorSplashScreen = observer(
   },
 );
 
+const DataproductDeploymenetModal = observer(
+  (props: { state: DataProductEditorState }) => {
+    const { state } = props;
+    const applicationStore = state.editorStore.applicationStore;
+    return (
+      <Dialog
+        open={state.deploymentState.isInProgress}
+        classes={{ container: 'search-modal__container' }}
+      >
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="database-builder"
+        >
+          <ModalHeader>
+            <ModalTitle title="Deploy Data Product" />
+          </ModalHeader>
+          <ModalBody>
+            <div>{state.deploymentState.message}</div>
+          </ModalBody>
+        </Modal>
+      </Dialog>
+    );
+  },
+);
+
+const DataProductDeploymentResponseModal = observer(
+  (props: { state: DataProductEditorState }) => {
+    const { state } = props;
+    const applicationStore = state.editorStore.applicationStore;
+    const closeModal = (): void => state.setDeployResponse(undefined);
+    return (
+      <Dialog
+        open={Boolean(state.deployResponse)}
+        classes={{
+          root: 'editor-modal__root-container',
+          container: 'editor-modal__container',
+          paper: 'editor-modal__content',
+        }}
+        onClose={closeModal}
+      >
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="editor-modal"
+        >
+          <ModalHeader>
+            <ModalTitle title="Validation Error" />
+          </ModalHeader>
+          <ModalBody>
+            <PanelContent>
+              <CodeEditor
+                inputValue={JSON.stringify(
+                  state.deployResponse?.content ?? {},
+                  null,
+                  2,
+                )}
+                isReadOnly={true}
+                language={CODE_EDITOR_LANGUAGE.JSON}
+              />
+            </PanelContent>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              onClick={closeModal}
+              text="Close"
+              type="secondary"
+            />
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);
+
 export const DataProductEditor = observer(() => {
   const editorStore = useEditorStore();
   const dataProductEditorState =
     editorStore.tabManagerState.getCurrentEditorState(DataProductEditorState);
   const product = dataProductEditorState.product;
-  const accessPointStates = dataProductEditorState.accessPointStates;
+  const accessPointStates = dataProductEditorState.accessPointGroupStates
+    .map((e) => e.accessPointStates)
+    .flat();
   const isReadOnly = dataProductEditorState.isReadOnly;
   const openNewModal = () => {
     dataProductEditorState.setAccessPointModal(true);
   };
+  const auth = useAuth();
+  const deployDataProduct = (): void => {
+    // Trigger OAuth flow if not authenticated
+    if (!auth.isAuthenticated) {
+      // remove this redirect if we move to do oauth at the beginning of opening studio
+      auth
+        .signinRedirect({
+          state: generateUrlToDeployOnOpen(dataProductEditorState),
+        })
+        .catch(editorStore.applicationStore.alertUnhandledError);
+      return;
+    }
+    // Use the token for deployment
+    const token = auth.user?.access_token;
+    if (token) {
+      flowResult(dataProductEditorState.deploy(token)).catch(
+        editorStore.applicationStore.alertUnhandledError,
+      );
+    } else {
+      editorStore.applicationStore.notificationService.notifyError(
+        'Authentication failed. No token available.',
+      );
+    }
+  };
 
   useEffect(() => {
     flowResult(dataProductEditorState.convertAccessPointsFuncObjects()).catch(
@@ -249,6 +385,18 @@ export const DataProductEditor = observer(() => {
     );
   }, [dataProductEditorState]);
 
+  useEffect(() => {
+    if (dataProductEditorState.deployOnOpen) {
+      flowResult(dataProductEditorState.deploy(auth.user?.access_token)).catch(
+        editorStore.applicationStore.alertUnhandledError,
+      );
+    }
+  }, [
+    auth,
+    editorStore.applicationStore.alertUnhandledError,
+    dataProductEditorState,
+  ]);
+
   return (
     <div className="data-product-editor">
       <div className="panel">
@@ -262,6 +410,20 @@ export const DataProductEditor = observer(() => {
             <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">
+              <button
+                className="btn__dropdown-combo__label"
+                onClick={deployDataProduct}
+                title={dataProductEditorState.deployValidationMessage}
+                tabIndex={-1}
+                disabled={!dataProductEditorState.deployValidationMessage}
+              >
+                <RocketIcon className="btn__dropdown-combo__label__icon" />
+                <div className="btn__dropdown-combo__label__title">Deploy</div>
+              </button>
+            </div>
+          </PanelHeaderActions>
         </div>
         <div className="panel">
           <PanelHeader>
@@ -300,6 +462,14 @@ export const DataProductEditor = observer(() => {
               dataProductEditorState={dataProductEditorState}
             />
           )}
+          {dataProductEditorState.deploymentState.isInProgress && (
+            <DataproductDeploymenetModal state={dataProductEditorState} />
+          )}
+          {dataProductEditorState.deployResponse && (
+            <DataProductDeploymentResponseModal
+              state={dataProductEditorState}
+            />
+          )}
         </div>
       </div>
     </div>

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

@@ -66,6 +66,8 @@ import {
   Snowflake_BrandIcon,
   InputWithInlineValidation,
   LongArrowRightIcon,
+  CheckSquareIcon,
+  SquareIcon,
 } from '@finos/legend-art';
 import { LEGEND_STUDIO_TEST_ID } from '../../../../__lib__/LegendStudioTesting.js';
 import {
@@ -105,6 +107,10 @@ import {
   RelationalDatabaseConnection,
   type FunctionActivator,
   GenericType,
+  requireTypeArugments,
+  GenericTypeExplicitReference,
+  CORE_PURE_PATH,
+  TDSExecutionResult,
 } from '@finos/legend-graph';
 import {
   type ApplicationStore,
@@ -141,9 +147,12 @@ import {
   type QueryBuilderState,
   ExecutionPlanViewer,
   FunctionQueryBuilderState,
+  getTDSColumnCustomizations,
   LambdaEditor,
   LambdaParameterValuesEditor,
+  QUERY_BUILDER_TEST_ID,
   QueryBuilderAdvancedWorkflowState,
+  getRowDataFromExecutionResult,
 } from '@finos/legend-query-builder';
 import type { EditorStore } from '../../../../stores/editor/EditorStore.js';
 import { graph_renameElement } from '../../../../stores/graph-modifier/GraphModifierHelper.js';
@@ -155,6 +164,10 @@ import { FunctionTestableEditor } from './testable/FunctionTestableEditor.js';
 import { DocumentationLink } from '@finos/legend-lego/application';
 import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../../../__lib__/LegendStudioDocumentation.js';
 import { openDataCube } from '../../../../stores/editor/data-cube/LegendStudioDataCubeHelper.js';
+import {
+  DataGrid,
+  type DataGridColumnDefinition,
+} from '@finos/legend-lego/data-grid';
 
 enum FUNCTION_PARAMETER_TYPE {
   CLASS = 'CLASS',
@@ -515,10 +528,18 @@ const ReturnTypeEditor = observer(
       label: returnType.value.rawType.name,
     };
     const changeType = (val: PackageableElementOption<Type>): void => {
-      function_setReturnGenericType(
-        functionElement,
-        new GenericType(val.value),
-      );
+      const value = val.value;
+      const genericType = new GenericType(value);
+      if (requireTypeArugments(value)) {
+        genericType.typeArguments = [
+          GenericTypeExplicitReference.create(
+            new GenericType(
+              editorStore.graphManagerState.graph.getType(CORE_PURE_PATH.ANY),
+            ),
+          ),
+        ];
+      }
+      function_setReturnGenericType(functionElement, genericType);
       setIsEditingType(false);
       updateFunctionName(editorStore, applicationStore, functionElement);
     };
@@ -959,6 +980,53 @@ const FunctionDefinitionEditor = observer(
             isReadOnly={true}
           />
         );
+      } else if (execResult instanceof TDSExecutionResult) {
+        const colDefs = execResult.result.columns.map(
+          (colName) =>
+            ({
+              minWidth: 50,
+              sortable: true,
+              resizable: true,
+              field: colName,
+              flex: 1,
+              headerName: colName,
+              ...getTDSColumnCustomizations(execResult, colName),
+            }) as DataGridColumnDefinition,
+        );
+        return (
+          <div
+            data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_VALUES_TDS}
+            className="query-builder__result__values__table"
+          >
+            <div
+              className={clsx('query-builder__result__tds-grid', {
+                'ag-theme-balham': true,
+                'ag-theme-balham-dark': true,
+              })}
+            >
+              <DataGrid
+                rowData={getRowDataFromExecutionResult(execResult)}
+                gridOptions={{
+                  suppressScrollOnNewData: true,
+                  getRowId: (data) => `${data.data.rowNumber}`,
+                  rowSelection: {
+                    mode: 'multiRow',
+                    checkboxes: false,
+                    headerCheckbox: false,
+                  },
+                }}
+                // NOTE: when column definition changed, we need to force refresh the cell to make sure the cell renderer is updated
+                // See https://stackoverflow.com/questions/56341073/how-to-refresh-an-ag-grid-when-a-change-occurs-inside-a-custom-cell-renderer-com
+                onRowDataUpdated={(params) => {
+                  params.api.refreshCells({ force: true });
+                }}
+                suppressFieldDotNotation={true}
+                suppressContextMenu={false}
+                columnDefs={colDefs}
+              />
+            </div>
+          </div>
+        );
       } else if (execResult !== undefined) {
         const json =
           returnUndefOnError(() =>
@@ -1034,8 +1102,42 @@ const FunctionDefinitionEditor = observer(
           </div>
           <div className="function-editor__definition__item">
             <div className="function-editor__definition__item__header">
-              <div className="function-editor__definition__item__header__title">
-                LAMBDA
+              <div className="function-editor__definition__item__header-wrapper">
+                <div className="function-editor__definition__item__header__title">
+                  LAMBDA
+                </div>
+                <div className="function-editor__definition__typeAhead">
+                  <div className="function-editor__definition__typeAhead__label">
+                    (BETA) TypeAhead
+                    <DocumentationLink
+                      title="Enable TypeAhead for when typing your function. Caution when using against bigger projects as requires compilation to work"
+                      documentationKey={
+                        LEGEND_STUDIO_DOCUMENTATION_KEY.QUESTION_HOW_TO_ENABLE_TYPEAHEAD
+                      }
+                    />
+                  </div>
+                  <button
+                    className={clsx(
+                      'function-editor__definition__typeAhead__toggler__btn',
+                      {
+                        'function-editor__definition__typeAhead__toggler__btn--toggled':
+                          lambdaEditorState.typeAheadEnabled,
+                      },
+                    )}
+                    onClick={() =>
+                      lambdaEditorState.setTypeAhead(
+                        !lambdaEditorState.typeAheadEnabled,
+                      )
+                    }
+                    tabIndex={-1}
+                  >
+                    {lambdaEditorState.typeAheadEnabled ? (
+                      <CheckSquareIcon />
+                    ) : (
+                      <SquareIcon />
+                    )}
+                  </button>
+                </div>
               </div>
               <div>
                 <ReturnTypeEditor

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';
@@ -439,6 +440,30 @@ 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 NewFileGenerationDriverEditor = observer(() => {
   const editorStore = useEditorStore();
   const applicationStore = editorStore.applicationStore;
@@ -485,6 +510,10 @@ const renderNewElementDriver = (
       return <NewDataElementDriverEditor />;
     case PACKAGEABLE_ELEMENT_TYPE.SERVICE:
       return <NewServiceDriverEditor />;
+    case PACKAGEABLE_ELEMENT_TYPE.SERVICE:
+      return <NewServiceDriverEditor />;
+    case PACKAGEABLE_ELEMENT_TYPE._DATA_PRODUCT:
+      return <NewLakehouseDataProductEditor />;
     default: {
       const extraNewElementDriverEditorCreators = editorStore.pluginManager
         .getApplicationPlugins()

package/src/stores/editor/EditorTabManagerState.ts

@@ -182,7 +182,7 @@ export class EditorTabManagerState extends TabManagerState {
     } else if (element instanceof Service) {
       return new ServiceEditorState(this.editorStore, element);
     } else if (element instanceof DataProduct) {
-      return new DataProductEditorState(this.editorStore, element);
+      return new DataProductEditorState(this.editorStore, element, config);
     } else if (element instanceof GenerationSpecification) {
       return new GenerationSpecificationEditorState(this.editorStore, element);
     } else if (element instanceof FileGenerationSpecification) {

package/src/stores/editor/NewElementState.ts

@@ -109,6 +109,7 @@ 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';
 
 export const CUSTOM_LABEL = '(custom)';
 
@@ -481,6 +482,33 @@ export class NewPackageableConnectionDriver extends NewElementDriver<Packageable
   }
 }
 
+export class NewLakehouseDataProductDriver extends NewElementDriver<DataProduct> {
+  title: string;
+
+  constructor(editorStore: EditorStore) {
+    super(editorStore);
+    this.title = '';
+    makeObservable(this, {
+      title: observable,
+      setTitle: action,
+      isValid: computed,
+    });
+  }
+
+  override get isValid(): boolean {
+    return Boolean(this.title);
+  }
+
+  setTitle(val: string) {
+    this.title = val;
+  }
+  override createElement(name: string): DataProduct {
+    const dataProduct = new DataProduct(name);
+    dataProduct_setTitle(dataProduct, this.title);
+    return dataProduct;
+  }
+}
+
 export class NewServiceDriver extends NewElementDriver<Service> {
   mappingOption?: PackageableElementOption<Mapping> | undefined;
   runtimeOption: RuntimeOption;
@@ -767,6 +795,9 @@ export class NewElementState {
         case PACKAGEABLE_ELEMENT_TYPE.SERVICE:
           driver = new NewServiceDriver(this.editorStore);
           break;
+        case PACKAGEABLE_ELEMENT_TYPE._DATA_PRODUCT:
+          driver = new NewLakehouseDataProductDriver(this.editorStore);
+          break;
         default: {
           const extraNewElementDriverCreators = this.editorStore.pluginManager
             .getApplicationPlugins()
@@ -1001,7 +1032,9 @@ export class NewElementState {
         element = new GenerationSpecification(name);
         break;
       case PACKAGEABLE_ELEMENT_TYPE._DATA_PRODUCT:
-        element = new DataProduct(name);
+        element = this.getNewElementDriver(
+          NewLakehouseDataProductDriver,
+        ).createElement(name);
         break;
       default: {
         const extraNewElementFromStateCreators = this.editorStore.pluginManager

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

@@ -48,6 +48,18 @@ export class IngestElementEditorInitialConfiguration extends ElementEditorInitia
   );
 }
 
+export class DataProductElementEditorInitialConfiguration extends ElementEditorInitialConfiguration {
+  deployOnOpen?: boolean;
+  type = PACKAGEABLE_ELEMENT_TYPE._DATA_PRODUCT;
+
+  static readonly serialization = new SerializationFactory(
+    createModelSchema(DataProductElementEditorInitialConfiguration, {
+      _type: usingConstantValueSchema(PACKAGEABLE_ELEMENT_TYPE._DATA_PRODUCT),
+      deployOnOpen: optional(primitive()),
+    }),
+  );
+}
+
 const serializeElementEditorInitialConfiguration = (
   protocol: ElementEditorInitialConfiguration,
 ): PlainObject<ElementEditorInitialConfiguration> => {
@@ -56,6 +68,11 @@ const serializeElementEditorInitialConfiguration = (
       IngestElementEditorInitialConfiguration.serialization.schema,
       protocol,
     );
+  } else if (protocol instanceof DataProductElementEditorInitialConfiguration) {
+    return serialize(
+      DataProductElementEditorInitialConfiguration.serialization.schema,
+      protocol,
+    );
   }
   throw new UnsupportedOperationError(
     `Can't serialize element config`,
@@ -72,6 +89,11 @@ const deseralizeElementEditorInitialConfiguration = (
         IngestElementEditorInitialConfiguration.serialization.schema,
         json,
       );
+    case PACKAGEABLE_ELEMENT_TYPE._DATA_PRODUCT:
+      return deserialize(
+        DataProductElementEditorInitialConfiguration.serialization.schema,
+        json,
+      );
     default: {
       throw new UnsupportedOperationError(
         `Can't deserialize element config`,

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

@@ -55,6 +55,7 @@ import {
   generateFunctionPrettyName,
   RawVariableExpression,
   type FunctionActivator,
+  CodeCompletionResult,
 } from '@finos/legend-graph';
 import {
   ExecutionPlanState,
@@ -88,13 +89,15 @@ export class FunctionDefinitionEditorState extends LambdaEditorState {
     functionElement: ConcreteFunctionDefinition,
     editorStore: EditorStore,
   ) {
-    super('', LAMBDA_PIPE);
+    super('', LAMBDA_PIPE, {
+      typeAheadEnabled:
+        editorStore.applicationStore.config.options.typeAheadEnabled,
+    });
 
     makeObservable(this, {
       functionElement: observable,
       isConvertingFunctionBodyToString: observable,
     });
-
     this.functionElement = functionElement;
     this.editorStore = editorStore;
   }
@@ -189,6 +192,26 @@ export class FunctionDefinitionEditorState extends LambdaEditorState {
       this.setLambdaString('');
     }
   }
+
+  override async getCodeComplete(input: string): Promise<CodeCompletionResult> {
+    try {
+      return (await this.editorStore.graphManagerState.graphManager.getCodeComplete(
+        input,
+        this.editorStore.graphManagerState.graph,
+        undefined,
+        {
+          ignoreElements: [this.functionElement.path],
+        },
+      )) as unknown as CodeCompletionResult;
+    } catch (error) {
+      assertErrorThrown(error);
+      this.editorStore.applicationStore.logService.error(
+        LogEvent.create(GRAPH_MANAGER_EVENT.PARSING_FAILURE),
+        error,
+      );
+      return new CodeCompletionResult();
+    }
+  }
 }
 
 export class FunctionParametersState extends LambdaParametersState {