Users management add to ds

.eslintrc.json

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

apps/design-system/src/pages/view-preview/view-preview.tsx

@@ -41,6 +41,7 @@ import { RepoWebhooksList } from '@subjects/views/repo-webhooks-list/repo-webhoo
 import { SignInView } from '@subjects/views/signin'
 import { SignUpView } from '@subjects/views/signup'
 import { SpaceSettingsMembers } from '@subjects/views/space-settings-members/space-settings-members'
+import UserManagementWrapper from '@subjects/views/user-management/user-management'
 import { useTranslationStore } from '@utils/viewUtils'
 
 import { ChatEmptyPreviewWrapper, ChatPreviewWrapper } from '@harnessio/ui/components'
@@ -286,6 +287,11 @@ export const viewPreviews: Record<string, ReactNode> = {
     <RootViewWrapper>
       <ExecutionGraphViewWrapper />
     </RootViewWrapper>
+  ),
+  'user-management': (
+    <RootViewWrapper>
+      <UserManagementWrapper />
+    </RootViewWrapper>
   )
 }
 

apps/design-system/src/subjects/views/user-management/user-management.tsx

@@ -0,0 +1,62 @@
+import { FC } from 'react'
+
+import { noop, useTranslationStore } from '@utils/viewUtils'
+
+import { IUserManagementPageProps, UserManagementPage } from '@harnessio/ui/views'
+
+const UserManagementWrapper: FC<Partial<IUserManagementPageProps>> = () => {
+  const user = {
+    uid: 'user-1',
+    email: 'user-1@example.com',
+    display_name: 'User 1',
+    admin: true,
+    blocked: false
+  }
+
+  const useAdminListUsersStore = () => ({
+    users: [user],
+    totalPages: 1,
+    page: 1,
+    password: null,
+    user: user,
+    generatePassword: false,
+    setPage: noop,
+    setUser: noop,
+    setUsers: noop,
+    setTotalPages: noop,
+    setPassword: noop,
+    setGeteneratePassword: noop
+  })
+
+  return (
+    <UserManagementPage
+      useAdminListUsersStore={useAdminListUsersStore}
+      useTranslationStore={useTranslationStore}
+      handlers={{
+        handleUpdateUser: async () => {},
+        handleDeleteUser: async () => {},
+        handleUpdateUserAdmin: async () => {},
+        handleUpdatePassword: async () => {},
+        handleCreateUser: async () => {}
+      }}
+      loadingStates={{
+        isFetchingUsers: false,
+        isUpdatingUser: false,
+        isDeletingUser: false,
+        isUpdatingUserAdmin: false,
+        isCreatingUser: false
+      }}
+      errorStates={{
+        fetchUsersError: '',
+        updateUserError: '',
+        deleteUserError: '',
+        updateUserAdminError: '',
+        createUserError: ''
+      }}
+      searchQuery={''}
+      setSearchQuery={noop}
+    />
+  )
+}
+
+export default UserManagementWrapper

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,32 @@ 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 { 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,45 +47,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 +94,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 +110,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 +120,64 @@ 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 = {
+    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-v2/user-management/utils/promisify-mutation.ts

@@ -0,0 +1,15 @@
+import { UsererrorError } from '@harnessio/code-service-client'
+
+export type MutationFn<T> = (
+  params: T,
+  options: { onSuccess: () => void; onError: (error: UsererrorError) => 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)
+    })
+  })
+}