114 lines
3.3 KiB
TypeScript
114 lines
3.3 KiB
TypeScript
import { Button } from "@repo/shadcn-ui/components/button";
|
|
import {
|
|
EntityAction,
|
|
EntityListHeader,
|
|
EntityRowActions,
|
|
EntityStatus,
|
|
EntityTable,
|
|
} from "@repo/shadcn-ui/components/entity-list";
|
|
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 { SupportToolEditorDialog } from "./support-tool-editor-dialog";
|
|
export function SupportTools({ csrfToken }: { csrfToken: string }) {
|
|
const { t, i18n } = 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">
|
|
<EntityListHeader
|
|
actions={
|
|
<>
|
|
{" "}
|
|
<Button
|
|
onClick={() => {
|
|
setEdit(undefined);
|
|
setOpen(true);
|
|
}}
|
|
>
|
|
{t("support.newTool")}
|
|
</Button>{" "}
|
|
</>
|
|
}
|
|
locale={i18n.language}
|
|
title={t("support.tools")}
|
|
/>
|
|
{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>
|
|
)}
|
|
<EntityTable
|
|
columns={[
|
|
{
|
|
id: "name",
|
|
label: t("name"),
|
|
value: (tool) => tool.name,
|
|
hideable: false,
|
|
render: (tool) => <span className="font-medium">{tool.name}</span>,
|
|
},
|
|
{
|
|
id: "state",
|
|
label: t("status"),
|
|
value: (tool) => tool.active,
|
|
render: (tool) => (
|
|
<EntityStatus active={tool.active}>
|
|
{t(tool.active ? "support.active" : "inactive")}
|
|
</EntityStatus>
|
|
),
|
|
},
|
|
{
|
|
id: "origin",
|
|
label: t("origin"),
|
|
value: (tool) => tool.builtin,
|
|
render: (tool) => <>{t(tool.builtin ? "support.builtin" : "custom")}</>,
|
|
},
|
|
{
|
|
id: "actions",
|
|
label: t("actions"),
|
|
hideable: false,
|
|
render: (tool) => (
|
|
<EntityRowActions label={t("actions")}>
|
|
<EntityAction
|
|
onClick={() => {
|
|
setEdit(tool);
|
|
setOpen(true);
|
|
}}
|
|
>
|
|
{t("edit")}
|
|
</EntityAction>
|
|
</EntityRowActions>
|
|
),
|
|
},
|
|
]}
|
|
items={query.data?.tools ?? []}
|
|
loading={query.isPending}
|
|
locale={i18n.language}
|
|
title={t("support.tools")}
|
|
unavailable={query.isError}
|
|
/>
|
|
<SupportToolEditorDialog
|
|
csrfToken={csrfToken}
|
|
edit={edit}
|
|
onOpenChange={setOpen}
|
|
onSaved={() => setOpen(false)}
|
|
open={open}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|