From 2389d2703f3ec4afd4fc8eb63d71f66020030bf8 Mon Sep 17 00:00:00 2001
From: Mariana Sartorato <mariana.sartorato@profusion.mobi>
Date: Mon, 1 Jul 2024 20:53:18 -0300
Subject: [PATCH] feat(#38): add tree monitoring list page component

- add filters button
- add table information
- add table pagination
---
 .../src/components/Dashboard/Dashboard.tsx    |   6 +-
 dashboard/src/components/Table/TreeTable.tsx  |  46 +----
 dashboard/src/components/TopBar/TopBar.tsx    |   3 +-
 .../TreeMonitorListingPage.tsx                | 192 ++++++++++++++++++
 4 files changed, 203 insertions(+), 44 deletions(-)
 create mode 100644 dashboard/src/components/TreeMonitorListingPage/TreeMonitorListingPage.tsx

diff --git a/dashboard/src/components/Dashboard/Dashboard.tsx b/dashboard/src/components/Dashboard/Dashboard.tsx
index fa322b8..44775a5 100644
--- a/dashboard/src/components/Dashboard/Dashboard.tsx
+++ b/dashboard/src/components/Dashboard/Dashboard.tsx
@@ -1,6 +1,6 @@
 import SideMenu from "../SideMenu/SideMenu";
-import TreeTable from "../Table/TreeTable";
 import TopBar from "../TopBar/TopBar";
+import TreeMonitorListingPage from "../TreeMonitorListingPage/TreeMonitorListingPage";
 
 const Dashboard = () : JSX.Element => {
   return (
@@ -8,8 +8,8 @@ const Dashboard = () : JSX.Element => {
       <div className="flex flex-row w-full justify-between">
         <SideMenu />
         <TopBar />
-        <div className="w-full px-16 pt-64 bg-lightGray">
-          <TreeTable />
+        <div className="w-full px-16 pt-24 bg-lightGray">
+          <TreeMonitorListingPage />
         </div>
       </div>
     </div>
diff --git a/dashboard/src/components/Table/TreeTable.tsx b/dashboard/src/components/Table/TreeTable.tsx
index bf2e49f..3b1ebc4 100644
--- a/dashboard/src/components/Table/TreeTable.tsx
+++ b/dashboard/src/components/Table/TreeTable.tsx
@@ -4,7 +4,7 @@ import { TableRow, TableCell } from "../ui/table";
 
 import BaseTable from "./BaseTable";
 
-interface ITreeTableBody {
+export interface ITreeTableBody {
   name: string;
   branch: string;
   commit: string;
@@ -12,6 +12,10 @@ interface ITreeTableBody {
   testStatus: string;
 }
 
+interface ITreeTable {
+  treeTableRows: ITreeTableBody[];
+}
+
 const treeTableColumnsLabelId = [
   'treeTable.tree',
   'treeTable.branch',
@@ -20,44 +24,6 @@ const treeTableColumnsLabelId = [
   'treeTable.test'
 ];
 
-const treeTableRows: ITreeTableBody[] = [
-  {
-    name: "stable-rc",
-    branch: "linux-5.15",
-    commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
-    buildStatus: "150 completed",
-    testStatus: "80 completed"
-  },
-  {
-    name: "stable-rc",
-    branch: "linux-5.15",
-    commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
-    buildStatus: "10 completed",
-    testStatus: "150 completed"
-  },
-  {
-    name: "stable-rc",
-    branch: "linux-5.15",
-    commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
-    buildStatus: "10 completed",
-    testStatus: "150 completed"
-  },
-  {
-    name: "stable-rc",
-    branch: "linux-5.15",
-    commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
-    buildStatus: "10 completed",
-    testStatus: "150 completed"
-  },
-  {
-    name: "stable-rc",
-    branch: "linux-5.15",
-    commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
-    buildStatus: "10 completed",
-    testStatus: "150 completed"
-  }
-];
-
 const TreeTableRow = (row: ITreeTableBody): JSX.Element => {
   return (
     <TableRow>
@@ -70,7 +36,7 @@ const TreeTableRow = (row: ITreeTableBody): JSX.Element => {
   );
 };
 
-const TreeTable = () : JSX.Element => {
+  const TreeTable = ({treeTableRows}: ITreeTable) : JSX.Element => {
   const treeTableBody = useMemo(() => {
     return (
       treeTableRows.map((row: ITreeTableBody) => (
diff --git a/dashboard/src/components/TopBar/TopBar.tsx b/dashboard/src/components/TopBar/TopBar.tsx
index 6771400..e22094c 100644
--- a/dashboard/src/components/TopBar/TopBar.tsx
+++ b/dashboard/src/components/TopBar/TopBar.tsx
@@ -11,7 +11,8 @@ const TopBar = (): JSX.Element => {
         </span>
         <div className="flex w-2/3 px-6 items-center">
           {/* placeholder for search */}
-          <Input className="w-2/3" type="text" placeholder="Search" />
+          {/* TODO: use i18n for the input placeholder */}
+          <Input className="w-2/3" type="text" placeholder="Search by tree, branch or tag" />
         </div>
       </div>
     </div>
diff --git a/dashboard/src/components/TreeMonitorListingPage/TreeMonitorListingPage.tsx b/dashboard/src/components/TreeMonitorListingPage/TreeMonitorListingPage.tsx
new file mode 100644
index 0000000..43e0404
--- /dev/null
+++ b/dashboard/src/components/TreeMonitorListingPage/TreeMonitorListingPage.tsx
@@ -0,0 +1,192 @@
+import { FormattedMessage } from "react-intl";
+
+import { MdArrowBackIos, MdArrowForwardIos, MdExpandMore } from "react-icons/md";
+
+import { useCallback, useState } from "react";
+
+import TreeTable, { ITreeTableBody } from "../Table/TreeTable";
+import { Button } from "../ui/button";
+
+
+interface ITableInformation {
+  startIndex: number;
+  endIndex: number;
+  totalTrees: number;
+  itemsPerPage: number;
+  onClickForward: () => void;
+  onClickBack: () => void; 
+}
+
+const TableInfo = ({
+  startIndex,
+  endIndex,
+  totalTrees,
+  itemsPerPage,
+  onClickForward,
+  onClickBack,
+}: ITableInformation): JSX.Element => {
+  const buttonsClassName = "text-lightBlue font-bold"
+  const groupsClassName = "flex flex-row items-center gap-2"
+  return (
+    <div className="flex flex-row gap-4 text-sm">
+      <div className={groupsClassName}>
+        <FormattedMessage id="table.showing"/>
+        <span className="font-bold">{startIndex} - {endIndex}</span>
+        <FormattedMessage id="table.of"/>
+        <span className="font-bold">{totalTrees}</span>
+        <FormattedMessage id="table.tree"/>
+      </div>
+      <div className={groupsClassName}>
+        <FormattedMessage id="table.itemsPerPage"/>
+        <span className="font-bold">{itemsPerPage}</span>
+        <MdExpandMore className={buttonsClassName}/>
+      </div>
+      <div className="flex flex-row gap-2 items-center">
+        <Button variant="outline" onClick={onClickBack}>
+          <MdArrowBackIos className={buttonsClassName}/>    
+        </Button>
+        <Button variant="outline" onClick={onClickForward}>
+          <MdArrowForwardIos className={buttonsClassName}/>
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const TreeMonitorListingPage = (): JSX.Element => {
+  const listItems = treeTableRows;
+  const itemsPerPage = 10;
+  const [startIndex, setStartIndex] = useState(0);
+  const [endIndex, setEndIndex] = useState(listItems.length+1 > itemsPerPage ? itemsPerPage : listItems.length+1);
+
+  const onClickGoForward = useCallback(() => {
+    setStartIndex(endIndex);
+    setEndIndex(endIndex+itemsPerPage >= listItems.length ? listItems.length : endIndex+itemsPerPage)
+  }, [endIndex, listItems]);
+
+  const onClickGoBack = useCallback(() => {
+    setStartIndex(startIndex-itemsPerPage);
+    setEndIndex(endIndex % itemsPerPage !== 0 ? endIndex - endIndex % itemsPerPage : endIndex - itemsPerPage);
+  }, [startIndex, endIndex]);
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col items-end gap-4">
+      <Button variant="outline" className="rounded-full w-[128px] border-black">
+        <div className="flex flex-row gap-1 items-center">
+          <FormattedMessage id="global.filters" />
+          <MdExpandMore />
+        </div>
+      </Button>
+      <TableInfo 
+        startIndex={startIndex+1}
+        endIndex={endIndex}
+        totalTrees={listItems.length}
+        itemsPerPage={10}
+        onClickBack={onClickGoBack}
+        onClickForward={onClickGoForward}
+      />
+      </div>
+      <TreeTable treeTableRows={listItems.slice(startIndex, endIndex)}/>
+      <div className="flex flex-col items-end">
+      <TableInfo
+        startIndex={startIndex+1}
+        endIndex={endIndex}
+        totalTrees={listItems.length}
+        itemsPerPage={itemsPerPage}
+        onClickBack={onClickGoBack}
+        onClickForward={onClickGoForward}
+      />
+      </div>
+    </div>
+  );
+};
+
+const treeTableRows: ITreeTableBody[] = [
+    {
+      name: "stable-rc1",
+      branch: "linux-5.15",
+      commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
+      buildStatus: "150 completed",
+      testStatus: "80 completed"
+    },
+    {
+      name: "stable-rc2",
+      branch: "linux-5.15",
+      commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
+      buildStatus: "10 completed",
+      testStatus: "150 completed"
+    },
+    {
+      name: "stable-rc3",
+      branch: "linux-5.15",
+      commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
+      buildStatus: "10 completed",
+      testStatus: "150 completed"
+    },
+    {
+      name: "stable-rc4",
+      branch: "linux-5.15",
+      commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
+      buildStatus: "10 completed",
+      testStatus: "150 completed"
+    },
+    {
+      name: "stable-rc5",
+      branch: "linux-5.15",
+      commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
+      buildStatus: "10 completed",
+      testStatus: "150 completed"
+    },
+    {
+        name: "stable-rc6",
+        branch: "linux-5.15",
+        commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
+        buildStatus: "150 completed",
+        testStatus: "80 completed"
+      },
+      {
+        name: "stable-rc7",
+        branch: "linux-5.15",
+        commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
+        buildStatus: "10 completed",
+        testStatus: "150 completed"
+      },
+      {
+        name: "stable-rc8",
+        branch: "linux-5.15",
+        commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
+        buildStatus: "10 completed",
+        testStatus: "150 completed"
+      },
+      {
+        name: "stable-rc9",
+        branch: "linux-5.15",
+        commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
+        buildStatus: "10 completed",
+        testStatus: "150 completed"
+      },
+      {
+        name: "stable-rc10",
+        branch: "linux-5.15",
+        commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
+        buildStatus: "10 completed",
+        testStatus: "150 completed"
+      },
+      {
+        name: "stable-rc11",
+        branch: "linux-5.15",
+        commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
+        buildStatus: "10 completed",
+        testStatus: "150 completed"
+      },
+      {
+        name: "stable-rc12",
+        branch: "linux-5.15",
+        commit: "asidnasidn-oqiwejeoij-oaidnosdnk",
+        buildStatus: "10 completed",
+        testStatus: "150 completed"
+      }
+  ];
+
+export default TreeMonitorListingPage;