fix: auto refresh state after deleting or adding profile

frontend/packages/manager/package.json

@@ -23,6 +23,7 @@
     "@splunk/react-ui": "^4.9.0",
     "@splunk/themes": "^0.11.0",
     "axios": "^0.27.2",
+    "react-router-dom": "6",
     "scriptjs": "^2.5.9"
   },
   "proxy": "http://localhost:5000",

frontend/packages/manager/src/components/profiles/ProfilesModal.jsx → frontend/packages/manager/src/components/profiles/AddProfileModal.jsx

@@ -8,12 +8,11 @@ import VarbindsCreator from "../VarbindsCreator";
 import Conditions from "../Conditions";
 import PatternsCreator from "../PatternsCreator";
 import axios from "axios";
-import AddProfileContext from "../../store/add-profile-contxt";
+import ProfileContext from "../../store/profile-contxt";
 
 
-function ProfilesModal(props) {
-    const AddProfCtx = useContext(AddProfileContext);
-
+function AddProfileModal(props) {
+    const ProfCtx = useContext(ProfileContext);
     const [profileName, setProfileName] = useState('');
     const [frequency, setFrequency] = useState(1);
     const [varBinds, setVarBinds] = useState(null);
@@ -42,21 +41,23 @@ function ProfilesModal(props) {
     const postProfile = (profileObj) => {
         axios.post('http://127.0.0.1:5000/profiles/add', profileObj)
             .then((response) => {
-                console.log(response)
+                console.log(response);
         })
     }
 
     const handleApply = useCallback(
     (e) => {
-        var profileObj = {
+        let profileObj = {
             profileName: profileName,
             frequency: frequency,
             varBinds: varBinds,
             conditions: conditions
-        }
-        postProfile(profileObj)
-        props.handleRequestClose();},
-        [frequency, profileName, varBinds, conditions, props.handleRequestClose]
+        };
+        postProfile(profileObj);
+        props.handleRequestClose();
+        ProfCtx.makeProfilesChange();
+        },
+        [frequency, profileName, varBinds, conditions, props.handleRequestClose, ProfCtx.makeProfilesChange]
     );
 
     return (
@@ -89,4 +90,4 @@ function ProfilesModal(props) {
     );
 }
 
-export default ProfilesModal;
+export default AddProfileModal;

frontend/packages/manager/src/components/profiles/DeleteProfileModal.jsx

@@ -3,20 +3,20 @@ import Button from '@splunk/react-ui/Button';
 import Modal from '@splunk/react-ui/Modal';
 import axios from "axios";
 import P from '@splunk/react-ui/Paragraph';
-import DeleteProfileContext from "../../store/delete-profile-contxt";
+import ProfileContext from "../../store/profile-contxt";
 
 function DeleteProfileModal() {
-    const DelProfCtx = useContext(DeleteProfileContext);
+    const ProfCtx = useContext(ProfileContext);
 
     const [cancelButton, setCancelButon] = useState();
     const cancelButtonRef = useCallback((el) => setCancelButon(el), []);
 
     const handleRequestClose = () => {
-        DelProfCtx.setDeleteOpen(false);
+        ProfCtx.setDeleteOpen(false);
     };
 
     const handleDeleteProfile = () => {
-        const profileName = DelProfCtx.profileName;
+        const profileName = ProfCtx.profileName;
         console.log(profileName);
         axios.post(`http://127.0.0.1:5000/profiles/delete/${profileName}`)
           .then(function (response) {
@@ -25,20 +25,21 @@ function DeleteProfileModal() {
           .catch(function (error) {
             console.log(error);
           });
-        DelProfCtx.setDeleteOpen(false);
+        ProfCtx.setDeleteOpen(false);
+        ProfCtx.makeProfilesChange();
     }
 
     return (
         <div>
             <Modal
                 initialFocus={cancelButton}
                 onRequestClose={handleRequestClose}
-                open={DelProfCtx.deleteOpen}
+                open={ProfCtx.deleteOpen}
                 style={{ width: '600px' }}
             >
                 <Modal.Header title="Header" onRequestClose={handleRequestClose} />
                 <Modal.Body>
-                    <P>Are you sure you want to delete {DelProfCtx.profileName} profile?</P>
+                    <P>Are you sure you want to delete {ProfCtx.profileName} profile?</P>
                 </Modal.Body>
                 <Modal.Footer>
                     <Button appearance="primary" elementRef={cancelButtonRef} onClick={handleRequestClose} label="Cancel" />

frontend/packages/manager/src/components/profiles/ProfilePanel.jsx

@@ -5,17 +5,17 @@ import axios from "axios";
 import Table from "@splunk/react-ui/Table";
 import { createDOMID } from '@splunk/ui-utils/id';
 import Button from '@splunk/react-ui/Button';
-import DeleteProfileContext from "../../store/delete-profile-contxt";
+import ProfileContext from "../../store/profile-contxt";
 import DeleteProfileModal from "./DeleteProfileModal";
 
 function ProfilePanel() {
     const [profiles, setProfiles] = useState([]);
 
-    const DelProfCtx = useContext(DeleteProfileContext);
+    const ProfCtx = useContext(ProfileContext);
 
     const deleteProfileButtonHandler = (profileName) => {
-        DelProfCtx.setDeleteProfile(profileName);
-        DelProfCtx.setDeleteOpen(true);
+        ProfCtx.setDeleteProfile(profileName);
+        ProfCtx.setDeleteOpen(true);
     };
 
     useEffect(() => {
@@ -28,7 +28,7 @@ function ProfilePanel() {
     console.log('data: ', response.data);
     })
     return () => { isMounted = false }
-    }, [setProfiles]);
+    }, [ProfCtx.profilesChange]);
 
     let mappedPatterns = null;
     const profilesPanels = profiles.map((v) => (

frontend/packages/manager/src/pages/ProfilesPage.jsx

@@ -1,36 +1,29 @@
 import React, {useRef, useState, useContext} from 'react';
 import ProfilePanel from "../components/profiles/ProfilePanel"
-import ProfilesModal from "../components/profiles/ProfilesModal"
+import AddProfileModal from "../components/profiles/AddProfileModal"
 import Button from '@splunk/react-ui/Button';
-import { DeleteProfileContxtProvider } from "../store/delete-profile-contxt";
-import { AddProfileContxtProvider } from "../store/add-profile-contxt";
-import AddProfileContext from "../store/add-profile-contxt";
+import { ProfileContxtProvider } from "../store/profile-contxt";
 
 function ProfilesPage(){
-    const AddProfCtx = useContext(AddProfileContext);
     const modalToggle = useRef(null);
     const [addOpen, setAddOpen] = useState(false);
 
     const handleRequestOpen = () => {
-        //AddProfCtx.setAddOpen(true);
         setAddOpen(true);
     };
 
     const handleRequestClose = () => {
-        //AddProfCtx.setAddOpen(false);
         setAddOpen(false);
         modalToggle?.current?.focus();
     };
 
     return (
         <div>
-            <AddProfileContxtProvider>
-                <DeleteProfileContxtProvider>
-                    <Button onClick={handleRequestOpen} ref={modalToggle} label="Add new profile" />
-                    <ProfilesModal open={addOpen} handleRequestClose={handleRequestClose} modalToggle={modalToggle}/>
-                    <ProfilePanel />
-                </DeleteProfileContxtProvider>
-            </AddProfileContxtProvider>
+            <ProfileContxtProvider>
+                <Button onClick={handleRequestOpen} ref={modalToggle} label="Add new profile" />
+                <AddProfileModal open={addOpen} handleRequestClose={handleRequestClose} modalToggle={modalToggle}/>
+                <ProfilePanel />
+            </ProfileContxtProvider>
         </div>
     );
 }

frontend/packages/manager/src/store/delete-profile-contxt.jsx → frontend/packages/manager/src/store/profile-contxt.jsx

@@ -1,34 +1,43 @@
 import React, {useState, createContext, useRef} from 'react';
 
-const DeleteProfileContext = createContext({
+const ProfileContext = createContext({
     profileName: "",
     deleteOpen: false,
     deleteModalToggle: null,
     setDeleteOpen: () => {},
-    deleteProfile: (profName) => {}
+    deleteProfile: (profName) => {},
+    profilesChange: 0,
+    setProfilesChange: (profName) => {}
 });
 
-export function DeleteProfileContxtProvider(props) {
+export function ProfileContxtProvider(props) {
     const [deleteProfileName, setDeleteProfileName] = useState("");
     const [deleteOpen, setDeleteOpen] = useState(false);
+    const [profilesChange, setProfilesChange] = useState(true);
     const deleteModalToggle = useRef(null);
 
     function deleteProfileHandler(profileName){
         setDeleteProfileName(profileName);
     }
 
+    function profilesChangeHandler() {
+        setProfilesChange(!profilesChange);
+    }
+
     const context = {profileName: deleteProfileName,
             deleteOpen: deleteOpen,
             deleteModalToggle: deleteModalToggle,
             setDeleteOpen: setDeleteOpen,
-            setDeleteProfile: deleteProfileHandler
+            setDeleteProfile: deleteProfileHandler,
+            profilesChange: profilesChange,
+            makeProfilesChange: profilesChangeHandler
     };
 
     return(
-        <DeleteProfileContext.Provider value={context}>
+        <ProfileContext.Provider value={context}>
             {props.children}
-        </DeleteProfileContext.Provider>
+        </ProfileContext.Provider>
     )
 }
 
-export default DeleteProfileContext;
+export default ProfileContext;

frontend/yarn.lock

@@ -1413,6 +1413,11 @@
     "@react-spring/shared" "~9.5.0"
     "@react-spring/types" "~9.5.0"
 
+"@remix-run/router@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.0.0.tgz#a2189335a5f6428aa904ccc291988567018b6e01"
+  integrity sha512-SCR1cxRSMNKjaVYptCzBApPDqGwa3FGdjVHc+rOToocNPHQdIYLZBfv/3f+KvYuXDkUGVIW9IAzmPNZDRL1I4A==
+
 "@sinonjs/commons@^1.7.0":
   version "1.8.3"
   resolved "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.3.tgz"
@@ -9145,6 +9150,20 @@ react-resize-detector@^3.2.1:
     prop-types "^15.6.2"
     resize-observer-polyfill "^1.5.1"
 
+react-router-dom@6:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.4.0.tgz#a7d7c394c9e730b045cdd4f5d6c2d1ccb9e26947"
+  integrity sha512-4Aw1xmXKeleYYQ3x0Lcl2undHR6yMjXZjd9DKZd53SGOYqirrUThyUb0wwAX5VZAyvSuzjNJmZlJ3rR9+/vzqg==
+  dependencies:
+    react-router "6.4.0"
+
+react-router@6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.4.0.tgz#68449c23dc893fc7a57db068c19987be1de72edb"
+  integrity sha512-B+5bEXFlgR1XUdHYR6P94g299SjrfCBMmEDJNcFbpAyRH1j1748yt9NdDhW3++nw1lk3zQJ6aOO66zUx3KlTZg==
+  dependencies:
+    "@remix-run/router" "1.0.0"
+
 react-sortable-hoc@^1.11.0:
   version "1.11.0"
   resolved "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-1.11.0.tgz"