Use status components for true/false things

frontend/src/components/Table/Formatter/CertificateInUseFormatter.tsx

@@ -1,6 +1,7 @@
 import OverlayTrigger from "react-bootstrap/OverlayTrigger";
 import Popover from "react-bootstrap/Popover";
 import type { DeadHost, ProxyHost, RedirectionHost, Stream } from "src/api/backend";
+import { TrueFalseFormatter } from "src/components";
 import { T } from "src/locale";
 
 const getSection = (title: string, items: ProxyHost[] | RedirectionHost[] | DeadHost[]) => {
@@ -52,11 +53,7 @@ interface Props {
 export function CertificateInUseFormatter({ proxyHosts, redirectionHosts, deadHosts, streams }: Props) {
 	const totalCount = proxyHosts?.length + redirectionHosts?.length + deadHosts?.length + streams?.length;
 	if (totalCount === 0) {
-		return (
-			<span className="badge bg-red-lt">
-				<T id="certificate.not-in-use" />
-			</span>
-		);
+		return <TrueFalseFormatter value={false} falseLabel="certificate.not-in-use" />;
 	}
 
 	proxyHosts.sort();
@@ -76,10 +73,10 @@ export function CertificateInUseFormatter({ proxyHosts, redirectionHosts, deadHo
 	);
 
 	return (
-		<OverlayTrigger trigger="hover" placement="bottom" overlay={popover}>
-			<span className="badge bg-lime-lt">
-				<T id="certificate.in-use" />
-			</span>
+		<OverlayTrigger trigger={["hover", "click", "focus"]} placement="bottom" overlay={popover}>
+			<div>
+				<TrueFalseFormatter value trueLabel="certificate.in-use" />
+			</div>
 		</OverlayTrigger>
 	);
 }

frontend/src/components/Table/Formatter/DomainsFormatter.tsx

@@ -1,3 +1,4 @@
+import cn from "classnames";
 import type { ReactNode } from "react";
 import { DateTimeFormat, T } from "src/locale";
 
@@ -6,9 +7,10 @@ interface Props {
 	createdOn?: string;
 	niceName?: string;
 	provider?: string;
+	color?: string;
 }
 
-const DomainLink = ({ domain }: { domain: string }) => {
+const DomainLink = ({ domain, color }: { domain: string; color?: string }) => {
 	// when domain contains a wildcard, make the link go nowhere.
 	let onClick: ((e: React.MouseEvent) => void) | undefined;
 	if (domain.includes("*")) {
@@ -20,15 +22,14 @@ const DomainLink = ({ domain }: { domain: string }) => {
 			href={`http://${domain}`}
 			target="_blank"
 			onClick={onClick}
-			className="badge bg-yellow-lt domain-name me-2"
+			className={cn("badge", color ? `bg-${color}-lt` : null, "domain-name", "me-2")}
 		>
 			{domain}
 		</a>
 	);
 };
 
-export function DomainsFormatter({ domains, createdOn, niceName, provider }: Props) {
-	console.log("PROVIDER:", provider);
+export function DomainsFormatter({ domains, createdOn, niceName, provider, color }: Props) {
 	const elms: ReactNode[] = [];
 	if (domains.length === 0 && !niceName) {
 		elms.push(
@@ -45,7 +46,7 @@ export function DomainsFormatter({ domains, createdOn, niceName, provider }: Pro
 		);
 	}
 
-	domains.map((domain: string) => elms.push(<DomainLink key={domain} domain={domain} />));
+	domains.map((domain: string) => elms.push(<DomainLink key={domain} domain={domain} color={color} />));
 
 	return (
 		<div className="flex-fill">

frontend/src/components/Table/Formatter/EnabledFormatter.tsx

@@ -1,13 +0,0 @@
-import cn from "classnames";
-import { T } from "src/locale";
-
-interface Props {
-	enabled: boolean;
-}
-export function EnabledFormatter({ enabled }: Props) {
-	return (
-		<span className={cn("badge", enabled ? "bg-lime-lt" : "bg-red-lt")}>
-			<T id={enabled ? "enabled" : "disabled"} />
-		</span>
-	);
-}

frontend/src/components/Table/Formatter/StatusFormatter.tsx

@@ -1,13 +0,0 @@
-import cn from "classnames";
-import { T } from "src/locale";
-
-interface Props {
-	enabled: boolean;
-}
-export function StatusFormatter({ enabled }: Props) {
-	return (
-		<span className={cn("badge", enabled ? "bg-lime-lt" : "bg-red-lt")}>
-			<T id={enabled ? "online" : "offline"} />
-		</span>
-	);
-}

frontend/src/components/Table/Formatter/TrueFalseFormatter.tsx

@@ -0,0 +1,24 @@
+import cn from "classnames";
+import { T } from "src/locale";
+
+interface Props {
+	value: boolean;
+	trueLabel?: string;
+	trueColor?: string;
+	falseLabel?: string;
+	falseColor?: string;
+}
+export function TrueFalseFormatter({
+	value,
+	trueLabel = "enabled",
+	trueColor = "lime",
+	falseLabel = "disabled",
+	falseColor = "red",
+}: Props) {
+	return (
+		<span className={cn("status", `status-${value ? trueColor : falseColor}`)}>
+			<span className="status-dot status-dot-animated" />
+			<T id={value ? trueLabel : falseLabel} />
+		</span>
+	);
+}

frontend/src/components/Table/Formatter/index.ts

@@ -4,9 +4,8 @@ export * from "./CertificateInUseFormatter";
 export * from "./DateFormatter";
 export * from "./DomainsFormatter";
 export * from "./EmailFormatter";
-export * from "./EnabledFormatter";
 export * from "./EventFormatter";
 export * from "./GravatarFormatter";
 export * from "./RolesFormatter";
-export * from "./StatusFormatter";
+export * from "./TrueFalseFormatter";
 export * from "./ValueWithDateFormatter";