From 21bf384e6e5dd920390b439f3e748dab6d309ffb Mon Sep 17 00:00:00 2001
From: Andrii Podriez <andrey5577990@gmail.com>
Date: Mon, 30 Sep 2024 16:25:58 +0200
Subject: [PATCH] moved usergroups table to the users page, removed usergroups
 page and added a new button to add users selected from users table

Signed-off-by: Andrii Podriez <andrey5577990@gmail.com>
---
 src/app.js                         |   4 -
 src/branding/branding.js           |   1 -
 src/common/menu.js                 |  16 ----
 src/pages/usergroups/usergroup.js  |   4 +-
 src/pages/usergroups/usergroups.js |   5 +-
 src/pages/users/users.js           | 125 ++++++++++++++++++++++-------
 6 files changed, 103 insertions(+), 52 deletions(-)

diff --git a/src/app.js b/src/app.js
index ab5c733..6dd8641 100644
--- a/src/app.js
+++ b/src/app.js
@@ -38,7 +38,6 @@ import './styles/login.css';
 import branding from './branding/branding';
 import Logout from './pages/login/logout';
 import Infrastructure from './pages/infrastructure/infrastructure';
-import Usergroups from './pages/usergroups/usergroups';
 import Usergroup from './pages/usergroups/usergroup';
 import { useSelector } from 'react-redux';
 
@@ -113,9 +112,6 @@ const App = () => {
                 <Route path="/users">
                   <Users />
                 </Route>
-                <Route path="/usergroups">
-                    <Usergroups />
-                </Route>
                 <Route path="/usergroup/:usergroup">
                     <Usergroup />
                 </Route>
diff --git a/src/branding/branding.js b/src/branding/branding.js
index 257e7ee..2d3bf53 100644
--- a/src/branding/branding.js
+++ b/src/branding/branding.js
@@ -157,7 +157,6 @@ class Branding {
       pages.scenarios = true;
       pages.infrastructure = true;
       pages.users = true;
-      pages.usergroups = true;
       pages.account = true;
       pages.api = true;
 
diff --git a/src/common/menu.js b/src/common/menu.js
index c0f755e..b30eb1c 100644
--- a/src/common/menu.js
+++ b/src/common/menu.js
@@ -99,13 +99,6 @@ const SideBarMenu = (props) => {
                 </NavLink>
               </li> : ''
             }
-            <li>
-              <NavLink
-                to="/usergroups"
-                title="Usegroups">
-                Usergroups
-              </NavLink>
-            </li>
             <li hidden={!values.pages.account}>
               <NavLink
                 to="/account"
@@ -163,15 +156,6 @@ const SideBarMenu = (props) => {
                 </NavLink>
               </li> : ''
             }
-            {currentUser.role === 'Admin' ?
-              <li>
-                <NavLink
-                  to="/usergroups"
-                  title="Usegroups">
-                  Usergroups
-                </NavLink>
-              </li> : ''
-            }
             <li hidden={!values.pages.account}>
               <NavLink
                 to="/account"
diff --git a/src/pages/usergroups/usergroup.js b/src/pages/usergroups/usergroup.js
index bccf9ef..e963b10 100644
--- a/src/pages/usergroups/usergroup.js
+++ b/src/pages/usergroups/usergroup.js
@@ -17,7 +17,7 @@
 
 import { useState } from "react";
 import { useParams } from "react-router-dom/cjs/react-router-dom.min";
-import { Row, Col } from "react-bootstrap";
+import { Row, Col, Spinner } from "react-bootstrap";
 import UsergroupScenariosTable from "./tables/usergroup-scenarios-table";
 import UsergroupUsersTable from "./tables/usergroup-users-table";
 import IconButton from "../../common/buttons/icon-button";
@@ -48,7 +48,7 @@ const Usergroup = () => {
         setIsRenameModalOpened(false);
     }
 
-    if(isLoading) return <div className='loading'>Loading...</div>;
+    if(isLoading) return <Spinner />;
 
     return (
         <div className='section'>
diff --git a/src/pages/usergroups/usergroups.js b/src/pages/usergroups/usergroups.js
index 8f1fa34..9e24bb4 100644
--- a/src/pages/usergroups/usergroups.js
+++ b/src/pages/usergroups/usergroups.js
@@ -25,8 +25,9 @@ import DeleteDialog from "../../common/dialogs/delete-dialog";
 import moment from "moment";
 import notificationsDataManager from "../../common/data-managers/notifications-data-manager";
 import NotificationsFactory from "../../common/data-managers/notifications-factory";
+import { Spinner } from "react-bootstrap";
 
-const Usergroups = (props) => {
+const Usergroups = () => {
     const {data: {usergroups} = {}, refetch: refetchUsergroups, isLoading} = useGetUsergroupsQuery();
     const [addUsergroup] = useAddUsergroupMutation();
     const [deleteUsergroup] = useDeleteUsergroupMutation();
@@ -69,7 +70,7 @@ const Usergroups = (props) => {
       return `${date.fromNow()}`;
     };
     
-    if(isLoading) return <div>Loading</div>;
+    if(isLoading) return <Spinner />;
 
     if(usergroups){
       return (<div className="section"> 
diff --git a/src/pages/users/users.js b/src/pages/users/users.js
index c0826c2..6e9c5e9 100644
--- a/src/pages/users/users.js
+++ b/src/pages/users/users.js
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useSelector } from "react-redux";
-import { Dropdown, DropdownButton } from 'react-bootstrap';
+import { Dropdown, DropdownButton, Spinner, Row, Col } from 'react-bootstrap';
 import { Table, ButtonColumn, CheckboxColumn, DataColumn } from "../../common/table";
 import Icon from "../../common/icon";
 import IconButton from "../../common/buttons/icon-button";
@@ -11,6 +11,7 @@ import DeleteDialog from "../../common/dialogs/delete-dialog";
 import { buttonStyle, iconStyle } from "./styles";
 import NotificationsFactory from "../../common/data-managers/notifications-factory";
 import notificationsDataManager from "../../common/data-managers/notifications-data-manager";
+import Usergroups from "../usergroups/usergroups";
 import { 
     useGetUsersQuery, 
     useAddUserMutation,
@@ -18,26 +19,31 @@ import {
     useDeleteUserMutation,
     useGetScenariosQuery,
     useAddUserToScenarioMutation,
+    useGetUsergroupsQuery,
+    useAddUserToUsergroupMutation
 } from "../../store/apiSlice";
 
-const Users = ({}) => {
+const Users = () => {
 
     const { user: currentUser, token: sessionToken } = useSelector((state) => state.auth);
 
     const {data: fetchedUsers, refetch: refetchUsers} = useGetUsersQuery();
     const users = fetchedUsers ? fetchedUsers.users : [];
-    const { data: fetchedScenarios } = useGetScenariosQuery();
-    const scenarios = fetchedScenarios ? fetchedScenarios.scenarios : [];
+    const { data: {scenarios} = [], isLoading: isLoadingScenarios } = useGetScenariosQuery();
+    const {data: {usergroups} = [], isLoading: isLoadingUsergroups } = useGetUsergroupsQuery();
     const [checkedUsersIDs, setCheckedUsersIDs] = useState([]);
     const [addUserMutation] = useAddUserMutation();
     const [updateUserMutation] = useUpdateUserMutation();
     const [deleteUserMutation] = useDeleteUserMutation();
     const [addUserToScenarioMutation] = useAddUserToScenarioMutation();
+    const [addUserToUsergroup] = useAddUserToUsergroupMutation();
     const [isNewModalOpened, setIsNewModalOpened] = useState(false);
     const [isEditModalOpened, setIsEditModalOpened] = useState(false);
     const [isDeleteModalOpened, setIsDeleteModalOpened] = useState(false);
     const [scenario, setScenario] = useState({name: ''});
+    const [usergroup, setUsergroup] = useState({name: ''});
     const [isUsersToScenarioModalOpened, setUsersToScenarioModalOpened] = useState(false);
+    const [isUsersToUsegroupModalOpened, setUsersToUsegroupModalOpened] = useState(false);
     const [userToEdit, setUserToEdit] = useState({});
     const [userToDelete, setUserToDelete] = useState({});
     const [areAllUsersChecked, setAreAllUsersChecked] = useState(false);
@@ -124,6 +130,28 @@ const Users = ({}) => {
         setAreAllUsersChecked(false);
     }
 
+    const handleAddUsersToUsergroup = async (isCanceled) => {
+        if(!isCanceled){
+            try {
+                for(let i = 0; i < checkedUsersIDs.length; i++){
+                    await addUserToUsergroup({ usergroupID: usergroup.id, username: users.find(u => u.id === checkedUsersIDs[i]).username }).unwrap();
+                }
+            } catch (error) {
+                if(error.data){
+                    notificationsDataManager.addNotification(NotificationsFactory.LOAD_ERROR(error.data.message));
+                } else {
+                console.log("error", error)
+                  notificationsDataManager.addNotification(NotificationsFactory.LOAD_ERROR("Unknown error"));
+                }
+            }
+        }
+        
+        setUsersToUsegroupModalOpened(false);
+        setCheckedUsersIDs([]);
+        setUsergroup({name: ''});
+        setAreAllUsersChecked(false);
+    }
+
     const toggleCheckAllUsers = () => {
         if(checkedUsersIDs.length === users.length){
             setCheckedUsersIDs([]);
@@ -207,30 +235,69 @@ const Users = ({}) => {
                     }}
                 />
             </Table>
-            <span className='solid-button'>
-                <DropdownButton
-                    title='Add to Scenario'
-                    onSelect={(id) => {
-                        let scenario;
-                        if(scenarios.length > 0) {
-                            scenario = scenarios.find(s => s.id == id);
-                        }
-                        setScenario(scenario);
-                        setUsersToScenarioModalOpened(true);
-                    }}
-                >
-                {scenarios.map(scenario => (
-                    <Dropdown.Item key={scenario.id} eventKey={scenario.id}>{scenario.name}</Dropdown.Item>
-                ))}
-                </DropdownButton>
-            </span>
 
-            <UsersToScenarioDialog
-                show={isUsersToScenarioModalOpened}
-                users={users.filter(user => checkedUsersIDs.includes(user.id))}
-                scenario={scenario.name}
-                onClose={(canceled) => handleAddUserToScenario(canceled)}
-            />
+            <Row>
+                <Col md="auto">
+                    {isLoadingScenarios? <Spinner /> : <>
+                            <span className='solid-button'>
+                                <DropdownButton
+                                    title='Add to Scenario'
+                                    onSelect={(id) => {
+                                        let scenario;
+                                        if(scenarios.length > 0) {
+                                            scenario = scenarios.find(s => s.id == id);
+                                        }
+                                        setScenario(scenario);
+                                        setUsersToScenarioModalOpened(true);
+                                    }}
+                                >
+                                {scenarios.map(scenario => (
+                                    <Dropdown.Item key={scenario.id} eventKey={scenario.id}>{scenario.name}</Dropdown.Item>
+                                ))}
+                                </DropdownButton>
+                            </span>
+                            
+
+                            <UsersToScenarioDialog
+                                show={isUsersToScenarioModalOpened}
+                                users={users.filter(user => checkedUsersIDs.includes(user.id))}
+                                scenario={scenario.name}
+                                onClose={(canceled) => handleAddUserToScenario(canceled)}
+                            />
+                    </>}
+                </Col>
+
+                <Col md="auto">
+                {isLoadingUsergroups? <Spinner /> : <>
+                        <span className='solid-button'>
+                            <DropdownButton
+                                title='Add to Usegroup'
+                                onSelect={(id) => {
+                                    let usergroup;
+                                    if(usergroups.length > 0) {
+                                        usergroup = usergroups.find(s => s.id == id);
+                                    }
+                                    setUsergroup(usergroup);
+                                    setUsersToUsegroupModalOpened(true);
+                                }}
+                            >
+                            {usergroups.map(usergroup => (
+                                <Dropdown.Item key={usergroup.id} eventKey={usergroup.id}>{usergroup.name}</Dropdown.Item>
+                            ))}
+                            </DropdownButton>
+                        </span>
+
+                        {/* re-using same modal to implement adding suers to usergroup */}
+                        <UsersToScenarioDialog
+                            show={isUsersToUsegroupModalOpened}
+                            users={users.filter(user => checkedUsersIDs.includes(user.id))}
+                            scenario={usergroup.name}
+                            onClose={(canceled) => handleAddUsersToUsergroup(canceled)}
+                        />
+                    </>}
+                </Col>
+            </Row>
+
             <NewUserDialog 
                 show={isNewModalOpened} 
                 onClose={(data) => handleAddNewUser(data)} 
@@ -246,6 +313,10 @@ const Users = ({}) => {
                 show={isDeleteModalOpened} 
                 onClose={(e) => handleDeleteUser(e)} 
             />
+
+            <div className="mt-4">
+                <Usergroups />
+            </div>
         </div>
     )
 }