78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
|
import { Button } from "@repo/shadcn-ui/components/button";
|
||
|
|
import { FormDialog } from "@repo/shadcn-ui/components/form-dialog";
|
||
|
|
import { useQuery } from "@tanstack/react-query";
|
||
|
|
import { useState } from "react";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
|
||
|
|
import type { SupportToolDTO } from "../common/support";
|
||
|
|
|
||
|
|
import { supportApi, supportKeys } from "./support-api";
|
||
|
|
import { SupportToolForm } from "./support-tool-form";
|
||
|
|
export function SupportTools({ csrfToken }: { csrfToken: string }) {
|
||
|
|
const { t } = useTranslation("assets");
|
||
|
|
const query = useQuery({ queryKey: supportKeys.tools, queryFn: () => supportApi.tools() });
|
||
|
|
const [edit, setEdit] = useState<SupportToolDTO | undefined>();
|
||
|
|
const [open, setOpen] = useState(false);
|
||
|
|
return (
|
||
|
|
<div className="space-y-4">
|
||
|
|
<header className="flex justify-end">
|
||
|
|
<Button
|
||
|
|
onClick={() => {
|
||
|
|
setEdit(undefined);
|
||
|
|
setOpen(true);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{t("support.newTool")}
|
||
|
|
</Button>
|
||
|
|
</header>
|
||
|
|
{query.isPending && <p role="status">{t("support.loading")}</p>}
|
||
|
|
{query.isError && (
|
||
|
|
<div role="alert">
|
||
|
|
<p>{t("support.loadError")}</p>
|
||
|
|
<Button
|
||
|
|
onClick={() => {
|
||
|
|
query.refetch().catch(() => undefined);
|
||
|
|
}}
|
||
|
|
variant="outline"
|
||
|
|
>
|
||
|
|
{t("retry")}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<ul className="divide-y">
|
||
|
|
{query.data?.tools.map((tool) => (
|
||
|
|
<li className="flex items-center justify-between gap-3 py-3" key={tool.id}>
|
||
|
|
<span>
|
||
|
|
{tool.name} · {t(tool.active ? "support.active" : "inactive")}
|
||
|
|
{tool.builtin ? ` · ${t("support.builtin")}` : ""}
|
||
|
|
</span>
|
||
|
|
<Button
|
||
|
|
onClick={() => {
|
||
|
|
setEdit(tool);
|
||
|
|
setOpen(true);
|
||
|
|
}}
|
||
|
|
variant="outline"
|
||
|
|
>
|
||
|
|
{t("edit")}
|
||
|
|
</Button>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
<FormDialog
|
||
|
|
cancelLabel={t("cancel")}
|
||
|
|
formActions
|
||
|
|
onOpenChange={setOpen}
|
||
|
|
open={open}
|
||
|
|
title={t(edit ? "support.editTool" : "support.newTool")}
|
||
|
|
>
|
||
|
|
<SupportToolForm
|
||
|
|
csrfToken={csrfToken}
|
||
|
|
key={edit?.id ?? "new"}
|
||
|
|
{...(edit ? { tool: edit } : {})}
|
||
|
|
onSaved={() => setOpen(false)}
|
||
|
|
/>
|
||
|
|
</FormDialog>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|