Uninstall.tsx

import { useState } from "react";
import { Button, Row } from "react-bootstrap";
import Form from "react-bootstrap/Form";
import { useDockerDesktopClient } from "../hooks/useDockerDesktopClient";

import Loader from "./Loader";

interface UninstallProps {
  isEnabled: boolean;
  image: string;
}
export default function Uninstall({ isEnabled, image }: UninstallProps) {
  const [isLoading, setLoading] = useState(false);
  const ddClient = useDockerDesktopClient();

  if (!isEnabled) return null;

  const handleUninstall = () => {
    setLoading(true);
    ddClient.docker.cli
      .exec("ps", [
        "--all",
        "--format",
        '"{{json .}}"',
        "--filter",
        `ancestor=${image}`,
      ])
      .then(async (result) => {
        // result.parseJsonLines() parses the output of the command into an array of objects
        const containers = result.parseJsonLines();
        for (let index = 0; index < containers.length; index++) {
          const container = containers[index];
          await ddClient.docker.cli.exec("container", ["rm", container.ID]);
        }
        const rmiResult = await ddClient.docker.cli.exec("rmi", [image, "-f"]);
        console.debug(rmiResult);
        await ddClient.docker.cli.exec("image", ["prune", "-f"]);
        setLoading(false);
      })
      .catch((err) => {
        ddClient.desktopUI.toast.error(`Uninstall Snapshot Error`);
        console.error(err);
        setLoading(false);
      });
  };

  return (
    <Form.Group as={Row} className="mb-3">
      <div className="col-2">
        <Button
          className="btn btn-danger"
          type="button"
          onClick={handleUninstall}
          id="uninstall-button"
        >
          <Loader isLoading={isLoading} />
          Uninstall
        </Button>
      </div>
      <label
        className="col-auto align-self-center form-label"
        htmlFor="uninstall-button"
      >
        Remove the Docker image and mark the product as uninstalled.
      </label>
    </Form.Group>
  );
}