Fixed erratic behavior in configuration pages (#2269)

- Issue with fields being cleared in forms with CSV component present
- Load configuration panels on section change

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>

portal-ui/src/screens/Console/Common/FormComponents/CSVMultiSelector/CSVMultiSelector.tsx

@@ -17,12 +17,11 @@ import React, {
   ChangeEvent,
   createRef,
   useEffect,
-  useLayoutEffect,
   useRef,
   useState,
+  useCallback,
 } from "react";
 import get from "lodash/get";
-import debounce from "lodash/debounce";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -110,14 +109,26 @@ const CSVMultiSelector = ({
     }
   }, [currentElements, bottomList]);
 
+  const onChangeCallback = useCallback(
+    (newString: string) => {
+      onChange(newString);
+    },
+    [onChange]
+  );
+
   // We avoid multiple re-renders / hang issue typing too fast
   const firstUpdate = useRef(true);
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (firstUpdate.current) {
       firstUpdate.current = false;
       return;
     }
-    debouncedOnChange();
+    const elementsString = currentElements
+      .filter((element) => element.trim() !== "")
+      .join(",");
+
+    onChangeCallback(elementsString);
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentElements]);
 
@@ -141,18 +152,12 @@ const CSVMultiSelector = ({
     setCurrentElements(updatedElement);
   };
 
-  // Debounce for On Change
-  const debouncedOnChange = debounce(() => {
-    const elementsString = currentElements
-      .filter((element) => element.trim() !== "")
-      .join(",");
-
-    onChange(elementsString);
-  }, 500);
-
   const inputs = currentElements.map((element, index) => {
     return (
-      <div className={classes.inputBoxSpacer}>
+      <div
+        className={classes.inputBoxSpacer}
+        key={`csv-multi-${name}-${index.toString()}`}
+      >
         <InputBoxWrapper
           id={`${name}-${index.toString()}`}
           label={""}

portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx

@@ -33,14 +33,9 @@ import { Link, Navigate, Route, Routes, useLocation } from "react-router-dom";
 import VerticalTabs from "../../Common/VerticalTabs/VerticalTabs";
 import PageLayout from "../../Common/Layout/PageLayout";
 import ScreenTitle from "../../Common/ScreenTitle/ScreenTitle";
-
-import withSuspense from "../../Common/Components/withSuspense";
+import ConfigurationForm from "./ConfigurationForm";
 import { IAM_PAGES } from "../../../../common/SecureComponent/permissions";
 
-const ConfigurationForm = withSuspense(
-  React.lazy(() => import("./ConfigurationForm"))
-);
-
 interface IConfigurationOptions {
   classes: any;
 }
@@ -118,7 +113,7 @@ const ConfigurationOptions = ({ classes }: IConfigurationOptions) => {
         </Grid>
         <Grid item xs={12} sx={{ paddingTop: "15px" }}>
           <HelpBox
-            title={"Learn more about CONFIGURATIONS"}
+            title={"Learn more about Configurations"}
             iconComponent={<SettingsIcon />}
             help={
               <Fragment>

portal-ui/src/screens/Console/NotificationEndpoints/ConfTargetGeneric.tsx

@@ -58,7 +58,7 @@ export const valueDef = (
     const storedConfig = defaults.find((element) => element.key === key);
 
     if (storedConfig) {
-      defValue = storedConfig.value;
+      defValue = storedConfig.value || "";
     }
   }
 
@@ -77,13 +77,12 @@ const ConfTargetGeneric = ({
 
   // Effect to create all the values to hold
   useEffect(() => {
-    const values: IElementValue[] = [];
-    fields.forEach((field) => {
+    const values: IElementValue[] = fields.map((field) => {
       const stateInsert: IElementValue = {
         key: field.name,
         value: valueDef(field.name, field.type, defValList),
       };
-      values.push(stateInsert);
+      return stateInsert;
     });
 
     setValueHolder(values);
@@ -127,9 +126,9 @@ const ConfTargetGeneric = ({
             elements={valueHolder[item] ? valueHolder[item].value : ""}
             label={field.label}
             name={field.name}
-            onChange={(value: string) =>
-              setValueElement(field.name, value, item)
-            }
+            onChange={(value: string) => {
+              setValueElement(field.name, value, item);
+            }}
             tooltip={field.tooltip}
             commonPlaceholder={field.placeholder}
             withBorder={true}

portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/EditConfiguration.tsx

@@ -16,12 +16,12 @@
 
 import React, { Fragment, useCallback, useEffect, useState } from "react";
 
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import get from "lodash/get";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Box, Button, LinearProgress } from "@mui/material";
+import { Box, Button } from "@mui/material";
 import Grid from "@mui/material/Grid";
 import api from "../../../../common/api";
 import ConfTargetGeneric from "../ConfTargetGeneric";
@@ -43,8 +43,10 @@ import ResetConfigurationModal from "./ResetConfigurationModal";
 import {
   setErrorSnackMessage,
   setServerNeedsRestart,
+  setSnackBarMessage,
 } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
+import Loader from "../../Common/Loader/Loader";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -70,6 +72,10 @@ const EditConfiguration = ({
 }: IAddNotificationEndpointProps) => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
+  const { pathname = "" } = useLocation();
+
+  let selConfigTab = pathname.substring(pathname.lastIndexOf("/") + 1);
+  selConfigTab = selConfigTab === "settings" ? "region" : selConfigTab;
 
   //Local States
   const [valuesObj, setValueObj] = useState<IElementValue[]>([]);
@@ -78,7 +84,11 @@ const EditConfiguration = ({
   const [configValues, setConfigValues] = useState<IElementValue[]>([]);
   const [resetConfigurationOpen, setResetConfigurationOpen] =
     useState<boolean>(false);
-  //Effects
+
+  useEffect(() => {
+    setLoadingConfig(true);
+  }, [selConfigTab]);
+
   useEffect(() => {
     if (loadingConfig) {
       const configId = get(selectedConfiguration, "configuration_id", false);
@@ -116,8 +126,9 @@ const EditConfiguration = ({
         .then((res) => {
           setSaving(false);
           dispatch(setServerNeedsRestart(res.restart));
-
-          navigate("/settings");
+          if (!res.restart) {
+            dispatch(setSnackBarMessage("Configuration saved successfully"));
+          }
         })
         .catch((err: ErrorResponseHandler) => {
           setSaving(false);
@@ -157,8 +168,8 @@ const EditConfiguration = ({
         />
       )}
       {loadingConfig ? (
-        <Grid item xs={12}>
-          <LinearProgress />
+        <Grid item xs={12} sx={{ textAlign: "center", paddingTop: "15px" }}>
+          <Loader />
         </Grid>
       ) : (
         <Box