95 lines
3.3 KiB
TypeScript
95 lines
3.3 KiB
TypeScript
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>
|
|
);
|
|
}
|