added tabs

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

@@ -2,7 +2,7 @@ import { create } from 'zustand'
 
 import { IAdminListUsersStore, UsersProps } from '@harnessio/ui/views'
 
-import { PageResponseHeader } from '../../../types'
+import { EActiveTab, PageResponseHeader } from '../../../types'
 
 export const useAdminListUsersStore = create<IAdminListUsersStore>(set => ({
   users: [],
@@ -12,6 +12,7 @@ export const useAdminListUsersStore = create<IAdminListUsersStore>(set => ({
   user: null,
   searchQuery: '',
   generatePassword: false,
+  activeTab: EActiveTab.ACTIVE,
   setPage: page =>
     set({
       page
@@ -47,5 +48,10 @@ export const useAdminListUsersStore = create<IAdminListUsersStore>(set => ({
     set({
       searchQuery
     })
+  },
+  setActiveTab: (activeTab: EActiveTab) => {
+    set({
+      activeTab
+    })
   }
 }))

apps/gitness/src/types.ts

@@ -98,3 +98,8 @@ export enum PageResponseHeader {
   xNextPage = 'x-next-page',
   xPrevPage = 'x-prev-page'
 }
+
+export enum EActiveTab {
+  ACTIVE = 'active',
+  INACTIVE = 'inactive'
+}

packages/ui/locales/en/views.json

@@ -401,6 +401,10 @@
     "delete": "Delete webhook"
   },
   "userManagement": {
+    "tabs": {
+      "active": "Active users",
+      "inactive": "Pending users"
+    },
     "searchPlaceholder": "Search",
     "newUserButton": "New user",
     "usersHeader": "Users"

packages/ui/src/views/user-management/components/tabs.tsx

@@ -0,0 +1,38 @@
+import { Tabs, TabsList, TabsTrigger } from '@/components'
+import { SandboxLayout, TranslationStore } from '@/views'
+
+import { EActiveTab } from '../types'
+
+const UserManagementTabs = ({
+  activeTab,
+  setActiveTab,
+  useTranslationStore
+}: {
+  activeTab: EActiveTab
+  setActiveTab: (value: EActiveTab) => void
+  useTranslationStore: () => TranslationStore
+}) => {
+  const { t } = useTranslationStore()
+  return (
+    <>
+      <SandboxLayout.SubHeader className="h-[44px] overflow-hidden">
+        <Tabs
+          variant="tabnav"
+          value={activeTab}
+          onValueChange={value => {
+            setActiveTab(value as EActiveTab)
+          }}
+        >
+          <TabsList fontSize="xs">
+            <TabsTrigger value={EActiveTab.ACTIVE}>{t('views:userManagement.tabs.active', 'Active users')}</TabsTrigger>
+            <TabsTrigger value={EActiveTab.INACTIVE}>
+              {t('views:userManagement.tabs.inactive', 'Pending users')}
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </SandboxLayout.SubHeader>
+    </>
+  )
+}
+
+export { UserManagementTabs }

packages/ui/src/views/user-management/types.ts

@@ -23,6 +23,7 @@ export interface IAdminListUsersStore {
   password: string | null
   user: UsersProps | null
   searchQuery: string
+  activeTab: EActiveTab
   generatePassword: boolean
   setSearchQuery: (searchQuery: string) => void
   setPassword: (password: string) => void
@@ -31,6 +32,7 @@ export interface IAdminListUsersStore {
   setUsers: (data: UsersProps[]) => void
   setTotalPages: (data: Headers) => void
   setGeteneratePassword: (data: boolean) => void
+  setActiveTab: (data: EActiveTab) => void
 }
 
 export interface IDeleteDialogProps {
@@ -71,3 +73,8 @@ export enum DialogLabels {
   RESET_PASSWORD = 'resetPassword',
   CREATE_USER = 'createUser'
 }
+
+export enum EActiveTab {
+  ACTIVE = 'active',
+  INACTIVE = 'inactive'
+}

packages/ui/src/views/user-management/user-management-page.tsx

@@ -3,6 +3,7 @@ import { useMemo } from 'react'
 import { Button, ListActions, PaginationComponent, SearchBox, Spacer, Text } from '@/components'
 import { SandboxLayout } from '@/views'
 
+import { UserManagementTabs } from './components/tabs'
 import { UsersList } from './components/users-list'
 import { DialogLabels, IUserManagementPageProps, UsersProps } from './types'
 
@@ -23,7 +24,9 @@ export const UserManagementPage: React.FC<IUserManagementPageProps> = ({
     page: currentPage,
     setPage,
     searchQuery,
-    setSearchQuery
+    setSearchQuery,
+    activeTab,
+    setActiveTab
   } = useAdminListUsersStore()
   const { t } = useTranslationStore()
 
@@ -45,13 +48,13 @@ export const UserManagementPage: React.FC<IUserManagementPageProps> = ({
   }
 
   return (
-    <SandboxLayout.Main>
-      <SandboxLayout.Content maxWidth="3xl">
-        <Spacer size={10} />
+    <SandboxLayout.Main fullWidth>
+      <UserManagementTabs activeTab={activeTab} setActiveTab={setActiveTab} useTranslationStore={useTranslationStore} />
+      <SandboxLayout.Content className="mx-auto max-w-[1092px]">
         <Text size={5} weight={'medium'}>
           {t('views:userManagement.usersHeader', 'Users')}{' '}
           <Text size={5} weight={'medium'} color="foreground-4">
-            ({userData?.length || 0})
+            ({filteredUsers?.length || 0})
           </Text>
         </Text>
         <Spacer size={6} />