Merge branch 'main' into remove-resourcenameprocessor-from-enterprise

odigos-io · Oct 10, 2024 · b956cdb · b956cdb
2 parents c234c6b + 741d664
commit b956cdb
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"