Add tags to servers, with a tag filter on the Servers page

Servers can be tagged (prod, media, rack-1, ...) for grouping. Operators and admins edit tags inline on a server's detail page; the input suggests tags already used on other servers so the same word ends up spelled the same way everywhere. Tags show as chips that keep one colour per tag, on the server cards, in the Manage table (and its CSV export), and on the detail page, where each chip links to the Servers list filtered by that tag. The Servers page has a tag bar with counts; picking several tags narrows to servers that have all of them. The filter lives in the URL, so it survives a refresh and can be linked to. Tags are also matched by the global search. Tags are normalized on the server (trimmed, lowercased, spaces become "-", duplicates merged, sorted); letters in any language are allowed, plus digits and - _ . : /, at most 30 characters and 12 per server. Invalid input is rejected with a message naming the offending tag, and nothing is saved. Changes are audit-logged with the before and after lists. Stored as a JSON column on servers (migration 0010). Every server response now returns tags as an array, and the shared response shaping strips the token hash in one place instead of five. Verified with 27 backend checks (normalization edge cases including Swedish letters, roles, validation, search, audit, PATCH/detail/list shapes) and by driving the real Servers and detail pages against the real router in a browser (filtering, editing, invalid tag, viewer view). Real dev database mtime untouched. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-26 03:06:29 +02:00
1 parent 4c11158e98
commit 9f1609c4ed
@@ -0,0 +1,152 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { api } from "../api/client";
+import { normalizeTagInput, tagColorClass } from "../utils/tags";
+import { readableError } from "../utils/errors";
+
+export function TagBadges({ tags, linked = false }: { tags: string[]; linked?: boolean }) {
+  return (
+    <>
+      {tags.map((tag) =>
+        linked ? (
+          <Link key={tag} to={`/servers?tag=${encodeURIComponent(tag)}`} className={`badge text-decoration-none ${tagColorClass(tag)}`} title={`All servers tagged ${tag}`}>
+            {tag}
+          </Link>
+        ) : (
+          <span key={tag} className={`badge ${tagColorClass(tag)}`}>
+            {tag}
+          </span>
+        ),
+      )}
+    </>
+  );
+}
+
+/** Tags on a server's detail page: the chips (each links to the filtered Servers list) and, for operators, an inline editor. */
+export default function ServerTags({
+  serverId,
+  tags,
+  canEdit,
+  onSaved,
+}: {
+  serverId: number;
+  tags: string[];
+  canEdit: boolean;
+  onSaved: (tags: string[]) => void;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [draftTags, setDraftTags] = useState<string[]>([]);
+  const [input, setInput] = useState("");
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  function startEditing() {
+    setDraftTags(tags);
+    setInput("");
+    setError(null);
+    setEditing(true);
+    // Offer the tags already used elsewhere, so the same word ends up spelled the same way everywhere.
+    api.servers
+      .list()
+      .then((res) => setSuggestions([...new Set(res.servers.flatMap((s) => s.tags))].sort()))
+      .catch(() => {});
+  }
+
+  function addFromInput(): string[] {
+    const additions = input
+      .split(",")
+      .map(normalizeTagInput)
+      .filter(Boolean);
+    const next = [...new Set([...draftTags, ...additions])];
+    setDraftTags(next);
+    setInput("");
+    return next;
+  }
+
+  async function save() {
+    const finalTags = input.trim() ? addFromInput() : draftTags;
+    setSaving(true);
+    setError(null);
+    try {
+      const res = await api.servers.setTags(serverId, finalTags);
+      onSaved(res.tags);
+      setEditing(false);
+    } catch (err) {
+      setError(readableError(err));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  if (!editing) {
+    if (tags.length === 0 && !canEdit) return null;
+    return (
+      <div className="d-flex flex-wrap align-items-center gap-1 mb-3">
+        <TagBadges tags={tags} linked />
+        {canEdit && (
+          <button className="btn btn-link btn-sm p-0 ms-1" onClick={startEditing}>
+            {tags.length === 0 ? "+ Add tags" : "Edit tags"}
+          </button>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="card mb-3">
+      <div className="card-body">
+        {error && <div className="alert alert-danger">{error}</div>}
+        <label className="form-label">Tags</label>
+        <div className="d-flex flex-wrap align-items-center gap-1 mb-2">
+          {draftTags.map((tag) => (
+            <span key={tag} className={`badge ${tagColorClass(tag)}`}>
+              {tag}
+              <button
+                type="button"
+                className="btn-close btn-close-sm ms-1"
+                style={{ fontSize: "0.5rem" }}
+                aria-label={`Remove ${tag}`}
+                onClick={() => setDraftTags(draftTags.filter((t) => t !== tag))}
+              />
+            </span>
+          ))}
+          {draftTags.length === 0 && <span className="text-secondary small">No tags yet.</span>}
+        </div>
+        <div className="d-flex gap-2">
+          <input
+            className="form-control"
+            list={`tag-suggestions-${serverId}`}
+            placeholder="Type a tag and press Enter — e.g. prod, media, rack-1"
+            maxLength={40}
+            value={input}
+            autoFocus
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === ",") {
+                e.preventDefault();
+                if (input.trim()) addFromInput();
+              } else if (e.key === "Backspace" && !input && draftTags.length > 0) {
+                setDraftTags(draftTags.slice(0, -1));
+              }
+            }}
+          />
+          <datalist id={`tag-suggestions-${serverId}`}>
+            {suggestions
+              .filter((s) => !draftTags.includes(s))
+              .map((s) => (
+                <option key={s} value={s} />
+              ))}
+          </datalist>
+          <button className="btn btn-primary" onClick={save} disabled={saving}>
+            Save
+          </button>
+          <button className="btn" onClick={() => setEditing(false)} disabled={saving}>
+            Cancel
+          </button>
+        </div>
+        <div className="text-secondary small mt-2">Lowercase letters, numbers and - _ . : / — up to 12 tags per server.</div>
+      </div>
+    </div>
+  );
+}