Merge pull request #1734 from automatisch/AUT-845

refactor: rewrite useUsers with RQ

packages/backend/src/graphql/queries/get-users.js

@@ -1,19 +0,0 @@
-import paginate from '../../helpers/pagination.js';
-import User from '../../models/user.js';
-
-const getUsers = async (_parent, params, context) => {
-  context.currentUser.can('read', 'User');
-
-  const usersQuery = User.query()
-    .leftJoinRelated({
-      role: true,
-    })
-    .withGraphFetched({
-      role: true,
-    })
-    .orderBy('full_name', 'asc');
-
-  return paginate(usersQuery, params.limit, params.offset);
-};
-
-export default getUsers;

packages/backend/src/graphql/queries/get-users.test.js

@@ -1,148 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import request from 'supertest';
-import app from '../../app';
-import createAuthTokenByUserId from '../../helpers/create-auth-token-by-user-id';
-import { createRole } from '../../../test/factories/role';
-import { createPermission } from '../../../test/factories/permission';
-import { createUser } from '../../../test/factories/user';
-
-describe('graphQL getUsers query', () => {
-  const query = `
-    query {
-      getUsers(limit: 10, offset: 0) {
-        pageInfo {
-          currentPage
-          totalPages
-        }
-        totalCount
-        edges {
-          node {
-            id
-            fullName
-            email
-            role {
-              id
-              name
-            }
-          }
-        }
-      }
-    }
-  `;
-
-  describe('and without permissions', () => {
-    it('should throw not authorized error', async () => {
-      const userWithoutPermissions = await createUser();
-      const token = createAuthTokenByUserId(userWithoutPermissions.id);
-
-      const response = await request(app)
-        .post('/graphql')
-        .set('Authorization', token)
-        .send({ query })
-        .expect(200);
-
-      expect(response.body.errors).toBeDefined();
-      expect(response.body.errors[0].message).toEqual('Not authorized!');
-    });
-  });
-
-  describe('and with correct permissions', () => {
-    let role, currentUser, anotherUser, token, requestObject;
-
-    beforeEach(async () => {
-      role = await createRole({
-        key: 'sample',
-        name: 'sample',
-      });
-
-      await createPermission({
-        action: 'read',
-        subject: 'User',
-        roleId: role.id,
-      });
-
-      currentUser = await createUser({
-        roleId: role.id,
-        fullName: 'Current User',
-      });
-
-      anotherUser = await createUser({
-        roleId: role.id,
-        fullName: 'Another User',
-      });
-
-      token = createAuthTokenByUserId(currentUser.id);
-      requestObject = request(app).post('/graphql').set('Authorization', token);
-    });
-
-    it('should return users data', async () => {
-      const response = await requestObject.send({ query }).expect(200);
-
-      const expectedResponsePayload = {
-        data: {
-          getUsers: {
-            edges: [
-              {
-                node: {
-                  email: anotherUser.email,
-                  fullName: anotherUser.fullName,
-                  id: anotherUser.id,
-                  role: {
-                    id: role.id,
-                    name: role.name,
-                  },
-                },
-              },
-              {
-                node: {
-                  email: currentUser.email,
-                  fullName: currentUser.fullName,
-                  id: currentUser.id,
-                  role: {
-                    id: role.id,
-                    name: role.name,
-                  },
-                },
-              },
-            ],
-            pageInfo: {
-              currentPage: 1,
-              totalPages: 1,
-            },
-            totalCount: 2,
-          },
-        },
-      };
-
-      expect(response.body).toEqual(expectedResponsePayload);
-    });
-
-    it('should not return users data with password', async () => {
-      const query = `
-          query {
-            getUsers(limit: 10, offset: 0) {
-              pageInfo {
-                currentPage
-                totalPages
-              }
-              totalCount
-              edges {
-                node {
-                  id
-                  fullName
-                  password
-                }
-              }
-            }
-          }
-        `;
-
-      const response = await requestObject.send({ query }).expect(400);
-
-      expect(response.body.errors).toBeDefined();
-      expect(response.body.errors[0].message).toEqual(
-        'Cannot query field "password" on type "User".'
-      );
-    });
-  });
-});

packages/backend/src/graphql/query-resolvers.js

@@ -9,7 +9,6 @@ import getDynamicFields from './queries/get-dynamic-fields.js';
 import getFlow from './queries/get-flow.js';
 import getNotifications from './queries/get-notifications.js';
 import getStepWithTestExecutions from './queries/get-step-with-test-executions.js';
-import getUsers from './queries/get-users.js';
 import testConnection from './queries/test-connection.js';
 
 const queryResolvers = {
@@ -24,7 +23,6 @@ const queryResolvers = {
   getFlow,
   getNotifications,
   getStepWithTestExecutions,
-  getUsers,
   testConnection,
 };
 

packages/backend/src/graphql/schema.graphql

@@ -19,7 +19,6 @@ type Query {
   getBillingAndUsage: GetBillingAndUsage
   getConfig(keys: [String]): JSONObject
   getNotifications: [Notification]
-  getUsers(limit: Int!, offset: Int!): UserConnection
 }
 
 type Mutation {
@@ -288,16 +287,6 @@ type SamlAuthProvidersRoleMapping {
   remoteRoleName: String
 }
 
-type UserConnection {
-  edges: [UserEdge]
-  pageInfo: PageInfo
-  totalCount: Int
-}
-
-type UserEdge {
-  node: User
-}
-
 input CreateConnectionInput {
   key: String!
   appAuthClientId: String

packages/web/src/components/DeleteUserButton/index.ee.jsx

@@ -2,6 +2,8 @@ import PropTypes from 'prop-types';
 import { useMutation } from '@apollo/client';
 import DeleteIcon from '@mui/icons-material/Delete';
 import IconButton from '@mui/material/IconButton';
+import { useQueryClient } from '@tanstack/react-query';
+
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 import ConfirmationDialog from 'components/ConfirmationDialog';
@@ -17,9 +19,13 @@ function DeleteUserButton(props) {
   });
   const formatMessage = useFormatMessage();
   const enqueueSnackbar = useEnqueueSnackbar();
+  const queryClient = useQueryClient();
+
   const handleConfirm = React.useCallback(async () => {
     try {
       await deleteUser();
+      queryClient.invalidateQueries({ queryKey: ['admin', 'users'] });
+      queryClient.invalidateQueries({ queryKey: ['admin', 'user', userId] });
       setShowConfirmation(false);
       enqueueSnackbar(formatMessage('deleteUserButton.successfullyDeleted'), {
         variant: 'success',
@@ -31,6 +37,7 @@ function DeleteUserButton(props) {
       throw new Error('Failed while deleting!');
     }
   }, [deleteUser]);
+
   return (
     <>
       <IconButton

packages/web/src/components/UserList/index.jsx

@@ -14,23 +14,23 @@ import EditIcon from '@mui/icons-material/Edit';
 import TableFooter from '@mui/material/TableFooter';
 import DeleteUserButton from 'components/DeleteUserButton/index.ee';
 import ListLoader from 'components/ListLoader';
-import useUsers from 'hooks/useUsers';
+import useAdminUsers from 'hooks/useAdminUsers';
 import useFormatMessage from 'hooks/useFormatMessage';
 import * as URLS from 'config/urls';
 import TablePaginationActions from './TablePaginationActions';
 import { TablePagination } from './style';
+
 export default function UserList() {
   const formatMessage = useFormatMessage();
   const [page, setPage] = React.useState(0);
-  const [rowsPerPage, setRowsPerPage] = React.useState(10);
+  const { data: usersData, isLoading } = useAdminUsers(page + 1);
-  const { users, pageInfo, totalCount, loading } = useUsers(page, rowsPerPage);
+  const users = usersData?.data;
+  const { count } = usersData?.meta || {};
+
   const handleChangePage = (event, newPage) => {
     setPage(newPage);
   };
-  const handleChangeRowsPerPage = (event) => {
+
-    setRowsPerPage(+event.target.value);
-    setPage(0);
-  };
   return (
     <>
       <TableContainer component={Paper}>
@@ -68,14 +68,14 @@ export default function UserList() {
             </TableRow>
           </TableHead>
           <TableBody>
-            {loading && (
+            {isLoading && (
               <ListLoader
                 data-test="users-list-loader"
                 rowsNumber={3}
                 columnsNumber={2}
               />
             )}
-            {!loading &&
+            {!isLoading &&
               users.map((user) => (
                 <TableRow
                   key={user.id}
@@ -120,18 +120,16 @@ export default function UserList() {
                 </TableRow>
               ))}
           </TableBody>
-          {totalCount && (
+          {!isLoading && typeof count === 'number' && (
             <TableFooter>
               <TableRow>
                 <TablePagination
-                  data-total-count={totalCount}
+                  data-total-count={count}
-                  data-rows-per-page={rowsPerPage}
+                  rowsPerPageOptions={[]}
-                  rowsPerPageOptions={[10, 25, 50, 100]}
                   page={page}
-                  count={totalCount}
+                  count={count}
                   onPageChange={handleChangePage}
-                  rowsPerPage={rowsPerPage}
+                  rowsPerPage={10}
-                  onRowsPerPageChange={handleChangeRowsPerPage}
                   ActionsComponent={TablePaginationActions}
                 />
               </TableRow>

packages/web/src/graphql/queries/get-users.js

@@ -1,23 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_USERS = gql`
-  query GetUsers($limit: Int!, $offset: Int!) {
-    getUsers(limit: $limit, offset: $offset) {
-      pageInfo {
-        currentPage
-        totalPages
-      }
-      totalCount
-      edges {
-        node {
-          id
-          fullName
-          email
-          role {
-            id
-            name
-          }
-        }
-      }
-    }
-  }
-`;

packages/web/src/hooks/useAdminUser.js

@@ -1,9 +1,9 @@
 import { useQuery } from '@tanstack/react-query';
 import api from 'helpers/api';
 
-export default function useUser({ userId }) {
+export default function useAdminUser({ userId }) {
   const query = useQuery({
-    queryKey: ['user', userId],
+    queryKey: ['admin', 'user', userId],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(`/v1/admin/users/${userId}`, {
         signal,

packages/web/src/hooks/useAdminUsers.js

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+import api from 'helpers/api';
+
+export default function useAdminUsers(page) {
+  const query = useQuery({
+    queryKey: ['admin', 'users', page],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get(`/v1/admin/users`, {
+        signal,
+        params: { page },
+      });
+      return data;
+    },
+  });
+
+  return query;
+}

packages/web/src/hooks/useUsers.js

@@ -1,20 +0,0 @@
-import { useQuery } from '@apollo/client';
-import { GET_USERS } from 'graphql/queries/get-users';
-const getLimitAndOffset = (page, rowsPerPage) => ({
-  limit: rowsPerPage,
-  offset: page * rowsPerPage,
-});
-export default function useUsers(page, rowsPerPage) {
-  const { data, loading } = useQuery(GET_USERS, {
-    variables: getLimitAndOffset(page, rowsPerPage),
-  });
-  const users = data?.getUsers.edges.map(({ node }) => node) || [];
-  const pageInfo = data?.getUsers.pageInfo;
-  const totalCount = data?.getUsers.totalCount;
-  return {
-    users,
-    pageInfo,
-    totalCount,
-    loading,
-  };
-}

packages/web/src/pages/CreateUser/index.jsx

@@ -6,6 +6,7 @@ import MuiTextField from '@mui/material/TextField';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useQueryClient } from '@tanstack/react-query';
 
 import Can from 'components/Can';
 import Container from 'components/Container';
@@ -29,6 +30,7 @@ export default function CreateUser() {
   const { data, loading: isRolesLoading } = useRoles();
   const roles = data?.data;
   const enqueueSnackbar = useEnqueueSnackbar();
+  const queryClient = useQueryClient();
 
   const handleUserCreation = async (userData) => {
     try {
@@ -44,7 +46,7 @@ export default function CreateUser() {
           },
         },
       });
-
+      queryClient.invalidateQueries({ queryKey: ['admin', 'users'] });
       enqueueSnackbar(formatMessage('createUser.successfullyCreated'), {
         variant: 'success',
         persist: true,

packages/web/src/pages/EditUser/index.jsx

@@ -7,6 +7,7 @@ import MuiTextField from '@mui/material/TextField';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+import { useQueryClient } from '@tanstack/react-query';
 
 import Can from 'components/Can';
 import Container from 'components/Container';
@@ -18,7 +19,7 @@ import * as URLS from 'config/urls';
 import { UPDATE_USER } from 'graphql/mutations/update-user.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useRoles from 'hooks/useRoles.ee';
-import useUser from 'hooks/useUser';
+import useAdminUser from 'hooks/useAdminUser';
 
 function generateRoleOptions(roles) {
   return roles?.map(({ name: label, id: value }) => ({ label, value }));
@@ -28,12 +29,13 @@ export default function EditUser() {
   const formatMessage = useFormatMessage();
   const [updateUser, { loading }] = useMutation(UPDATE_USER);
   const { userId } = useParams();
-  const { data: userData, isLoading: isUserLoading } = useUser({ userId });
+  const { data: userData, isLoading: isUserLoading } = useAdminUser({ userId });
   const user = userData?.data;
   const { data, isLoading: isRolesLoading } = useRoles();
   const roles = data?.data;
   const enqueueSnackbar = useEnqueueSnackbar();
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
 
   const handleUserUpdate = async (userDataToUpdate) => {
     try {
@@ -49,6 +51,8 @@ export default function EditUser() {
           },
         },
       });
+      queryClient.invalidateQueries({ queryKey: ['admin', 'users'] });
+      queryClient.invalidateQueries({ queryKey: ['admin', 'user', userId] });
 
       enqueueSnackbar(formatMessage('editUser.successfullyUpdated'), {
         variant: 'success',