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

2024-11-21 14:44:00 +00:00 · 2023-04-03 06:20:10 +02:00 · 2023-04-03 06:20:10 +02:00 · edb45d7fc1
commit edb45d7fc1
parent f638496298
7 changed files with 83 additions and 21 deletions
--- a/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/GlobalSettings.tsx
+++ b/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>
    )}
--- a/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/LimitsConfigurator/LimitsConfigurator.tsx
+++ b/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>
--- a/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/ServerConfigurator/ServerConfigurator.tsx
+++ b/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"
    />
  );
--- a/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/Timezones/style.scss
+++ b/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;
--- a/app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/style.scss
+++ b/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;
+  }
 }
--- a/app/vmui/packages/vmui/src/components/Configurators/ThemeControl/ThemeControl.tsx
+++ b/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 (
--- a/app/vmui/packages/vmui/src/hooks/useFetchQuery.ts
+++ b/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;