Upload Download Kernel Images (#413)

* base for kernel image upload/download

* Downloads page and artifact upload/download

* fix example resources

* improved file drag and drop zone

* functionality to upload tgz artifact

* Fetch artifacts

* Kernel upload flow

* partial lint fix

* Revert independent artifact backend changes

* New KernelImage model, crud, and routers

* Kernel Image Upload Download

* Base64 Encode File workaround TypeSafe

* Require mod or admin permissions backend

* Fix admin mod permission and lint

* Fix typing on update kernel image

CONTRIBUTING.md

@@ -214,6 +214,10 @@ npm run format
 
 To run tests, use the following commands:
 
+1. Run autoformatting: `make format`
+2. Run static checks: `make static-checks`
+3. Run unit tests: `make test`
+
 ```bash
 make test
 make test-frontend  # Run only the frontend tests

frontend/package.json

@@ -25,16 +25,20 @@
   "dependencies": {
     "@formspree/react": "^2.5.1",
     "@hookform/resolvers": "^3.9.0",
+    "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-navigation-menu": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
     "@react-oauth/google": "^0.12.1",
     "@react-three/drei": "^9.109.2",
     "@react-three/fiber": "^8.16.8",
     "@types/three": "^0.168.0",
     "@uidotdev/usehooks": "^2.4.1",
+    "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",

frontend/src/components/DownloadKernelImage.tsx

@@ -0,0 +1,85 @@
+import { useState } from "react";
+
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/Card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { components } from "@/gen/api";
+import { useAlertQueue } from "@/hooks/useAlertQueue";
+import axios from "axios";
+import { Download } from "lucide-react";
+
+type KernelImageResponse = components["schemas"]["KernelImageResponse"];
+
+interface Props {
+  kernelImage: KernelImageResponse;
+}
+
+const DownloadKernelImage = ({ kernelImage }: Props) => {
+  const { addErrorAlert } = useAlertQueue();
+  const [isDownloading, setIsDownloading] = useState(false);
+
+  const handleDownload = async () => {
+    setIsDownloading(true);
+    try {
+      const response = await axios.get(
+        `/api/kernel-images/download/${kernelImage.id}`,
+      );
+      const downloadUrl = response.data;
+      window.location.href = downloadUrl;
+    } catch (error) {
+      console.error("Error downloading kernel image:", error);
+      addErrorAlert("Error downloading kernel image");
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  return (
+    <Card key={kernelImage.id}>
+      <CardHeader className="space-y-2">
+        <CardTitle className="flex justify-between items-center">
+          {kernelImage.name}
+          <div className="flex gap-1">
+            <Badge variant="outline" className="bg-blue-100 text-blue-800">
+              Kernel
+            </Badge>
+            {kernelImage.is_official && (
+              <Badge variant="primary">Official</Badge>
+            )}
+          </div>
+        </CardTitle>
+        {kernelImage.description ? (
+          <p className="text-sm text-muted-foreground">
+            {kernelImage.description}
+          </p>
+        ) : (
+          <div className="h-5" /> // Placeholder to maintain spacing
+        )}
+      </CardHeader>
+      <CardContent>
+        <div className="flex flex-col justify-between text-sm text-gray-11">
+          <span>Size: {(kernelImage.size / 1024 / 1024).toFixed(2)} MB</span>
+          <span>Downloads: {kernelImage.downloads}</span>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button
+          className="w-full"
+          onClick={handleDownload}
+          disabled={isDownloading}
+        >
+          <Download className="mr-2 h-4 w-4" />
+          {isDownloading ? "Downloading..." : "Download"}
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default DownloadKernelImage;

frontend/src/components/listing/artifacts/ArtifactCard.tsx

@@ -80,12 +80,11 @@ const ArtifactCard: React.FC<Props> = ({ artifact, onDelete, canEdit }) => {
         </div>
         <p className="text-sm text-gray-10 mb-2">{artifact.description}</p>
         <p className="text-xs text-gray-10 mb-4">Created on {formattedDate}</p>
-        {artifact.artifact_type === "tgz" && (
+        {artifact.artifact_type === "tgz" ? (
           <TgzArtifact artifact={artifact} />
-        )}
-        {artifact.artifact_type === "image" && (
+        ) : artifact.artifact_type === "image" ? (
           <ImageArtifact artifact={artifact} />
-        )}
+        ) : null}
       </div>
     </div>
   );