Users management review

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

@@ -18,6 +18,7 @@ import { RepoBranchesView } from '@subjects/views/repo-branches'
 import { RepoCommitsView } from '@subjects/views/repo-commits'
 import { CreateRepoView } from '@subjects/views/repo-create'
 import { RepoCreateRule } from '@subjects/views/repo-create-rule'
+import { RepoEmpty } from '@subjects/views/repo-empty/repo-empty-view'
 import { RepoFilesEditView } from '@subjects/views/repo-files/repo-files-edit-view'
 import { RepoFilesJsonView } from '@subjects/views/repo-files/repo-files-json-view'
 import { RepoFilesList } from '@subjects/views/repo-files/repo-files-list'
@@ -62,6 +63,11 @@ export const viewPreviews: Record<string, ReactNode> = {
       <RepoSummaryViewWrapper />
     </RepoViewWrapper>
   ),
+  'repo-empty': (
+    <RepoViewWrapper>
+      <RepoEmpty />
+    </RepoViewWrapper>
+  ),
   'repo-list': (
     <RootViewWrapper>
       <RepoListWrapper />

apps/design-system/src/subjects/views/repo-empty/repo-empty-view.tsx

@@ -0,0 +1,12 @@
+import { RepoEmptyView } from '@harnessio/ui/views'
+
+export const RepoEmpty = () => {
+  return (
+    <RepoEmptyView
+      httpUrl="https://github.com/mock-repo"
+      repoName="mock-repo"
+      projName="mock-project"
+      sshUrl="[email protected]:mock-repo.git"
+    />
+  )
+}

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

@@ -1,6 +1,6 @@
 import { create } from 'zustand'
 
-import { IAdminListUsersStore, UsersProps } from '@harnessio/ui/views'
+import { EActiveTab, IAdminListUsersStore, UsersProps } from '@harnessio/ui/views'
 
 import { PageResponseHeader } from '../../../types'
 
@@ -10,7 +10,9 @@ export const useAdminListUsersStore = create<IAdminListUsersStore>(set => ({
   page: 1,
   password: null,
   user: null,
+  searchQuery: '',
   generatePassword: false,
+  activeTab: EActiveTab.ACTIVE,
   setPage: page =>
     set({
       page
@@ -41,5 +43,15 @@ export const useAdminListUsersStore = create<IAdminListUsersStore>(set => ({
     set({
       generatePassword
     })
+  },
+  setSearchQuery: (searchQuery: string) => {
+    set({
+      searchQuery
+    })
+  },
+  setActiveTab: (activeTab: EActiveTab) => {
+    set({
+      activeTab
+    })
   }
 }))

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,62 +9,18 @@ import {
   useAdminUpdateUserMutation,
   useUpdateUserAdminMutation
 } from '@harnessio/code-service-client'
-import {
-  AdminDialog,
-  CreateUserDialog,
-  DeleteUserDialog,
-  DialogLabels,
-  EditUserDialog,
-  ResetPasswordDialog,
-  UserManagementPage,
-  UsersProps
-} from '@harnessio/ui/views'
+import { UserManagementPage } from '@harnessio/ui/views'
 
 import { parseAsInteger, useQueryState } from '../../framework/hooks/useQueryState'
 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 { setUsers, setTotalPages, setPage, page, password } = 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
-    }
-  }
-
+  // TODO: add search functionality by query parameter
   const { data: { body: userData, headers } = {} } = useAdminListUsersQuery({
     queryParams: {
       page: queryPage
@@ -82,13 +38,16 @@ export const UserManagementPageContainer = () => {
 
   useEffect(() => {
     setQueryPage(page)
-  }, [queryPage, page, setPage])
+  }, [queryPage, page, setPage, setQueryPage])
 
-  const { mutate: updateUser, isLoading: isUpdatingUser } = useAdminUpdateUserMutation(
+  const {
+    mutate: updateUser,
+    isLoading: isUpdatingUser,
+    error: updateUserError
+  } = useAdminUpdateUserMutation(
     {},
     {
       onSuccess: () => {
-        setEditUserDialogOpen(false)
         queryClient.invalidateQueries({ queryKey: ['adminListUsers'] })
       },
       onError: error => {
@@ -97,11 +56,14 @@ export const UserManagementPageContainer = () => {
     }
   )
 
-  const { mutate: deleteUser, isLoading: isDeletingUser } = useAdminDeleteUserMutation(
+  const {
+    mutate: deleteUser,
+    isLoading: isDeletingUser,
+    error: deleteUserError
+  } = useAdminDeleteUserMutation(
     {},
     {
       onSuccess: () => {
-        setDeleteUserDialogOpen(false)
         queryClient.invalidateQueries({ queryKey: ['adminListUsers'] })
       },
       onError: error => {
@@ -110,11 +72,14 @@ export const UserManagementPageContainer = () => {
     }
   )
 
-  const { mutate: updateUserAdmin, isLoading: isUpdatingUserAdmin } = useUpdateUserAdminMutation(
+  const {
+    mutate: updateUserAdmin,
+    isLoading: isUpdatingUserAdmin,
+    error: updateUserAdminError
+  } = useUpdateUserAdminMutation(
     {},
     {
       onSuccess: () => {
-        setAdminDialogOpen(false)
         queryClient.invalidateQueries({ queryKey: ['adminListUsers'] })
       },
       onError: error => {
@@ -131,8 +96,6 @@ export const UserManagementPageContainer = () => {
     {},
     {
       onSuccess: () => {
-        setCreateUserDialogOpen(false)
-        setResetPasswordDialogOpen(true)
         queryClient.invalidateQueries({ queryKey: ['adminListUsers'] })
       },
       onError: error => {
@@ -142,7 +105,7 @@ export const UserManagementPageContainer = () => {
   )
 
   const handleCreateUser = (data: { uid: string; email: string; display_name: string }) => {
-    createUser({
+    return createUser({
       body: {
         uid: data.uid,
         email: data.email,
@@ -153,7 +116,7 @@ export const UserManagementPageContainer = () => {
   }
 
   const handleUpdateUser = (data: { email: string; displayName: string; userID: string }) => {
-    updateUser({
+    return updateUser({
       user_uid: data.userID,
       body: {
         email: data.email,
@@ -163,13 +126,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 +141,44 @@ 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 = {
+    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}
       />
     </>
   )

packages/ui/locales/en/views.json

@@ -189,6 +189,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."
@@ -400,6 +402,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

@@ -189,6 +189,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."
@@ -388,6 +390,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

@@ -189,6 +189,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."
@@ -394,6 +396,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"
   }