[GEN-1484] fix: select all checkbox bug (#1579)

This pull request introduces pagination support across multiple tables in the frontend web application. The key changes include adding state management for current page and items per page, updating components to handle these new states, and modifying existing functions to utilize pagination. ### Pagination Support: * [`frontend/webapp/components/overview/actions/actions.table/index.tsx`](diffhunk://#diff-68fd71cdfc34b7216566e69fddcb9f1f49a52cf60ae0bb9cfa0a34866f18653bR27-R28): Added state management for `currentPage` and `itemsPerPage` and passed these states to the table component. [[1]](diffhunk://#diff-68fd71cdfc34b7216566e69fddcb9f1f49a52cf60ae0bb9cfa0a34866f18653bR27-R28) [[2]](diffhunk://#diff-68fd71cdfc34b7216566e69fddcb9f1f49a52cf60ae0bb9cfa0a34866f18653bR79-R82) * [`frontend/webapp/components/overview/destination/managed.destination.table/index.tsx`](diffhunk://#diff-1858ab526c25ec82399b7f0f60fc2525286cfc4ce294d1c83b309cdbb08f8e6aL1-R1): Added state management for `currentPage` and `itemsPerPage` and passed these states to the table component. [[1]](diffhunk://#diff-1858ab526c25ec82399b7f0f60fc2525286cfc4ce294d1c83b309cdbb08f8e6aL1-R1) [[2]](diffhunk://#diff-1858ab526c25ec82399b7f0f60fc2525286cfc4ce294d1c83b309cdbb08f8e6aR22-R23) [[3]](diffhunk://#diff-1858ab526c25ec82399b7f0f60fc2525286cfc4ce294d1c83b309cdbb08f8e6aR51-R54) * [`frontend/webapp/components/overview/instrumentation-rules/rules-table/index.tsx`](diffhunk://#diff-d3010b5cf16d53be999be2079d267fa07aba3210366d23ef37440ad491216cdaR18-R19): Added state management for `currentPage` and `itemsPerPage` and passed these states to the table component. [[1]](diffhunk://#diff-d3010b5cf16d53be999be2079d267fa07aba3210366d23ef37440ad491216cdaR18-R19) [[2]](diffhunk://#diff-d3010b5cf16d53be999be2079d267fa07aba3210366d23ef37440ad491216cdaR43-R46) * [`frontend/webapp/components/overview/sources/managed.sources.table/index.tsx`](diffhunk://#diff-4020f76a2fe3ae08af9a10d765da811540ea691abbd6b5e57c8197fa12798aafR40-R41): Added state management for `currentPage` and `itemsPerPage`, updated functions to use these states, and passed them to the table component. [[1]](diffhunk://#diff-4020f76a2fe3ae08af9a10d765da811540ea691abbd6b5e57c8197fa12798aafR40-R41) [[2]](diffhunk://#diff-4020f76a2fe3ae08af9a10d765da811540ea691abbd6b5e57c8197fa12798aafL67-R70) [[3]](diffhunk://#diff-4020f76a2fe3ae08af9a10d765da811540ea691abbd6b5e57c8197fa12798aafR94-R97) [[4]](diffhunk://#diff-4020f76a2fe3ae08af9a10d765da811540ea691abbd6b5e57c8197fa12798aafR113) [[5]](diffhunk://#diff-4020f76a2fe3ae08af9a10d765da811540ea691abbd6b5e57c8197fa12798aafR147-R150) * [`frontend/webapp/components/overview/sources/managed.sources.table/sources.table.header.tsx`](diffhunk://#diff-adff0f1794275ca642a1b8a03d581c0aebd93b16ee29be4f29c9944a9b1bac2eR66): Updated the header component to use `currentItems` for checkbox selection logic. [[1]](diffhunk://#diff-adff0f1794275ca642a1b8a03d581c0aebd93b16ee29be4f29c9944a9b1bac2eR66) [[2]](diffhunk://#diff-adff0f1794275ca642a1b8a03d581c0aebd93b16ee29be4f29c9944a9b1bac2eR81) [[3]](diffhunk://#diff-adff0f1794275ca642a1b8a03d581c0aebd93b16ee29be4f29c9944a9b1bac2eL386-R391) ### Table Component Enhancements: * [`frontend/webapp/design.system/table/index.tsx`](diffhunk://#diff-5c3a89905dd42cf2979a509e79652fb54c0f3bb7bda51c457f17043661370a18R11-R14): Updated the `TableProps` type to include `currentPage`, `itemsPerPage`, `setCurrentPage`, and `setItemsPerPage` properties. ### Dependency Update: * [`frontend/webapp/package.json`](diffhunk://#diff-ccf6337b0064354343f900ffd8b4ee91aa8cd014f3292548a800ad3dac39c1f4L14-R14): Updated `@keyval-dev/design-system` dependency to version `^2.3.3`.
odigos-io · Oct 10, 2024 · 741d664 · 741d664
1 parent ce6e4c1
commit 741d664
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 9 deletions.
diff --git a/frontend/webapp/components/overview/actions/actions.table/index.tsx b/frontend/webapp/components/overview/actions/actions.table/index.tsx
@@ -24,6 +24,8 @@ export const ActionsTable: React.FC<TableProps> = ({
   toggleActionStatus,
 }) => {
   const [selectedCheckbox, setSelectedCheckbox] = useState<string[]>([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [itemsPerPage, setItemsPerPage] = useState(10);
 
   const currentPageRef = React.useRef(1);
   function onSelectedCheckboxChange(id: string) {
@@ -74,6 +76,10 @@ export const ActionsTable: React.FC<TableProps> = ({
         renderTableHeader={renderTableHeader}
         onPaginate={onPaginate}
         renderEmptyResult={renderEmptyResult}
+        currentPage={currentPage}
+        itemsPerPage={itemsPerPage}
+        setCurrentPage={setCurrentPage}
+        setItemsPerPage={setItemsPerPage}
         renderTableRows={(item, index) => (
           <ActionsTableRow
             onRowClick={onRowClick}

diff --git a/frontend/webapp/components/overview/destination/managed.destination.table/index.tsx b/frontend/webapp/components/overview/destination/managed.destination.table/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Table } from '@/design.system';
 import { Destination } from '@/types';
 import { EmptyList } from '@/components/lists';
@@ -19,6 +19,8 @@ export const ManagedDestinationsTable: React.FC<TableProps> = ({
   sortDestinations,
   filterDestinationsBySignal,
 }) => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [itemsPerPage, setItemsPerPage] = useState(10);
   const currentPageRef = React.useRef(1);
 
   function onPaginate(pageNumber: number) {
@@ -46,6 +48,10 @@ export const ManagedDestinationsTable: React.FC<TableProps> = ({
         renderTableHeader={renderTableHeader}
         onPaginate={onPaginate}
         renderEmptyResult={renderEmptyResult}
+        currentPage={currentPage}
+        itemsPerPage={itemsPerPage}
+        setCurrentPage={setCurrentPage}
+        setItemsPerPage={setItemsPerPage}
         renderTableRows={(item, index) => (
           <DestinationsTableRow
             onRowClick={onRowClick}

diff --git a/frontend/webapp/components/overview/instrumentation-rules/rules-table/index.tsx b/frontend/webapp/components/overview/instrumentation-rules/rules-table/index.tsx
@@ -15,6 +15,8 @@ export const InstrumentationRulesTable: React.FC<TableProps> = ({
   onRowClick,
 }) => {
   const [selectedCheckbox, setSelectedCheckbox] = useState<string[]>([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [itemsPerPage, setItemsPerPage] = useState(10);
 
   const currentPageRef = React.useRef(1);
 
@@ -38,6 +40,10 @@ export const InstrumentationRulesTable: React.FC<TableProps> = ({
         renderTableHeader={renderTableHeader}
         onPaginate={onPaginate}
         renderEmptyResult={renderEmptyResult}
+        currentPage={currentPage}
+        itemsPerPage={itemsPerPage}
+        setCurrentPage={setCurrentPage}
+        setItemsPerPage={setItemsPerPage}
         renderTableRows={(item, index) => (
           <InstrumentationRulesTableRow
             item={item}

diff --git a/frontend/webapp/components/overview/sources/managed.sources.table/index.tsx b/frontend/webapp/components/overview/sources/managed.sources.table/index.tsx
@@ -37,6 +37,8 @@ export const ManagedSourcesTable: React.FC<TableProps> = ({
 }) => {
   const [selectedCheckbox, setSelectedCheckbox] = useState<string[]>([]);
   const [showModal, setShowModal] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [itemsPerPage, setItemsPerPage] = useState(10);
 
   const modalConfig = {
     title: OVERVIEW.DELETE_SOURCE,
@@ -64,8 +66,8 @@ export const ManagedSourcesTable: React.FC<TableProps> = ({
   }
 
   function onSelectedCheckboxChange(id: string) {
-    const start = (currentPageRef.current - 1) * 10;
-    const end = currentPageRef.current * 10;
+    const start = (currentPage - 1) * itemsPerPage;
+    const end = currentPage * itemsPerPage;
     const slicedData = data.slice(start, end);
     if (id === SELECT_ALL_CHECKBOX) {
       if (selectedCheckbox.length === slicedData.length) {
@@ -89,6 +91,10 @@ export const ManagedSourcesTable: React.FC<TableProps> = ({
     setSelectedCheckbox([]);
   }
 
+  const indexOfLastItem = currentPage * itemsPerPage;
+  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+  const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);
+
   function renderTableHeader() {
     return (
       <>
@@ -104,6 +110,7 @@ export const ManagedSourcesTable: React.FC<TableProps> = ({
           deleteSourcesHandler={() => setShowModal(true)}
           filterByConditionStatus={filterByConditionStatus}
           filterByConditionMessage={filterByConditionMessage}
+          currentItems={currentItems}
         />
         {showModal && (
           <KeyvalModal
@@ -137,6 +144,10 @@ export const ManagedSourcesTable: React.FC<TableProps> = ({
             onSelectedCheckboxChange={onSelectedCheckboxChange}
           />
         )}
+        currentPage={currentPage}
+        itemsPerPage={itemsPerPage}
+        setCurrentPage={setCurrentPage}
+        setItemsPerPage={setItemsPerPage}
       />
     </>
   );

diff --git a/frontend/webapp/components/overview/sources/managed.sources.table/sources.table.header.tsx b/frontend/webapp/components/overview/sources/managed.sources.table/sources.table.header.tsx
@@ -63,6 +63,7 @@ interface ActionsTableHeaderProps {
   filterSourcesByLanguage?: (languages: string[]) => void;
   filterByConditionStatus?: (status: 'All' | 'True' | 'False') => void;
   filterByConditionMessage: (message: string[]) => void;
+  currentItems: ManagedSource[];
 }
 
 export function SourcesTableHeader({
@@ -77,6 +78,7 @@ export function SourcesTableHeader({
   onSelectedCheckboxChange,
   filterByConditionStatus,
   filterByConditionMessage,
+  currentItems,
 }: ActionsTableHeaderProps) {
   const [currentSortId, setCurrentSortId] = useState('');
   const [groupNamespaces, setGroupNamespaces] = useState<string[]>([]);
@@ -383,7 +385,10 @@ export function SourcesTableHeader({
     <StyledThead>
       <StyledMainTh>
         <KeyvalCheckbox
-          value={selectedCheckbox.length === data.length && data.length > 0}
+          value={
+            selectedCheckbox.length === currentItems.length &&
+            currentItems.length > 0
+          }
           onChange={() => onSelectedCheckboxChange(SELECT_ALL_CHECKBOX)}
         />
         <UnFocusSourcesIcon size={18} />

diff --git a/frontend/webapp/design.system/table/index.tsx b/frontend/webapp/design.system/table/index.tsx
@@ -8,6 +8,10 @@ type TableProps<T> = {
   renderTableRows: (item: T, index: number) => JSX.Element;
   renderEmptyResult: () => JSX.Element;
   onPaginate?: (pageNumber: number) => void;
+  currentPage: number;
+  itemsPerPage: number;
+  setCurrentPage: (page: number) => void;
+  setItemsPerPage: (itemsPerPage: number) => void;
 };
 
 export const OdigosTable = <T,>(props: TableProps<T>) => {

diff --git a/frontend/webapp/package.json b/frontend/webapp/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@focus-reactive/react-yaml": "^1.1.2",
-    "@keyval-dev/design-system": "^2.3.1",
+    "@keyval-dev/design-system": "^2.3.3",
     "@next/font": "^13.4.7",
     "@reduxjs/toolkit": "^2.2.1",
     "@svgr/webpack": "^6.2.1",

diff --git a/frontend/webapp/yarn.lock b/frontend/webapp/yarn.lock
@@ -1482,10 +1482,10 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
-"@keyval-dev/design-system@^2.3.1":
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/@keyval-dev/design-system/-/design-system-2.3.1.tgz#d679fdb7f97848e7cd58e17a0efc1589443dba81"
-  integrity sha512-mePVh+Nu5+lb3uGc2ukT/8KM5I65BlQ5rACVkAOK9CGDqoAm55lcPXXpKH6BYXYTRcsd+6VtoD2okzpAjkck8g==
+"@keyval-dev/design-system@^2.3.3":
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/@keyval-dev/design-system/-/design-system-2.3.3.tgz#728cd8715f9a964128ea35c9157a6e55e75c6a68"
+  integrity sha512-3WGHURPiTsWJdzJKpfUcKgiUKd+8KAOW+oYX76wcp/9+I04o/4MeMWLYdYxaKabGYdw7ur4hWnagIG+t9UHg+Q==
   dependencies:
     "@focus-reactive/react-yaml" "^1.1.2"
     "@svgr/core" "^8.0.0"