Implements certificate delete ui

This commit is contained in:
Jamie Curnow 2024-09-15 23:00:49 +10:00
parent d2048e540d
commit 1d5f390f9b
No known key found for this signature in database
GPG Key ID: FFBB624C43388E9E
7 changed files with 68 additions and 2 deletions

View File

@ -99,3 +99,21 @@ export async function put(
const response = await fetch(apiUrl, { method, headers, body, signal });
return processResponse(response, skipCamelize);
}
interface DeleteArgs {
url: string;
}
export async function del(
{ url }: DeleteArgs,
abortController?: AbortController,
) {
const apiUrl = buildUrl({ url });
const method = "DELETE";
const headers = {
...buildAuthHeader(),
[contentTypeHeader]: "application/json",
};
const signal = abortController?.signal;
const response = await fetch(apiUrl, { method, headers, signal });
return processResponse(response);
}

View File

@ -0,0 +1,14 @@
import * as api from "./base";
export async function deleteCertificate(
id: number,
abortController?: AbortController,
): Promise<boolean> {
const { result } = await api.del(
{
url: `/certificates/${id}`,
},
abortController,
);
return result;
}

View File

@ -2,6 +2,7 @@ export * from "./createCertificate";
export * from "./createCertificateAuthority";
export * from "./createDNSProvider";
export * from "./createUser";
export * from "./deleteCertificate";
export * from "./getAccessLists";
export * from "./getCertificate";
export * from "./getCertificateAuthorities";

View File

@ -2,6 +2,7 @@ import { useEffect, ReactNode } from "react";
import { Box, Container, useToast } from "@chakra-ui/react";
import { useQueryClient } from "@tanstack/react-query";
import { getSSEToken, SSEMessage } from "src/api/npm";
import { Footer, Navigation } from "src/components";
import { intl } from "src/locale";

View File

@ -347,6 +347,9 @@
"certificate.create": {
"defaultMessage": "Create Certificate"
},
"certificate.deleted": {
"defaultMessage": "Certificate has been deleted"
},
"certificate.renewal-requested": {
"defaultMessage": "Renewal has been queued"
},

View File

@ -28,6 +28,7 @@ export interface TableProps {
filters: TableFilter[];
onTableEvent: any;
onRenewal: (id: number) => void;
onDelete: (id: number) => void;
}
function Table({
data,
@ -36,6 +37,7 @@ function Table({
sortBy,
filters,
onRenewal,
onDelete,
}: TableProps) {
const [editId, setEditId] = useState(0);
const [columns, tableData] = useMemo(() => {
@ -113,7 +115,7 @@ function Table({
title: intl.formatMessage({
id: "action.delete",
}),
onClick: (_: any, { id }: any) => alert(id),
onClick: (_: any, { id }: any) => onDelete(id),
icon: <FiTrash2 />,
disabled: (data: any) => data.isReadonly,
},

View File

@ -3,7 +3,7 @@ import { useEffect, useReducer, useState } from "react";
import { Alert, AlertIcon, useToast } from "@chakra-ui/react";
import { useQueryClient } from "@tanstack/react-query";
import { renewCertificate } from "src/api/npm";
import { renewCertificate, deleteCertificate } from "src/api/npm";
import { EmptyList, SpinnerPage, tableEventReducer } from "src/components";
import { useCertificates } from "src/hooks";
import { intl } from "src/locale";
@ -68,6 +68,32 @@ function TableWrapper() {
}
};
const deleteCert = async (id: number) => {
try {
await deleteCertificate(id);
toast({
description: intl.formatMessage({
id: `certificate.deleted`,
}),
status: "success",
position: "top",
duration: 3000,
isClosable: true,
});
setTimeout(() => {
queryClient.invalidateQueries({ queryKey: ["certificates"] });
}, 500);
} catch (err: any) {
toast({
description: err.message,
status: "error",
position: "top",
duration: 3000,
isClosable: true,
});
}
};
if (isFetching || isLoading || !tableData) {
return <SpinnerPage />;
}
@ -105,6 +131,7 @@ function TableWrapper() {
filters={filters}
onTableEvent={dispatch}
onRenewal={renewCert}
onDelete={deleteCert}
/>
);
}