Base for table actions

Author: jc21

frontend/src/components/Table/Table.tsx

@@ -1,8 +1,8 @@
-import React from "react";
+import React, { ReactNode } from "react";
 
 import cn from "classnames";
 import { Badge } from "components";
-import { intl } from "locale";
+import { TableActionsMenu } from "components";
 
 export interface TableColumn {
 	/**
@@ -47,44 +47,63 @@ export interface TableProps {
 	 * Name of column to show sorted by
 	 */
 	sortBy?: string;
+	/**
+	 * Should we render actions column at the end
+	 */
+	hasActions?: boolean;
 }
-export const Table = ({ columns, data, pagination, sortBy }: TableProps) => {
+export const Table = ({
+	columns,
+	data,
+	pagination,
+	sortBy,
+	hasActions,
+}: TableProps) => {
 	const getFormatter = (given: any) => {
+		if (typeof given === "function") {
+			return given;
+		}
+
 		if (typeof given === "string") {
 			switch (given) {
 				// Simple ID column has text-muted
 				case "id":
 					return (val: number) => {
 						return <span className="text-muted">{val}</span>;
 					};
+				/*
 				case "setup":
 					return (val: boolean) => {
 						return (
-							<Badge color={val ? "lime" : "red"}>
+							<Badge color={val ? "lime" : "yellow"}>
 								{val
 									? intl.formatMessage({
 											id: "ready",
 											defaultMessage: "Ready",
 									  })
 									: intl.formatMessage({
-											id: "required",
-											defaultMessage: "Required",
+											id: "setup-required",
+											defaultMessage: "Setup Required",
 									  })}
 							</Badge>
 						);
 					};
+				*/
 				case "bool":
 					return (val: boolean) => {
 						return (
-							<Badge color={val ? "lime" : "red"}>
+							<Badge color={val ? "lime" : "orange"}>
 								{val ? "true" : "false"}
 							</Badge>
 						);
 					};
+
+				default:
+					return () => {
+						return <>formatter-not-found: {given}</>;
+					};
 			}
 		}
-
-		return given;
 	};
 
 	const getPagination = (p: TablePagination) => {
@@ -223,6 +242,7 @@ export const Table = ({ columns, data, pagination, sortBy }: TableProps) => {
 									</th>
 								);
 							})}
+							{hasActions && <th />}
 						</tr>
 					</thead>
 					<tbody>
@@ -231,13 +251,20 @@ export const Table = ({ columns, data, pagination, sortBy }: TableProps) => {
 								<tr key={`table-row-${idx}`}>
 									{columns.map((col, idx2) => {
 										return (
-											<td key={`table-col-${idx}-${idx2}`}>
+											<td
+												key={`table-col-${idx}-${idx2}`}
+												className={col.className}>
 												{col.formatter
 													? getFormatter(col.formatter)(row[col.name], row)
 													: row[col.name]}
 											</td>
 										);
 									})}
+									{hasActions && (
+										<td>
+											<TableActionsMenu actions={data.actions} />
+										</td>
+									)}
 								</tr>
 							);
 						})}

frontend/src/components/Table/TableActionsMenu.tsx

@@ -0,0 +1,24 @@
+import React, { ReactNode } from "react";
+
+import { DotsVertical } from "tabler-icons-react";
+
+export interface TableActionsMenuProps {
+	/**
+	 * Additional Class
+	 */
+	className?: string;
+	/**
+	 * Actions
+	 */
+	actions: ReactNode[];
+}
+export const TableActionsMenu = ({
+	actions,
+	className,
+}: TableActionsMenuProps) => {
+	return (
+		<div className={className}>
+			<DotsVertical />
+		</div>
+	);
+};

frontend/src/components/Table/index.ts

@@ -1 +1,2 @@
+export * from "./TableActionsMenu";
 export * from "./Table";

frontend/src/index.scss

@@ -13,6 +13,11 @@ body {
 	background-color: #f5f7fb;
 	color: rgb(73, 80, 87);
 }
+
+.text-right {
+	text-align: right;
+}
+
 /*
 .btn {
 	text-transform: none;

frontend/src/locale/src/en.json

@@ -74,6 +74,9 @@
 	"setup.title": {
 		"defaultMessage": "Create your first Account"
 	},
+	"setup-required": {
+		"defaultMessage": "Setup Required"
+	},
 	"user.email": {
 		"defaultMessage": "Email"
 	},

frontend/src/pages/CertificateAuthorities/index.tsx

@@ -6,6 +6,7 @@ import {
 } from "api/npm";
 import { Table } from "components";
 import { SuspenseLoader } from "components";
+import { Badge } from "components";
 import { intl } from "locale";
 import { useInterval } from "rooks";
 import styled from "styled-components";
@@ -68,7 +69,21 @@ function CertificateAuthorities() {
 				id: "column.status",
 				defaultMessage: "Status",
 			}),
-			formatter: "setup",
+			formatter: (val: boolean) => {
+				return (
+					<Badge color={val ? "lime" : "yellow"}>
+						{val
+							? intl.formatMessage({
+									id: "ready",
+									defaultMessage: "Ready",
+							  })
+							: intl.formatMessage({
+									id: "setup-required",
+									defaultMessage: "Setup Required",
+							  })}
+					</Badge>
+				);
+			},
 		},
 	];
 
@@ -89,6 +104,7 @@ function CertificateAuthorities() {
 						columns={cols}
 						data={data.items}
 						sortBy={data.sort[0].field}
+						hasActions={true}
 						pagination={{
 							limit: data.limit,
 							offset: data.offset,