Feat(#19): add table UI

dashboard/package.json

@@ -25,6 +25,7 @@
     "@radix-ui/react-separator": "^1.1.0",
     "@tanstack/react-query": "^5.45.1",
     "@vitejs/plugin-react": "^4.3.1",
+    "@tanstack/react-table": "^8.17.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "flat": "^6.0.1",

dashboard/src/App.tsx

@@ -1,13 +1,11 @@
 import "./App.css";
-import LateralMenu from "./components/SideMenu/SideMenu";
+import Dashboard from "./components/Dashboard/Dashboard";
 
 function App(): JSX.Element {
   return (
-    <>
       <div className="w-screen h-screen">
-        <LateralMenu />
+        <Dashboard />
       </div>
-    </>
   );
 }
 

dashboard/src/components/Dashboard/Dashboard.tsx

@@ -0,0 +1,17 @@
+import SideMenu from "../SideMenu/SideMenu";
+import TreeTable from "../Table/TreeTable";
+
+const Dashboard = () : JSX.Element => {
+  return (
+    <div className="w-full h-full">
+      <div className="flex flex-row w-full justify-between">
+        <SideMenu />
+        <div className="w-full px-16 pt-64">
+          <TreeTable />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;

dashboard/src/components/SideMenu/SideMenu.tsx

@@ -67,7 +67,7 @@ const SideMenu = (): JSX.Element => {
 
   return (
     <NavigationMenu
-      className="fixed h-screen justify-start bg-bgSecondary pt-6 flex-col"
+      className="h-screen justify-start bg-bgSecondary pt-6 flex-col"
       orientation="vertical"
     >
       <div className="w-full px-4">

dashboard/src/components/Table/BaseTable.tsx

@@ -0,0 +1,31 @@
+import type { ReactElement } from "react";
+
+import { FormattedMessage } from "react-intl";
+
+import { Table, TableHead, TableHeader, TableRow } from "../ui/table"
+
+interface IBaseTable {
+  headers: string[];
+  body: ReactElement;
+}
+
+const BaseTable = ({headers, body}: IBaseTable) : JSX.Element => {
+  return (
+    <div>
+    <Table className="rounded-lg text-black bg-white w-full">
+      <TableHeader className="bg-mediumGray">
+        <TableRow>
+          {headers.map((column) => (
+            <TableHead className="text-black border-b" key={column}>
+              <FormattedMessage id={column}/>
+            </TableHead>
+          ))}
+        </TableRow>
+      </TableHeader>
+      {body}
+    </Table>
+    </div>
+  );
+};
+
+export default BaseTable;

dashboard/src/components/Table/TreeTable.tsx

@@ -0,0 +1,94 @@
+import { useMemo } from "react";
+
+import { TableRow, TableCell } from "../ui/table";
+
+import BaseTable from "./BaseTable";
+
+interface ITreeTableBody {
+  name: string;
+  branch: string;
+  commit: string;
+  buildStatus: string;
+  testStatus: string;
+}
+
+const treeTableColumnsLabelId = [
+  'treeTable.tree',
+  'treeTable.branch',
+  'treeTable.commit',
+  'treeTable.build',
+  '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>
+      <TableCell>{row.name}</TableCell>
+      <TableCell>{row.branch}</TableCell>
+      <TableCell>{row.commit}</TableCell>
+      <TableCell><div className="bg-lightGray w-fit h-fit p-1 rounded-lg">{row.buildStatus}</div></TableCell>
+      <TableCell><div className="bg-lightGray w-fit h-fit p-1 rounded-lg">{row.testStatus}</div></TableCell>
+    </TableRow>
+  );
+};
+
+const TreeTable = () : JSX.Element => {
+  const treeTableBody = useMemo(() => {
+    return (
+      treeTableRows.map((row: ITreeTableBody) => (
+        <TreeTableRow 
+          key={row.commit} 
+          name={row.name}
+          branch={row.branch}
+          commit={row.commit}
+          buildStatus={row.buildStatus}
+          testStatus={row.testStatus}/>
+      ))
+    );
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [treeTableRows]);
+
+  return(
+    <BaseTable headers={treeTableColumnsLabelId} body={<>{treeTableBody}</>} />
+  );
+}
+
+export default TreeTable;