From 741d664c7ae8a122fbeaa46564944b752a0ee66d Mon Sep 17 00:00:00 2001 From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com> Date: Thu, 10 Oct 2024 09:03:04 +0300 Subject: [PATCH] [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`. --- .../overview/actions/actions.table/index.tsx | 6 ++++++ .../managed.destination.table/index.tsx | 8 +++++++- .../instrumentation-rules/rules-table/index.tsx | 6 ++++++ .../sources/managed.sources.table/index.tsx | 15 +++++++++++++-- .../sources.table.header.tsx | 7 ++++++- frontend/webapp/design.system/table/index.tsx | 4 ++++ frontend/webapp/package.json | 2 +- frontend/webapp/yarn.lock | 8 ++++---- 8 files changed, 47 insertions(+), 9 deletions(-) diff --git a/frontend/webapp/components/overview/actions/actions.table/index.tsx b/frontend/webapp/components/overview/actions/actions.table/index.tsx index 8a186a76d..516e7e2ae 100644 --- 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 = ({ toggleActionStatus, }) => { const [selectedCheckbox, setSelectedCheckbox] = useState([]); + 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 = ({ renderTableHeader={renderTableHeader} onPaginate={onPaginate} renderEmptyResult={renderEmptyResult} + currentPage={currentPage} + itemsPerPage={itemsPerPage} + setCurrentPage={setCurrentPage} + setItemsPerPage={setItemsPerPage} renderTableRows={(item, index) => ( = ({ 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 = ({ renderTableHeader={renderTableHeader} onPaginate={onPaginate} renderEmptyResult={renderEmptyResult} + currentPage={currentPage} + itemsPerPage={itemsPerPage} + setCurrentPage={setCurrentPage} + setItemsPerPage={setItemsPerPage} renderTableRows={(item, index) => ( = ({ onRowClick, }) => { const [selectedCheckbox, setSelectedCheckbox] = useState([]); + const [currentPage, setCurrentPage] = useState(1); + const [itemsPerPage, setItemsPerPage] = useState(10); const currentPageRef = React.useRef(1); @@ -38,6 +40,10 @@ export const InstrumentationRulesTable: React.FC = ({ renderTableHeader={renderTableHeader} onPaginate={onPaginate} renderEmptyResult={renderEmptyResult} + currentPage={currentPage} + itemsPerPage={itemsPerPage} + setCurrentPage={setCurrentPage} + setItemsPerPage={setItemsPerPage} renderTableRows={(item, index) => ( = ({ }) => { const [selectedCheckbox, setSelectedCheckbox] = useState([]); 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 = ({ } 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 = ({ 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 = ({ deleteSourcesHandler={() => setShowModal(true)} filterByConditionStatus={filterByConditionStatus} filterByConditionMessage={filterByConditionMessage} + currentItems={currentItems} /> {showModal && ( = ({ 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 index 89d988062..38b916316 100644 --- 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([]); @@ -383,7 +385,10 @@ export function SourcesTableHeader({ 0} + value={ + selectedCheckbox.length === currentItems.length && + currentItems.length > 0 + } onChange={() => onSelectedCheckboxChange(SELECT_ALL_CHECKBOX)} /> diff --git a/frontend/webapp/design.system/table/index.tsx b/frontend/webapp/design.system/table/index.tsx index 5a86861cc..b2d697a62 100644 --- a/frontend/webapp/design.system/table/index.tsx +++ b/frontend/webapp/design.system/table/index.tsx @@ -8,6 +8,10 @@ type TableProps = { 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 = (props: TableProps) => { diff --git a/frontend/webapp/package.json b/frontend/webapp/package.json index 1344ab571..cf08e00a0 100644 --- 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 index d50006ec1..99fa3207e 100644 --- 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"