@finos/legend-application-studio 28.16.3 → 28.16.6

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

@@ -97,6 +97,7 @@ export const RowIdentifierEditor = observer(
     rowIdentifierState: RowIdentifierState;
   }) => {
     const { tableRowIdentifierState, rowIdentifierState } = props;
+    const applicationStore = useApplicationStore();
     const columnOptions = tableRowIdentifierState.table.columns
       .filter(filterByType(Column))
       .map((_c) => ({
@@ -147,7 +148,10 @@ export const RowIdentifierEditor = observer(
 
               value: rowIdentifierState.column,
             }}
-            darkMode={true}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
           />
           <BasicValueSpecificationEditor
             valueSpecification={rowIdentifierState.value}
@@ -195,6 +199,7 @@ export const TableRowIdentifierEditor = observer(
     tableRowIdentifierState: TableRowIdentifierState;
   }) => {
     const { connectionTestDataState, tableRowIdentifierState } = props;
+    const applicationStore = useApplicationStore();
     const tables = connectionTestDataState.getAvailableTables();
     const tableOptions = tables.map((_t) => ({
       label: `${_t.schema.name}.${_t.name}`,
@@ -232,7 +237,10 @@ export const TableRowIdentifierEditor = observer(
 
               value: tableRowIdentifierState.table,
             }}
-            darkMode={true}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
           />
         </div>
         <div className="panel__content__form__section">
@@ -298,7 +306,9 @@ export const SeedDataInputModal = observer(
         }}
       >
         <Modal
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           className="editor-modal lambda-parameter-values__modal"
         >
           <ModalHeader title="Create Seed Data Input (BETA)" />
@@ -322,7 +332,11 @@ export const SeedDataInputModal = observer(
             </button>
           </ModalBody>
           <ModalFooter>
-            <ModalFooterButton onClick={closeModal} text="Close" />
+            <ModalFooterButton
+              onClick={closeModal}
+              text="Close"
+              type="secondary"
+            />
             <ModalFooterButton onClick={generateWithSeedData} text="Generate" />
           </ModalFooter>
         </Modal>
@@ -335,6 +349,7 @@ export const UseDataElementModal = observer(
   (props: { connectionTestDataState: ConnectionTestDataState }) => {
     const { connectionTestDataState } = props;
     const editorStore = connectionTestDataState.editorStore;
+    const applicationStore = editorStore.applicationStore;
     const useSharedModal = connectionTestDataState.useSharedModal;
     const closeModal = (): void =>
       connectionTestDataState.setUseSharedModal(false);
@@ -373,7 +388,12 @@ export const UseDataElementModal = observer(
         classes={{ container: 'search-modal__container' }}
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
-        <Modal darkMode={true} className="service-test-data-modal">
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="service-test-data-modal"
+        >
           <ModalBody>
             <div className="panel__content__form__section">
               <div className="panel__content__form__section__header__label">
@@ -386,7 +406,10 @@ export const UseDataElementModal = observer(
                   options={dataElementOptions}
                   onChange={onDataElementChange}
                   value={selectedDataElement}
-                  darkMode={true}
+                  darkMode={
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightColorThemeEnabled
+                  }
                 />
               </div>
             </div>
@@ -689,6 +712,7 @@ export const NewConnectionDataModal = observer(
   (props: { testDataState: ServiceTestDataState }) => {
     const { testDataState } = props;
     const editorStore = useEditorStore();
+    const applicationStore = editorStore.applicationStore;
     const dataElementOptions =
       editorStore.graphManagerState.usableDataElements.map(buildElementOption);
     const newConnectionState = testDataState.newConnectionDataState;
@@ -804,7 +828,10 @@ export const NewConnectionDataModal = observer(
                   onChange={onConnectionSelectionChange}
                   value={selectedConnection}
                   isClearable={false}
-                  darkMode={true}
+                  darkMode={
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightColorThemeEnabled
+                  }
                 />
               </div>
             </div>
@@ -822,7 +849,10 @@ export const NewConnectionDataModal = observer(
                   onChange={onEmbeddedTypeChange}
                   value={selectedEmbeddedType}
                   isClearable={false}
-                  darkMode={true}
+                  darkMode={
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightColorThemeEnabled
+                  }
                 />
               </div>
             </div>
@@ -838,23 +868,23 @@ export const NewConnectionDataModal = observer(
                     options={dataElementOptions}
                     onChange={onDataElementChange}
                     value={selectedDataElement}
-                    darkMode={true}
+                    darkMode={
+                      !applicationStore.layoutService
+                        .TEMPORARY__isLightColorThemeEnabled
+                    }
                   />
                 </div>
               </div>
             )}
           </ModalBody>
           <ModalFooter>
-            <button
-              type="button" // prevent this toggler being activated on form submission
-              className="btn btn--dark"
+            <ModalFooterButton
               onClick={closeModal}
-            >
-              Cancel
-            </button>
-            <button className="btn btn--dark" disabled={isDisabled}>
-              Create
-            </button>
+              text="Cancel"
+              type="secondary"
+              preventFormSubmit={true} // prevent this toggler being activated on form submission
+            />
+            <ModalFooterButton text="Create" disabled={isDisabled} />
           </ModalFooter>
         </form>
       </Dialog>

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

@@ -88,6 +88,7 @@ import {
 export const NewParameterModal = observer(
   (props: { setupState: ServiceTestSetupState; isReadOnly: boolean }) => {
     const { setupState, isReadOnly } = props;
+    const applicationStore = setupState.editorStore.applicationStore;
     const currentOption = {
       value: setupState.newParameterValueName,
       label: setupState.newParameterValueName,
@@ -122,7 +123,10 @@ export const NewParameterModal = observer(
             onChange={onChange}
             value={currentOption}
             escapeClearsValue={true}
-            darkMode={true}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
             disable={isReadOnly}
           />
           <div className="search-modal__actions">
@@ -296,6 +300,7 @@ const ServiceTestSetupEditor = observer(
   (props: { serviceTestState: ServiceTestState }) => {
     const { serviceTestState } = props;
     const setupState = serviceTestState.setupState;
+    const applicationStore = setupState.editorStore.applicationStore;
     const test = serviceTestState.test;
     const format = test.serializationFormat;
     const selectedSerializationFormat = setupState.getSelectedFormatOption();
@@ -365,7 +370,10 @@ const ServiceTestSetupEditor = observer(
                       value={selectedSerializationFormat}
                       isClearable={true}
                       escapeClearsValue={true}
-                      darkMode={true}
+                      darkMode={
+                        !applicationStore.layoutService
+                          .TEMPORARY__isLightColorThemeEnabled
+                      }
                       disable={isReadOnly}
                     />
                   </div>
@@ -386,7 +394,10 @@ const ServiceTestSetupEditor = observer(
                         value={selectedKeys}
                         isClearable={true}
                         escapeClearsValue={true}
-                        darkMode={true}
+                        darkMode={
+                          !applicationStore.layoutService
+                            .TEMPORARY__isLightColorThemeEnabled
+                        }
                         isMulti={true}
                         disable={isReadOnly}
                         placeholder="Choose keys..."

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

@@ -82,6 +82,7 @@ import {
   BasicValueSpecificationEditor,
   buildDefaultInstanceValue,
 } from '@finos/legend-query-builder';
+import { useApplicationStore } from '@finos/legend-application';
 
 export const SharedDataElementModal = observer(
   (props: {
@@ -92,6 +93,7 @@ export const SharedDataElementModal = observer(
     close: () => void;
   }) => {
     const { filterBy, isReadOnly, close, editorStore, handler } = props;
+    const applicationStore = editorStore.applicationStore;
     const dataElements =
       editorStore.graphManagerState.graph.dataElements.filter((e) =>
         filterBy ? filterBy(e) : true,
@@ -123,7 +125,12 @@ export const SharedDataElementModal = observer(
         classes={{ container: 'search-modal__container' }}
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
-        <Modal darkMode={true} className="service-test-data-modal">
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="service-test-data-modal"
+        >
           <ModalBody>
             <div className="panel__content__form__section">
               <div className="panel__content__form__section__header__label">
@@ -137,7 +144,10 @@ export const SharedDataElementModal = observer(
                   onChange={onDataElementChange}
                   formatOptionLabel={getPackageableElementOptionFormatter({})}
                   value={selectedDataElement}
-                  darkMode={true}
+                  darkMode={
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightColorThemeEnabled
+                  }
                 />
               </div>
             </div>
@@ -313,6 +323,8 @@ const EqualToAsssertionEditor = observer(
 const EqualToJsonAssertFailViewer = observer(
   (props: { equalToJsonAssertFailState: EqualToJsonAssertFailState }) => {
     const { equalToJsonAssertFailState } = props;
+    const applicationStore =
+      equalToJsonAssertFailState.resultState.editorStore.applicationStore;
     const open = (): void => equalToJsonAssertFailState.setDiffModal(true);
     const close = (): void => equalToJsonAssertFailState.setDiffModal(false);
     const expected = equalToJsonAssertFailState.status.expected;
@@ -333,7 +345,13 @@ const EqualToJsonAssertFailViewer = observer(
               paper: 'editor-modal__content',
             }}
           >
-            <Modal darkMode={true} className="editor-modal">
+            <Modal
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
+              className="editor-modal"
+            >
               <ModalHeader>
                 <div className="equal-to-json-result__diff__summary">
                   <div className="equal-to-json-result__diff__header__label">
@@ -351,7 +369,11 @@ const EqualToJsonAssertFailViewer = observer(
                 <JSONDiffView from={expected} to={actual} lossless={true} />
               </ModalBody>
               <ModalFooter>
-                <ModalFooterButton text="Close" onClick={close} />
+                <ModalFooterButton
+                  text="Close"
+                  onClick={close}
+                  type="secondary"
+                />
               </ModalFooter>
             </Modal>
           </Dialog>
@@ -682,6 +704,7 @@ export const ExternalFormatParameterEditorModal = observer(
       updateParamValue,
       contentTypeParamPair,
     } = props;
+    const applicationStore = useApplicationStore();
     const paramValue =
       varExpression.genericType?.value.rawType === PrimitiveType.BYTE
         ? atob((valueSpec as PrimitiveInstanceValue).values[0] as string)
@@ -694,7 +717,9 @@ export const ExternalFormatParameterEditorModal = observer(
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
         <Modal
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           className={clsx('editor-modal lambda-editor__popup__modal')}
         >
           <ModalHeader>
@@ -718,9 +743,11 @@ export const ExternalFormatParameterEditorModal = observer(
             </div>
           </ModalBody>
           <ModalFooter>
-            <button className="btn btn--dark" onClick={onClose}>
-              Close
-            </button>
+            <ModalFooterButton
+              text="Close"
+              onClick={onClose}
+              type="secondary"
+            />
           </ModalFooter>
         </Modal>
       </Dialog>

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

@@ -414,6 +414,9 @@ const PlayGroundSQLExecutionResultGrid = observer(
   }) => {
     const { result, useAdvancedGrid, useLocalMode } = props;
     const data = parseExecutionResultData(result);
+    const applicationStore = useApplicationStore();
+    const darkMode =
+      !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
 
     if (!data) {
       return (
@@ -438,7 +441,12 @@ const PlayGroundSQLExecutionResultGrid = observer(
         );
 
         return (
-          <div className="sql-playground__result__grid ag-theme-balham-dark">
+          <div
+            className={clsx('sql-playground__result__grid', {
+              'ag-theme-balham': !darkMode,
+              'ag-theme-balham-dark': darkMode,
+            })}
+          >
             <DataGrid
               rowData={data.rowData}
               gridOptions={{
@@ -491,7 +499,12 @@ const PlayGroundSQLExecutionResultGrid = observer(
         [],
       );
       return (
-        <div className="sql-playground__result__grid ag-theme-balham-dark">
+        <div
+          className={clsx('sql-playground__result__grid', {
+            'ag-theme-balham': !darkMode,
+            'ag-theme-balham-dark': darkMode,
+          })}
+        >
           <DataGrid
             rowData={data.rowData}
             overlayNoRowsTemplate={`<div class="sql-playground__result__grid--empty">No results</div>`}
@@ -516,7 +529,12 @@ const PlayGroundSQLExecutionResultGrid = observer(
     }
 
     return (
-      <div className="sql-playground__result__grid ag-theme-balham-dark">
+      <div
+        className={clsx('sql-playground__result__grid', {
+          'ag-theme-balham': !darkMode,
+          'ag-theme-balham-dark': darkMode,
+        })}
+      >
         <DataGrid
           rowData={data.rowData}
           overlayNoRowsTemplate={`<div class="sql-playground__result__grid--empty">No results</div>`}
@@ -670,7 +688,10 @@ export const SQLPlaygroundPanel = observer(() => {
                       options={connectionOptions}
                       onChange={changeConnection}
                       value={selectedConnectionOption}
-                      darkMode={true}
+                      darkMode={
+                        !applicationStore.layoutService
+                          .TEMPORARY__isLightColorThemeEnabled
+                      }
                       placeholder="Choose a connection..."
                       filterOption={connectionFilterOption}
                     />
@@ -685,7 +706,10 @@ export const SQLPlaygroundPanel = observer(() => {
                       options={connectionOptions}
                       onChange={changeConnection}
                       value={selectedConnectionOption}
-                      darkMode={true}
+                      darkMode={
+                        !applicationStore.layoutService
+                          .TEMPORARY__isLightColorThemeEnabled
+                      }
                       placeholder="Choose a connection..."
                       filterOption={connectionFilterOption}
                     />

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

@@ -123,6 +123,7 @@ const buildElementTypeOption = (type: string): ElementTypeSelectOption => ({
 
 const NewDataElementDriverEditor = observer(() => {
   const editorStore = useEditorStore();
+  const applicationStore = editorStore.applicationStore;
   const newDataELementDriver =
     editorStore.newElementState.getNewElementDriver(NewDataElementDriver);
   const selectedOption = newDataELementDriver.embeddedDataOption
@@ -160,7 +161,9 @@ const NewDataElementDriverEditor = observer(() => {
         options={options}
         onChange={onTypeSelectionChange}
         value={selectedOption}
-        darkMode={true}
+        darkMode={
+          !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+        }
       />
     </div>
   );
@@ -168,6 +171,7 @@ const NewDataElementDriverEditor = observer(() => {
 
 const NewRuntimeDriverEditor = observer(() => {
   const editorStore = useEditorStore();
+  const applicationStore = editorStore.applicationStore;
   const newRuntimeDriver = editorStore.newElementState.getNewElementDriver(
     NewPackageableRuntimeDriver,
   );
@@ -195,7 +199,9 @@ const NewRuntimeDriverEditor = observer(() => {
         options={mappingOptions}
         onChange={onMappingSelectionChange}
         value={selectedMappingOption}
-        darkMode={true}
+        darkMode={
+          !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+        }
       />
     </div>
   );
@@ -205,6 +211,7 @@ const NewPureModelConnectionDriverEditor = observer(
   (props: { newConnectionValueDriver: NewPureModelConnectionDriver }) => {
     const { newConnectionValueDriver } = props;
     const editorStore = useEditorStore();
+    const applicationStore = editorStore.applicationStore;
     // class
     const _class = newConnectionValueDriver.class;
     const classOptions = editorStore.graphManagerState.usableClasses
@@ -237,9 +244,14 @@ const NewPureModelConnectionDriverEditor = observer(
             options={classOptions}
             onChange={onClassSelectionChange}
             value={selectedClassOption}
-            darkMode={true}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
             formatOptionLabel={getPackageableElementOptionFormatter({
-              darkMode: true,
+              darkMode:
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled,
             })}
           />
         </div>
@@ -266,6 +278,7 @@ const NewConnectionValueDriverEditor = observer(() => {
 
 const NewConnectionDriverEditor = observer(() => {
   const editorStore = useEditorStore();
+  const applicationStore = editorStore.applicationStore;
   const newConnectionDriver = editorStore.newElementState.getNewElementDriver(
     NewPackageableConnectionDriver,
   );
@@ -330,7 +343,9 @@ const NewConnectionDriverEditor = observer(() => {
           options={connectionOptions}
           onChange={onConnectionChange}
           value={currentConnectionTypeOption}
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
         />
       </div>
       <div className="panel__content__form__section__header__label">
@@ -342,7 +357,9 @@ const NewConnectionDriverEditor = observer(() => {
           options={storeOptions}
           onChange={onStoreSelectionChange}
           value={selectedStoreOption}
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
         />
       </div>
       <NewConnectionValueDriverEditor />
@@ -352,6 +369,7 @@ const NewConnectionDriverEditor = observer(() => {
 
 const NewServiceDriverEditor = observer(() => {
   const editorStore = useEditorStore();
+  const applicationStore = editorStore.applicationStore;
   const runtimeSelectorPlaceholder = 'Choose a compatible runtime...';
   const newServiceDriver =
     editorStore.newElementState.getNewElementDriver(NewServiceDriver);
@@ -389,7 +407,9 @@ const NewServiceDriverEditor = observer(() => {
           options={mappingOptions}
           onChange={onMappingChange}
           value={newServiceDriver.mappingOption}
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
         />
       </div>
       <div className="panel__content__form__section__header__label">
@@ -401,7 +421,9 @@ const NewServiceDriverEditor = observer(() => {
           options={newServiceDriver.runtimeOptions}
           onChange={onRuntimeChange}
           value={newServiceDriver.runtimeOption}
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           placeholder={runtimeSelectorPlaceholder}
         />
       </div>
@@ -411,6 +433,7 @@ const NewServiceDriverEditor = observer(() => {
 
 const NewFileGenerationDriverEditor = observer(() => {
   const editorStore = useEditorStore();
+  const applicationStore = editorStore.applicationStore;
   const newConnectionDriver = editorStore.newElementState.getNewElementDriver(
     NewFileGenerationDriver,
   );
@@ -431,7 +454,9 @@ const NewFileGenerationDriverEditor = observer(() => {
         options={options}
         onChange={onTypeSelectionChange}
         value={newConnectionDriver.typeOption}
-        darkMode={true}
+        darkMode={
+          !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+        }
       />
     </div>
   );
@@ -552,7 +577,10 @@ export const CreateNewLocalConnectionModal = observer(() => {
               onChange={handleTypeChange}
               value={selectedTypeOption}
               isClearable={false}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
             />
           )}
           <input
@@ -662,7 +690,10 @@ export const CreateNewElementModal = observer(() => {
               onChange={handleTypeChange}
               value={selectedTypeOption}
               isClearable={false}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
             />
           )}
           <input

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

@@ -303,6 +303,7 @@ const getMockDataEditorLanguage = (
 
 const SampleDataGenerator = observer(() => {
   const editorStore = useEditorStore();
+  const applicationStore = editorStore.applicationStore;
   const explorerTreeState = editorStore.explorerTreeState;
   const selectedClass = explorerTreeState.classToGenerateSampleData;
   const [format, setFormat] = useState(GENERATION_DEFAULT_FORMAT);
@@ -387,10 +388,15 @@ const SampleDataGenerator = 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/side-bar/LocalChanges.tsx

@@ -35,6 +35,7 @@ import {
   ModalBody,
   ModalFooter,
   ModalHeader,
+  ModalFooterButton,
 } from '@finos/legend-art';
 import { EntityDiffViewState } from '../../../stores/editor/editor-state/entity-diff-editor-state/EntityDiffViewState.js';
 import { EntityDiffSideBarItem } from '../editor-group/diff-editor/EntityDiffView.js';
@@ -56,6 +57,7 @@ import { GRAPH_EDITOR_MODE } from '../../../stores/editor/EditorConfig.js';
 
 const PatchLoader = observer(() => {
   const editorStore = useEditorStore();
+  const applicationStore = editorStore.applicationStore;
   const localChangesState = editorStore.localChangesState;
   const patchState = localChangesState.patchLoaderState;
   const onClose = (): void => patchState.closeModal();
@@ -72,7 +74,12 @@ const PatchLoader = observer(() => {
     patchState.deleteChange(change);
   return (
     <Dialog onClose={onClose} open={patchState.showModal}>
-      <Modal darkMode={true} className="modal--scrollable patch-loader">
+      <Modal
+        darkMode={
+          !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+        }
+        className="modal--scrollable patch-loader"
+      >
         <ModalHeader title="Patch Loader" />
         <ModalBody>
           <PanelLoadingIndicator isLoading={patchState.isLoadingChanges} />
@@ -115,13 +122,12 @@ const PatchLoader = observer(() => {
           )}
         </ModalBody>
         <ModalFooter>
-          <button
-            className="btn btn--dark blocking-alert__action--standard"
+          <ModalFooterButton
+            className="blocking-alert__action--standard"
+            text="Apply Patch"
             onClick={upload}
             disabled={!patchState.changes?.length || !patchState.isValidPatch}
-          >
-            Apply Patch
-          </button>
+          />
         </ModalFooter>
       </Modal>
     </Dialog>