Add a UI for deleting kits

astroplant-frontend/src/api/index.ts

@@ -496,6 +496,21 @@ export class Api extends BaseApi {
  });
  };
 
+ /**
+ * Delete a kit.
+ * @throws {ErrorResponse}
+ */
+ deleteKit = ({
+ kitSerial,
+ }: {
+ kitSerial: string;
+ }): Observable<Response<void>> => {
+ return this.request({
+ path: `/kits/${encodeURI(kitSerial)}`,
+ method: "DELETE",
+ });
+ };
+
  /**
  * Update a peripheral.
  * @throws {ErrorResponse}

astroplant-frontend/src/scenes/kit/access/components/DeleteKit.tsx

@@ -0,0 +1,72 @@
+import { useId, useMemo } from "react";
+import { Trans, useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+
+import { api, Response, schemas } from "~/api";
+import ApiButton from "~/Components/ApiButton";
+import { useAppDispatch } from "~/hooks";
+import { notificationSuccess } from "~/modules/notification";
+import { addNotificationRequest } from "~/modules/notification/actions";
+import { deleteKit } from "~/modules/kit/actions";
+
+import style from "./style.module.css";
+
+const Button = ApiButton<any>();
+
+export type Props = {
+ kit: schemas["Kit"];
+};
+
+export default function DeleteKit({ kit }: Props) {
+ const { t } = useTranslation();
+ const id = useId();
+ const dispatch = useAppDispatch();
+ const navigate = useNavigate();
+
+ const onResponse = useMemo(
+ () => (_: Response<void>) => {
+ const notification = notificationSuccess(
+ "Kit deleted",
+ "This kit was successfully deleted",
+ );
+ dispatch(addNotificationRequest(notification));
+ dispatch(deleteKit({ serial: kit.serial, kitId: kit.id }));
+ navigate("/me", { replace: true });
+ },
+ [dispatch, kit, navigate],
+ );
+
+ const send = useMemo(
+ () => () => {
+ return api.deleteKit({
+ kitSerial: kit.serial,
+ });
+ },
+ [kit],
+ );
+
+ const kitName = useMemo(() => kit.name || "Unnamed", [kit]);
+
+ return (
+ <section className={style.item}>
+ <div>
+ <div>
+ <strong>Delete</strong>
+ </div>
+ Permanently delete this kit.
+ </div>
+ <Button
+ id={id}
+ send={send}
+ onResponse={onResponse}
+ label={t("kitAccess.deleteKit")}
+ buttonProps={{ variant: "negative" }}
+ confirm={() => ({
+ content: (
+ <Trans i18nKey="kitAccess.deleteKitConfirm">{{ kitName }}</Trans>
+ ),
+ })}
+ />
+ </section>
+ );
+}

astroplant-frontend/src/scenes/kit/access/index.tsx

@@ -5,6 +5,7 @@ import commonStyle from "~/Common.module.css";
 import { KitContext } from "../contexts";
 import KitSerial from "./components/KitSerial";
 import ResetPassword from "./components/ResetPassword";
+import DeleteKit from "./components/DeleteKit";
 
 import style from "./index.module.css";
 
@@ -20,6 +21,9 @@ export default function KitConfigure() {
  <li>
  <ResetPassword kit={kit} />
  </li>
+ <li>
+ <DeleteKit kit={kit} />
+ </li>
  </ul>
  </section>
  );

astroplant-frontend/src/translations/en.json

@@ -112,7 +112,9 @@
  },
  "kitAccess": {
  "resetPassword": "Reset kit password",
- "resetPasswordConfirm": "Are you sure you wish to reset the password of kit <strong>{{kitName}}</strong>? Your kit will be unable to connect until you update the credentials on the kit."
+ "resetPasswordConfirm": "Are you sure you wish to reset the password of kit <strong>{{kitName}}</strong>? Your kit will be unable to connect until you update the credentials on the kit.",
+ "deleteKit": "Delete this Kit",
+ "deleteKitConfirm": "Are you sure you wish to delete kit <strong>{{kitName}}</strong>? This will permanently delete all data associated with the kit, including measurements and media. <strong>This cannot be undone.</strong>"
  },
  "control": {
  "header": "Control",