From 95f2e49ee06b959c586301106857c49cf7440252 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Tue, 2 Apr 2024 21:18:52 -0700
Subject: [PATCH] update firewall filter type/value visual treatment (#2108)

* update firewall filter type/value visual treatment

* use normal-case on values badges

* keep various filters on one line, with wrapping when needed
---
 app/table/cells/FirewallFilterCell.tsx | 15 +++++++++------
 app/table/cells/TypeValueCell.tsx      |  4 +++-
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/app/table/cells/FirewallFilterCell.tsx b/app/table/cells/FirewallFilterCell.tsx
index c239dd866f..ad235cb271 100644
--- a/app/table/cells/FirewallFilterCell.tsx
+++ b/app/table/cells/FirewallFilterCell.tsx
@@ -15,14 +15,17 @@ import { TypeValueCell } from './TypeValueCell'
 export const FirewallFilterCell = ({
   value: { hosts, ports, protocols },
 }: Cell<VpcFirewallRuleFilter>) => (
-  <div className="space-x-1">
-    {hosts && hosts.map((tv, i) => <TypeValueCell key={`${tv}-${i}`} value={tv} />)}
-    {protocols &&
-      protocols.map((p, i) => (
-        <Badge key={`${p}-${i}`} variant="default">
+  <div className="flex flex-col gap-1">
+    <div className="flex flex-wrap gap-1">
+      {hosts?.map((tv, i) => <TypeValueCell key={`${tv}-${i}`} value={tv} />)}
+    </div>
+    <div className="flex gap-1">
+      {protocols?.map((p, i) => <Badge key={`${p}-${i}`}>{p}</Badge>)}
+      {ports?.map((p, i) => (
+        <Badge key={`${p}-${i}`} variant="solid">
           {p}
         </Badge>
       ))}
-    {ports && ports.map((p, i) => <Badge key={`${p}-${i}`}>{p}</Badge>)}
+    </div>
   </div>
 )
diff --git a/app/table/cells/TypeValueCell.tsx b/app/table/cells/TypeValueCell.tsx
index bf34d19a85..a887228f7e 100644
--- a/app/table/cells/TypeValueCell.tsx
+++ b/app/table/cells/TypeValueCell.tsx
@@ -18,6 +18,8 @@ export type TypeValue = {
 export const TypeValueCell = ({ value: { type, value } }: Cell<TypeValue>) => (
   <div className="space-x-1">
     <Badge>{type}</Badge>
-    <Badge>{value}</Badge>
+    <Badge variant="solid" className="!normal-case">
+      {value}
+    </Badge>
   </div>
 )