robodev 0.21.0 → 0.22.0

package/templates/space/apps/fe/src/components/features/planets/details/PlanetEditPage.tsx

@@ -9,9 +9,9 @@ import {
   TextInput,
   Typography,
   useForm,
-  useFormValue,
   useToast,
 } from "@povio/ui/tanstack";
+import { useQueryClient } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
 import { Trash } from "lucide-react";
 import { useEffect, useState } from "react";
@@ -19,10 +19,10 @@ import { useTranslation } from "react-i18next";
 
 import { RowInputWrapper } from "@/components/shared/forms/RowInputWrapper";
 import { AlienQueries } from "@/openapi/alien/alien.queries";
-import { MediaModels } from "@/openapi/media/media.models";
 import { PlanetModels } from "@/openapi/planet/planet.models";
 import { PlanetQueries } from "@/openapi/planet/planet.queries";
-import { useMediaUploadHandler } from "@/utils/media-upload";
+import { bindLocalPlanetImage } from "@/utils/planet-form";
+import { updatePlanet } from "@/utils/planet-submit";
 
 interface PlanetEditPageProps {
   planet: PlanetModels.PlanetsGetResponseDto;
@@ -34,11 +34,14 @@ interface PlanetEditPageProps {
 export function PlanetEditPage({ planet, onClose, onDeleted, onSaved }: PlanetEditPageProps) {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const updatePlanet = PlanetQueries.useUpdate();
+  const queryClient = useQueryClient();
   const deletePlanet = PlanetQueries.useDeleteApiPlanetsById();
   const { successToast, errorToast } = useToast();
   const { confirm } = Confirmation.useConfirmation();
-  const [previewImageUrl, setPreviewImageUrl] = useState<string | undefined>(planet.image?.url);
+  const [pickedFile, setPickedFile] = useState<File | null>(null);
+  const [clearedExisting, setClearedExisting] = useState(false);
+  const [previewObjectUrl, setPreviewObjectUrl] = useState<string | undefined>();
+  const [isPending, setIsPending] = useState(false);
   // Seed the form from the fetched record, then reset when route data changes between planet IDs.
   const form = useForm({
     zodSchema: PlanetModels.PlanetsCreateRequestDtoSchema,
@@ -47,7 +50,6 @@ export function PlanetEditPage({ planet, onClose, onDeleted, onSaved }: PlanetEd
       alienId: planet.alienId ?? undefined,
       discoveryDate: planet.discoveryDate ?? undefined,
       description: planet.description ?? "",
-      image: planet.image ? { id: planet.image.id } : undefined,
     },
   });
 
@@ -57,30 +59,46 @@ export function PlanetEditPage({ planet, onClose, onDeleted, onSaved }: PlanetEd
       alienId: planet.alienId ?? undefined,
       discoveryDate: planet.discoveryDate ?? undefined,
       description: planet.description ?? "",
-      image: planet.image ? { id: planet.image.id } : undefined,
     });
-    setPreviewImageUrl(planet.image?.url);
+    setPickedFile(null);
+    setClearedExisting(false);
+    setPreviewObjectUrl((current) => {
+      if (current) URL.revokeObjectURL(current);
+      return undefined;
+    });
   }, [form, planet]);
 
-  const handleImageUpload = useMediaUploadHandler({
-    resourceName: MediaModels.MediaResourceName["planet-image"],
-    onUploaded: (media) => {
-      form.setFieldValue("image", { id: media.id });
-      setPreviewImageUrl(media.previewUrl);
-    },
-  });
+  useEffect(() => {
+    return () => {
+      if (previewObjectUrl) URL.revokeObjectURL(previewObjectUrl);
+    };
+  }, [previewObjectUrl]);
 
-  const handleImageChange = (_file: File | null) => {
-    // When clearing file, keep current image
-    if (!_file) {
-      form.setFieldValue("image", planet.image ? { id: planet.image.id } : undefined);
-      setPreviewImageUrl(planet.image?.url);
+  const handleImageChange = (file: File | null) => {
+    setPickedFile(file);
+    setPreviewObjectUrl((current) => {
+      if (current) URL.revokeObjectURL(current);
+      return file ? URL.createObjectURL(file) : undefined;
+    });
+    if (file) {
+      setClearedExisting(false);
     }
   };
 
+  const localImage = bindLocalPlanetImage(handleImageChange);
+
   const onSubmit = async (data: PlanetModels.PlanetsCreateRequestDto) => {
     try {
-      await updatePlanet.mutateAsync({ id: planet.id, data });
+      setIsPending(true);
+      await updatePlanet(planet.id, {
+        name: data.name,
+        alienId: data.alienId,
+        discoveryDate: data.discoveryDate,
+        description: data.description,
+        file: pickedFile,
+        clearImage: Boolean(clearedExisting && !pickedFile && planet.image),
+      });
+      await queryClient.invalidateQueries({ queryKey: PlanetQueries.keys.all });
       successToast({ text: t(($) => $.planets.edit.success) });
       if (onSaved) {
         onSaved();
@@ -89,6 +107,8 @@ export function PlanetEditPage({ planet, onClose, onDeleted, onSaved }: PlanetEd
       }
     } catch {
       errorToast({ text: t(($) => $.planets.edit.error) });
+    } finally {
+      setIsPending(false);
     }
   };
 
@@ -121,8 +141,11 @@ export function PlanetEditPage({ planet, onClose, onDeleted, onSaved }: PlanetEd
     }
   };
 
-  const currentImage = useFormValue(form, (values) => values.image);
-  const currentImageUrl = planet.image && currentImage?.id === planet.image.id ? planet.image.url : previewImageUrl;
+  const currentImageUrl = pickedFile
+    ? previewObjectUrl
+    : clearedExisting
+      ? undefined
+      : planet.image?.url;
   const handleClose = () => {
     if (onClose) {
       onClose();
@@ -222,16 +245,29 @@ export function PlanetEditPage({ planet, onClose, onDeleted, onSaved }: PlanetEd
             uploadText={t(($) => $.planets.edit.imageUploadText)}
             browseText={t(($) => $.planets.edit.imageBrowseText)}
             acceptedFileTypes={["image/jpeg", "image/png", "image/webp"]}
-            onChange={handleImageChange}
-            fileUpload={handleImageUpload}
+            {...localImage}
           />
           {currentImageUrl && (
-            <div className="aspect-video w-full overflow-hidden rounded-sm border border-elevation-outline-default-1 bg-elevation-fill-default-2">
-              <img
-                src={currentImageUrl}
-                alt=""
-                className="h-full w-full object-cover"
-              />
+            <div className="flex flex-col gap-2">
+              <div className="aspect-video w-full overflow-hidden rounded-sm border border-elevation-outline-default-1 bg-elevation-fill-default-2">
+                <img
+                  src={currentImageUrl}
+                  alt=""
+                  className="h-full w-full object-cover"
+                />
+              </div>
+              {!pickedFile && planet.image && !clearedExisting && (
+                <Button
+                  type="button"
+                  variant="outlined"
+                  size="xs"
+                  color="secondary"
+                  width="hug"
+                  onPress={() => setClearedExisting(true)}
+                >
+                  {t(($) => $.planets.edit.imageRemove)}
+                </Button>
+              )}
             </div>
           )}
         </div>
@@ -254,8 +290,8 @@ export function PlanetEditPage({ planet, onClose, onDeleted, onSaved }: PlanetEd
             size="xs"
             color="primary"
             width="hug"
-            isDisabled={updatePlanet.isPending}
-            isLoading={updatePlanet.isPending}
+            isDisabled={isPending}
+            isLoading={isPending}
           >
             {t(($) => $.planets.edit.submit)}
           </Button>

package/templates/space/apps/fe/src/components/features/planets/list/PlanetCreateModal.tsx

@@ -10,14 +10,16 @@ import {
   useForm,
   useToast,
 } from "@povio/ui/tanstack";
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { RowInputWrapper } from "@/components/shared/forms/RowInputWrapper";
 import { AlienQueries } from "@/openapi/alien/alien.queries";
-import { MediaModels } from "@/openapi/media/media.models";
 import { PlanetModels } from "@/openapi/planet/planet.models";
 import { PlanetQueries } from "@/openapi/planet/planet.queries";
-import { useMediaUploadHandler } from "@/utils/media-upload";
+import { bindLocalPlanetImage } from "@/utils/planet-form";
+import { createPlanet } from "@/utils/planet-submit";
 
 interface PlanetCreateModalProps {
   isOpen: boolean;
@@ -28,8 +30,10 @@ const useAlienLabelsQuery = AlienQueries.useGetLabels as never;
 
 export function PlanetCreateModal({ isOpen, onClose }: PlanetCreateModalProps) {
   const { t } = useTranslation();
-  const createPlanet = PlanetQueries.useCreate();
+  const queryClient = useQueryClient();
   const { successToast, errorToast } = useToast();
+  const [pickedFile, setPickedFile] = useState<File | null>(null);
+  const [isPending, setIsPending] = useState(false);
   // Generated schemas drive form typing and validation; do not import backend types in frontend code.
   const form = useForm({
     zodSchema: PlanetModels.PlanetsCreateRequestDtoSchema,
@@ -38,34 +42,34 @@ export function PlanetCreateModal({ isOpen, onClose }: PlanetCreateModalProps) {
       alienId: undefined,
       discoveryDate: undefined,
       description: "",
-      image: undefined,
     },
   });
 
-  const handleImageUpload = useMediaUploadHandler({
-    resourceName: MediaModels.MediaResourceName["planet-image"],
-    onUploaded: (media) => form.setFieldValue("image", { id: media.id }),
-  });
-
-  const handleImageChange = (file: File | null) => {
-    if (!file) {
-      form.setFieldValue("image", undefined);
-    }
-  };
-
   const onSubmit = async (data: PlanetModels.PlanetsCreateRequestDto) => {
     try {
-      await createPlanet.mutateAsync({ data });
+      setIsPending(true);
+      await createPlanet({
+        name: data.name,
+        alienId: data.alienId,
+        discoveryDate: data.discoveryDate,
+        description: data.description,
+        file: pickedFile,
+      });
+      await queryClient.invalidateQueries({ queryKey: PlanetQueries.keys.all });
       successToast({ text: t(($) => $.planets.create.success) });
       form.reset();
+      setPickedFile(null);
       onClose();
     } catch {
       errorToast({ text: t(($) => $.planets.create.error) });
+    } finally {
+      setIsPending(false);
     }
   };
 
   const handleClose = () => {
     form.reset();
+    setPickedFile(null);
     onClose();
   };
 
@@ -145,8 +149,7 @@ export function PlanetCreateModal({ isOpen, onClose }: PlanetCreateModalProps) {
           uploadText={t(($) => $.planets.create.imageUploadText)}
           browseText={t(($) => $.planets.create.imageBrowseText)}
           acceptedFileTypes={["image/jpeg", "image/png", "image/webp"]}
-          onChange={handleImageChange}
-          fileUpload={handleImageUpload}
+          {...bindLocalPlanetImage((file) => setPickedFile(file))}
         />
 
         <div className="mt-6 flex items-center justify-end gap-2 self-end">
@@ -167,8 +170,8 @@ export function PlanetCreateModal({ isOpen, onClose }: PlanetCreateModalProps) {
             size="xs"
             color="primary"
             width="hug"
-            isDisabled={createPlanet.isPending}
-            isLoading={createPlanet.isPending}
+            isDisabled={isPending}
+            isLoading={isPending}
           >
             {t(($) => $.planets.create.submit)}
           </Button>

package/templates/space/apps/fe/src/utils/planet-form.test.ts

@@ -0,0 +1,68 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  bindLocalPlanetImage,
+  buildPlanetFormData,
+  localPlanetImageUpload,
+  planetFormRequestConfig,
+} from "./planet-form";
+
+describe("planet multipart submit", () => {
+  it("builds FormData with text fields and an optional file", () => {
+    const file = new File(["png"], "mars.png", { type: "image/png" });
+    const form = buildPlanetFormData({
+      name: "Mars",
+      description: "Cold desert",
+      file,
+    });
+
+    expect(form.get("name")).toBe("Mars");
+    expect(form.get("description")).toBe("Cold desert");
+    const uploaded = form.get("file") as File;
+    expect(uploaded).toBeInstanceOf(File);
+    expect(uploaded.name).toBe("mars.png");
+    expect(uploaded.type).toBe("image/png");
+    expect(form.get("clearImage")).toBeNull();
+  });
+
+  it("sends clearImage only when the existing image was cleared and no file was picked", () => {
+    const form = buildPlanetFormData({
+      name: "Mars",
+      clearImage: true,
+    });
+
+    expect(form.get("clearImage")).toBe("true");
+
+    const withFile = buildPlanetFormData({
+      name: "Mars",
+      clearImage: true,
+      file: new File(["png"], "mars.png", { type: "image/png" }),
+    });
+    expect(withFile.get("clearImage")).toBeNull();
+  });
+
+  it("does not set Content-Type so the browser can add the multipart boundary", () => {
+    const config = planetFormRequestConfig() as { headers?: Record<string, string> };
+    expect(config.headers?.["Content-Type"]).toBeUndefined();
+    expect("Content-Type" in (config.headers ?? {})).toBe(false);
+  });
+
+  it("local FileUpload handler never fetches", async () => {
+    const file = new File(["png"], "mars.png", { type: "image/png" });
+    const result = await localPlanetImageUpload({ data: {} } as never, file);
+    expect(result).toEqual({ id: "mars.png" });
+  });
+
+  it("bindLocalPlanetImage keeps the File locally and clears without fetching", async () => {
+    const seen: Array<File | null> = [];
+    const handlers = bindLocalPlanetImage((file) => seen.push(file));
+    const file = new File(["png"], "mars.png", { type: "image/png" });
+
+    await handlers.fileUpload({ data: {} }, file);
+    await handlers.fileRemove();
+
+    expect(seen).toHaveLength(2);
+    expect(seen[0]).toBe(file);
+    expect(seen[1]).toBeNull();
+  });
+});

package/templates/space/apps/fe/src/utils/planet-form.ts

@@ -0,0 +1,49 @@
+export type PlanetWriteFields = {
+  name: string;
+  alienId?: string | null;
+  discoveryDate?: string | Date | null;
+  description?: string | null;
+  file?: File | null;
+  clearImage?: boolean;
+};
+
+function appendOptional(form: FormData, key: string, value: unknown) {
+  if (value == null || value === "") return;
+  if (value instanceof Date) {
+    form.append(key, value.toISOString());
+    return;
+  }
+  form.append(key, String(value));
+}
+
+export function buildPlanetFormData(fields: PlanetWriteFields): FormData {
+  const form = new FormData();
+  form.append("name", fields.name);
+  appendOptional(form, "alienId", fields.alienId);
+  appendOptional(form, "discoveryDate", fields.discoveryDate);
+  appendOptional(form, "description", fields.description);
+  if (fields.file) form.append("file", fields.file);
+  if (fields.clearImage && !fields.file) form.append("clearImage", "true");
+  return form;
+}
+
+/** Axios/browser must set the multipart boundary. Never set Content-Type. */
+export function planetFormRequestConfig() {
+  return {};
+}
+
+export async function localPlanetImageUpload(_request: unknown, file: File): Promise<{ id: string }> {
+  return { id: file.name };
+}
+
+export function bindLocalPlanetImage(onFile: (file: File | null) => void) {
+  return {
+    fileUpload: async (request: unknown, file: File) => {
+      onFile(file);
+      return localPlanetImageUpload(request, file);
+    },
+    fileRemove: async () => {
+      onFile(null);
+    },
+  };
+}

package/templates/space/apps/fe/src/utils/planet-submit.ts

@@ -0,0 +1,25 @@
+import { AppRestClient } from "@/clients/app-rest-client";
+import { PlanetModels } from "@/openapi/planet/planet.models";
+
+import { buildPlanetFormData, planetFormRequestConfig, type PlanetWriteFields } from "./planet-form";
+
+export async function createPlanet(fields: PlanetWriteFields): Promise<PlanetModels.PlanetsGetResponseDto> {
+  return AppRestClient.post(
+    { resSchema: PlanetModels.PlanetsGetResponseDtoSchema },
+    "/api/planets",
+    buildPlanetFormData(fields),
+    planetFormRequestConfig(),
+  );
+}
+
+export async function updatePlanet(
+  id: string,
+  fields: PlanetWriteFields,
+): Promise<PlanetModels.PlanetsGetResponseDto> {
+  return AppRestClient.put(
+    { resSchema: PlanetModels.PlanetsGetResponseDtoSchema },
+    `/api/planets/${id}`,
+    buildPlanetFormData(fields),
+    planetFormRequestConfig(),
+  );
+}

package/templates/space/openapi.json

@@ -282,56 +282,6 @@
         },
         "required": ["refreshToken"]
       },
-      "MediaUploadRequest": {
-        "type": "object",
-        "properties": {
-          "resourceName": {
-            "$ref": "#/components/schemas/MediaResourceName"
-          },
-          "fileName": {
-            "type": "string",
-            "minLength": 1
-          },
-          "fileSize": {
-            "type": "integer",
-            "minimum": -9007199254740991,
-            "maximum": 9007199254740991,
-            "exclusiveMinimum": 0
-          },
-          "mimeType": {
-            "type": "string",
-            "minLength": 1
-          },
-          "method": {
-            "$ref": "#/components/schemas/MediaUploadMethod"
-          }
-        },
-        "required": ["fileName", "fileSize"]
-      },
-      "MediaUploadInstructionsResponse": {
-        "type": "object",
-        "properties": {
-          "id": {
-            "type": "string"
-          },
-          "method": {
-            "$ref": "#/components/schemas/MediaUploadMethod"
-          },
-          "url": {
-            "type": "string"
-          },
-          "fields": {
-            "type": "array",
-            "items": {
-              "type": "array"
-            }
-          },
-          "provider": {
-            "type": "string"
-          }
-        },
-        "required": ["id", "method", "url", "fields"]
-      },
       "FakeMailSendDemoBody": {
         "type": "object",
         "properties": {
@@ -541,13 +491,9 @@
             "nullable": true,
             "type": "string"
           },
-          "image": {
-            "nullable": true,
-            "allOf": [
-              {
-                "$ref": "#/components/schemas/PlanetImageRequestDto"
-              }
-            ]
+          "file": {
+            "type": "string",
+            "format": "binary"
           }
         },
         "required": ["name"]
@@ -572,13 +518,12 @@
             "nullable": true,
             "type": "string"
           },
-          "image": {
-            "nullable": true,
-            "allOf": [
-              {
-                "$ref": "#/components/schemas/PlanetImageRequestDto"
-              }
-            ]
+          "file": {
+            "type": "string",
+            "format": "binary"
+          },
+          "clearImage": {
+            "type": "boolean"
           }
         },
         "required": ["name"]
@@ -668,15 +613,6 @@
         "type": "string",
         "x-enumNames": ["id", "name", "discoveryDate", "createdAt", "updatedAt"]
       },
-      "MediaResourceName": {
-        "type": "string",
-        "minLength": 1,
-        "enum": ["small-image", "large-image", "compressed-file", "document", "any", "planet-image"]
-      },
-      "MediaUploadMethod": {
-        "type": "string",
-        "minLength": 1
-      },
       "FakeMailDemoVariant": {
         "enum": ["text", "html", "recipients", "sequence"],
         "type": "string",
@@ -774,15 +710,6 @@
           }
         },
         "required": ["id", "userId", "name", "createdAt", "updatedAt", "likesCount", "likedByMe"]
-      },
-      "PlanetImageRequestDto": {
-        "type": "object",
-        "properties": {
-          "id": {
-            "type": "string"
-          }
-        },
-        "required": ["id"]
       }
     },
     "securitySchemes": {
@@ -1209,41 +1136,6 @@
         "x-bl": "Consumes a valid unused password reset code."
       }
     },
-    "/api/files/upload-request": {
-      "post": {
-        "operationId": "MediaLibraryController_uploadRequest",
-        "tags": ["Media"],
-        "requestBody": {
-          "required": true,
-          "content": {
-            "application/json": {
-              "schema": {
-                "$ref": "#/components/schemas/MediaUploadRequest"
-              }
-            }
-          }
-        },
-        "responses": {
-          "201": {
-            "description": "OK",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "$ref": "#/components/schemas/MediaUploadInstructionsResponse"
-                }
-              }
-            }
-          }
-        },
-        "security": [
-          {
-            "bearerAuth": []
-          }
-        ],
-        "x-media-upload": true,
-        "x-bl": "Validates an authenticated media upload request, creates a pending media record for an allowed resource, and returns upload instructions for sending the file bytes separately."
-      }
-    },
     "/api/fake-mail/demo": {
       "post": {
         "operationId": "FakeMailController_sendDemo",
@@ -1391,7 +1283,7 @@
         "requestBody": {
           "required": true,
           "content": {
-            "application/json": {
+            "multipart/form-data": {
               "schema": {
                 "$ref": "#/components/schemas/PlanetsCreateRequestDto"
               }
@@ -1421,7 +1313,7 @@
             "bearerAuth": []
           }
         ],
-        "x-bl": "Creates a planet owned by the authenticated user and optionally assigns an existing alien.",
+        "x-bl": "Creates a planet owned by the authenticated user from multipart form fields and an optional image file.",
         "x-acl": [
           {
             "action": "create",
@@ -1597,7 +1489,7 @@
         "requestBody": {
           "required": true,
           "content": {
-            "application/json": {
+            "multipart/form-data": {
               "schema": {
                 "$ref": "#/components/schemas/PlanetControllerUpdateRequestDto"
               }
@@ -1627,7 +1519,7 @@
             "bearerAuth": []
           }
         ],
-        "x-bl": "Updates a planet only when the authenticated user owns it, optionally assigns an existing alien, and returns it with creator name and alien name.",
+        "x-bl": "Updates a planet only when the authenticated user owns it from multipart form fields, optionally replacing or clearing the image, and returns it with creator name and alien name.",
         "x-acl": [
           {
             "action": "update",
@@ -1797,16 +1689,7 @@
     {
       "name": "Planet",
       "x-robodev-hidden": true,
-      "x-robodev-owned-tables": ["Planet", "PlanetLike"],
-      "x-robodev-media-resources": [
-        {
-          "name": "planet-image",
-          "field": "imageId",
-          "dtoField": "image",
-          "mimeTypes": ["image/jpeg", "image/png", "image/webp"],
-          "maxFileSize": 2097152
-        }
-      ]
+      "x-robodev-owned-tables": ["Planet", "PlanetLike"]
     }
   ],
   "x-robodev-user-roles": [

package/templates/space/package.json

@@ -11,7 +11,7 @@
     "@robodev-ai/sdk": "^0.6.0"
   },
   "devDependencies": {
-    "robodev": "^0.21.0",
+    "robodev": "^0.22.0",
     "rulesync": "^8.18.0",
     "typescript": "^5.9.2"
   }