@finos/legend-application-studio 28.16.5 → 28.16.6

package/src/components/editor/editor-group/connection-editor/RelationalDatabaseConnectionEditor.tsx

@@ -168,6 +168,7 @@ import { MapperPostProcessorEditor } from './post-processor-editor/MapperPostPro
 import { UnsupportedEditorPanel } from '../UnsupportedElementEditor.js';
 import type { MapperPostProcessorEditorState } from '../../../../stores/editor/editor-state/element-editor-state/connection/PostProcessorEditorState.js';
 import { prettyCONSTName, uniq } from '@finos/legend-shared';
+import { useApplicationStore } from '@finos/legend-application';
 
 export type RelationalDatabaseConnectionOption = {
   label: React.ReactNode;
@@ -201,6 +202,7 @@ const LocalH2DatasourceSpecificationEditor = observer(
     sourceSpec: LocalH2DatasourceSpecification;
     isReadOnly: boolean;
   }) => {
+    const applicationStore = useApplicationStore();
     const { sourceSpec, isReadOnly } = props;
     const [showPopUp, setShowPopUp] = useState(false);
     const openInPopUp = (): void => setShowPopUp(true);
@@ -213,7 +215,13 @@ const LocalH2DatasourceSpecificationEditor = observer(
         {showPopUp && (
           <div>
             <Dialog open={showPopUp} onClose={closePopUp}>
-              <Modal darkMode={true} className="editor-modal">
+              <Modal
+                darkMode={
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
+                className="editor-modal"
+              >
                 <ModalHeader title="test data setup SQL" />
                 <ModalBody className="modal__body__large">
                   <CodeEditor
@@ -229,7 +237,11 @@ const LocalH2DatasourceSpecificationEditor = observer(
                   />
                 </ModalBody>
                 <ModalFooter>
-                  <ModalFooterButton onClick={closePopUp} text="Close" />
+                  <ModalFooterButton
+                    onClick={closePopUp}
+                    text="Close"
+                    type="secondary"
+                  />
                 </ModalFooter>
               </Modal>
             </Dialog>
@@ -1105,6 +1117,7 @@ const RelationalConnectionStoreEditor = observer(
     isReadOnly: boolean;
   }) => {
     const { connectionValueState, isReadOnly } = props;
+    const applicationStore = connectionValueState.editorStore.applicationStore;
     const connection = connectionValueState.connection;
     // store
     const isStoreEmpty = connectionValueState.storeValidationResult;
@@ -1155,7 +1168,10 @@ const RelationalConnectionStoreEditor = observer(
               options={options}
               onChange={onStoreChange}
               value={selectedStore}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
               disabled={isReadOnly}
               hasError={isStoreEmpty}
             />
@@ -1605,6 +1621,7 @@ export const RelationalConnectionGeneralEditor = observer(
     const { connectionValueState, isReadOnly, hideHeader } = props;
     const connection = connectionValueState.connection;
     const editorStore = useEditorStore();
+    const applicationStore = editorStore.applicationStore;
     const plugins = editorStore.pluginManager.getApplicationPlugins();
     const databseTypeConfigs =
       connectionValueState.editorStore.graphState
@@ -1708,7 +1725,10 @@ export const RelationalConnectionGeneralEditor = observer(
                   options={dbTypes}
                   onChange={onTypeChange}
                   value={selectedDbType}
-                  darkMode={true}
+                  darkMode={
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightColorThemeEnabled
+                  }
                 />
               </PanelFormSection>
             </PanelContent>
@@ -1732,7 +1752,10 @@ export const RelationalConnectionGeneralEditor = observer(
                     options={dbTypes}
                     onChange={onTypeChange}
                     value={selectedDbType}
-                    darkMode={true}
+                    darkMode={
+                      !applicationStore.layoutService
+                        .TEMPORARY__isLightColorThemeEnabled
+                    }
                   />
                 </PanelFormSection>
                 <PanelFormBooleanField
@@ -1770,7 +1793,10 @@ export const RelationalConnectionGeneralEditor = observer(
                           value={selectedSourceSpec(
                             connection.datasourceSpecification,
                           )}
-                          darkMode={true}
+                          darkMode={
+                            !applicationStore.layoutService
+                              .TEMPORARY__isLightColorThemeEnabled
+                          }
                         />
                       </PanelFormSection>
                       <PanelDivider />
@@ -1804,7 +1830,10 @@ export const RelationalConnectionGeneralEditor = observer(
                           value={selectedAuth(
                             connection.authenticationStrategy,
                           )}
-                          darkMode={true}
+                          darkMode={
+                            !applicationStore.layoutService
+                              .TEMPORARY__isLightColorThemeEnabled
+                          }
                         />
                       </PanelFormSection>
                       <PanelDivider />

package/src/components/editor/editor-group/data-editor/EmbeddedDataEditor.tsx

@@ -174,6 +174,7 @@ export const DataElementReferenceDataEditor = observer(
     const dataElement =
       dataElementReferenceState.embeddedData.dataElement.value;
     const editorStore = dataElementReferenceState.editorStore;
+    const applicationStore = editorStore.applicationStore;
     const options =
       editorStore.graphManagerState.usableDataElements.map(buildElementOption);
     const selectedOption = buildElementOption(dataElement);
@@ -215,7 +216,10 @@ export const DataElementReferenceDataEditor = observer(
               options={options}
               onChange={onDataElementChange}
               value={selectedOption}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
             />
             <button
               className="btn--dark btn--sm data-element-reference-editor__value-btn"
@@ -255,6 +259,7 @@ export const ModelEmbeddedDataEditor = observer(
         option.value.path,
     });
     const editorStore = modelStoreDataState.editorStore;
+    const applicationStore = editorStore.applicationStore;
     const _class = modelData.model.value;
     const classOptions = editorStore.graphManagerState.usableClasses.map(
       (_cl) => ({
@@ -293,10 +298,15 @@ export const ModelEmbeddedDataEditor = observer(
               options={classOptions}
               onChange={changeClass}
               value={selectedClassOption}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
               filterOption={elementFilterOption}
               formatOptionLabel={getPackageableElementOptionFormatter({
-                darkMode: true,
+                darkMode:
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled,
               })}
             />
           </div>

package/src/components/editor/editor-group/data-editor/RelationalCSVDataEditor.tsx

@@ -64,6 +64,7 @@ export interface TableOption {
 const RelationalTableIdentifierEditor = observer(
   (props: { dataState: RelationalCSVDataState; isReadOnly: boolean }) => {
     const { isReadOnly, dataState } = props;
+    const applicationStore = dataState.editorStore.applicationStore;
     const resolvedDb = dataState.database;
     const existingDataTable = dataState.tableToEdit;
 
@@ -168,7 +169,10 @@ const RelationalTableIdentifierEditor = observer(
                       onChange={onTableChange}
                       value={selectedTable}
                       isClearable={false}
-                      darkMode={true}
+                      darkMode={
+                        !applicationStore.layoutService
+                          .TEMPORARY__isLightColorThemeEnabled
+                      }
                     />
                   </div>
                 </div>
@@ -240,6 +244,7 @@ const RelationalCSVTableContextMenu = observer(
 const ImportModal = observer(
   (props: { dataState: RelationalCSVDataState; isReadOnly: boolean }) => {
     const { isReadOnly, dataState } = props;
+    const applicationStore = dataState.editorStore.applicationStore;
     const [csv, setCSV] = useState('');
     const closeModal = (): void => dataState.closeCSVModal();
     const importVal = (): void => {
@@ -259,7 +264,12 @@ const ImportModal = observer(
         classes={{ container: 'search-modal__container' }}
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
-        <Modal darkMode={true} className="relational-data-editor__import">
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="relational-data-editor__import"
+        >
           <ModalHeader title="Import CSV" />
           <ModalBody>
             <textarea

package/src/components/editor/editor-group/diff-editor/EntityChangeConflictEditor.tsx

@@ -743,7 +743,10 @@ export const EntityChangeConflictEditor = observer(
                 currentMode,
                 conflictEditorState.getModeComparisonViewInfo(currentMode),
               )}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
             />
           </div>
         </div>

package/src/components/editor/editor-group/element-generation-editor/FileGenerationEditor.tsx

@@ -420,6 +420,7 @@ const GenerationEnumPropertyEditor = observer(
     getConfigValue: (name: string) => unknown;
   }) => {
     const { property, getConfigValue, isReadOnly, update } = props;
+    const applicationStore = useApplicationStore();
     const getEnumLabel = (_enum: string): string =>
       isValidFullPath(_enum)
         ? resolvePackagePathAndElementName(_enum)[1]
@@ -451,7 +452,9 @@ const GenerationEnumPropertyEditor = observer(
           value={{ label: getEnumLabel(value), value }}
           isClearable={true}
           escapeClearsValue={true}
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           disable={isReadOnly}
         />
       </div>

package/src/components/editor/editor-group/end-to-end-flow-editor/ConnectionToQueryWorkflowEditor.tsx

@@ -134,7 +134,9 @@ export const QueryConnectionDatabaseBuilderEditor = observer(
           </button>
         </div>
         <Modal
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           className="query-connection-database-builder-editor__modal"
         >
           <div className="query-connection-database-builder-editor__modal__content">
@@ -274,7 +276,9 @@ export const QueryConnectionModelsEditor = observer(
           <PanelHeader title="Model Builder" />
         </div>
         <Modal
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           className="query-connection-connection-model-editor__modal"
         >
           <div className="query-connection-connection-model-editor__modal">

package/src/components/editor/editor-group/external-format-editor/DSL_ExternalFormat_BindingElementEditor.tsx

@@ -186,6 +186,7 @@ const BindingGeneralEditor = observer(
   (props: { editorState: BindingEditorState; isReadOnly: boolean }) => {
     const { editorState, isReadOnly } = props;
     const editorStore = useEditorStore();
+    const applicationStore = editorStore.applicationStore;
     const binding = editorState.binding;
     const schemaSets = Array.from(
       editorStore.graphManagerState.graph.allOwnElements,
@@ -246,7 +247,10 @@ const BindingGeneralEditor = observer(
             onChange={onContentTypeChange}
             value={selectedContentType}
             placeholder="Choose a content type"
-            darkMode={true}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
           />
         </div>
         <div className="binding-general-editor__section__header__label">
@@ -262,7 +266,10 @@ const BindingGeneralEditor = observer(
             value={selectedSchemaSet}
             isClearable={true}
             placeholder="Choose a schema set"
-            darkMode={true}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
           />
         </div>
         <div className="binding-general-editor__section__header__label">
@@ -278,7 +285,10 @@ const BindingGeneralEditor = observer(
             value={selectedSchemaId}
             isClearable={true}
             placeholder="Choose a schema ID"
-            darkMode={true}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
           />
         </div>
       </div>

package/src/components/editor/editor-group/external-format-editor/DSL_ExternalFormat_SchemaSetElementEditor.tsx

@@ -36,6 +36,7 @@ import {
   ModalBody,
   ModalFooter,
   ModalHeader,
+  ModalFooterButton,
 } from '@finos/legend-art';
 import { ExternalFormatSchema as Schema } from '@finos/legend-graph';
 import { flowResult } from 'mobx';
@@ -67,6 +68,7 @@ const SchemaLoader = observer(
     schemaSetEditorState: InnerSchemaSetEditorState | SchemaSetEditorState;
   }) => {
     const { schemaSetEditorState } = props;
+    const applicationStore = schemaSetEditorState.editorStore.applicationStore;
     const importState = schemaSetEditorState.importSchemaContentState;
     const onClose = (): void => importState.closeModal();
     const onChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
@@ -88,7 +90,12 @@ const SchemaLoader = observer(
           appear: false, // disable transition
         }}
       >
-        <Modal darkMode={true} className="modal--scrollable patch-loader">
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="modal--scrollable patch-loader"
+        >
           <ModalHeader title="Schema Content Loader" />
           <ModalBody>
             <PanelLoadingIndicator
@@ -135,13 +142,12 @@ const SchemaLoader = observer(
             )}
           </ModalBody>
           <ModalFooter>
-            <button
-              className="btn btn--dark blocking-alert__action--standard"
+            <ModalFooterButton
+              className="blocking-alert__action--standard"
+              text="Import Schemas"
               onClick={importSchemas}
               disabled={!importState.files?.length}
-            >
-              Import Schemas
-            </button>
+            />
           </ModalFooter>
         </Modal>
       </Dialog>

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

@@ -372,7 +372,10 @@ const ParameterBasicEditor = observer(
               value={selectedType}
               placeholder="Choose a type..."
               filterOption={filterOption}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
             />
           )}
           {!isReadOnly && !isEditingType && (
@@ -567,7 +570,10 @@ const ReturnTypeEditor = observer(
             value={selectedType}
             placeholder="Choose a type..."
             filterOption={filterOption}
-            darkMode={true}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
           />
         )}
         {!isReadOnly && !isEditingType && (
@@ -814,7 +820,12 @@ const FunctionPromoteEditor = observer(
         classes={{ container: 'search-modal__container' }}
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
-        <Modal darkMode={true} className="function-promote-editor">
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="function-promote-editor"
+        >
           <ModalBody className="function-promote-editor__content">
             <div className="function-promote-editor__content__prompt">
               Select any one of the following activator types to continue
@@ -841,11 +852,12 @@ const FunctionPromoteEditor = observer(
               className="function-promote-editor__action-btn"
               onClick={closeModal}
               title="Close"
+              type="secondary"
             >
               Cancel
             </ModalFooterButton>
             <ModalFooterButton
-              className=" function-promote-editor__action-btn function-promote-editor__action-btn--primitive"
+              className="function-promote-editor__action-btn function-promote-editor__action-btn--primitive"
               disabled={
                 !activatorPromoteState.activateType ||
                 !validateFunctionActivator(activatorPromoteState.activateType)

package/src/components/editor/editor-group/function-activator/HostedServiceFunctionActivatorEditor.tsx

@@ -444,7 +444,10 @@ export const HostedServiceFunctionActivatorEditor = observer(() => {
                     options={OWNERSHIP_OPTIONS}
                     onChange={onOwnershipChange}
                     value={editorState.selectedOwnership}
-                    darkMode={true}
+                    darkMode={
+                      !applicationStore.layoutService
+                        .TEMPORARY__isLightColorThemeEnabled
+                    }
                   />
                 </div>
                 {ownership instanceof DeploymentOwner && (

package/src/components/editor/editor-group/function-activator/SnowflakeAppFunctionActivatorEditor.tsx

@@ -223,7 +223,10 @@ export const SnowflakeAppFunctionActivatorEditor = observer(() => {
                         )
                       : undefined
                   }
-                  darkMode={true}
+                  darkMode={
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightColorThemeEnabled
+                  }
                   placeholder="Choose a connection"
                   filterOption={connectionFilterOption}
                 />

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>