feat(#19): add table components

- add a basic table component
- add a tree table component

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;

dashboard/src/components/ui/table.tsx

@@ -6,7 +6,7 @@ const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
+  <div className="relative w-full overflow-auto rounded-lg border-t border-x border-darkGray">
     <table
       ref={ref}
       className={cn("w-full caption-bottom text-sm", className)}

dashboard/src/locales/messages/index.ts

@@ -8,5 +8,12 @@ export const messages = {
       deviceMonitor: "Device Monitor",
       labsMonitor: "Labs Monitor",
     },
+    treeTable: {
+      tree: "Tree",
+      branch: "Branch",
+      commit: "Commit/tag",
+      build: "Build Status",
+      test: "Test Status",
+    }
   },
 };

dashboard/tailwind.config.js

@@ -33,7 +33,6 @@ module.exports = {
       },
       colors: {
         'bgSecondary' : '#343638',
-        'onSecondary' : '#FFFFFF',
         'lightBlue': '#11B3E6', 
         'onSecondary-10': '#FFFFFF1A',
         "white": '#FFFFFF',