fix: waraping children with ProfileContext in Manager.jsx

splunk · Sep 14, 2022 · 6030b68 · 6030b68
1 parent 15ec5a0
commit 6030b68
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 26 deletions.
diff --git a/frontend/packages/manager/src/Manager.jsx b/frontend/packages/manager/src/Manager.jsx
@@ -3,12 +3,15 @@ import TabLayout from '@splunk/react-ui/TabLayout';
 import ProfilesPage from "./pages/ProfilesPage";
 import InventoryPage from "./pages/InventoryPage"
 import GroupsPage from "./pages/GroupsPage"
+import { ProfileContxtProvider } from "./store/profile-contxt";
 
 function Uncontrolled() {
     return (
         <TabLayout defaultActivePanelId="one">
             <TabLayout.Panel label="Profiles" panelId="one">
-                <ProfilesPage />
+                <ProfileContxtProvider>
+                    <ProfilesPage />
+                </ProfileContxtProvider>
             </TabLayout.Panel>
             <TabLayout.Panel label="Inventory" panelId="two" style={{ margin: 20 }}>
                 <InventoryPage />

diff --git a/frontend/packages/manager/src/components/profiles/AddProfileModal.jsx b/frontend/packages/manager/src/components/profiles/AddProfileModal.jsx
@@ -44,6 +44,15 @@ function AddProfileModal(props) {
         })
     }
 
+   const handleRequestClose = useCallback(
+    (e) => {
+        ProfCtx.setAddOpen(false);
+        ProfCtx.addModalToggle?.current?.focus();
+        },
+        [ProfCtx.setAddOpen, ProfCtx.addModalToggle]
+    );
+
+
     const handleApply = useCallback(
     (e) => {
         let profileObj = {
@@ -53,16 +62,17 @@ function AddProfileModal(props) {
             conditions: conditions
         };
         postProfile(profileObj);
-        props.handleRequestClose();
+        ProfCtx.setAddOpen(false);
+        ProfCtx.addModalToggle?.current?.focus();
         ProfCtx.makeProfilesChange();
         },
-        [frequency, profileName, varBinds, conditions, props.handleRequestClose, ProfCtx.makeProfilesChange]
+        [frequency, profileName, varBinds, conditions, ProfCtx.setAddOpen, ProfCtx.addModalToggle, ProfCtx.makeProfilesChange]
     );
 
     return (
         <div>
-            <Modal onRequestClose={props.handleRequestClose} open={props.open} style={{ width: '600px' }}>
-                <Modal.Header title="Add new profile" onRequestClose={props.handleRequestClose} />
+            <Modal onRequestClose={handleRequestClose} open={ProfCtx.addOpen} style={{ width: '600px' }}>
+                <Modal.Header title="Add new profile" onRequestClose={handleRequestClose} />
                 <Modal.Body>
 
                     <ControlGroup label="Profile name">
@@ -81,7 +91,7 @@ function AddProfileModal(props) {
 
                 </Modal.Body>
                 <Modal.Footer>
-                    <Button appearance="secondary" onClick={props.handleRequestClose} label="Cancel" />
+                    <Button appearance="secondary" onClick={handleRequestClose} label="Cancel" />
                     <Button appearance="primary" label="Submit" onClick={handleApply} />
                 </Modal.Footer>
             </Modal>

diff --git a/frontend/packages/manager/src/components/profiles/DeleteProfileModal.jsx b/frontend/packages/manager/src/components/profiles/DeleteProfileModal.jsx
@@ -13,6 +13,7 @@ function DeleteProfileModal() {
 
     const handleRequestClose = () => {
         ProfCtx.setDeleteOpen(false);
+        ProfCtx.deleteModalToggle?.current?.focus();
     };
 
     const handleDeleteProfile = () => {
@@ -27,6 +28,7 @@ function DeleteProfileModal() {
           });
         ProfCtx.setDeleteOpen(false);
         ProfCtx.makeProfilesChange();
+        ProfCtx.addModalToggle?.current?.focus();
     }
 
     return (

diff --git a/frontend/packages/manager/src/components/profiles/ProfilePanel.jsx b/frontend/packages/manager/src/components/profiles/ProfilePanel.jsx
@@ -18,6 +18,10 @@ function ProfilePanel() {
         ProfCtx.setDeleteOpen(true);
     };
 
+    const editProfileButtonHandler = (profileName) => {
+        console.log("edit")
+    };
+
     useEffect(() => {
     let isMounted = true;
     console.log('use effect')
@@ -33,7 +37,8 @@ function ProfilePanel() {
     let mappedPatterns = null;
     const profilesPanels = profiles.map((v) => (
         <CollapsiblePanel title={v.profileName}>
-            <Button onClick={() => deleteProfileButtonHandler(v.profileName)} label="Delete profile" />
+            <Button onClick={() => deleteProfileButtonHandler(v.profileName)} ref={ProfCtx.deleteModalToggle} label="Delete profile" />
+            <Button onClick={() => editProfileButtonHandler(v.profileName)} label="Edit profile" />
 
             { v.frequency && <P>Frequency: {v.frequency}</P> }
             { v.conditions &&

diff --git a/frontend/packages/manager/src/pages/ProfilesPage.jsx b/frontend/packages/manager/src/pages/ProfilesPage.jsx
@@ -3,27 +3,23 @@ import ProfilePanel from "../components/profiles/ProfilePanel"
 import AddProfileModal from "../components/profiles/AddProfileModal"
 import Button from '@splunk/react-ui/Button';
 import { ProfileContxtProvider } from "../store/profile-contxt";
+import ProfileContext from "../store/profile-contxt";
 
 function ProfilesPage(){
+    const ProfCtx = useContext(ProfileContext);
     const modalToggle = useRef(null);
     const [addOpen, setAddOpen] = useState(false);
 
     const handleRequestOpen = () => {
         setAddOpen(true);
-    };
-
-    const handleRequestClose = () => {
-        setAddOpen(false);
-        modalToggle?.current?.focus();
+        ProfCtx.setAddOpen(true);
     };
 
     return (
         <div>
-            <ProfileContxtProvider>
-                <Button onClick={handleRequestOpen} ref={modalToggle} label="Add new profile" />
-                <AddProfileModal open={addOpen} handleRequestClose={handleRequestClose} modalToggle={modalToggle}/>
-                <ProfilePanel />
-            </ProfileContxtProvider>
+            <Button onClick={handleRequestOpen} ref={ProfCtx.addModalToggle} label="Add new profile" />
+            <AddProfileModal />
+            <ProfilePanel />
         </div>
     );
 }

diff --git a/frontend/packages/manager/src/store/profile-contxt.jsx b/frontend/packages/manager/src/store/profile-contxt.jsx
@@ -7,15 +7,22 @@ const ProfileContext = createContext({
     setDeleteOpen: () => {},
     deleteProfile: (profName) => {},
     profilesChange: 0,
-    setProfilesChange: (profName) => {}
+    setProfilesChange: (profName) => {},
+    addOpen: false,
+    addModalToggle: null,
+    setAddOpen: () => {}
 });
 
 export function ProfileContxtProvider(props) {
     const [deleteProfileName, setDeleteProfileName] = useState("");
     const [deleteOpen, setDeleteOpen] = useState(false);
-    const [profilesChange, setProfilesChange] = useState(true);
     const deleteModalToggle = useRef(null);
 
+    const [addOpen, setAddOpen] = useState(false);
+    const addModalToggle = useRef(null);
+
+    const [profilesChange, setProfilesChange] = useState(true);
+
     function deleteProfileHandler(profileName){
         setDeleteProfileName(profileName);
     }
@@ -24,13 +31,17 @@ export function ProfileContxtProvider(props) {
         setProfilesChange(!profilesChange);
     }
 
-    const context = {profileName: deleteProfileName,
-            deleteOpen: deleteOpen,
-            deleteModalToggle: deleteModalToggle,
-            setDeleteOpen: setDeleteOpen,
-            setDeleteProfile: deleteProfileHandler,
-            profilesChange: profilesChange,
-            makeProfilesChange: profilesChangeHandler
+    const context = {
+        profileName: deleteProfileName,
+        deleteOpen: deleteOpen,
+        deleteModalToggle: deleteModalToggle,
+        setDeleteOpen: setDeleteOpen,
+        setDeleteProfile: deleteProfileHandler,
+        profilesChange: profilesChange,
+        makeProfilesChange: profilesChangeHandler,
+        addOpen: addOpen,
+        addModalToggle: addModalToggle,
+        setAddOpen: setAddOpen
     };
 
     return(