@finos/legend-application-studio 26.1.10 → 27.0.0

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

@@ -47,6 +47,7 @@ import {
   PanelHeader,
   PanelHeaderActions,
   Panel,
+  PauseCircleIcon,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import {
@@ -721,6 +722,9 @@ export const MappingExecutionBuilder = observer(
     const applicationStore = useApplicationStore();
     const { queryState, inputDataState } = executionState;
     // execute
+    const cancelExecution = applicationStore.guardUnhandledError(() =>
+      flowResult(executionState.cancelExecution()),
+    );
     const generatePlan = applicationStore.guardUnhandledError(() =>
       flowResult(executionState.generatePlan(false)),
     );
@@ -780,54 +784,71 @@ export const MappingExecutionBuilder = observer(
                 <FlaskIcon />
               </button>
             )}
-            <div className="mapping-execution-builder__action-btn">
-              <button
-                className="mapping-execution-builder__action-btn__label"
-                onClick={execute}
-                disabled={
-                  isStubbed_RawLambda(queryState.query) ||
-                  !inputDataState.isValid ||
-                  executionState.isGeneratingPlan ||
-                  executionState.isExecuting
-                }
-                tabIndex={-1}
-              >
-                <PlayIcon className="mapping-execution-builder__action-btn__label__icon" />
-                <div className="mapping-execution-builder__action-btn__label__title">
-                  Run Query
-                </div>
-              </button>
-              <DropdownMenu
-                className="mapping-execution-builder__action-btn__dropdown-btn"
-                disabled={
-                  isStubbed_RawLambda(queryState.query) ||
-                  !inputDataState.isValid ||
-                  executionState.isGeneratingPlan ||
-                  executionState.isExecuting
-                }
-                content={
-                  <MenuContent>
-                    <MenuContentItem
-                      className="mapping-execution-builder__action-btn__option"
-                      onClick={generatePlan}
-                    >
-                      Generate Plan
-                    </MenuContentItem>
-                    <MenuContentItem
-                      className="mapping-execution-builder__action-btn__option"
-                      onClick={debugPlanGeneration}
-                    >
-                      Debug
-                    </MenuContentItem>
-                  </MenuContent>
-                }
-                menuProps={{
-                  anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
-                  transformOrigin: { vertical: 'top', horizontal: 'right' },
-                }}
-              >
-                <CaretDownIcon />
-              </DropdownMenu>
+            <div className="mapping-execution-builder__action-btn btn__dropdown-combo btn__dropdown-combo--primary">
+              {executionState.isExecuting ? (
+                <button
+                  className="btn__dropdown-combo__canceler"
+                  onClick={cancelExecution}
+                  tabIndex={-1}
+                >
+                  <div className="btn--dark btn--caution btn__dropdown-combo__canceler__label">
+                    <PauseCircleIcon className="btn__dropdown-combo__canceler__label__icon" />
+                    <div className="btn__dropdown-combo__canceler__label__title">
+                      Stop
+                    </div>
+                  </div>
+                </button>
+              ) : (
+                <>
+                  <button
+                    className="btn__dropdown-combo__label"
+                    onClick={execute}
+                    disabled={
+                      isStubbed_RawLambda(queryState.query) ||
+                      !inputDataState.isValid ||
+                      executionState.isGeneratingPlan ||
+                      executionState.isExecuting
+                    }
+                    tabIndex={-1}
+                  >
+                    <PlayIcon className="btn__dropdown-combo__label__icon" />
+                    <div className="btn__dropdown-combo__label__title">
+                      Run Query
+                    </div>
+                  </button>
+                  <DropdownMenu
+                    className="btn__dropdown-combo__dropdown-btn"
+                    disabled={
+                      isStubbed_RawLambda(queryState.query) ||
+                      !inputDataState.isValid ||
+                      executionState.isGeneratingPlan ||
+                      executionState.isExecuting
+                    }
+                    content={
+                      <MenuContent>
+                        <MenuContentItem
+                          className="btn__dropdown-combo__option"
+                          onClick={generatePlan}
+                        >
+                          Generate Plan
+                        </MenuContentItem>
+                        <MenuContentItem
+                          className="btn__dropdown-combo__option"
+                          onClick={debugPlanGeneration}
+                        >
+                          Debug
+                        </MenuContentItem>
+                      </MenuContent>
+                    }
+                    menuProps={{
+                      anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+                      transformOrigin: { vertical: 'top', horizontal: 'right' },
+                    }}
+                  >
+                    <CaretDownIcon />
+                  </DropdownMenu>
+                </>
+              )}
             </div>
           </div>
         </div>

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

@@ -168,7 +168,7 @@ export const MappingExplorerContextMenu = observer(
 
     const allowRemoveFilter =
       mappingElement instanceof PureInstanceSetImplementation &&
-      !!mappingElement.filter;
+      Boolean(mappingElement.filter);
 
     return (
       <MenuContent ref={ref}>
@@ -390,7 +390,7 @@ const MappingElementTreeNodeContainer = observer(
               {getMappingElementLabel(mappingElement, editorStore).value}
             </div>
             {mappingElement instanceof PureInstanceSetImplementation &&
-              !!mappingElement.filter && (
+              Boolean(mappingElement.filter) && (
                 <div className="mapping-explorer__item__label__filter-icon">
                   <FilterIcon />
                 </div>

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

@@ -62,6 +62,7 @@ import {
   PanelLoadingIndicator,
   ContextMenu,
   ModalHeader,
+  PanelFormSection,
 } from '@finos/legend-art';
 import {
   assertErrorThrown,
@@ -225,12 +226,15 @@ const CreateTestSuiteModal = observer(
           </ModalHeader>
           <ModalBody>
             <PanelLoadingIndicator
+              className="panel-loading-indicator--in__modal"
               isLoading={creatorState.isCreatingSuiteState.isInProgress}
             />
             {creatorState.isCreatingSuiteState.message && (
-              <div className="service-registration-editor__progress-msg">
-                {`${creatorState.isCreatingSuiteState.message}...`}
-              </div>
+              <PanelFormSection>
+                <div className="service-registration-editor__progress-msg">
+                  {`${creatorState.isCreatingSuiteState.message}...`}
+                </div>
+              </PanelFormSection>
             )}
             <PanelFormTextField
               ref={inputRef}
@@ -746,15 +750,7 @@ const MappingTestableQueryEditor = observer(
         </div>
         {!isStubbed_RawLambda(queryState.query) && (
           <PanelContent>
-            <div
-              className="mapping-test-editor__query-panel__query"
-              title="Double click to edit in query builder"
-              onDoubleClick={(event) => {
-                event.preventDefault();
-                event.stopPropagation();
-                editWithQueryBuilder()();
-              }}
-            >
+            <div className="mapping-test-editor__query-panel__query">
               <CodeEditor
                 inputValue={queryState.lambdaString}
                 isReadOnly={true}

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

@@ -118,16 +118,12 @@ const ProjectDependencyActions = observer(
       dependencyEditorState.dependencyReport?.conflicts.length;
     const viewTree = (): void => {
       if (dependencyEditorState.dependencyReport) {
-        dependencyEditorState.setDependencyReport(
-          DEPENDENCY_REPORT_TAB.EXPLORER,
-        );
+        dependencyEditorState.setReportTab(DEPENDENCY_REPORT_TAB.EXPLORER);
       }
     };
     const viewConflict = (): void => {
       if (dependencyEditorState.dependencyReport) {
-        dependencyEditorState.setDependencyReport(
-          DEPENDENCY_REPORT_TAB.CONFLICTS,
-        );
+        dependencyEditorState.setReportTab(DEPENDENCY_REPORT_TAB.CONFLICTS);
       }
     };
     return (
@@ -604,17 +600,17 @@ const ProjectDependencyReportModal = observer(
     const changeTab =
       (tab: DEPENDENCY_REPORT_TAB): (() => void) =>
       (): void =>
-        dependencyEditorState.setDependencyReport(tab);
+        dependencyEditorState.setReportTab(tab);
     const dependencyReport = dependencyEditorState.dependencyReport;
     const closeModal = (): void =>
-      dependencyEditorState.setDependencyReport(undefined);
+      dependencyEditorState.setReportTab(undefined);
     const [flattenView, setFlattenView] = useState(false);
     const [isExpandingDependencies, setIsExpandingDependencies] =
       useState(false);
     const setTreeData = (
-      treeData: TreeData<ProjectDependencyTreeNodeData>,
+      val: TreeData<ProjectDependencyTreeNodeData>,
     ): void => {
-      dependencyEditorState.setTreeData(treeData, flattenView);
+      dependencyEditorState.setTreeData(val, flattenView);
     };
     const toggleViewAsListOrAsTree = (): void => {
       setFlattenView(!flattenView);

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

@@ -31,7 +31,6 @@ import {
   ModalBody,
   ModalFooter,
   ModalHeader,
-  MoreVerticalIcon,
 } from '@finos/legend-art';
 import { assertErrorThrown } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
@@ -287,24 +286,24 @@ export const ServiceExecutionQueryEditor = observer(
             </div>
           </div>
           <div className="panel__header__actions">
-            <div className="service-editor__execution__action-btn">
+            <div className="btn__dropdown-combo btn__dropdown-combo--primary">
               <button
-                className="service-editor__execution__action-btn__label service-editor__execution__action-btn__label--primary"
+                className="btn__dropdown-combo__label"
                 onClick={editWithQueryBuilder()}
                 title="Edit Query"
                 tabIndex={-1}
               >
-                <PencilIcon className="service-editor__execution__action-btn__label__icon" />
-                <div className="service-editor__execution__action-btn__label__title">
+                <PencilIcon className="btn__dropdown-combo__label__icon" />
+                <div className="btn__dropdown-combo__label__title">
                   Edit Query
                 </div>
               </button>
               <DropdownMenu
-                className="service-editor__execution__action-btn__dropdown-btn service-editor__execution__action-btn__dropdown-btn--primary"
+                className="btn__dropdown-combo__dropdown-btn"
                 content={
                   <MenuContent>
                     <MenuContentItem
-                      className="service-editor__execution__action-btn__option"
+                      className="btn__dropdown-combo__option"
                       onClick={editWithQueryBuilder(true)}
                     >
                       Text Mode
@@ -319,96 +318,97 @@ export const ServiceExecutionQueryEditor = observer(
                 <CaretDownIcon />
               </DropdownMenu>
             </div>
-            {executionState.isRunningQuery ? (
-              <button
-                className="service-editor__execution__stop-btn"
-                onClick={cancelQuery}
-                tabIndex={-1}
-              >
-                <div className="btn--dark btn--caution service-editor__execution__stop-btn__label">
-                  <PauseCircleIcon className="service-editor__execution__stop-btn__label__icon" />
-                  <div className="service-editor__execution__stop-btn__label__title">
-                    Stop
-                  </div>
-                </div>
-              </button>
-            ) : (
-              <div className="service-editor__execution__action-btn">
+            <div className="btn__dropdown-combo btn__dropdown-combo--primary">
+              {executionState.isRunningQuery ? (
                 <button
-                  className="service-editor__execution__action-btn__label"
-                  onClick={runQuery}
-                  title="Run Query"
-                  disabled={executionIsRunning}
+                  className="btn__dropdown-combo__canceler"
+                  onClick={cancelQuery}
                   tabIndex={-1}
                 >
-                  <PlayIcon className="service-editor__execution__action-btn__label__icon" />
-                  <div className="service-editor__execution__action-btn__label__title">
-                    Run Query
+                  <div className="btn--dark btn--caution btn__dropdown-combo__canceler__label">
+                    <PauseCircleIcon className="btn__dropdown-combo__canceler__label__icon" />
+                    <div className="btn__dropdown-combo__canceler__label__title">
+                      Stop
+                    </div>
                   </div>
                 </button>
-                <DropdownMenu
-                  className="service-editor__execution__action-btn__dropdown-btn"
-                  disabled={executionIsRunning}
-                  content={
-                    <MenuContent>
-                      <MenuContentItem
-                        className="service-editor__execution__action-btn__option"
-                        onClick={generatePlan}
-                      >
-                        Generate Plan
-                      </MenuContentItem>
-                      <MenuContentItem
-                        className="service-editor__execution__action-btn__option"
-                        onClick={debugPlanGeneration}
-                      >
-                        Debug
-                      </MenuContentItem>
-                    </MenuContent>
-                  }
-                  menuProps={{
-                    anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
-                    transformOrigin: { vertical: 'top', horizontal: 'right' },
-                  }}
-                >
-                  <CaretDownIcon />
-                </DropdownMenu>
-              </div>
-            )}
-            <div>
-              <DropdownMenu
-                className="service-editor__execution__advanced-btn"
-                disabled={executionIsRunning}
-                content={
-                  <MenuContent>
-                    <MenuContentItem
-                      className="service-editor__execution__advanced-btn__option"
-                      onClick={importQuery}
-                    >
-                      Import Query
-                    </MenuContentItem>
-                    <MenuContentItem
-                      className="service-editor__execution__advanced-btn__option"
-                      onClick={openQueryInLegendQuery}
-                      disabled={!applicationStore.config.queryApplicationUrl}
-                    >
-                      Create an Ad-hoc Query
-                    </MenuContentItem>
-                  </MenuContent>
-                }
-                menuProps={{
-                  anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
-                  transformOrigin: { vertical: 'top', horizontal: 'right' },
-                }}
-              >
-                <div className="service-editor__execution__advanced-btn__label">
-                  <MoreVerticalIcon className="service-editor__execution__advanced-btn__label__icon" />
+              ) : (
+                <>
+                  <button
+                    className="btn__dropdown-combo__label"
+                    onClick={runQuery}
+                    title="Run Query"
+                    disabled={executionIsRunning}
+                    tabIndex={-1}
+                  >
+                    <PlayIcon className="btn__dropdown-combo__label__icon" />
+                    <div className="btn__dropdown-combo__label__title">
+                      Run Query
+                    </div>
+                  </button>
+                  <DropdownMenu
+                    className="btn__dropdown-combo__dropdown-btn"
+                    disabled={executionIsRunning}
+                    content={
+                      <MenuContent>
+                        <MenuContentItem
+                          className="btn__dropdown-combo__option"
+                          onClick={generatePlan}
+                        >
+                          Generate Plan
+                        </MenuContentItem>
+                        <MenuContentItem
+                          className="btn__dropdown-combo__option"
+                          onClick={debugPlanGeneration}
+                        >
+                          Debug
+                        </MenuContentItem>
+                      </MenuContent>
+                    }
+                    menuProps={{
+                      anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+                      transformOrigin: { vertical: 'top', horizontal: 'right' },
+                    }}
+                  >
+                    <CaretDownIcon />
+                  </DropdownMenu>
+                </>
+              )}
+            </div>
+            <DropdownMenu
+              className="btn__dropdown-combo"
+              disabled={executionIsRunning}
+              content={
+                <MenuContent>
+                  <MenuContentItem
+                    className="btn__dropdown-combo__option"
+                    onClick={importQuery}
+                  >
+                    Import Query
+                  </MenuContentItem>
+                  <MenuContentItem
+                    className="btn__dropdown-combo__option"
+                    onClick={openQueryInLegendQuery}
+                    disabled={!applicationStore.config.queryApplicationUrl}
+                  >
+                    Create an Ad-hoc Query
+                  </MenuContentItem>
+                </MenuContent>
+              }
+              menuProps={{
+                anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+                transformOrigin: { vertical: 'top', horizontal: 'right' },
+              }}
+            >
+              <div className="btn__dropdown-combo__label">
+                <div className="btn__dropdown-combo__label__title">
                   Advanced
                 </div>
-                <div className="service-editor__execution__advanced-btn__icon">
-                  <CaretDownIcon />
-                </div>
-              </DropdownMenu>
-            </div>
+              </div>
+              <div className="btn__dropdown-combo__dropdown-btn">
+                <CaretDownIcon />
+              </div>
+            </DropdownMenu>
           </div>
         </div>
         <div className="panel__content property-mapping-editor__entry__container">
@@ -417,15 +417,7 @@ export const ServiceExecutionQueryEditor = observer(
               executionState.isOpeningQueryEditor || executionIsRunning
             }
           />
-          <div
-            className="service-execution-query-editor__content"
-            title="Double click to edit in query builder"
-            onDoubleClick={(event) => {
-              event.preventDefault();
-              event.stopPropagation();
-              editWithQueryBuilder()();
-            }}
-          >
+          <div className="service-execution-query-editor__content">
             <CodeEditor
               inputValue={queryState.lambdaString}
               isReadOnly={true}

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

@@ -225,6 +225,14 @@ const ServiceTestParameterEditor = observer(
     const type = bindingParamPair
       ? bindingParamPair.binding.contentType
       : paramState.varExpression.genericType?.value.rawType.name ?? 'unknown';
+    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;
 
     const openInPopUp = (): void => setShowPopUp(!showPopUp);
     const closePopUp = (): void => setShowPopUp(false);
@@ -232,7 +240,10 @@ const ServiceTestParameterEditor = observer(
       if (paramState.valueSpec instanceof PrimitiveInstanceValue) {
         instanceValue_setValue(
           paramState.valueSpec,
-          val,
+          paramState.varExpression.genericType?.value.rawType ===
+            PrimitiveType.BYTE
+            ? btoa(val)
+            : val,
           0,
           setupState.editorStore.changeDetectionState.observerContext,
         );
@@ -261,10 +272,7 @@ const ServiceTestParameterEditor = observer(
               <textarea
                 className="panel__content__form__section__textarea value-spec-editor__input"
                 spellCheck={false}
-                value={
-                  (paramState.valueSpec as PrimitiveInstanceValue)
-                    .values[0] as string
-                }
+                value={paramValue}
                 placeholder={
                   ((paramState.valueSpec as PrimitiveInstanceValue)
                     .values[0] as string) === ''

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

@@ -248,6 +248,9 @@ const buildRelationalDatabaseConnectionOption = (
         <div className="sql-playground__config__connection-selector__option__type">
           {connectionValue.type}
         </div>
+        <div className="sql-playground__config__connection-selector__option__path">
+          {connection.path}
+        </div>
       </div>
     ),
   };