implemented get usergroup endpoint end added query call to usergroup page

Signed-off-by: Andrii Podriez <andrey5577990@gmail.com>

src/pages/usergroups/usergroup.js

@@ -20,11 +20,14 @@ import { Table, DataColumn, LinkColumn } from "../../common/table";
 import { Row, Col } from "react-bootstrap";
 import UsergroupScenariosTable from "./tables/usergroup-scenarios-table";
 import UsergroupUsersTable from "./tables/usergroup-users-table";
+import { useGetUserGroupByIdQuery } from "../../store/apiSlice";
 
 const Usergroup = (props) => {
-    // const params = useParams();
-    // const id = params.usergroup;
-    const usergroup = {name: 'Test Group'};
+    const params = useParams();
+    const usergroupID = params.usergroup;
+    const {data: {usergroup} = {}, isLoading} = useGetUserGroupByIdQuery(usergroupID);
+
+    if(isLoading) return <div className='loading'>Loading...</div>;
 
     return (
         <div className='section'>
@@ -32,11 +35,11 @@ const Usergroup = (props) => {
             <Row>
                 <Col>
                     <h4>Users</h4>
-                    <UsergroupUsersTable />
+                    <UsergroupUsersTable usergroupID={usergroupID} />
                 </Col>
                 <Col>
                     <h4>Scenario Mappings</h4>
-                    <UsergroupScenariosTable />
+                    <UsergroupScenariosTable usergroupID={usergroupID} />
                 </Col>
             </Row>
         </div>

src/store/apiSlice.js

@@ -108,5 +108,6 @@ export const {
   useUpdateComponentConfigMutation,
   useGetUsergroupsQuery,
   useAddUsergroupMutation,
-  useDeleteUsergroupMutation
+  useDeleteUsergroupMutation,
+  useGetUserGroupByIdQuery
 } = apiSlice;

src/store/endpoints/usergroup-endpoints.js

@@ -19,6 +19,9 @@ export const usergroupEndpoints = (builder) => ({
     getUsergroups: builder.query({
       query: () => 'usergroups',
     }),
+    getUserGroupById: builder.query({
+      query: (usergroupID) => `/usergroups/${usergroupID}`,
+    }),
     addUsergroup: builder.mutation({
       query: (usergroup) => ({
         url: '/usergroups',