From ccdf38809479138c1d094bfe81b1cbda1aee3b99 Mon Sep 17 00:00:00 2001
From: Yury Molodov <yurymolodov@gmail.com>
Date: Sat, 4 Feb 2023 04:31:37 +0100
Subject: [PATCH] vmui: set light theme for app mode (#3748)
* fix: set light theme for app mode
* fix: check inputTenantID flag
* fix: rename inputTenantID to useTenantID
---
app/vmui/packages/vmui/README.md | 6 +++---
.../Configurators/GlobalSettings/GlobalSettings.tsx | 8 +++++---
.../TenantsConfiguration/hooks/useFetchAccountIds.ts | 3 +++
.../Layout/Header/HeaderNav/NavSubItem.tsx | 1 +
.../components/Main/ThemeProvider/ThemeProvider.ts | 12 ++++++++++--
app/vmui/packages/vmui/src/utils/app-mode.ts | 2 +-
6 files changed, 23 insertions(+), 9 deletions(-)
diff --git a/app/vmui/packages/vmui/README.md b/app/vmui/packages/vmui/README.md
index 55328dc460..35bb4ad397 100644
--- a/app/vmui/packages/vmui/README.md
+++ b/app/vmui/packages/vmui/README.md
@@ -60,7 +60,7 @@ VMUI can be used to paste into other applications
| Name | Default | Description |
|:------------------------|:-----------:|--------------------------------------------------------------------------------------:|
| serverURL | domain name | Can't be changed from the UI |
-| inputTenantID | - | If the flag is present, the "Tenant ID" field is displayed |
+| useTenantID | - | If the flag is present, the "Tenant ID" select is displayed |
| headerStyles.background | `#FFFFFF` | Header background color |
| headerStyles.color | `#3F51B5` | Header font color |
| palette.primary | `#3F51B5` | used to represent primary interface elements for a user |
@@ -74,7 +74,7 @@ VMUI can be used to paste into other applications
```json
{
"serverURL": "http://localhost:8428",
- "inputTenantID": "true",
+ "useTenantID": true,
"headerStyles": {
"background": "#FFFFFF",
"color": "#538DE8"
@@ -93,7 +93,7 @@ VMUI can be used to paste into other applications
#### HTML example:
```html
-<div id="root" data-params='{"serverURL":"http://localhost:8428","inputTenantID":"true","headerStyles":{"background":"#FFFFFF","color":"#538DE8"},"palette":{"primary":"#538DE8","secondary":"#F76F8E","error":"#FD151B","warning":"#FFB30F","success":"#7BE622","info":"#0F5BFF"}}'></div>
+<div id="root" data-params='{"serverURL":"http://localhost:8428","useTenantID":true,"headerStyles":{"background":"#FFFFFF","color":"#538DE8"},"palette":{"primary":"#538DE8","secondary":"#F76F8E","error":"#FD151B","warning":"#FFB30F","success":"#7BE622","info":"#0F5BFF"}}'></div>
```
diff --git a/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/GlobalSettings.tsx b/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/GlobalSettings.tsx
index 2037c91208..653a1dc57e 100644
--- a/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/GlobalSettings.tsx
+++ b/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/GlobalSettings.tsx
@@ -100,9 +100,11 @@ const GlobalSettings: FC<{showTitle?: boolean}> = ({ showTitle }) => {
onChange={setTimezone}
/>
</div>
- <div className="vm-server-configurator__input">
- <ThemeControl/>
- </div>
+ {!appModeEnable && (
+ <div className="vm-server-configurator__input">
+ <ThemeControl/>
+ </div>
+ )}
<div className="vm-server-configurator__footer">
<Button
variant="outlined"
diff --git a/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/TenantsConfiguration/hooks/useFetchAccountIds.ts b/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/TenantsConfiguration/hooks/useFetchAccountIds.ts
index f280f72db7..f4cdf34cd1 100644
--- a/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/TenantsConfiguration/hooks/useFetchAccountIds.ts
+++ b/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/TenantsConfiguration/hooks/useFetchAccountIds.ts
@@ -2,8 +2,10 @@ import { useAppState } from "../../../../../state/common/StateContext";
import { useEffect, useMemo, useState } from "preact/compat";
import { ErrorTypes } from "../../../../../types";
import { getAccountIds } from "../../../../../api/accountId";
+import { getAppModeParams } from "../../../../../utils/app-mode";
export const useFetchAccountIds = () => {
+ const { useTenantID } = getAppModeParams();
const { serverUrl } = useAppState();
const [isLoading, setIsLoading] = useState(false);
@@ -13,6 +15,7 @@ export const useFetchAccountIds = () => {
const fetchUrl = useMemo(() => getAccountIds(serverUrl), [serverUrl]);
useEffect(() => {
+ if (!useTenantID) return;
const fetchData = async () => {
setIsLoading(true);
try {
diff --git a/app/vmui/packages/vmui/src/components/Layout/Header/HeaderNav/NavSubItem.tsx b/app/vmui/packages/vmui/src/components/Layout/Header/HeaderNav/NavSubItem.tsx
index f66d6d9ed2..19928b3fb5 100644
--- a/app/vmui/packages/vmui/src/components/Layout/Header/HeaderNav/NavSubItem.tsx
+++ b/app/vmui/packages/vmui/src/components/Layout/Header/HeaderNav/NavSubItem.tsx
@@ -102,6 +102,7 @@ const NavSubItem: FC<NavItemProps> = ({
activeMenu={activeMenu}
value={sm.value}
label={sm.label || ""}
+ color={color}
/>
))}
</div>
diff --git a/app/vmui/packages/vmui/src/components/Main/ThemeProvider/ThemeProvider.ts b/app/vmui/packages/vmui/src/components/Main/ThemeProvider/ThemeProvider.ts
index b7ec42ba65..75d8be6ca6 100644
--- a/app/vmui/packages/vmui/src/components/Main/ThemeProvider/ThemeProvider.ts
+++ b/app/vmui/packages/vmui/src/components/Main/ThemeProvider/ThemeProvider.ts
@@ -1,7 +1,7 @@
import { FC, useEffect, useState } from "preact/compat";
import { getContrastColor } from "../../../utils/color";
import { getCssVariable, isSystemDark, setCssVariable } from "../../../utils/theme";
-import { AppParams, getAppModeParams } from "../../../utils/app-mode";
+import { AppParams, getAppModeEnable, getAppModeParams } from "../../../utils/app-mode";
import { getFromStorage } from "../../../utils/storage";
import { darkPalette, lightPalette } from "../../../constants/palette";
import { Theme } from "../../../types";
@@ -23,6 +23,7 @@ const colorVariables = [
export const ThemeProvider: FC<ThemeProviderProps> = ({ onLoaded }) => {
+ const appModeEnable = getAppModeEnable();
const { palette: paletteAppMode = {} } = getAppModeParams();
const { theme } = useAppState();
const isDarkTheme = useSystemTheme();
@@ -71,6 +72,8 @@ export const ThemeProvider: FC<ThemeProviderProps> = ({ onLoaded }) => {
setCssVariable(variable, value);
});
setContrastText();
+
+ if (appModeEnable) setAppModePalette();
};
const updatePalette = () => {
@@ -86,13 +89,18 @@ export const ThemeProvider: FC<ThemeProviderProps> = ({ onLoaded }) => {
};
useEffect(() => {
- setAppModePalette();
setScrollbarSize();
setTheme();
}, [palette]);
useEffect(updatePalette, [theme, isDarkTheme]);
+ useEffect(() => {
+ if (appModeEnable) {
+ dispatch({ type: "SET_THEME", payload: Theme.light });
+ }
+ }, []);
+
return null;
};
diff --git a/app/vmui/packages/vmui/src/utils/app-mode.ts b/app/vmui/packages/vmui/src/utils/app-mode.ts
index 38fb77afa6..c4debdc522 100644
--- a/app/vmui/packages/vmui/src/utils/app-mode.ts
+++ b/app/vmui/packages/vmui/src/utils/app-mode.ts
@@ -1,6 +1,6 @@
export interface AppParams {
serverURL?: string
- inputTenantID?: boolean
+ useTenantID?: boolean
headerStyles?: {
background?: string
color?: string