@finos/legend-application-studio 28.16.3 → 28.16.6

package/src/components/editor/editor-group/function-activator/testable/FunctionTestableEditor.tsx

@@ -515,6 +515,7 @@ const FunctionTestParameterEditor = observer(
 const NewParameterModal = observer(
   (props: { functionTestState: FunctionTestState; isReadOnly: boolean }) => {
     const { functionTestState, isReadOnly } = props;
+    const applicationStore = functionTestState.editorStore.applicationStore;
     const currentOption = {
       value: functionTestState.newParameterValueName,
       label: functionTestState.newParameterValueName,
@@ -550,7 +551,10 @@ const NewParameterModal = observer(
             onChange={onChange}
             value={currentOption}
             escapeClearsValue={true}
-            darkMode={true}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
             disable={isReadOnly}
           />
           <div className="search-modal__actions">
@@ -793,6 +797,7 @@ const FunctionTestItem = observer(
 const CreateTestModal = observer(
   (props: { functionSuiteState: FunctionTestSuiteState }) => {
     const { functionSuiteState } = props;
+    const applicationStore = functionSuiteState.editorStore.applicationStore;
     const suite = functionSuiteState.suite;
     // test name
     const [id, setId] = useState<string | undefined>(undefined);
@@ -816,7 +821,11 @@ const CreateTestModal = observer(
         classes={{ container: 'search-modal__container' }}
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
-        <Modal darkMode={true}>
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+        >
           <ModalHeader>
             <ModalTitle title="Create Function Test" />
           </ModalHeader>
@@ -835,7 +844,7 @@ const CreateTestModal = observer(
               onClick={create}
               text="Create"
             />
-            <ModalFooterButton onClick={close} text="Close" />
+            <ModalFooterButton onClick={close} text="Close" type="secondary" />
           </ModalFooter>
         </Modal>
       </Dialog>
@@ -988,8 +997,10 @@ const FunctionTestSuiteEditor = observer(
 );
 
 const CreateFucntionTestSuiteModal = observer(
-  (props: { functiontestableEditorState: FunctionTestableState }) => {
-    const { functiontestableEditorState } = props;
+  (props: { functionTestableEditorState: FunctionTestableState }) => {
+    const { functionTestableEditorState } = props;
+    const applicationStore =
+      functionTestableEditorState.editorStore.applicationStore;
     const inputRef = useRef<HTMLInputElement>(null);
     const handleEnter = (): void => inputRef.current?.focus();
     const [suiteName, setSuiteName] = useState<string | undefined>(undefined);
@@ -997,10 +1008,10 @@ const CreateFucntionTestSuiteModal = observer(
     const isValid = suiteName && testName;
 
     // model
-    const close = (): void => functiontestableEditorState.setCreateSuite(false);
+    const close = (): void => functionTestableEditorState.setCreateSuite(false);
     const create = (): void => {
       if (suiteName && testName) {
-        functiontestableEditorState.createSuite(suiteName, testName);
+        functionTestableEditorState.createSuite(suiteName, testName);
       }
     };
     return (
@@ -1013,7 +1024,11 @@ const CreateFucntionTestSuiteModal = observer(
         classes={{ container: 'search-modal__container' }}
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
-        <Modal darkMode={true}>
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+        >
           <ModalHeader>
             <ModalTitle title="Create Mapping Test Suite" />
           </ModalHeader>
@@ -1051,7 +1066,7 @@ const CreateFucntionTestSuiteModal = observer(
               onClick={create}
               text="Create"
             />
-            <ModalFooterButton onClick={close} text="Close" />
+            <ModalFooterButton onClick={close} text="Close" type="secondary" />
           </ModalFooter>
         </Modal>
       </Dialog>
@@ -1187,7 +1202,7 @@ export const FunctionTestableEditor = observer(
           </ResizablePanelGroup>
           {functionTestableState.createSuiteModal && (
             <CreateFucntionTestSuiteModal
-              functiontestableEditorState={functionTestableState}
+              functionTestableEditorState={functionTestableState}
             />
           )}
           {functionTestableState.testableComponentToRename && (

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

@@ -88,6 +88,7 @@ const EnumerationMappingSourceSelectorModal = observer(
   }) => {
     const { enumerationMapping, closeModal, open } = props;
     const editorStore = useEditorStore();
+    const applicationStore = editorStore.applicationStore;
     const options = [PrimitiveType.INTEGER, PrimitiveType.STRING]
       .map(buildElementOption)
       .concat(
@@ -140,7 +141,12 @@ const EnumerationMappingSourceSelectorModal = observer(
           },
         }}
       >
-        <Modal className="search-modal" darkMode={true}>
+        <Modal
+          className="search-modal"
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+        >
           <ModalTitle title="Choose a Source" />
           <CustomSelectorInput
             ref={sourceSelectorRef}
@@ -149,7 +155,10 @@ const EnumerationMappingSourceSelectorModal = observer(
             value={selectedSourceType}
             placeholder="Choose a type..."
             isClearable={true}
-            darkMode={true}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
             filterOption={filterOption}
             formatOptionLabel={getPackageableElementOptionFormatter({})}
           />

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

@@ -236,7 +236,12 @@ export const InstanceSetImplementationSourceSelectorModal = observer(
           },
         }}
       >
-        <Modal className="modal search-modal" darkMode={true}>
+        <Modal
+          className="modal search-modal"
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+        >
           <ModalTitle title="Choose a Source" />
           <CustomSelectorInput
             ref={sourceSelectorRef}
@@ -244,7 +249,10 @@ export const InstanceSetImplementationSourceSelectorModal = observer(
             onChange={changeSourceType}
             value={selectedSourceType}
             placeholder="Choose a source..."
-            darkMode={true}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
             isClearable={true}
             filterOption={sourceFilterOption}
             formatOptionLabel={formatSourceOptionLabel}

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

@@ -122,6 +122,7 @@ export const ClassMappingSelectorModal = observer(
       classMappingFilterFn,
     } = props;
     const editorStore = useEditorStore();
+    const applicationStore = editorStore.applicationStore;
 
     // Class mapping selector
     const classMappingSelectorRef = useRef<SelectComponent>(null);
@@ -172,7 +173,10 @@ export const ClassMappingSelectorModal = observer(
             placeholder="Choose a class mapping..."
             filterOption={filterOption}
             isClearable={true}
-            darkMode={true}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
           />
         </Modal>
       </Dialog>

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

@@ -135,6 +135,7 @@ const CreateTestSuiteModal = observer(
     const mappingEditorState = mappingTestableState.mappingEditorState;
     const mapping = mappingEditorState.mapping;
     const editorStore = mappingEditorState.editorStore;
+    const applicationStore = editorStore.applicationStore;
     // Class mapping selector
     const compatibleClasses = getMappingCompatibleClasses(
       mapping,
@@ -192,7 +193,11 @@ const CreateTestSuiteModal = observer(
         classes={{ container: 'search-modal__container' }}
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
-        <Modal darkMode={true}>
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+        >
           <ModalHeader>
             <ModalTitle title="Create Mapping Test Suite" />
           </ModalHeader>
@@ -241,7 +246,10 @@ const CreateTestSuiteModal = observer(
                 onChange={changeClassOption}
                 value={selectedClassOption}
                 formatOptionLabel={getPackageableElementOptionFormatter({})}
-                darkMode={true}
+                darkMode={
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
                 placeholder="Choose a class..."
                 isClearable={true}
               />
@@ -260,7 +268,7 @@ const CreateTestSuiteModal = observer(
               onClick={create}
               text="Create"
             />
-            <ModalFooterButton onClick={close} text="Close" />
+            <ModalFooterButton onClick={close} text="Close" type="secondary" />
           </ModalFooter>
         </Modal>
       </Dialog>
@@ -276,6 +284,7 @@ const CreateTestModal = observer(
     const testData = suite.tests.filter(filterByType(MappingTest))[0]
       ?.storeTestData[0];
     const editorStore = mappingSuiteState.editorStore;
+    const applicationStore = editorStore.applicationStore;
     // test name
     const [id, setId] = useState<string | undefined>(undefined);
     const isValid = id && !id.includes(' ');
@@ -327,7 +336,11 @@ const CreateTestModal = observer(
         classes={{ container: 'search-modal__container' }}
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
-        <Modal darkMode={true}>
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+        >
           <ModalHeader>
             <ModalTitle title="Create Mapping Test" />
           </ModalHeader>
@@ -352,7 +365,10 @@ const CreateTestModal = observer(
                   options={mappedClassOptions}
                   onChange={changeClassOption}
                   value={selectedClassOption}
-                  darkMode={true}
+                  darkMode={
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightColorThemeEnabled
+                  }
                   placeholder="Choose a class..."
                   isClearable={true}
                 />
@@ -365,7 +381,7 @@ const CreateTestModal = observer(
               onClick={create}
               text="Create"
             />
-            <ModalFooterButton onClick={close} text="Close" />
+            <ModalFooterButton onClick={close} text="Close" type="secondary" />
           </ModalFooter>
         </Modal>
       </Dialog>
@@ -383,6 +399,7 @@ const CreateStoreTestDataModal = observer(
     const { mappingTestState } = props;
     const mappingTestableDataState = mappingTestState.dataState;
     const editorStore = mappingTestableDataState.editorStore;
+    const applicationStore = editorStore.applicationStore;
     const mapping = mappingTestableDataState.mappingTestableState.mapping;
     const isReadOnly =
       mappingTestableDataState.mappingTestableState.mappingEditorState
@@ -502,7 +519,12 @@ const CreateStoreTestDataModal = observer(
         classes={{ container: 'search-modal__container' }}
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
-        <Modal darkMode={true} className="search-modal">
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="search-modal"
+        >
           <ModalTitle title="Create Store Test Data" />
           <ModalBody>
             <div className="panel__content__form__section">
@@ -515,7 +537,10 @@ const CreateStoreTestDataModal = observer(
                 onChange={changeStoreOption}
                 formatOptionLabel={getPackageableElementOptionFormatter({})}
                 value={selectedStoreOption}
-                darkMode={true}
+                darkMode={
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
                 placeholder="Choose a store..."
                 isClearable={true}
               />
@@ -535,7 +560,10 @@ const CreateStoreTestDataModal = observer(
                   onChange={onEmbeddedTypeChange}
                   value={embeddedDataTypeOption}
                   isClearable={false}
-                  darkMode={true}
+                  darkMode={
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightColorThemeEnabled
+                  }
                 />
               </div>
             </div>
@@ -551,7 +579,10 @@ const CreateStoreTestDataModal = observer(
                     options={dataElementOptions}
                     onChange={onDataElementChange}
                     value={selectedDataElement}
-                    darkMode={true}
+                    darkMode={
+                      !applicationStore.layoutService
+                        .TEMPORARY__isLightColorThemeEnabled
+                    }
                   />
                 </div>
               </div>
@@ -563,7 +594,7 @@ const CreateStoreTestDataModal = observer(
               onClick={create}
               text="Create"
             />
-            <ModalFooterButton onClick={close} text="Close" />
+            <ModalFooterButton onClick={close} text="Close" type="secondary" />
           </ModalFooter>
         </Modal>
       </Dialog>

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

@@ -59,6 +59,7 @@ interface ClassMappingSubTypeOption {
 
 export const NewMappingElementModal = observer(() => {
   const editorStore = useEditorStore();
+  const applicationStore = editorStore.applicationStore;
   const mappingEditorState =
     editorStore.tabManagerState.getCurrentEditorState(MappingEditorState);
   const spec = mappingEditorState.newMappingElementSpec;
@@ -238,7 +239,10 @@ export const NewMappingElementModal = observer(() => {
               formatOptionLabel={getPackageableElementOptionFormatter({})}
               placeholder="Choose a target"
               isClearable={true}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
             />
           )}
           {showId && (
@@ -266,7 +270,10 @@ export const NewMappingElementModal = observer(() => {
                 options={classMappingTypeOptions}
                 onChange={changeClassMappingType}
                 value={classMappingType}
-                darkMode={true}
+                darkMode={
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
                 placeholder="Choose a class mapping type"
               />
             </>

package/src/components/editor/editor-group/mapping-editor/legacy/MappingTestMigrationTool.tsx

@@ -44,6 +44,7 @@ export const MappingTestMigrationTool = observer(
     migrationState: MappingTestMigrationState;
   }) => {
     const { mappingEditorState, migrationState } = props;
+    const applicationStore = mappingEditorState.editorStore.applicationStore;
     const isLoading =
       migrationState.confirmationState?.calculatingDiffs.isInProgress;
     const close = (): void => {
@@ -69,7 +70,9 @@ export const MappingTestMigrationTool = observer(
         }}
       >
         <Modal
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           className={clsx('editor-modal query-builder-text-mode__modal')}
         >
           <ModalHeader title="Migrate Legacy Tests"></ModalHeader>

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

@@ -595,6 +595,7 @@ const ProjectDependencyReportModal = observer(
     tab: DEPENDENCY_REPORT_TAB;
   }) => {
     const { dependencyEditorState } = props;
+    const applicationStore = dependencyEditorState.editorStore.applicationStore;
     const reportTab = dependencyEditorState.reportTab;
     const tabs = Object.values(DEPENDENCY_REPORT_TAB);
     const changeTab =
@@ -642,7 +643,12 @@ const ProjectDependencyReportModal = observer(
           paper: 'editor-modal__content',
         }}
       >
-        <Modal darkMode={true} className="editor-modal">
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="editor-modal"
+        >
           <ModalHeader title="Dependency Explorer" />
           <ModalBody>
             <div className="panel project-dependency-report">
@@ -731,7 +737,11 @@ const ProjectDependencyReportModal = observer(
             </div>
           </ModalBody>
           <ModalFooter>
-            <ModalFooterButton onClick={closeModal} text="Close" />
+            <ModalFooterButton
+              onClick={closeModal}
+              text="Close"
+              type="secondary"
+            />
           </ModalFooter>
         </Modal>
       </Dialog>
@@ -897,7 +907,9 @@ const ProjectVersionDependencyEditor = observer(
           value={selectedProjectOption}
           isLoading={configState.fetchingProjectVersionsState.isInProgress}
           formatOptionLabel={formatOptionLabel}
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
         />
         <CustomSelectorInput
           className="project-dependency-editor__selector"
@@ -918,7 +930,9 @@ const ProjectVersionDependencyEditor = observer(
               .fetchingProjectVersionsState.isInProgress ||
             fetchSelectedProjectVersionsStatus.isInProgress
           }
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
         />
         <DropdownMenu
           className="project-dependency-editor__visit-project-btn__dropdown-trigger btn--medium"

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

@@ -213,7 +213,10 @@ export const BulkServiceRegistrationEditor = observer(() => {
               options={envOptions}
               onChange={onServerEnvChange}
               value={selectedEnvOption}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
             />
           </div>
           <div className="panel__content__form__section">
@@ -228,7 +231,10 @@ export const BulkServiceRegistrationEditor = observer(() => {
               options={serviceTypesOptions}
               onChange={onServiceTypeSelectionChange}
               value={selectedServiceType}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
             />
           </div>
           {globalBulkServiceRegistrationState.serviceConfigState
@@ -294,7 +300,10 @@ export const BulkServiceRegistrationEditor = observer(() => {
               }
               onChange={onVersionSelectionChange}
               value={selectedVersion}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
               disabled={
                 globalBulkServiceRegistrationState.serviceConfigState
                   .versionOptions === undefined

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

@@ -372,7 +372,10 @@ const ServiceGeneralEditor = observer(() => {
                 options={OWNERSHIP_OPTIONS}
                 onChange={onOwnershipChange}
                 value={serviceState.selectedOwnership}
-                darkMode={true}
+                darkMode={
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
               />
             </div>
             {ownership instanceof DeploymentOwnership && (

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

@@ -89,6 +89,7 @@ const PureExecutionContextConfigurationEditor = observer(
     const { executionContextState, pureExecutionState } = props;
     const executionContext = executionContextState.executionContext;
     const editorStore = useEditorStore();
+    const applicationStore = editorStore.applicationStore;
     const serviceState =
       editorStore.tabManagerState.getCurrentEditorState(ServiceEditorState);
     const isReadOnly = serviceState.isReadOnly;
@@ -275,7 +276,10 @@ const PureExecutionContextConfigurationEditor = observer(
                 options={mappingOptions}
                 onChange={onMappingSelectionChange}
                 value={selectedMappingOption}
-                darkMode={true}
+                darkMode={
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
                 hasError={isMappingEmpty}
               />
               <button
@@ -297,7 +301,10 @@ const PureExecutionContextConfigurationEditor = observer(
                 options={runtimeOptions}
                 onChange={onRuntimeSelectionChange}
                 value={selectedRuntimeOption}
-                darkMode={true}
+                darkMode={
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
               />
               {!isRuntimePointer && (
                 <button
@@ -341,6 +348,7 @@ export const ChangeExecutionModal = observer(
     isReadOnly: boolean;
   }) => {
     const { executionState, isReadOnly } = props;
+    const applicationStore = executionState.editorStore.applicationStore;
     const closeModal = (): void => executionState.setShowChangeExecModal(false);
     const isChangingToMulti =
       executionState instanceof SingleServicePureExecutionState;
@@ -394,7 +402,10 @@ export const ChangeExecutionModal = observer(
             onChange={_onChange}
             value={currentOption}
             escapeClearsValue={true}
-            darkMode={true}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
             disable={isReadOnly}
           />
         );

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

@@ -30,6 +30,7 @@ import {
   Modal,
   ModalBody,
   ModalFooter,
+  ModalFooterButton,
   ModalHeader,
 } from '@finos/legend-art';
 import {
@@ -72,6 +73,7 @@ import { ServiceEditorState } from '../../../../stores/editor/editor-state/eleme
 const ServiceExecutionResultViewer = observer(
   (props: { executionState: ServicePureExecutionState }) => {
     const { executionState } = props;
+    const applicationStore = executionState.editorStore.applicationStore;
     // execution
     const executionResultText = executionState.executionResultText;
     const closeExecutionResultViewer = (): void =>
@@ -87,7 +89,12 @@ const ServiceExecutionResultViewer = observer(
           paper: 'editor-modal__content',
         }}
       >
-        <Modal darkMode={true} className="editor-modal">
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="editor-modal"
+        >
           <ModalHeader title="Execution Result" />
           <ModalBody>
             <CodeEditor
@@ -97,12 +104,12 @@ const ServiceExecutionResultViewer = observer(
             />
           </ModalBody>
           <ModalFooter>
-            <button
-              className="btn modal__footer__close-btn btn--dark"
+            <ModalFooterButton
+              className="modal__footer__close-btn"
               onClick={closeExecutionResultViewer}
-            >
-              Close
-            </button>
+              text="Close"
+              type="secondary"
+            />
           </ModalFooter>
         </Modal>
       </Dialog>

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

@@ -206,7 +206,10 @@ export const ServiceRegistrationEditor = observer(() => {
               options={envOptions}
               onChange={onServerEnvChange}
               value={selectedEnvOption}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
             />
           </div>
           <div className="panel__content__form__section">
@@ -221,7 +224,10 @@ export const ServiceRegistrationEditor = observer(() => {
               options={serviceTypesOptions}
               onChange={onServiceTypeSelectionChange}
               value={selectedServiceType}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
             />
           </div>
           {registrationState.serviceExecutionMode ===
@@ -331,7 +337,10 @@ export const ServiceRegistrationEditor = observer(() => {
               options={registrationState.versionOptions ?? []}
               onChange={onVersionSelectionChange}
               value={selectedVersion}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
               disabled={registrationState.versionOptions === undefined}
               placeholder={versionPlaceholder}
               isLoading={