Revert "fixes after design review"

This reverts commit 742274e.
pixel-point · Jan 27, 2025 · 49b61bc · 49b61bc
1 parent 887e6f1
commit 49b61bc
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 82 deletions.
diff --git a/apps/gitness/src/pages-v2/user-management/stores/admin-list-store.tsx b/apps/gitness/src/pages-v2/user-management/stores/admin-list-store.tsx
@@ -10,7 +10,6 @@ export const useAdminListUsersStore = create<IAdminListUsersStore>(set => ({
   page: 1,
   password: null,
   user: null,
-  searchQuery: '',
   generatePassword: false,
   setPage: page =>
     set({
@@ -42,10 +41,5 @@ export const useAdminListUsersStore = create<IAdminListUsersStore>(set => ({
     set({
       generatePassword
     })
-  },
-  setSearchQuery: (searchQuery: string) => {
-    set({
-      searchQuery
-    })
   }
 }))
diff --git a/apps/gitness/src/pages-v2/user-management/user-management-container.tsx b/apps/gitness/src/pages-v2/user-management/user-management-container.tsx
@@ -65,7 +65,6 @@ export const UserManagementPageContainer = () => {
     }
   }
 
-  // TODO: add search functionality by query parameter
   const { data: { body: userData, headers } = {} } = useAdminListUsersQuery({
     queryParams: {
       page: queryPage
@@ -83,7 +82,7 @@ export const UserManagementPageContainer = () => {
 
   useEffect(() => {
     setQueryPage(page)
-  }, [queryPage, page, setPage, setQueryPage])
+  }, [queryPage, page, setPage])
 
   const { mutate: updateUser, isLoading: isUpdatingUser } = useAdminUpdateUserMutation(
     {},

diff --git a/packages/ui/locales/en/views.json b/packages/ui/locales/en/views.json
@@ -400,11 +400,6 @@
     "edit": "Edit webhook",
     "delete": "Delete webhook"
   },
-  "userManagement": {
-    "searchPlaceholder": "Search",
-    "newUserButton": "New user",
-    "usersHeader": "Users"
-  },
   "labelData": {
     "create": "Create labels"
   }

diff --git a/packages/ui/locales/es/views.json b/packages/ui/locales/es/views.json
@@ -388,11 +388,6 @@
     "edit": "Edit webhook",
     "delete": "Delete webhook"
   },
-  "userManagement": {
-    "searchPlaceholder": "Search",
-    "newUserButton": "New user",
-    "usersHeader": "Users"
-  },
   "labelData": {
     "create": "Create labels"
   },

diff --git a/packages/ui/locales/fr/views.json b/packages/ui/locales/fr/views.json
@@ -394,11 +394,6 @@
     "edit": "Edit webhook",
     "delete": "Delete webhook"
   },
-  "userManagement": {
-    "searchPlaceholder": "Search",
-    "newUserButton": "New user",
-    "usersHeader": "Users"
-  },
   "labelData": {
     "create": "Create labels"
   }

diff --git a/packages/ui/src/components/table.tsx b/packages/ui/src/components/table.tsx
@@ -8,7 +8,7 @@ const tableVariants = cva('w-full text-sm', {
     variant: {
       default: 'caption-bottom ',
       asStackedList:
-        '[&_thead]:bg-background-2 rounded-md border [&_td]:px-4 [&_td]:py-2.5 [&_td]:align-top [&_th]:px-4'
+        'rounded-md border [&_td]:px-4 [&_td]:py-2.5 [&_td]:align-top [&_th]:px-4 [&_thead]:bg-background-2'
     }
   },
   defaultVariants: {

diff --git a/packages/ui/src/views/user-management/components/users-list.tsx b/packages/ui/src/views/user-management/components/users-list.tsx
@@ -24,11 +24,11 @@ interface PageProps {
 export const UsersList = ({ users, handleDialogOpen }: PageProps) => {
   return (
     <Table variant="asStackedList">
-      <TableHeader className="h-[46px]">
+      <TableHeader>
         <TableRow>
           <TableHead>User</TableHead>
+          <TableHead>Display Name</TableHead>
           <TableHead>Email</TableHead>
-          <TableHead>Role binding</TableHead>
           <TableHead>
             <></>
           </TableHead>
@@ -38,7 +38,7 @@ export const UsersList = ({ users, handleDialogOpen }: PageProps) => {
         {users &&
           users.map(user => {
             return (
-              <TableRow key={user.uid} className="h-[48px]">
+              <TableRow key={user.uid}>
                 {/* NAME */}
                 <TableCell className="my-6 content-center">
                   <div className="flex items-center gap-2">
@@ -48,32 +48,31 @@ export const UsersList = ({ users, handleDialogOpen }: PageProps) => {
                     </Avatar>
                     <Text size={2} weight="medium" wrap="nowrap" truncate className="text-primary">
                       {user.uid}
+                      {user.admin && (
+                        <Badge
+                          variant="outline"
+                          size="xs"
+                          className="m-auto ml-2 h-5 rounded-full bg-tertiary-background/10 p-2 text-center text-xs font-normal text-tertiary-background"
+                        >
+                          Admin
+                        </Badge>
+                      )}
                     </Text>
                   </div>
                 </TableCell>
 
-                {/* EMAIL */}
+                {/* DISPLAY NAME */}
                 <TableCell className="my-6 content-center">
-                  <div className="flex gap-1.5">
-                    <Text wrap="nowrap" size={1} truncate className="text-tertiary-background">
-                      {user.email}
-                    </Text>
-                  </div>
+                  <Text size={2} weight="medium" wrap="nowrap" truncate className="text-primary">
+                    {user.display_name}
+                  </Text>
                 </TableCell>
 
-                {/* ROLE BINDING */}
+                {/* EMAIL */}
                 <TableCell className="my-6 content-center">
                   <div className="flex gap-1.5">
                     <Text wrap="nowrap" size={1} truncate className="text-tertiary-background">
-                      {user.admin && (
-                        <Badge
-                          variant="outline"
-                          size="xs"
-                          className="bg-tertiary-background/10 text-tertiary-background m-auto ml-2 h-5 rounded-full p-2 text-center text-xs font-normal"
-                        >
-                          Admin
-                        </Badge>
-                      )}
+                      {user.email}
                     </Text>
                   </div>
                 </TableCell>

diff --git a/packages/ui/src/views/user-management/types.ts b/packages/ui/src/views/user-management/types.ts
@@ -22,9 +22,7 @@ export interface IAdminListUsersStore {
   page: number
   password: string | null
   user: UsersProps | null
-  searchQuery: string
   generatePassword: boolean
-  setSearchQuery: (searchQuery: string) => void
   setPassword: (password: string) => void
   setUser: (user: UsersProps) => void
   setPage: (data: number) => void

diff --git a/packages/ui/src/views/user-management/user-management-page.tsx b/packages/ui/src/views/user-management/user-management-page.tsx
@@ -1,45 +1,21 @@
-import { useMemo } from 'react'
-
 import { Button, ListActions, PaginationComponent, SearchBox, Spacer, Text } from '@/components'
 import { SandboxLayout } from '@/views'
 
 import { UsersList } from './components/users-list'
 import { DialogLabels, IUserManagementPageProps, UsersProps } from './types'
 
-export const filterItems = (items: UsersProps[], query: string) => {
-  if (!query.trim()) return items
-
-  return items.filter(item => item.display_name?.toLowerCase().includes(query.toLowerCase().trim()))
-}
-
 export const UserManagementPage: React.FC<IUserManagementPageProps> = ({
   useAdminListUsersStore,
   useTranslationStore,
   handleDialogOpen
 }) => {
-  const {
-    users: userData,
-    totalPages,
-    page: currentPage,
-    setPage,
-    searchQuery,
-    setSearchQuery
-  } = useAdminListUsersStore()
+  const { users: userData, totalPages, page: currentPage, setPage } = useAdminListUsersStore()
   const { t } = useTranslationStore()
 
-  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchQuery(event.target.value)
-  }
-
-  // TODO: Replace with search using query parameter on backend when it's implemented
-  const filteredUsers = useMemo(() => {
-    return filterItems(userData, searchQuery)
-  }, [userData, searchQuery])
-
   const renderUserListContent = () => {
     return (
       <>
-        <UsersList users={filteredUsers} handleDialogOpen={handleDialogOpen} />
+        <UsersList users={userData as UsersProps[]} handleDialogOpen={handleDialogOpen} />
       </>
     )
   }
@@ -49,24 +25,16 @@ export const UserManagementPage: React.FC<IUserManagementPageProps> = ({
       <SandboxLayout.Content maxWidth="3xl">
         <Spacer size={10} />
         <Text size={5} weight={'medium'}>
-          {t('views:userManagement.usersHeader', 'Users')}{' '}
-          <Text size={5} weight={'medium'} color="foreground-4">
-            ({userData?.length || 0})
-          </Text>
+          Users
         </Text>
         <Spacer size={6} />
         <ListActions.Root>
           <ListActions.Left>
-            <SearchBox.Root
-              className="h-8 max-w-[320px]"
-              placeholder={t('views:userManagement.searchPlaceholder', 'Search')}
-              value={searchQuery}
-              handleChange={handleSearch}
-            />
+            <SearchBox.Root width="full" className="max-w-96" placeholder="search" />
           </ListActions.Left>
           <ListActions.Right>
             <Button variant="default" onClick={() => handleDialogOpen(null, DialogLabels.CREATE_USER)}>
-              {t('views:userManagement.newUserButton', 'New user')}
+              New user
             </Button>
           </ListActions.Right>
         </ListActions.Root>