From e4c04b6dbe8933acd8e125aa10f343708d1285a0 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 55328dc46..35bb4ad39 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 2037c9120..653a1dc57 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 f280f72db..f4cdf34cd 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 f66d6d9ed..19928b3fb 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 b7ec42ba6..75d8be6ca 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 38fb77afa..c4debdc52 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