Users management

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