From 4fab445a02c0a0015d5774b744982bd47343afe5 Mon Sep 17 00:00:00 2001
From: Kartikay <120778728+kartikaysaxena@users.noreply.github.com>
Date: Mon, 1 Apr 2024 13:26:10 +0530
Subject: [PATCH] Update
 chaoscenter/web/src/views/AccountSettingsUserManagement/AccountSettingsUserManagement.tsx

Co-authored-by: Sahil <sahil.kumar@harness.io>
Signed-off-by: Kartikay <120778728+kartikaysaxena@users.noreply.github.com>
---
 .../AccountSettingsUserManagement.tsx         | 27 +++++++------------
 1 file changed, 9 insertions(+), 18 deletions(-)

diff --git a/chaoscenter/web/src/views/AccountSettingsUserManagement/AccountSettingsUserManagement.tsx b/chaoscenter/web/src/views/AccountSettingsUserManagement/AccountSettingsUserManagement.tsx
index c4758967582..cea07ef0d43 100644
--- a/chaoscenter/web/src/views/AccountSettingsUserManagement/AccountSettingsUserManagement.tsx
+++ b/chaoscenter/web/src/views/AccountSettingsUserManagement/AccountSettingsUserManagement.tsx
@@ -11,7 +11,7 @@ import {
   Text,
   useToggleOpen
 } from '@harnessio/uicore';
-import React, { useState } from 'react';
+import React from 'react';
 import type { Column, Row } from 'react-table';
 import { Classes, Dialog, Menu, Popover, PopoverInteractionKind, Position } from '@blueprintjs/core';
 import { Icon } from '@harnessio/icons';
@@ -191,14 +191,13 @@ export default function AccountSettingsUserManagementView(
   const { isOpen: isCreateUserModalOpen, open: openCreateUserModal, close: closeCreateUserModal } = useToggleOpen();
   const { getString } = useStrings();
 
-  const handleItemsPerPageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const selectedValue = parseInt(event.target.value);
-    setItemsPerPage(selectedValue);
+  function handleItemsPerPageChange(pageSize: number) {
+    setItemsPerPage(pageSize);
     setCurrentPage(1);
-  };
+  }
 
-  const [currentPage, setCurrentPage] = useState(1);
-  const [itemsPerPage, setItemsPerPage] = useState(5);
+  const [currentPage, setCurrentPage] = React.useState(1);
+  const [itemsPerPage, setItemsPerPage] = React.useState(5);
 
   const indexOfLastItem = currentPage * itemsPerPage;
   const indexOfFirstItem = indexOfLastItem - itemsPerPage;
@@ -244,7 +243,7 @@ export default function AccountSettingsUserManagementView(
           small
           loading={useUsersQueryLoading}
           noData={{
-            when: () => !currentItems?.length,
+            when: () => !usersData?.length,
             message: getString('noUserAddUsers')
           }}
         >
@@ -252,14 +251,6 @@ export default function AccountSettingsUserManagementView(
             <Text font={{ variation: FontVariation.H4 }}>
               {getString('totalUsers')}: {usersData?.length ?? 0}
             </Text>
-            <div>
-              Items per page:
-              <select value={itemsPerPage} onChange={handleItemsPerPageChange}>
-                <option value={5}>5</option>
-                <option value={10}>10</option>
-                <option value={20}>20</option>
-              </select>
-            </div>
           </div>
           <Container style={{ flexGrow: 1 }}>
             {currentItems && <MemoizedUsersTable users={currentItems} getUsersRefetch={getUsersRefetch} />}
@@ -271,8 +262,8 @@ export default function AccountSettingsUserManagementView(
             pageIndex={currentPage - 1}
             gotoPage={pageIndex => setCurrentPage(pageIndex + 1)}
             showPagination={true}
-            pageSizeOptions={[5,10,20]}
-            onPageSizeChange={handleItemsPerPageChange}
+            pageSizeOptions={[5, 10, 20]}
+            onPageSizeChange={pageSize => handleItemsPerPageChange(pageSize)}
           />
         </Loader>
       </Layout.Vertical>