Refactor frontend pages and config components into single-component files for Task 13

2026-04-19 09:30:35 +02:00
parent 6c053cdaee
commit 38b9d35255
31 changed files with 2158 additions and 2603 deletions
--- a/frontend/src/components/config/ActionDetail.tsx
+++ b/frontend/src/components/config/ActionDetail.tsx
@@ -0,0 +1,94 @@
+import { useCallback, useState } from "react";
+import { Button, Field, Input, MessageBar, MessageBarBody } from "@fluentui/react-components";
+import { Delete24Regular, LinkEdit24Regular } from "@fluentui/react-icons";
+import type { ActionConfig } from "../../types/config";
+import { useActionRawFile } from "../../hooks/useActionRawFile";
+import { ActionForm } from "./ActionForm";
+import { RawConfigSection } from "./RawConfigSection";
+import { useConfigStyles } from "./configStyles";
+
+interface ActionDetailProps {
+  action: ActionConfig;
+  onAssignClick: () => void;
+  onRemovedFromJail: (jailName: string) => Promise<void>;
+}
+
+export function ActionDetail({ action, onAssignClick, onRemovedFromJail }: ActionDetailProps): React.JSX.Element {
+  const styles = useConfigStyles();
+  const [removingJail, setRemovingJail] = useState<string | null>(null);
+  const [removeError, setRemoveError] = useState<string | null>(null);
+  const { fetchRawContent, saveRawContent } = useActionRawFile(action.name);
+
+  const handleRemoveFromJail = useCallback(
+    (jailName: string): void => {
+      setRemovingJail(jailName);
+      setRemoveError(null);
+      onRemovedFromJail(jailName)
+        .catch((err: unknown) => {
+          setRemoveError(err instanceof Error ? err.message : "Failed to remove action from jail.");
+        })
+        .finally(() => {
+          setRemovingJail(null);
+        });
+    },
+    [onRemovedFromJail],
+  );
+
+  return (
+    <div>
+      <div className={styles.fieldRow} style={{ marginBottom: "var(--spacingVerticalS)" }}>
+        <Field label="Source file">
+          <Input
+            readOnly
+            value={action.source_file || action.filename}
+            className={styles.codeInput}
+            size="small"
+          />
+        </Field>
+      </div>
+
+      <ActionForm name={action.name} />
+
+      <div style={{ marginTop: "var(--spacingVerticalM)" }}>
+        <Button appearance="secondary" icon={<LinkEdit24Regular />} onClick={onAssignClick}>
+          Assign to Jail
+        </Button>
+      </div>
+
+      {action.used_by_jails.length > 0 && (
+        <div style={{ marginTop: "var(--spacingVerticalM)" }}>
+          {removeError !== null && (
+            <MessageBar intent="error" style={{ marginBottom: "var(--spacingVerticalXS)" }}>
+              <MessageBarBody>{removeError}</MessageBarBody>
+            </MessageBar>
+          )}
+          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+            {action.used_by_jails.map((jailName) => (
+              <div key={jailName} style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                <span style={{ fontFamily: "monospace", fontSize: 13 }}>{jailName}</span>
+                <Button
+                  appearance="subtle"
+                  size="small"
+                  icon={<Delete24Regular />}
+                  disabled={removingJail !== null}
+                  onClick={() => { handleRemoveFromJail(jailName); }}
+                  aria-label={`Remove action from ${jailName}`}
+                >
+                  Remove
+                </Button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div style={{ marginTop: "var(--spacingVerticalL)" }}>
+        <RawConfigSection
+          fetchContent={fetchRawContent}
+          saveContent={saveRawContent}
+          label="Raw Action Configuration"
+        />
+      </div>
+    </div>
+  );
+}