refactor: style improvements for the User Management page (#1131)

* refactor: rename dialog hooks and reorganize file structure

- Rename dialog hooks to use kebab-case filenames
- Remove nested index files for dialog hooks
- Simplify export structure for dialog hooks

fix: standardize dialog content width and error text classes

- Remove `w-full` class from Dialog.Content components
- Reorder error text classes for consistency across user management dialogs

fix: adjust user dialog UI details

- Modify info icon positioning in create user dialog
- Reorder error text classes for consistency
- Use useEffect to reset form values in edit user dialog

refactor: remove form components from user management dialogs

- Inline dialog form logic directly into dialog components
- Remove separate form components for create, edit, delete, reset password, and remove admin dialogs
- Simplify dialog structure by consolidating form and dialog logic
- Update locales to support new dialog translations

fixes dialogs width

decapitalize

fix cancels buttons

refactor: standardize import paths in user management components

- Replace relative imports with absolute paths using @/ prefix
- Maintain relative imports in index.ts files
- Update import paths in dialog components and providers

added locales

fixes

added empty state

added error state

added skeleton and nodata

refactor dialogs

added state provider

caption props

added no search results state

paddings refactor

remove unnecesary props drilling

remove classes sorting

refactor remove unnecessary props drilling

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

* fix: minor changes

* chore: add small adjustments

* fix: prettier

---------

Co-authored-by: Timofei Ponomarev <[email protected]>

Author: andrewgolovanov

apps/gitness/src/pages-v2/pull-request/__tests__/pull-request-utils.test.ts

@@ -1,4 +1,5 @@
 import { TypesCodeOwnerEvaluationEntry, TypesOwnerEvaluation, TypesPrincipalInfo } from '@harnessio/code-service-client'
+import { generateAlphaNumericHash } from '@harnessio/ui/utils'
 
 import { PullReqReviewDecision, TypeCheckData } from '../../../pages/pull-request/types/types'
 import {
@@ -11,7 +12,6 @@ import {
   extractSpecificViolations,
   findChangeReqDecisions,
   findWaitingDecisions,
-  generateAlphaNumericHash,
   generateStatusSummary,
   normalizeGitFilePath,
   processReviewDecision

apps/gitness/src/pages-v2/pull-request/hooks/usePRCommonInteractions.ts

@@ -8,8 +8,8 @@ import {
   // repoArtifactUpload,
   TypesPullReqActivity
 } from '@harnessio/code-service-client'
+import { generateAlphaNumericHash } from '@harnessio/ui/utils'
 import { CommitSuggestion } from '@harnessio/ui/views'
-import { generateAlphaNumericHash } from '@harnessio/views'
 
 import { useAPIPath } from '../../../hooks/useAPIPath'
 import { getErrorMessage } from '../pull-request-utils'

apps/gitness/src/pages-v2/pull-request/pull-request-utils.ts

@@ -478,18 +478,6 @@ export enum ViewStyle {
   LINE_BY_LINE = 'line-by-line'
 }
 
-export function generateAlphaNumericHash(length: number) {
-  let result = ''
-  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
-  const charactersLength = characters.length
-
-  for (let i = 0; i < length; i++) {
-    result += characters.charAt(Math.floor(Math.random() * charactersLength))
-  }
-
-  return result
-}
-
 export const getErrorMessage = (error: unknown): string | undefined =>
   error ? (get(error, 'data.error', get(error, 'data.message', get(error, 'message', error))) as string) : undefined
 

apps/gitness/src/pages-v2/repo/repo-summary.tsx

@@ -16,6 +16,7 @@ import {
   useSummaryQuery,
   useUpdateRepositoryMutation
 } from '@harnessio/code-service-client'
+import { generateAlphaNumericHash } from '@harnessio/ui/utils'
 import {
   BranchSelectorListItem,
   BranchSelectorTab,
@@ -38,7 +39,6 @@ import { timeAgoFromISOTime } from '../../pages/pipeline-edit/utils/time-utils'
 import { PathParams } from '../../RouteDefinitions'
 import { sortFilesByType } from '../../utils/common-utils'
 import { decodeGitContent, getTrimmedSha, normalizeGitRef, REFS_TAGS_PREFIX } from '../../utils/git-utils'
-import { generateAlphaNumericHash } from '../pull-request/pull-request-utils'
 
 // import { useRepoBranchesStore } from './stores/repo-branches-store'
 

apps/gitness/src/pages-v2/user-management/stores/admin-list-store.tsx

@@ -37,7 +37,7 @@ export const useAdminListUsersStore = create<IAdminListUsersStore>(set => ({
       user
     })
   },
-  setGeteneratePassword: (generatePassword: boolean) => {
+  setGeneratePassword: (generatePassword: boolean) => {
     set({
       generatePassword
     })

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,31 @@ 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 { ICreateUserData, IUpdateUserData, 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'
 
 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 { data: { body: userData, headers } = {} } = useAdminListUsersQuery({
+  const [query, setQuery] = useQueryState('query')
+  const { queryPage } = usePaginationQueryStateWithStore({ page, setPage })
+
+  const {
+    isFetching,
+    error,
+    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,69 +46,60 @@ export const UserManagementPageContainer = () => {
     }
   }, [userData, setUsers, setTotalPages, headers])
 
-  useEffect(() => {
-    setQueryPage(page)
-  }, [queryPage, page, setPage])
-
-  const { mutate: updateUser, isLoading: isUpdatingUser } = useAdminUpdateUserMutation(
+  const {
+    mutateAsync: 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 {
+    mutateAsync: 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 {
+    mutateAsync: updateUserAdmin,
+    isLoading: isUpdatingUserAdmin,
+    error: updateUserAdminError
+  } = useUpdateUserAdminMutation(
     {},
     {
       onSuccess: () => {
-        setAdminDialogOpen(false)
         queryClient.invalidateQueries({ queryKey: ['adminListUsers'] })
-      },
-      onError: error => {
-        console.error(error)
       }
     }
   )
 
   const {
-    mutate: createUser,
+    mutateAsync: createUser,
     isLoading: isCreatingUser,
     error: createUserError
   } = useAdminCreateUserMutation(
     {},
     {
       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 = (data: ICreateUserData) => {
+    return createUser({
       body: {
         uid: data.uid,
         email: data.email,
@@ -152,8 +109,8 @@ export const UserManagementPageContainer = () => {
     })
   }
 
-  const handleUpdateUser = (data: { email: string; displayName: string; userID: string }) => {
-    updateUser({
+  const handleUpdateUser = (data: IUpdateUserData) => {
+    return updateUser({
       user_uid: data.userID,
       body: {
         email: data.email,
@@ -163,13 +120,13 @@ export const UserManagementPageContainer = () => {
   }
 
   const handleDeleteUser = (userUid: string) => {
-    deleteUser({
+    return deleteUser({
       user_uid: userUid
     })
   }
 
   const handleUpdateUserAdmin = (userUid: string, isAdmin: boolean) => {
-    updateUserAdmin({
+    return updateUserAdmin({
       user_uid: userUid,
       body: {
         admin: isAdmin
@@ -178,55 +135,48 @@ export const UserManagementPageContainer = () => {
   }
 
   const handleUpdatePassword = (userId: string) => {
-    updateUser({
+    return updateUser({
       user_uid: userId,
       body: {
         password: password
       }
     })
   }
 
+  const handlers = {
+    handleUpdateUser,
+    handleDeleteUser,
+    handleUpdateUserAdmin,
+    handleUpdatePassword,
+    handleCreateUser
+  }
+
+  const loadingStates = {
+    isFetchingUsers: isFetching,
+    isUpdatingUser,
+    isDeletingUser,
+    isUpdatingUserAdmin,
+    isCreatingUser
+  }
+
+  const errorStates = {
+    fetchUsersError: error?.message?.toString() ?? '',
+    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/pull-request/utils.ts

@@ -473,17 +473,5 @@ export enum ViewStyle {
   LINE_BY_LINE = 'line-by-line'
 }
 
-export function generateAlphaNumericHash(length: number) {
-  let result = ''
-  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
-  const charactersLength = characters.length
-
-  for (let i = 0; i < length; i++) {
-    result += characters.charAt(Math.floor(Math.random() * charactersLength))
-  }
-
-  return result
-}
-
 export const getErrorMessage = (error: unknown): string | undefined =>
   error ? (get(error, 'data.error', get(error, 'data.message', get(error, 'message', error))) as string) : undefined