@finos/legend-application-studio 27.0.0 → 27.1.1

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

@@ -31,6 +31,7 @@ import {
   createEnumerationMapping,
   getAllMappingElements,
   MappingEditorState,
+  BASIC_SET_IMPLEMENTATION_TYPE,
 } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingEditorState.js';
 import {
   guaranteeNonNullable,
@@ -45,7 +46,6 @@ import {
   Association,
   PrimitiveType,
 } from '@finos/legend-graph';
-import { BASIC_SET_IMPLEMENTATION_TYPE } from '../../../../stores/editor/utils/ModelClassifierUtils.js';
 import {
   buildElementOption,
   getPackageableElementOptionFormatter,

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

@@ -158,6 +158,14 @@ export const ExternalFormatParameterEditorModal = observer(
       updateParamValue,
       bindingParamPair,
     } = props;
+    const paramValue =
+      paramState.varExpression.genericType?.value.rawType === PrimitiveType.BYTE
+        ? atob(
+            (paramState.valueSpec as PrimitiveInstanceValue)
+              .values[0] as string,
+          )
+        : ((paramState.valueSpec as PrimitiveInstanceValue)
+            .values[0] as string);
     return (
       <Dialog
         open={true}
@@ -177,10 +185,7 @@ export const ExternalFormatParameterEditorModal = observer(
               <div className="service-test-editor__setup__parameter__code-editor__container__content">
                 <CodeEditor
                   key={paramState.uuid}
-                  inputValue={
-                    (paramState.valueSpec as PrimitiveInstanceValue)
-                      .values[0] as string
-                  }
+                  inputValue={paramValue}
                   updateInput={updateParamValue}
                   isReadOnly={isReadOnly}
                   language={
@@ -225,14 +230,14 @@ const ServiceTestParameterEditor = observer(
     const type = bindingParamPair
       ? bindingParamPair.binding.contentType
       : paramState.varExpression.genericType?.value.rawType.name ?? 'unknown';
-    const paramValue = (
+    const paramValue =
       paramState.varExpression.genericType?.value.rawType === PrimitiveType.BYTE
         ? atob(
             (paramState.valueSpec as PrimitiveInstanceValue)
               .values[0] as string,
           )
-        : (paramState.valueSpec as PrimitiveInstanceValue).values[0]
-    ) as string;
+        : ((paramState.valueSpec as PrimitiveInstanceValue)
+            .values[0] as string);
 
     const openInPopUp = (): void => setShowPopUp(!showPopUp);
     const closePopUp = (): void => setShowPopUp(false);

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

@@ -18,6 +18,7 @@ import {
   clsx,
   CompareIcon,
   ContextMenu,
+  CustomSelectorInput,
   Dialog,
   MenuContent,
   MenuContentItem,
@@ -34,7 +35,7 @@ import {
   RefreshIcon,
   WrenchIcon,
 } from '@finos/legend-art';
-import { TestError } from '@finos/legend-graph';
+import { type DataElement, TestError } from '@finos/legend-graph';
 import {
   prettyCONSTName,
   tryToFormatLosslessJSONString,
@@ -61,6 +62,86 @@ import {
 import { forwardRef, useState } from 'react';
 import type { TestableTestEditorState } from '../../../../stores/editor/editor-state/element-editor-state/testable/TestableEditorState.js';
 import { getTestableResultIcon } from '../../side-bar/testable/GlobalTestRunner.js';
+import type { EditorStore } from '../../../../stores/editor/EditorStore.js';
+import {
+  buildElementOption,
+  getPackageableElementOptionFormatter,
+} from '@finos/legend-lego/graph-editor';
+
+export const SharedDataElementModal = observer(
+  (props: {
+    filterBy?: (val: DataElement) => boolean;
+    handler: (val: DataElement) => void;
+    editorStore: EditorStore;
+    isReadOnly: boolean;
+    close: () => void;
+  }) => {
+    const { filterBy, isReadOnly, close, editorStore, handler } = props;
+    const dataElements =
+      editorStore.graphManagerState.graph.dataElements.filter((e) =>
+        filterBy ? filterBy(e) : true,
+      );
+    const [dataElement, setDataElement] = useState(dataElements[0]);
+    const dataElementOptions =
+      editorStore.graphManagerState.usableDataElements.map(buildElementOption);
+    const selectedDataElement = dataElement
+      ? buildElementOption(dataElement)
+      : null;
+    const onDataElementChange = (val: {
+      label: string;
+      value?: DataElement;
+    }): void => {
+      if (val.value !== selectedDataElement?.value && val.value) {
+        setDataElement(val.value);
+      }
+    };
+    const change = (): void => {
+      if (dataElement) {
+        handler(dataElement);
+      }
+      close();
+    };
+    return (
+      <Dialog
+        open={true}
+        onClose={close}
+        classes={{ container: 'search-modal__container' }}
+        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+      >
+        <Modal darkMode={true} className="service-test-data-modal">
+          <ModalBody>
+            <div className="panel__content__form__section">
+              <div className="panel__content__form__section__header__label">
+                Data Element
+              </div>
+              <div className="explorer__new-element-modal__driver">
+                <CustomSelectorInput
+                  className="panel__content__form__section__dropdown data-element-reference-editor__value__dropdown"
+                  disabled={false}
+                  options={dataElementOptions}
+                  onChange={onDataElementChange}
+                  formatOptionLabel={getPackageableElementOptionFormatter({})}
+                  value={selectedDataElement}
+                  darkMode={true}
+                />
+              </div>
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              className="database-builder__action--btn"
+              disabled={isReadOnly}
+              onClick={change}
+              title="Change to use Data Element"
+            >
+              Change
+            </ModalFooterButton>
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);
 
 export const RenameModal = observer(
   (props: {
@@ -438,6 +519,10 @@ export const TestAssertionEditor = observer(
     const { testAssertionState } = props;
     const selectedTab = testAssertionState.selectedTab;
     const isReadOnly = testAssertionState.testState.isReadOnly;
+    const isDisabled =
+      isReadOnly ||
+      !testAssertionState.assertionState.supportsGeneratingAssertion ||
+      testAssertionState.generatingExpectedAction.isInProgress;
     const changeTab = (val: TEST_ASSERTION_TAB): void =>
       testAssertionState.setSelectedTab(val);
     const renderContent = (state: TestAssertionState): React.ReactNode => {
@@ -484,7 +569,7 @@ export const TestAssertionEditor = observer(
               className="panel__header__action service-execution-editor__test-data__generate-btn"
               onClick={generate}
               title="Generate expected result if possible"
-              disabled={isReadOnly}
+              disabled={isDisabled}
               tabIndex={-1}
             >
               <div className="service-execution-editor__test-data__generate-btn__label">
@@ -497,7 +582,7 @@ export const TestAssertionEditor = observer(
           </div>
         </div>
         <div className="testable-test-assertion-editor__content">
-          {selectedTab === TEST_ASSERTION_TAB.SETUP && (
+          {selectedTab === TEST_ASSERTION_TAB.EXPECTED && (
             <div className="testable-test-assertion-editor__setup">
               {renderContent(testAssertionState.assertionState)}
             </div>

package/src/components/editor/panel-group/SQLPlaygroundPanel.tsx

@@ -20,7 +20,6 @@ import {
   ResizablePanelGroup,
   ResizablePanel,
   ResizablePanelSplitter,
-  clsx,
   TreeView,
   PURE_DatabaseSchemaIcon,
   PURE_DatabaseTableIcon,
@@ -38,6 +37,11 @@ import {
   PanelLoadingIndicator,
   BlankPanelContent,
   TrashIcon,
+  CircleIcon,
+  CheckCircleIcon,
+  EmptyCircleIcon,
+  PURE_DatabaseIcon,
+  SyncIcon,
 } from '@finos/legend-art';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
@@ -119,11 +123,15 @@ const DatabaseSchemaExplorerTreeNodeContainer: React.FC<
   TreeNodeContainerProps<
     DatabaseSchemaExplorerTreeNodeData,
     {
-      // empty
+      toggleCheckedNode: (node: DatabaseSchemaExplorerTreeNodeData) => void;
+      isPartiallySelected: (
+        node: DatabaseSchemaExplorerTreeNodeData,
+      ) => boolean;
     }
   >
 > = (props) => {
-  const { node, level, stepPaddingInRem, onNodeSelect } = props;
+  const { node, level, stepPaddingInRem, onNodeSelect, innerProps } = props;
+  const { toggleCheckedNode, isPartiallySelected } = innerProps;
   const isExpandable =
     Boolean(!node.childrenIds || node.childrenIds.length) &&
     !(node instanceof DatabaseSchemaExplorerTreeColumnNodeData);
@@ -154,9 +162,22 @@ const DatabaseSchemaExplorerTreeNodeContainer: React.FC<
     node instanceof DatabaseSchemaExplorerTreeColumnNodeData &&
     node.owner.primaryKey.includes(node.column);
 
+  const renderCheckedIcon = (
+    _node: DatabaseSchemaExplorerTreeNodeData,
+  ): React.ReactNode => {
+    if (_node instanceof DatabaseSchemaExplorerTreeColumnNodeData) {
+      return null;
+    } else if (isPartiallySelected(_node)) {
+      return <CircleIcon />;
+    } else if (_node.isChecked) {
+      return <CheckCircleIcon />;
+    }
+    return <EmptyCircleIcon />;
+  };
+
   return (
     <div
-      className={clsx('tree-view__node__container')}
+      className="tree-view__node__container"
       style={{
         paddingLeft: `${level * (stepPaddingInRem ?? 1)}rem`,
         display: 'flex',
@@ -168,6 +189,15 @@ const DatabaseSchemaExplorerTreeNodeContainer: React.FC<
         <div className="sql-playground__database-schema-explorer-tree__expand-icon">
           {nodeExpandIcon}
         </div>
+        <div
+          className="sql-playground__database-schema-explorer-tree__toggle-icon"
+          onClick={(event) => {
+            event.stopPropagation();
+            toggleCheckedNode(node);
+          }}
+        >
+          {renderCheckedIcon(node)}
+        </div>
         <div className="sql-playground__database-schema-explorer-tree__type-icon">
           {nodeTypeIcon}
         </div>
@@ -215,13 +245,36 @@ export const DatabaseSchemaExplorer = observer(
         .getChildNodes(node, treeData)
         ?.sort((a, b) => a.label.localeCompare(b.label)) ?? [];
 
+    const isPartiallySelected = (
+      node: DatabaseSchemaExplorerTreeNodeData,
+    ): boolean => {
+      if (
+        node instanceof DatabaseSchemaExplorerTreeSchemaNodeData &&
+        !node.isChecked
+      ) {
+        return Boolean(
+          playgroundState
+            .getChildNodes(node, treeData)
+            ?.find((childNode) => childNode.isChecked === true),
+        );
+      }
+      return false;
+    };
+
+    const toggleCheckedNode = (
+      node: DatabaseSchemaExplorerTreeNodeData,
+    ): void => playgroundState.toggleCheckedNode(node, treeData);
+
     return (
       <TreeView
         className="sql-playground__database-schema-explorer-tree"
         components={{
           TreeNodeContainer: DatabaseSchemaExplorerTreeNodeContainer,
         }}
-        innerProps={{}}
+        innerProps={{
+          toggleCheckedNode,
+          isPartiallySelected,
+        }}
         treeData={treeData}
         onNodeSelect={onNodeSelect}
         getChildNodes={getChildNodes}
@@ -647,6 +700,10 @@ export const SQLPlaygroundPanel = observer(() => {
     [handleConnectionDrop],
   );
 
+  const updateDatabase = applicationStore.guardUnhandledError(() =>
+    flowResult(playgroundState.updateDatabase()),
+  );
+
   useEffect(() => {
     flowResult(playgroundState.fetchDatabaseMetadata()).catch(
       applicationStore.alertUnhandledError,
@@ -668,20 +725,49 @@ export const SQLPlaygroundPanel = observer(() => {
           <ResizablePanelGroup orientation="vertical">
             <ResizablePanel size={300}>
               <div className="sql-playground__config">
-                <div className="sql-playground__config__connection-selector">
-                  <div className="sql-playground__config__connection-selector__icon">
-                    <PURE_ConnectionIcon />
+                <div className="sql-playground__config__setup">
+                  <div className="sql-playground__config__connection-selector">
+                    <div className="sql-playground__config__connection-selector__icon">
+                      <PURE_ConnectionIcon />
+                    </div>
+                    <CustomSelectorInput
+                      ref={connectionSelectorRef}
+                      className="sql-playground__config__connection-selector__input"
+                      options={connectionOptions}
+                      onChange={changeConnection}
+                      value={selectedConnectionOption}
+                      darkMode={true}
+                      placeholder="Choose a connection..."
+                      filterOption={connectionFilterOption}
+                    />
+                  </div>
+                  <div className="sql-playground__config__database-selector">
+                    <div className="sql-playground__config__database-selector__icon">
+                      <PURE_DatabaseIcon />
+                    </div>
+                    <CustomSelectorInput
+                      ref={connectionSelectorRef}
+                      className="sql-playground__config__database-selector__input"
+                      options={connectionOptions}
+                      onChange={changeConnection}
+                      value={selectedConnectionOption}
+                      darkMode={true}
+                      placeholder="Choose a connection..."
+                      filterOption={connectionFilterOption}
+                    />
+                    <button
+                      className="sql-playground__config__database-selector__update-btn btn--sm btn--dark"
+                      disabled={
+                        !playgroundState.database ||
+                        playgroundState.isBuildingDatabase ||
+                        playgroundState.isUpdatingDatabase
+                      }
+                      onClick={updateDatabase}
+                      title="Update database"
+                    >
+                      <SyncIcon />
+                    </button>
                   </div>
-                  <CustomSelectorInput
-                    ref={connectionSelectorRef}
-                    className="sql-playground__config__connection-selector__input"
-                    options={connectionOptions}
-                    onChange={changeConnection}
-                    value={selectedConnectionOption}
-                    darkMode={true}
-                    placeholder="Choose a connection..."
-                    filterOption={connectionFilterOption}
-                  />
                 </div>
                 <div className="sql-playground__config__schema-explorer">
                   {playgroundState.treeData && (

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

@@ -81,6 +81,8 @@ export const getElementTypeLabel = (
       return 'generation specification';
     case PACKAGEABLE_ELEMENT_TYPE.DATA:
       return 'data';
+    case PACKAGEABLE_ELEMENT_TYPE.TEMPORARY__LOCAL_CONNECTION:
+      return 'local connection';
     default: {
       if (type) {
         const extraElementTypeLabelGetters = editorStore.pluginManager
@@ -436,7 +438,115 @@ const renderNewElementDriver = (
   }
 };
 
-// TODO: investigate the potential approach of VSCode to have inline input in the tree to create element quickly
+export const CreateNewLocalConnectionModal = observer(() => {
+  const editorStore = useEditorStore();
+  const applicationStore = useApplicationStore();
+  const newElementState = editorStore.newElementState;
+  const selectedPackage = newElementState.selectedPackage;
+  // Name
+  const name = newElementState.name;
+  const handleNameChange: React.ChangeEventHandler<HTMLInputElement> = (
+    event,
+  ) => newElementState.setName(event.target.value);
+  const elementNameInputRef = useRef<HTMLInputElement>(null);
+  // Type
+  const typeOptions = ([PACKAGEABLE_ELEMENT_TYPE.PACKAGE] as string[])
+    .concat(editorStore.getSupportedElementTypes())
+    .filter(
+      // NOTE: we can only create package in root
+      (type) =>
+        selectedPackage !== editorStore.graphManagerState.graph.root ||
+        type === PACKAGEABLE_ELEMENT_TYPE.PACKAGE,
+    )
+    .map(buildElementTypeOption);
+
+  const selectedTypeOption = buildElementTypeOption(newElementState.type);
+  const handleTypeChange = (val: ElementTypeSelectOption): void =>
+    newElementState.setElementType(val.value);
+  // Submit button
+  const closeModal = (): void => newElementState.closeModal();
+  const [packagePath, elementName] = resolvePackageAndElementName(
+    selectedPackage,
+    selectedPackage === editorStore.graphManagerState.graph.root,
+    name,
+  );
+  const resolvedPackage =
+    editorStore.graphManagerState.graph.getNullablePackage(packagePath);
+  const needsToOverride = Boolean(
+    resolvedPackage?.children.find((child) => child.name === elementName),
+  );
+  const isDisabled = !name || needsToOverride || !newElementState.isValid;
+  const save = applicationStore.guardUnhandledError(() =>
+    flowResult(newElementState.save()),
+  );
+  const handleEnter = (): void => {
+    newElementState.setName('');
+    elementNameInputRef.current?.focus();
+  };
+
+  if (!newElementState.showModal) {
+    return null;
+  }
+  return (
+    <Dialog
+      open={newElementState.showModal}
+      onClose={closeModal}
+      TransitionProps={{
+        onEnter: handleEnter,
+      }}
+      classes={{ container: 'search-modal__container' }}
+      PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+    >
+      <form
+        data-testid={LEGEND_STUDIO_TEST_ID.NEW_ELEMENT_MODAL}
+        onSubmit={(event) => {
+          event.preventDefault();
+          save();
+        }}
+        className="modal modal--dark search-modal"
+      >
+        <div className="modal__title">
+          {`Create a New ${
+            getElementTypeLabel(editorStore, newElementState.type) ?? 'element'
+          }`}
+        </div>
+        <div>
+          {newElementState.showType && (
+            <CustomSelectorInput
+              options={typeOptions}
+              disabled={typeOptions.length === 1}
+              onChange={handleTypeChange}
+              value={selectedTypeOption}
+              isClearable={false}
+              darkMode={true}
+            />
+          )}
+          <input
+            className="input--dark explorer__new-element-modal__name-input"
+            ref={elementNameInputRef}
+            spellCheck={false}
+            value={name}
+            onChange={handleNameChange}
+            placeholder={`Enter a name, use ${ELEMENT_PATH_DELIMITER} to create new package(s) for the ${
+              getElementTypeLabel(editorStore, newElementState.type) ??
+              'element'
+            }`}
+          />
+          {renderNewElementDriver(newElementState.type, editorStore)}
+        </div>
+        <div className="search-modal__actions">
+          <button type="button" className="btn btn--dark" onClick={closeModal}>
+            Cancel
+          </button>
+          <button className="btn btn--dark" disabled={isDisabled}>
+            Create
+          </button>
+        </div>
+      </form>
+    </Dialog>
+  );
+});
+
 export const CreateNewElementModal = observer(() => {
   const editorStore = useEditorStore();
   const applicationStore = useApplicationStore();

package/src/components/extensions/Core_LegendStudioApplicationPlugin.tsx

@@ -133,6 +133,16 @@ export class Core_LegendStudioApplicationPlugin extends LegendStudioApplicationP
       LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.CONNECTION_EDITOR,
       LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.DATABASE_BUILDER,
       LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.SERVICE_EDITOR,
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.DATA_ELEMENT_EDITOR,
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.MAPPING_EDITOR,
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.RUNTIME_EDITOR,
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.BINDING_EDITOR,
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.SCHEMA_SET_EDITOR,
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.SCHEMA_SET_MODEL_GENERATION,
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.EMBEDDED_DATA_RELATIONAL_EDITOR,
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.EMBEDDED_DATA_EXTERNAL_FORMAT_EDITOR,
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.EMBEDDED_DATA_DATA_ELEMENT_REFERENCE_EDITOR,
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.EMBEDDED_DATA_MODEL_STORE_EDITOR,
     ];
   }
 

package/src/stores/editor/EditorGraphState.ts

@@ -860,6 +860,6 @@ export class EditorGraphState {
         return label;
       }
     }
-    return PACKAGEABLE_ELEMENT_TYPE.UNKNOWN;
+    return PACKAGEABLE_ELEMENT_TYPE.INTERNAL__UNKNOWN;
   }
 }

package/src/stores/editor/EditorStore.ts

@@ -929,25 +929,37 @@ export class EditorStore implements CommandRegistrar {
         PACKAGEABLE_ELEMENT_TYPE.ASSOCIATION,
         PACKAGEABLE_ELEMENT_TYPE.FUNCTION,
         PACKAGEABLE_ELEMENT_TYPE.MEASURE,
-        PACKAGEABLE_ELEMENT_TYPE.MAPPING,
-        PACKAGEABLE_ELEMENT_TYPE.RUNTIME,
-        PACKAGEABLE_ELEMENT_TYPE.CONNECTION,
-        PACKAGEABLE_ELEMENT_TYPE.SERVICE,
-        PACKAGEABLE_ELEMENT_TYPE.GENERATION_SPECIFICATION,
-        PACKAGEABLE_ELEMENT_TYPE.FILE_GENERATION,
-        PACKAGEABLE_ELEMENT_TYPE.FLAT_DATA_STORE,
-        PACKAGEABLE_ELEMENT_TYPE.DATABASE,
-        PACKAGEABLE_ELEMENT_TYPE.DATA,
       ] as string[]
     ).concat(
-      this.pluginManager
-        .getApplicationPlugins()
-        .flatMap(
-          (plugin) =>
-            (
-              plugin as DSL_LegendStudioApplicationPlugin_Extension
-            ).getExtraSupportedElementTypes?.() ?? [],
-        ),
+      (
+        [
+          PACKAGEABLE_ELEMENT_TYPE.MAPPING,
+          PACKAGEABLE_ELEMENT_TYPE.RUNTIME,
+          PACKAGEABLE_ELEMENT_TYPE.CONNECTION,
+          PACKAGEABLE_ELEMENT_TYPE.SERVICE,
+          PACKAGEABLE_ELEMENT_TYPE.GENERATION_SPECIFICATION,
+          PACKAGEABLE_ELEMENT_TYPE.FILE_GENERATION,
+          PACKAGEABLE_ELEMENT_TYPE.FLAT_DATA_STORE,
+          PACKAGEABLE_ELEMENT_TYPE.DATABASE,
+          PACKAGEABLE_ELEMENT_TYPE.DATA,
+          this.applicationStore.config.options
+            .TEMPORARY__enableLocalConnectionBuilder
+            ? PACKAGEABLE_ELEMENT_TYPE.TEMPORARY__LOCAL_CONNECTION
+            : undefined,
+        ] as (string | undefined)[]
+      )
+        .filter(isNonNullable)
+        .concat(
+          this.pluginManager
+            .getApplicationPlugins()
+            .flatMap(
+              (plugin) =>
+                (
+                  plugin as DSL_LegendStudioApplicationPlugin_Extension
+                ).getExtraSupportedElementTypes?.() ?? [],
+            ),
+        )
+        .sort((a, b) => a.localeCompare(b)),
     );
   }