feat: add accept/cancel buttons for settings (#4013) (#4052)

app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/GlobalSettings.tsx

@@ -7,7 +7,7 @@ import Modal from "../../Main/Modal/Modal";
 import "./style.scss";
 import Tooltip from "../../Main/Tooltip/Tooltip";
 import LimitsConfigurator from "./LimitsConfigurator/LimitsConfigurator";
-import { SeriesLimits } from "../../../types";
+import { Theme } from "../../../types";
 import { useCustomPanelDispatch, useCustomPanelState } from "../../../state/customPanel/CustomPanelStateContext";
 import { getAppModeEnable } from "../../../utils/app-mode";
 import classNames from "classnames";
@@ -22,7 +22,7 @@ const GlobalSettings: FC = () => {
   const { isMobile } = useDeviceDetect();
 
   const appModeEnable = getAppModeEnable();
-  const { serverUrl: stateServerUrl } = useAppState();
+  const { serverUrl: stateServerUrl, theme } = useAppState();
   const { timezone: stateTimezone } = useTimeState();
   const { seriesLimits } = useCustomPanelState();
 
@@ -31,20 +31,40 @@ const GlobalSettings: FC = () => {
   const customPanelDispatch = useCustomPanelDispatch();
 
   const [serverUrl, setServerUrl] = useState(stateServerUrl);
-  const [limits, setLimits] = useState<SeriesLimits>(seriesLimits);
+  const [limits, setLimits] = useState(seriesLimits);
   const [timezone, setTimezone] = useState(stateTimezone);
 
+  const setDefaultsValues = () => {
+    setServerUrl(stateServerUrl);
+    setLimits(seriesLimits);
+    setTimezone(stateTimezone);
+  };
+
   const [open, setOpen] = useState(false);
   const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
+  const handleClose = () => {
+    setOpen(false);
+    setDefaultsValues();
+  };
+
+  const handleCloseForce = () => {
+    setOpen(false);
+    setDefaultsValues();
+  };
+
+  const handleChangeTheme = (value: Theme) => {
+    dispatch({ type: "SET_THEME", payload: value });
+  };
 
   const handlerApply = () => {
     dispatch({ type: "SET_SERVER", payload: serverUrl });
     timeDispatch({ type: "SET_TIMEZONE", payload: timezone });
     customPanelDispatch({ type: "SET_SERIES_LIMITS", payload: limits });
+    setOpen(false);
   };
 
   useEffect(() => {
+    // the tenant selector can change the serverUrl
     if (stateServerUrl === serverUrl) return;
     setServerUrl(stateServerUrl);
   }, [stateServerUrl]);
@@ -88,10 +108,10 @@ const GlobalSettings: FC = () => {
           {!appModeEnable && (
             <div className="vm-server-configurator__input">
               <ServerConfigurator
+                stateServerUrl={stateServerUrl}
                 serverUrl={serverUrl}
                 onChange={setServerUrl}
                 onEnter={handlerApply}
-                onBlur={handlerApply}
               />
             </div>
           )}
@@ -110,9 +130,28 @@ const GlobalSettings: FC = () => {
           </div>
           {!appModeEnable && (
             <div className="vm-server-configurator__input">
-              <ThemeControl/>
+              <ThemeControl
+                theme={theme}
+                onChange={handleChangeTheme}
+              />
             </div>
           )}
+          <div className="vm-server-configurator-footer">
+            <Button
+              color="error"
+              variant="outlined"
+              onClick={handleCloseForce}
+            >
+              Cancel
+            </Button>
+            <Button
+              color="primary"
+              variant="contained"
+              onClick={handlerApply}
+            >
+              Apply
+            </Button>
+          </div>
         </div>
       </Modal>
     )}

app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/LimitsConfigurator/LimitsConfigurator.tsx

@@ -51,7 +51,7 @@ const LimitsConfigurator: FC<ServerConfiguratorProps> = ({ limits, onChange , on
     <div className="vm-limits-configurator">
       <div className="vm-server-configurator__title">
         Series limits by tabs
-        <Tooltip title="To disable limits set to 0">
+        <Tooltip title="Set to 0 to disable the limit">
           <Button
             variant="text"
             color="primary"
@@ -67,7 +67,7 @@ const LimitsConfigurator: FC<ServerConfiguratorProps> = ({ limits, onChange , on
             startIcon={<RestartIcon/>}
             onClick={handleReset}
           >
-            Reset
+            Reset limits
           </Button>
         </div>
       </div>

app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/ServerConfigurator/ServerConfigurator.tsx

@@ -1,16 +1,21 @@
-import React, { FC, useState } from "preact/compat";
+import React, { FC, useEffect, useState } from "preact/compat";
 import { ErrorTypes } from "../../../../types";
 import TextField from "../../../Main/TextField/TextField";
 import { isValidHttpUrl } from "../../../../utils/url";
 
 export interface ServerConfiguratorProps {
   serverUrl: string
+  stateServerUrl: string
   onChange: (url: string) => void
   onEnter: () => void
-  onBlur: () => void
 }
 
-const ServerConfigurator: FC<ServerConfiguratorProps> = ({ serverUrl, onChange , onEnter, onBlur }) => {
+const ServerConfigurator: FC<ServerConfiguratorProps> = ({
+  serverUrl,
+  stateServerUrl,
+  onChange ,
+  onEnter
+}) => {
 
   const [error, setError] = useState("");
 
@@ -18,10 +23,13 @@ const ServerConfigurator: FC<ServerConfiguratorProps> = ({ serverUrl, onChange ,
     const value = val || "";
     onChange(value);
     setError("");
-    if (!value) setError(ErrorTypes.emptyServer);
-    if (!isValidHttpUrl(value)) setError(ErrorTypes.validServer);
   };
 
+  useEffect(() => {
+    if (!stateServerUrl) setError(ErrorTypes.emptyServer);
+    if (!isValidHttpUrl(stateServerUrl)) setError(ErrorTypes.validServer);
+  }, [stateServerUrl]);
+
   return (
     <TextField
       autofocus
@@ -30,7 +38,6 @@ const ServerConfigurator: FC<ServerConfiguratorProps> = ({ serverUrl, onChange ,
       error={error}
       onChange={onChangeServer}
       onEnter={onEnter}
-      onBlur={onBlur}
       inputmode="url"
     />
   );

app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/Timezones/style.scss

@@ -46,7 +46,7 @@
   }
 
   &-list {
-    max-height: 200px;
+    max-height: 300px;
     background-color: $color-background-block;
     border-radius: $border-radius-medium;
     overflow: auto;

app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/style.scss

@@ -32,4 +32,17 @@
     font-weight: bold;
     margin-bottom: $padding-global;
   }
+
+  &-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: $padding-small;
+    width: 100%;
+  }
+
+  &_mobile &-footer {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
 }

app/vmui/packages/vmui/src/components/Configurators/ThemeControl/ThemeControl.tsx

@@ -1,19 +1,22 @@
 import React from "react";
 import "./style.scss";
-import { useAppDispatch, useAppState } from "../../../state/common/StateContext";
 import { Theme } from "../../../types";
 import Toggle from "../../Main/Toggle/Toggle";
 import useDeviceDetect from "../../../hooks/useDeviceDetect";
 import classNames from "classnames";
+import { FC } from "preact/compat";
+
+interface ThemeControlProps {
+  theme: Theme;
+  onChange: (val: Theme) => void
+}
 
 const options = Object.values(Theme).map(value => ({ title: value, value }));
-const ThemeControl = () => {
+const ThemeControl: FC<ThemeControlProps> = ({ theme, onChange }) => {
   const { isMobile } = useDeviceDetect();
-  const { theme } = useAppState();
-  const dispatch = useAppDispatch();
 
   const handleClickItem = (value: string) => {
-    dispatch({ type: "SET_THEME", payload: value as Theme });
+    onChange(value as Theme);
   };
 
   return (

app/vmui/packages/vmui/src/hooks/useFetchQuery.ts

@@ -79,7 +79,7 @@ export const useFetchQuery = ({
     setFetchQueue([...fetchQueue, controller]);
     try {
       const isDisplayChart = displayType === "chart";
-      const seriesLimit = showAllSeries ? Infinity : stateSeriesLimits[displayType];
+      const seriesLimit = showAllSeries ? Infinity : (+stateSeriesLimits[displayType] || Infinity);
       const tempData: MetricBase[] = [];
       const tempTraces: Trace[] = [];
       let counter = 1;