@finos/legend-application-studio 28.18.129 → 28.18.131

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-application-studio",
-  "version": "28.18.129",
+  "version": "28.18.131",
   "description": "Legend Studio application core",
   "keywords": [
     "legend",
@@ -45,13 +45,13 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application": "16.0.46",
-    "@finos/legend-art": "7.1.100",
-    "@finos/legend-code-editor": "2.0.73",
-    "@finos/legend-data-cube": "0.2.5",
-    "@finos/legend-graph": "32.1.31",
-    "@finos/legend-lego": "2.0.78",
-    "@finos/legend-query-builder": "4.16.39",
+    "@finos/legend-application": "16.0.47",
+    "@finos/legend-art": "7.1.101",
+    "@finos/legend-code-editor": "2.0.75",
+    "@finos/legend-data-cube": "0.2.7",
+    "@finos/legend-graph": "32.1.33",
+    "@finos/legend-lego": "2.0.80",
+    "@finos/legend-query-builder": "4.16.41",
     "@finos/legend-server-depot": "6.0.92",
     "@finos/legend-server-sdlc": "5.3.58",
     "@finos/legend-server-showcase": "0.2.54",

package/src/__lib__/LegendStudioDocumentation.ts

@@ -77,6 +77,7 @@ export enum LEGEND_STUDIO_DOCUMENTATION_KEY {
   QUESTION_HOW_TO_WRITE_A_SERVICE_TEST = 'question.how-to-write-a-service-test',
   QUESTION_HOW_TO_WRITE_A_MAPPING_TEST = 'question.how-to-write-a-mapping-test',
   QUESTION_HOW_TO_WRITE_A_FUNCTION_TEST = 'question.how-to-write-a-function-test',
+  QUESTION_HOW_TO_ENABLE_TYPEAHEAD = 'question.how-to-enable-typeahead',
   QUESTION_HOW_TO_WRITE_A_SERVICE_POST_VALIDATION = 'question.how-to-write-a-service-post-validation',
   QUESTION_WHY_DO_I_SEE_ERROR_WITH_ASSOCIATION_PROPERTY_TYPE = 'question.why-do-i-see-error-with-association-property-type',
   QUESTION_HOW_TO_WRITE_SERVICE_CONNECTION_TEST_DATA = 'question.how-to-write-service-connection-test-data',

package/src/application/LegendStudioApplicationConfig.ts

@@ -63,6 +63,13 @@ class LegendStudioApplicationCoreOptions {
    * Default to `false`
    */
   enableGraphBuilderStrictMode = false;
+  /**
+   * Indicates whether we enable type ahead in all editors.
+   *
+   * Default to `false` because of performance reasons for large models.
+   */
+  typeAheadEnabled = false;
+
   projectCreationGroupIdSuggestion = 'org.finos.legend.*';
 
   /**
@@ -115,6 +122,7 @@ class LegendStudioApplicationCoreOptions {
   private static readonly serialization = new SerializationFactory(
     createModelSchema(LegendStudioApplicationCoreOptions, {
       enableGraphBuilderStrictMode: optional(primitive()),
+      typeAheadEnabled: optional(primitive()),
       projectCreationGroupIdSuggestion: optional(primitive()),
       TEMPORARY__preserveSectionIndex: optional(primitive()),
       TEMPORARY__enableCreationOfSandboxProjects: optional(primitive()),
@@ -238,7 +246,6 @@ export class LegendStudioApplicationConfig extends LegendApplicationConfig {
     this.options = LegendStudioApplicationCoreOptions.create(
       input.configData.extensions?.core ?? {},
     );
-
     if (this.options.ingestDeploymentConfig) {
       validateIngestionDeploymentConfiguration(
         this.options.ingestDeploymentConfig,

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

@@ -48,12 +48,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 +69,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 +105,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 +120,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 +194,7 @@ export const LakehouseDataProductAcccessPointEditor = observer(
                 <InlineLambdaEditor
                   className={'access-point-editor__lambda-editor'}
                   disabled={
-                    lambdaEditorState.val.state
+                    lambdaEditorState.val.state.state
                       .isConvertingTransformLambdaObjects
                   }
                   lambdaEditorState={lambdaEditorState}
@@ -237,7 +259,9 @@ export const DataProductEditor = observer(() => {
   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);

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/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/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 {