@finos/legend-application-studio 27.1.2 → 27.1.4

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

@@ -40,7 +40,7 @@ import {
   PlusIcon,
   TimesIcon,
   ArrowCircleRightIcon,
-  PanelDnDEntryDragHandle,
+  PanelEntryDragHandle,
   DragPreviewLayer,
   useDragPreviewLayer,
   Panel,
@@ -332,9 +332,9 @@ const ParameterBasicEditor = observer(
         className="property-basic-editor__container"
         showPlaceholder={isBeingDragged}
       >
-        <PanelDnDEntryDragHandle
-          dropTargetConnector={handleRef}
-          isBeingDragged={isBeingDragged}
+        <PanelEntryDragHandle
+          dragSourceConnector={handleRef}
+          isDragging={isBeingDragged}
         />
         <div className="property-basic-editor">
           {isReadOnly && (
@@ -1059,8 +1059,10 @@ export const FunctionEditor = observer(() => {
   useEffect(() => {
     flowResult(
       functionEditorState.functionDefinitionEditorState.convertLambdaObjectToGrammarString(
-        true,
-        true,
+        {
+          pretty: true,
+          firstLoad: true,
+        },
       ),
     ).catch(applicationStore.alertUnhandledError);
   }, [applicationStore, functionEditorState]);

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

@@ -357,7 +357,10 @@ export const MappingEditorWithTestable = observer(() => {
     (): void =>
       mappingEditorState.setSelectedTab(tab);
   return (
-    <div className="service-editor">
+    <div
+      data-testid={LEGEND_STUDIO_TEST_ID.MAPPING_EDITOR}
+      className="service-editor"
+    >
       <div className="panel">
         <div className="panel__header">
           <div className="panel__header__title">
@@ -389,7 +392,7 @@ export const MappingEditorWithTestable = observer(() => {
           {selectedTab === MAPPING_EDITOR_TAB.CLASS_MAPPINGS && (
             <_MappingEditor />
           )}
-          {selectedTab === MAPPING_EDITOR_TAB.BETA_TEST_SUITES && (
+          {selectedTab === MAPPING_EDITOR_TAB.TEST_SUITES && (
             <MappingTestableEditor
               mappingTestableState={mappingEditorState.mappingTestableState}
             />

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

@@ -151,7 +151,7 @@ export const MappingExplorerContextMenu = observer(
         ) {
           await flowResult(
             mappingEditorState.currentTabState.mappingFilterState?.convertLambdaObjectToGrammarString(
-              false,
+              { pretty: false },
             ),
           );
           mappingEditorState.currentTabState.mappingFilterState = undefined;

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

@@ -20,6 +20,7 @@ import {
   type MappingTestSuite,
   type Store,
   type DataElement,
+  type EmbeddedData,
   ModelStore,
   Database,
   getMappingCompatibleClasses,
@@ -28,6 +29,10 @@ import {
   MappingTest,
   PackageableElementExplicitReference,
   DataElementReference,
+  RelationalCSVData,
+  ModelStoreData,
+  ExternalFormatData,
+  ModelEmbeddedData,
 } from '@finos/legend-graph';
 import { forwardRef, useEffect, useRef, useState } from 'react';
 import {
@@ -208,6 +213,7 @@ const CreateTestSuiteModal = observer(
               name="Test Suite Name"
               prompt="Unique Identifier for Test suite i.e Person_suite"
               value={suiteName}
+              placeholder="Suite Name"
               update={(value: string | undefined): void =>
                 setSuiteName(value ?? '')
               }
@@ -216,6 +222,7 @@ const CreateTestSuiteModal = observer(
             <PanelFormTextField
               name="Test Name"
               prompt="Unique Identifier for first test in suite"
+              placeholder="Test Name"
               value={testName}
               update={(value: string | undefined): void =>
                 setTestName(value ?? '')
@@ -245,7 +252,11 @@ const CreateTestSuiteModal = observer(
               disabled={
                 !isValid || creatorState.isCreatingSuiteState.isInProgress
               }
-              title={'Create Test'}
+              title={
+                !isValid
+                  ? 'Suite Name and Test Name Required'
+                  : 'Create Test Suite'
+              }
               onClick={create}
               text="Create"
             />
@@ -648,30 +659,30 @@ const MappingTestSuiteQueryEditor = observer(
             <div className="panel__header__title__label">query</div>
           </div>
           <div className="panel__header__actions">
-            <div className="mapping-test-editor__action-btn">
+            <div className="btn__dropdown-combo">
               <button
-                className="mapping-test-editor__action-btn__label"
+                className="btn__dropdown-combo__label"
                 onClick={editWithQueryBuilder()}
                 title="Edit Query"
                 tabIndex={-1}
               >
-                <PencilIcon className="mapping-test-editor__action-btn__label__icon" />
-                <div className="mapping-test-editor__action-btn__label__title">
+                <PencilIcon className="btn__dropdown-combo__label__icon" />
+                <div className="btn__dropdown-combo__label__title">
                   Edit Query
                 </div>
               </button>
               <DropdownMenu
-                className="mapping-test-editor__action-btn__dropdown-btn"
+                className="btn__dropdown-combo__dropdown-btn"
                 content={
                   <MenuContent>
                     <MenuContentItem
-                      className="mapping-test-editor__action-btn__option"
+                      className="btn__dropdown-combo__option"
                       onClick={editWithQueryBuilder(true)}
                     >
                       Text Mode
                     </MenuContentItem>
                     <MenuContentItem
-                      className="mapping-test-editor__action-btn__option"
+                      className="btn__dropdown-combo__option"
                       onClick={clearQuery}
                     >
                       Clear Query
@@ -715,14 +726,14 @@ const StoreTestDataEditor = observer(
       mappingTestState.mappingTestableState.mappingEditorState.isReadOnly;
     const dataElements =
       storeTestDataState.editorStore.graphManagerState.graph.dataElements;
-    const data = storeTestDataState.storeTestData.data;
-    const isUsingReference = data instanceof DataElementReference;
+    const currentData = storeTestDataState.storeTestData.data;
+    const isUsingReference = currentData instanceof DataElementReference;
     const open = (): void => storeTestDataState.setDataElementModal(true);
     const close = (): void => storeTestDataState.setDataElementModal(false);
     const changeToUseMyOwn = (): void => {
       if (isUsingReference) {
         const newBare = returnUndefOnError(() =>
-          data.accept_EmbeddedDataVisitor(
+          currentData.accept_EmbeddedDataVisitor(
             new EmbeddedDataCreatorFromEmbeddedData(),
           ),
         );
@@ -732,10 +743,49 @@ const StoreTestDataEditor = observer(
       }
     };
 
-    const handler = (val: DataElement): void => {
-      const value = new DataElementReference();
-      value.dataElement = PackageableElementExplicitReference.create(val);
-      storeTestDataState.changeEmbeddedData(value);
+    const sharedDataHandler = (val: DataElement): void => {
+      const dataRef = new DataElementReference();
+      dataRef.dataElement = PackageableElementExplicitReference.create(val);
+      const dataElementValue = val.data;
+      let embeddedData: EmbeddedData = dataRef;
+      if (
+        currentData instanceof ModelStoreData &&
+        dataElementValue instanceof ExternalFormatData
+      ) {
+        const modelStoreVal = currentData.modelData?.[0];
+        if (modelStoreVal instanceof ModelEmbeddedData) {
+          const newModelEmbeddedData = new ModelEmbeddedData();
+          newModelEmbeddedData.model =
+            PackageableElementExplicitReference.create(
+              modelStoreVal.model.value,
+            );
+
+          newModelEmbeddedData.data = dataRef;
+          const modelStoreData = new ModelStoreData();
+          modelStoreData.modelData = [newModelEmbeddedData];
+          embeddedData = modelStoreData;
+        }
+      }
+      storeTestDataState.changeEmbeddedData(embeddedData);
+    };
+    const filter = (val: DataElement): boolean => {
+      const dataElementData = val.data;
+      if (currentData instanceof RelationalCSVData) {
+        if (dataElementData instanceof RelationalCSVData) {
+          return true;
+        }
+        return false;
+      } else if (currentData instanceof ModelStoreData) {
+        if (
+          dataElementData instanceof ExternalFormatData ||
+          dataElementData instanceof ModelStoreData
+        ) {
+          return true;
+        }
+        return false;
+      }
+      // TODO add extensions
+      return true;
     };
     return (
       <div className="service-test-data-editor">
@@ -783,7 +833,8 @@ const StoreTestDataEditor = observer(
             isReadOnly={false}
             editorStore={storeTestDataState.editorStore}
             close={close}
-            handler={handler}
+            filterBy={filter}
+            handler={sharedDataHandler}
           />
         )}
         <EmbeddedDataEditor
@@ -1241,7 +1292,7 @@ export const MappingTestableEditor = observer(
     };
 
     useApplicationNavigationContext(
-      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.MAPPING_TEST_EDITOR,
+      LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.MAPPING_EDITOR_TEST,
     );
     return (
       <div className="service-test-suite-editor panel">

package/src/components/editor/editor-group/project-configuration-editor/ProjectConfigurationEditor.tsx

@@ -20,6 +20,7 @@ import { observer } from 'mobx-react-lite';
 import {
   ProjectConfigurationEditorState,
   CONFIGURATION_EDITOR_TAB,
+  projectTypeTabFilter,
 } from '../../../../stores/editor/editor-state/project-configuration-editor-state/ProjectConfigurationEditorState.js';
 import {
   clsx,
@@ -41,13 +42,16 @@ import {
   PanelContent,
   PanelHeader,
   PanelContentLists,
+  PanelLoadingIndicator,
 } from '@finos/legend-art';
 import { flowResult } from 'mobx';
 import {
   type Platform,
+  type ProjectConfiguration,
+  type ProjectStructureVersion,
   PlatformConfiguration,
   ProjectDependency,
-  type ProjectConfiguration,
+  ProjectType,
 } from '@finos/legend-server-sdlc';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
@@ -64,6 +68,28 @@ import {
 } from '@finos/legend-lego/application';
 import type { StoreProjectData } from '@finos/legend-server-depot';
 
+const isProjectConfigurationVersionOutdated = (
+  projectConfig: ProjectConfiguration,
+  latestVersion: ProjectStructureVersion | undefined,
+  isEmbeddedMode: boolean,
+): boolean => {
+  if (!latestVersion) {
+    return false;
+  }
+  const mainVersionOutdated =
+    latestVersion.version > projectConfig.projectStructureVersion.version;
+  if (isEmbeddedMode) {
+    return mainVersionOutdated;
+  }
+  const currentProjectExtensionVersion =
+    projectConfig.projectStructureVersion.extensionVersion ?? -1;
+  const latestProjectExtensionVersion = latestVersion.extensionVersion ?? -1;
+  return (
+    mainVersionOutdated ||
+    latestProjectExtensionVersion > currentProjectExtensionVersion
+  );
+};
+
 const ProjectStructureEditor = observer(
   (props: { projectConfig: ProjectConfiguration; isReadOnly: boolean }) => {
     const { projectConfig, isReadOnly } = props;
@@ -71,13 +97,12 @@ const ProjectStructureEditor = observer(
     const applicationStore = useApplicationStore();
     const latestVersion =
       editorStore.projectConfigurationEditorState.latestProjectStructureVersion;
-    const currentProjectExtensionVersion =
-      projectConfig.projectStructureVersion.extensionVersion ?? -1;
-    const latestProjectExtensionVersion = latestVersion?.extensionVersion ?? -1;
-    const isVersionOutdated =
-      latestVersion &&
-      (latestVersion.version > projectConfig.projectStructureVersion.version ||
-        latestProjectExtensionVersion > currentProjectExtensionVersion);
+    const isProjectStructureVersionOutdated =
+      isProjectConfigurationVersionOutdated(
+        projectConfig,
+        latestVersion,
+        editorStore.projectConfigurationEditorState.isInEmbeddedMode,
+      );
     const isGroupIdChanged =
       editorStore.projectConfigurationEditorState.isGroupIdChanged;
     const isArtifactIdChanged =
@@ -108,7 +133,7 @@ const ProjectStructureEditor = observer(
         <div className="project-configuration-editor__project__structure__version">
           <div className="project-configuration-editor__project__structure__version__label">
             <div className="project-configuration-editor__project__structure__version__label__status">
-              {isVersionOutdated ? (
+              {isProjectStructureVersionOutdated ? (
                 <ExclamationCircleIcon
                   className="project-configuration-editor__project__structure__version__label__status--outdated"
                   title="Project structure is outdated"
@@ -124,7 +149,7 @@ const ProjectStructureEditor = observer(
               {`PROJECT STRUCTURE VERSION ${projectConfig.projectStructureVersion.fullVersion}`}
             </div>
           </div>
-          {isVersionOutdated && (
+          {isProjectStructureVersionOutdated && latestVersion && (
             <button
               className="project-configuration-editor__project__structure__version__update-btn"
               disabled={isReadOnly}
@@ -132,7 +157,10 @@ const ProjectStructureEditor = observer(
               tabIndex={-1}
               title={`Current project structure is outdated. Click to update to the latest version (v${latestVersion.fullVersion}})`}
             >
-              Update to version {latestVersion.fullVersion}
+              Update to version{' '}
+              {editorStore.projectConfigurationEditorState.isInEmbeddedMode
+                ? latestVersion.version
+                : latestVersion.fullVersion}
             </button>
           )}
         </div>
@@ -511,20 +539,106 @@ const ProjectPlatformVersionEditor = observer(
   },
 );
 
+const ProjectAdvancedEditor = observer(
+  (props: { projectConfig: ProjectConfiguration; isReadOnly: boolean }) => {
+    const { projectConfig } = props;
+    const editorStore = useEditorStore();
+    const applicationStore = useApplicationStore();
+    const currentProjectType = projectConfig.projectType ?? ProjectType.MANAGED;
+    const isEmbeddedMode = currentProjectType === ProjectType.EMBEDDED;
+    const managedModeBlurb =
+      'Managed Projects are managed by our SDLC server, which includes managing the build and deployment of your project.This enables rich features such as releasing and dependency management work within our ecosystem.This is the recommended mode and should not be changed unless your customized build is robust to handle these operations and you are aware of the different features our managed mode provides.';
+    const embeddedModeBlurb =
+      'Embedded Projects have their own customized build. The build is managed directly on the underlying version system (gitlab, github etc) and the owners of the projects are responsible for managing their build and incorporating the necessary steps to enable features such as releasing and dependency management. Our SDLC server still manages the file structure of where the elements entities are located and correlate with the project structure version.';
+    const managedToEmbedded =
+      'You are about to change from managed to embedded project type. This will cause your build files (pom, ci etc) to no longer be managed by our SDLC process. Your element folder structure will remain managed by us but your build will become your responsibility. Please ensure you understand the risks of changing over before continuing.';
+    const embeddedToManaged =
+      'You are about to change from embedded to managed project type. Your build will now be managed by our SDLC sever in addition to your element folder structure. Your current build files will all be deleted and replaces with our own. Please ensure you understand the risks of changing over before continuing.';
+    const changeProjectType = (): void => {
+      applicationStore.alertService.setActionAlertInfo({
+        message: `${isEmbeddedMode ? embeddedToManaged : managedToEmbedded}`,
+        prompt: 'Do you want to proceed?',
+        type: ActionAlertType.CAUTION,
+        actions: [
+          {
+            label: 'Continue',
+            type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+            handler: () => {
+              flowResult(
+                editorStore.projectConfigurationEditorState.changeProjectType(),
+              ).catch(applicationStore.alertUnhandledError);
+            },
+          },
+          {
+            label: 'Cancel',
+            type: ActionAlertActionType.PROCEED,
+            default: true,
+          },
+        ],
+      });
+    };
+
+    return (
+      <Panel>
+        <PanelForm>
+          <div className="panel__content__form__section__header__label">
+            {`Project Type: ${prettyCONSTName(currentProjectType)} `}
+          </div>
+          <div className="documentation-preview">
+            <div className="documentation-preview__text">
+              <div className="project-configuration-editor__advanced__project-type__info">
+                {managedModeBlurb}
+              </div>
+              <div className="project-configuration-editor__advanced__project-type__info">
+                {embeddedModeBlurb}
+              </div>
+            </div>
+
+            <div className="documentation-preview__hint">
+              <DocumentationLink
+                documentationKey={
+                  LEGEND_STUDIO_DOCUMENTATION_KEY.QUESTION_WHAT_IS_EMBEDDED_MODE_PROJECT_TYPE
+                }
+              />
+            </div>
+          </div>
+          <div className="platform-configurations-editor__dependencies">
+            <div className="platform-configurations-editor__dependencies__header">
+              <button
+                className="btn--dark btn--conflict btn--important project-configuration-editor__advanced__caution__btn"
+                onClick={changeProjectType}
+                tabIndex={-1}
+              >
+                {`Change to ${
+                  isEmbeddedMode ? 'Managed Type' : 'Embedded Type'
+                }`}
+              </button>
+            </div>
+          </div>
+        </PanelForm>
+      </Panel>
+    );
+  },
+);
+
 export const ProjectConfigurationEditor = observer(() => {
   const editorStore = useEditorStore();
   const applicationStore = useApplicationStore();
   const configState = editorStore.tabManagerState.getCurrentEditorState(
     ProjectConfigurationEditorState,
   );
+  const projectType =
+    configState.originalConfig.projectType ?? ProjectType.MANAGED;
   const sdlcState = editorStore.sdlcState;
   const isReadOnly = editorStore.isInViewerMode;
   const selectedTab = configState.selectedTab;
+  const dependencyEditorState = configState.projectDependencyEditorState;
   const tabs = [
     CONFIGURATION_EDITOR_TAB.PROJECT_STRUCTURE,
     CONFIGURATION_EDITOR_TAB.PROJECT_DEPENDENCIES,
     CONFIGURATION_EDITOR_TAB.PLATFORM_CONFIGURATIONS,
-  ];
+    CONFIGURATION_EDITOR_TAB.ADVANCED,
+  ].filter((tab) => projectTypeTabFilter(projectType, tab));
   const changeTab =
     (tab: CONFIGURATION_EDITOR_TAB): (() => void) =>
     (): void =>
@@ -664,6 +778,10 @@ export const ProjectConfigurationEditor = observer(() => {
   if (!configState.projectConfiguration) {
     return null;
   }
+  const isLoading =
+    configState.updatingConfigurationState.isInProgress ||
+    configState.fetchingProjectVersionsState.isInProgress ||
+    dependencyEditorState.fetchingDependencyInfoState.isInProgress;
   return (
     <div className="project-configuration-editor">
       <Panel>
@@ -717,6 +835,7 @@ export const ProjectConfigurationEditor = observer(() => {
           </PanelHeaderActions>
         </PanelHeader>
         <PanelContent className="project-configuration-editor__content">
+          <PanelLoadingIndicator isLoading={isLoading} />
           {selectedTab === CONFIGURATION_EDITOR_TAB.PROJECT_STRUCTURE && (
             <ProjectStructureEditor
               projectConfig={currentProjectConfiguration}
@@ -732,6 +851,12 @@ export const ProjectConfigurationEditor = observer(() => {
               isReadOnly={isReadOnly}
             />
           )}
+          {selectedTab === CONFIGURATION_EDITOR_TAB.ADVANCED && (
+            <ProjectAdvancedEditor
+              projectConfig={currentProjectConfiguration}
+              isReadOnly={isReadOnly}
+            />
+          )}
         </PanelContent>
       </Panel>
     </div>

package/src/components/editor/editor-group/project-configuration-editor/ProjectDependencyEditor.tsx

@@ -995,7 +995,6 @@ export const ProjectDependencyEditor = observer(() => {
 
   return (
     <PanelContentLists>
-      <PanelLoadingIndicator isLoading={isLoading} />
       {isLoading && (
         <div className="project-dependency-editor__progress-msg">
           {configState.updatingConfigurationState.isInProgress

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

@@ -272,9 +272,9 @@ export const ServiceExecutionQueryEditor = observer(
 
     // convert to string
     useEffect(() => {
-      flowResult(queryState.convertLambdaObjectToGrammarString(true)).catch(
-        applicationStore.alertUnhandledError,
-      );
+      flowResult(
+        queryState.convertLambdaObjectToGrammarString({ pretty: true }),
+      ).catch(applicationStore.alertUnhandledError);
     }, [applicationStore, queryState]);
 
     return (

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

@@ -40,6 +40,7 @@ import {
   ModalFooter,
   ModalBody,
   ModalTitle,
+  PlayIcon,
 } from '@finos/legend-art';
 import {
   type Binding,
@@ -717,8 +718,21 @@ const ServiceTestDataContextMenu = observer(
     const remove = (): void => suiteState.deleteTest(serviceTestState);
     const rename = (): void =>
       suiteState.setTestToRename(serviceTestState.test);
+    const runTest =
+      serviceTestState.editorStore.applicationStore.guardUnhandledError(() =>
+        flowResult(serviceTestState.runTest()),
+      );
     return (
       <MenuContent ref={ref}>
+        <MenuContentItem
+          disabled={
+            suiteState.runningTestState.isInProgress ||
+            serviceTestState.runningTestAction.isInProgress
+          }
+          onClick={runTest}
+        >
+          Run test
+        </MenuContentItem>
         <MenuContentItem onClick={rename}>Rename</MenuContentItem>
         <MenuContentItem onClick={remove}>Delete</MenuContentItem>
         <MenuContentItem onClick={addTest}>Add test</MenuContentItem>
@@ -750,16 +764,12 @@ const ServiceTestItem = observer(
     const resultIcon = getTestableResultIcon(testableResult);
     const onContextMenuOpen = (): void => setIsSelectedFromContextMenu(true);
     const onContextMenuClose = (): void => setIsSelectedFromContextMenu(false);
+    const runTest =
+      serviceTestState.editorStore.applicationStore.guardUnhandledError(() =>
+        flowResult(serviceTestState.runTest()),
+      );
     return (
       <ContextMenu
-        className={clsx(
-          'testable-test-explorer__item',
-          {
-            'testable-test-explorer__item--selected-from-context-menu':
-              !isActive && isSelectedFromContextMenu,
-          },
-          { 'testable-test-explorer__item--active': isActive },
-        )}
         disabled={isReadOnly}
         content={
           <ServiceTestDataContextMenu
@@ -771,18 +781,43 @@ const ServiceTestItem = observer(
         onOpen={onContextMenuOpen}
         onClose={onContextMenuClose}
       >
-        <button
-          className={clsx('testable-test-explorer__item__label')}
-          onClick={openTest}
-          tabIndex={-1}
+        <div
+          className={clsx(
+            'testable-test-explorer__item',
+            {
+              'testable-test-explorer__item--selected-from-context-menu':
+                !isActive && isSelectedFromContextMenu,
+            },
+            { 'testable-test-explorer__item--active': isActive },
+          )}
         >
-          <div className="testable-test-explorer__item__label__icon">
-            {resultIcon}
-          </div>
-          <div className="testable-test-explorer__item__label__text">
-            {serviceTest.id}
+          <button
+            className={clsx('testable-test-explorer__item__label')}
+            onClick={openTest}
+            tabIndex={-1}
+          >
+            <div className="testable-test-explorer__item__label__icon">
+              {resultIcon}
+            </div>
+            <div className="testable-test-explorer__item__label__text">
+              {serviceTest.id}
+            </div>
+          </button>
+          <div className="mapping-test-explorer__item__actions">
+            <button
+              className="mapping-test-explorer__item__action mapping-test-explorer__run-test-btn"
+              onClick={runTest}
+              disabled={
+                suiteState.runningTestState.isInProgress ||
+                serviceTestState.runningTestAction.isInProgress
+              }
+              tabIndex={-1}
+              title={`Run ${serviceTest.id}`}
+            >
+              {<PlayIcon />}
+            </button>
           </div>
-        </button>
+        </div>
       </ContextMenu>
     );
   },