fix-margins

first versions of modals

replace text with span

change eslint rule due to conflict between prettier and eslint, prettier already sort classnames

Adds promisifyMutation helper to simplify mutation handling
Updates user management handlers to use the helper
Adds proper typing for handlers using IDataHandlers interface
Removes duplicate type definitions

added search query

make pagination using usePaginationQueryStateWithStore

fixes code-review: remove onErrors callbacks

fix enter

fix pathes

refactoring dialogs

refactoring types

commit: refactor: use store provider for user management hooks
This commit refactors the user management page to use a centralized store provider by:
Creating UserManagementStoreProvider to manage shared hooks
Removing hook props drilling through components
Accessing hooks via useUserManagementStore hook in child components
Splitting UserManagementPage into container and content components
This change improves code organization and reduces prop drilling while maintaining existing functionality.

commit: refactor: move dialog context to providers directory
This commit reorganizes the dialog-related code by:
Moving DialogsProvider from context/ to providers/ directory
Updating import paths across components to use the new location
3. Removing unused context files and types
Consolidating dialog-related code for better maintainability
This is a structural change that improves code organization while maintaining existing functionality.

remove redundant index from dialog

commit: refactor: migrate dialog state management to UI layer
The commit refactors the user management dialog state handling by:
Moving dialog state management from container to UI layer using DialogsProvider
Converting mutation handlers to return Promises for proper async handling
Removing redundant dialog state management code from container
Consolidating error and loading states into dedicated objects
Moving EActiveTab enum to UI package for better organization
This change improves separation of concerns by keeping UI state management in the UI layer while maintaining the same functionality.

refactor: reorganize validation schemas and types

- Move Zod schemas to dedicated schema files
- Update type definitions to use schema inference
- Fix import paths to use absolute imports
- Remove duplicate schema definitions from components
- Centralize types in dedicated type files

refactor(user-management): reorganize dialogs structure

- Move all dialogs to dedicated folders with proper structure
- Add types and index files for each dialog
- Update imports and exports
- Add new translations for empty state
- Improve code organization in UserManagementPage

first version of filters and sorting

remove unnecessary fragment

added tabs

fixes after design review

Author: athens-server

.eslintrc.json

@@ -43,10 +43,9 @@
     "import/no-unresolved": "off",
     "react/prop-types": "off",
     "react/react-in-jsx-scope": "off",
-
+    "tailwindcss/classnames-order": "off",
     "jsx-a11y/click-events-have-key-events": "warn",
     "jsx-a11y/no-autofocus": "off",
-
     "@typescript-eslint/no-unused-vars": [
       "error",
       {

apps/gitness/src/pages-v2/user-management/user-management-container.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 
 import { useQueryClient } from '@tanstack/react-query'
 
@@ -9,65 +9,28 @@ import {
   useAdminUpdateUserMutation,
   useUpdateUserAdminMutation
 } from '@harnessio/code-service-client'
-import {
-  AdminDialog,
-  CreateUserDialog,
-  DeleteUserDialog,
-  DialogLabels,
-  EditUserDialog,
-  ResetPasswordDialog,
-  UserManagementPage,
-  UsersProps
-} from '@harnessio/ui/views'
-
-import { parseAsInteger, useQueryState } from '../../framework/hooks/useQueryState'
+import { IDataHandlers, UserManagementPage } from '@harnessio/ui/views'
+
+import { useQueryState } from '../../framework/hooks/useQueryState'
+import usePaginationQueryStateWithStore from '../../hooks/use-pagination-query-state-with-store'
 import { useTranslationStore } from '../../i18n/stores/i18n-store'
-import { generateAlphaNumericHash } from '../pull-request/pull-request-utils'
 import { useAdminListUsersStore } from './stores/admin-list-store'
+import { promisifyMutation } from './utils/promisify-mutation'
 
 export const UserManagementPageContainer = () => {
-  const [queryPage, setQueryPage] = useQueryState('page', parseAsInteger.withDefault(1))
-  const { setUsers, setTotalPages, setPage, page, password, setUser, setPassword, setGeteneratePassword } =
-    useAdminListUsersStore()
   const queryClient = useQueryClient()
 
-  const [isDeleteUserDialogOpen, setDeleteUserDialogOpen] = useState(false)
-  const [isEditUserDialogOpen, setEditUserDialogOpen] = useState(false)
-  const [isAdminDialogOpen, setAdminDialogOpen] = useState(false)
-  const [isResetPasswordDialogOpen, setResetPasswordDialogOpen] = useState(false)
-  const [isCreateUserDialogOpen, setCreateUserDialogOpen] = useState(false)
-
-  const handleDialogOpen = (user: UsersProps | null, dialogTypeLabel: string) => {
-    if (user) setUser(user)
-
-    switch (dialogTypeLabel) {
-      case DialogLabels.DELETE_USER:
-        setDeleteUserDialogOpen(true)
-        break
-      case DialogLabels.EDIT_USER:
-        setEditUserDialogOpen(true)
-        break
-      case DialogLabels.TOGGLE_ADMIN:
-        setAdminDialogOpen(true)
-        break
-      case DialogLabels.RESET_PASSWORD:
-        setGeteneratePassword(false)
-        setPassword(generateAlphaNumericHash(10))
-        setResetPasswordDialogOpen(true)
-        break
-      case DialogLabels.CREATE_USER:
-        setPassword(generateAlphaNumericHash(10))
-        setCreateUserDialogOpen(true)
-        setGeteneratePassword(true)
-        break
-      default:
-        break
-    }
-  }
+  const { setUsers, setTotalPages, setPage, page, password } = useAdminListUsersStore()
+
+  const [query, setQuery] = useQueryState('query')
+  const { queryPage } = usePaginationQueryStateWithStore({ page, setPage })
 
   const { data: { body: userData, headers } = {} } = useAdminListUsersQuery({
     queryParams: {
-      page: queryPage
+      page: queryPage,
+      // TODO: add search functionality by query parameter
+      //@ts-expect-error - query is not typed
+      query: query ?? ''
     }
   })
 
@@ -80,45 +43,41 @@ export const UserManagementPageContainer = () => {
     }
   }, [userData, setUsers, setTotalPages, headers])
 
-  useEffect(() => {
-    setQueryPage(page)
-  }, [queryPage, page, setPage])
-
-  const { mutate: updateUser, isLoading: isUpdatingUser } = useAdminUpdateUserMutation(
+  const {
+    mutate: updateUser,
+    isLoading: isUpdatingUser,
+    error: updateUserError
+  } = useAdminUpdateUserMutation(
     {},
     {
       onSuccess: () => {
-        setEditUserDialogOpen(false)
         queryClient.invalidateQueries({ queryKey: ['adminListUsers'] })
-      },
-      onError: error => {
-        console.error(error)
       }
     }
   )
 
-  const { mutate: deleteUser, isLoading: isDeletingUser } = useAdminDeleteUserMutation(
+  const {
+    mutate: deleteUser,
+    isLoading: isDeletingUser,
+    error: deleteUserError
+  } = useAdminDeleteUserMutation(
     {},
     {
       onSuccess: () => {
-        setDeleteUserDialogOpen(false)
         queryClient.invalidateQueries({ queryKey: ['adminListUsers'] })
-      },
-      onError: error => {
-        console.error(error)
       }
     }
   )
 
-  const { mutate: updateUserAdmin, isLoading: isUpdatingUserAdmin } = useUpdateUserAdminMutation(
+  const {
+    mutate: updateUserAdmin,
+    isLoading: isUpdatingUserAdmin,
+    error: updateUserAdminError
+  } = useUpdateUserAdminMutation(
     {},
     {
       onSuccess: () => {
-        setAdminDialogOpen(false)
         queryClient.invalidateQueries({ queryKey: ['adminListUsers'] })
-      },
-      onError: error => {
-        console.error(error)
       }
     }
   )
@@ -131,18 +90,13 @@ export const UserManagementPageContainer = () => {
     {},
     {
       onSuccess: () => {
-        setCreateUserDialogOpen(false)
-        setResetPasswordDialogOpen(true)
         queryClient.invalidateQueries({ queryKey: ['adminListUsers'] })
-      },
-      onError: error => {
-        console.error(error)
       }
     }
   )
 
-  const handleCreateUser = (data: { uid: string; email: string; display_name: string }) => {
-    createUser({
+  const handleCreateUser: IDataHandlers['handleCreateUser'] = data => {
+    return promisifyMutation(createUser, {
       body: {
         uid: data.uid,
         email: data.email,
@@ -152,8 +106,8 @@ export const UserManagementPageContainer = () => {
     })
   }
 
-  const handleUpdateUser = (data: { email: string; displayName: string; userID: string }) => {
-    updateUser({
+  const handleUpdateUser: IDataHandlers['handleUpdateUser'] = data => {
+    return promisifyMutation(updateUser, {
       user_uid: data.userID,
       body: {
         email: data.email,
@@ -162,71 +116,62 @@ export const UserManagementPageContainer = () => {
     })
   }
 
-  const handleDeleteUser = (userUid: string) => {
-    deleteUser({
+  const handleDeleteUser: IDataHandlers['handleDeleteUser'] = userUid => {
+    return promisifyMutation(deleteUser, {
       user_uid: userUid
     })
   }
 
-  const handleUpdateUserAdmin = (userUid: string, isAdmin: boolean) => {
-    updateUserAdmin({
+  const handleUpdateUserAdmin: IDataHandlers['handleUpdateUserAdmin'] = (userUid, isAdmin) => {
+    return promisifyMutation(updateUserAdmin, {
       user_uid: userUid,
       body: {
         admin: isAdmin
       }
     })
   }
 
-  const handleUpdatePassword = (userId: string) => {
-    updateUser({
+  const handleUpdatePassword: IDataHandlers['handleUpdatePassword'] = userId => {
+    return promisifyMutation(updateUser, {
       user_uid: userId,
       body: {
         password: password
       }
     })
   }
 
+  const handlers = {
+    handleUpdateUser,
+    handleDeleteUser,
+    handleUpdateUserAdmin,
+    handleUpdatePassword,
+    handleCreateUser
+  }
+
+  const loadingStates = {
+    isUpdatingUser,
+    isDeletingUser,
+    isUpdatingUserAdmin,
+    isCreatingUser
+  }
+
+  const errorStates = {
+    updateUserError: updateUserError?.message?.toString() ?? '',
+    deleteUserError: deleteUserError?.message?.toString() ?? '',
+    updateUserAdminError: updateUserAdminError?.message?.toString() ?? '',
+    createUserError: createUserError?.message?.toString() ?? ''
+  }
+
   return (
     <>
       <UserManagementPage
         useAdminListUsersStore={useAdminListUsersStore}
         useTranslationStore={useTranslationStore}
-        handleDialogOpen={handleDialogOpen}
-      />
-
-      <DeleteUserDialog
-        open={isDeleteUserDialogOpen}
-        useAdminListUsersStore={useAdminListUsersStore}
-        onClose={() => setDeleteUserDialogOpen(false)}
-        isDeleting={isDeletingUser}
-        handleDeleteUser={handleDeleteUser}
-      />
-      <EditUserDialog
-        open={isEditUserDialogOpen}
-        useAdminListUsersStore={useAdminListUsersStore}
-        isSubmitting={isUpdatingUser}
-        onClose={() => setEditUserDialogOpen(false)}
-        handleUpdateUser={handleUpdateUser}
-      />
-      <AdminDialog
-        open={isAdminDialogOpen}
-        useAdminListUsersStore={useAdminListUsersStore}
-        onClose={() => setAdminDialogOpen(false)}
-        isLoading={isUpdatingUserAdmin}
-        updateUserAdmin={handleUpdateUserAdmin}
-      />
-      <ResetPasswordDialog
-        open={isResetPasswordDialogOpen}
-        useAdminListUsersStore={useAdminListUsersStore}
-        onClose={() => setResetPasswordDialogOpen(false)}
-        handleUpdatePassword={handleUpdatePassword}
-      />
-      <CreateUserDialog
-        open={isCreateUserDialogOpen}
-        onClose={() => setCreateUserDialogOpen(false)}
-        isLoading={isCreatingUser}
-        apiError={createUserError?.message?.toString() ?? ''}
-        handleCreateUser={handleCreateUser}
+        handlers={handlers}
+        loadingStates={loadingStates}
+        errorStates={errorStates}
+        searchQuery={query}
+        setSearchQuery={setQuery}
       />
     </>
   )

apps/gitness/src/pages-v2/user-management/utils/promisify-mutation.ts

@@ -0,0 +1,10 @@
+export type MutationFn<T> = (params: T, options: { onSuccess: () => void; onError: (error: any) => void }) => void
+
+export const promisifyMutation = <T>(mutation: MutationFn<T>, params: T): Promise<void> => {
+  return new Promise<void>((resolve, reject) => {
+    mutation(params, {
+      onSuccess: () => resolve(),
+      onError: error => reject(error)
+    })
+  })
+}

packages/ui/locales/en/views.json

@@ -190,6 +190,8 @@
     "createOrImportRepos": "Create new or import an existing repository.",
     "noWebhooks": "No webhooks yet",
     "noWebhooksDescription": "Add or manage webhooks to automate tasks and connect external services to your project.",
+    "noUsers": "No Users Found",
+    "noUsersDescription": "There are no users in this scope. Click on the button below to start adding them.",
     "commit": "Commit",
     "noLabels": "No labels yet",
     "noLabelsDescription": "Use labels to organize, prioritize, and categorize tasks efficiently."
@@ -401,6 +403,15 @@
     "edit": "Edit webhook",
     "delete": "Delete webhook"
   },
+  "userManagement": {
+    "newUserButton": "New user",
+    "searchPlaceholder": "Search",
+    "usersHeader": "Users",
+    "tabs": {
+      "active": "Active users",
+      "inactive": "Pending users"
+    }
+  },
   "labelData": {
     "create": "Create labels"
   }

packages/ui/locales/es/views.json

@@ -190,6 +190,8 @@
     "createOrImportRepos": "Create new or import an existing repository.",
     "noWebhooks": "No webhooks yet",
     "noWebhooksDescription": "Add or manage webhooks to automate tasks and connect external services to your project.",
+    "noUsers": "No Users Found",
+    "noUsersDescription": "There are no users in this scope. Click on the button below to start adding them.",
     "commit": "Commit",
     "noLabels": "No labels yet",
     "noLabelsDescription": "Use labels to organize, prioritize, and categorize tasks efficiently."
@@ -389,6 +391,15 @@
     "edit": "Edit webhook",
     "delete": "Delete webhook"
   },
+  "userManagement": {
+    "newUserButton": "New user",
+    "searchPlaceholder": "Search",
+    "usersHeader": "Users",
+    "tabs": {
+      "active": "Active users",
+      "inactive": "Pending users"
+    }
+  },
   "labelData": {
     "create": "Create labels"
   },

packages/ui/locales/fr/views.json

@@ -190,6 +190,8 @@
     "createOrImportRepos": "Créer un nouveau dépôt ou importer un dépôt existant.",
     "noWebhooks": "No webhooks yet",
     "noWebhooksDescription": "Add or manage webhooks to automate tasks and connect external services to your project.",
+    "noUsers": "No Users Found",
+    "noUsersDescription": "There are no users in this scope. Click on the button below to start adding them.",
     "commit": "Validation",
     "noLabels": "No labels yet",
     "noLabelsDescription": "Use labels to organize, prioritize, and categorize tasks efficiently."
@@ -395,6 +397,15 @@
     "edit": "Edit webhook",
     "delete": "Delete webhook"
   },
+  "userManagement": {
+    "newUserButton": "New user",
+    "searchPlaceholder": "Search",
+    "usersHeader": "Users",
+    "tabs": {
+      "active": "Active users",
+      "inactive": "Pending users"
+    }
+  },
   "labelData": {
     "create": "Create labels"
   }

packages/ui/src/components/table.tsx

@@ -8,7 +8,7 @@ const tableVariants = cva('w-full text-sm', {
     variant: {
       default: 'caption-bottom ',
       asStackedList:
-        'rounded-md border [&_td]:px-4 [&_td]:py-2.5 [&_td]:align-top [&_th]:px-4 [&_thead]:bg-background-2'
+        '[&_thead]:bg-background-2 rounded-md border [&_td]:px-4 [&_td]:py-2.5 [&_td]:align-top [&_th]:px-4'
     }
   },
   defaultVariants: {