feat: allow changing asset name (#5367)

Ref #3262
#3272

This solves a couple of issues.

1. Gives a user ability to change name of uploaded asset.
2. strips internal suffix from filenames in UI

<img width="626" height="541" alt="magic_1"
src="https://github.com/user-attachments/assets/f9c91ac8-cc67-4905-9e86-bf0cbbeae14a"
/>

Author: TrySound

apps/builder/app/builder/features/pages/image-info.tsx

@@ -12,6 +12,7 @@ import {
   ImageIcon,
 } from "@webstudio-is/icons";
 import type { ImageAsset } from "@webstudio-is/sdk";
+import { formatAssetName } from "~/builder/shared/assets/asset-utils";
 import { getFormattedAspectRatio } from "~/builder/shared/image-manager/utils";
 
 type ImageInfoProps = {
@@ -42,10 +43,14 @@ export const ImageInfo = ({ asset, onDelete }: ImageInfoProps) => {
           gap={2}
           align={"center"}
         >
-          <Grid flow={"column"} gap={1} align={"center"}>
+          <Grid
+            gap={1}
+            align="center"
+            css={{ gridTemplateColumns: "max-content 1fr" }}
+          >
             <ImageIcon />
-            <Text truncate variant={"labelsTitleCase"}>
-              {asset.name}
+            <Text truncate variant={"labelsSentenceCase"}>
+              {formatAssetName(asset)}
             </Text>
           </Grid>
           <Grid columns={2} gap={1} align={"center"}>

apps/builder/app/builder/features/pages/page-settings.stories.tsx

@@ -72,6 +72,8 @@ $project.set({
     projectId: "projectId",
     id: "imageId",
     name: "very-very-very-long-long-image-name.jpg",
+    filename: null,
+    description: null,
   },
   latestBuildVirtual: null,
   domainsVirtual: [],

apps/builder/app/builder/features/settings-panel/controls/select-asset.tsx

@@ -7,6 +7,7 @@ import { $assets } from "~/shared/nano-states";
 import { ImageManager } from "~/builder/shared/image-manager";
 import { type ControlProps } from "../shared";
 import { acceptToMimeCategories } from "@webstudio-is/asset-uploader";
+import { formatAssetName } from "~/builder/shared/assets/asset-utils";
 
 // tests whether we can use ImageManager for the given "accept" value
 const isImageAccept = (accept?: string) => {
@@ -52,7 +53,7 @@ export const SelectAsset = ({ prop, onChange, accept }: Props) => {
         }
       >
         <Button color="neutral" css={{ flex: 1 }}>
-          {asset?.name ?? "Choose source"}
+          {asset ? formatAssetName(asset) : "Choose source"}
         </Button>
       </FloatingPanel>
     </Flex>

apps/builder/app/builder/features/settings-panel/props-section/props-section.stories.tsx

@@ -107,7 +107,6 @@ const imageAsset = (name = "cat", format = "jpg"): Asset => ({
   format: format,
   size: 100000,
   createdAt: new Date().toISOString(),
-  description: null,
   meta: { width: 128, height: 180 },
 });
 

apps/builder/app/builder/features/style-panel/controls/image/image-control.tsx

@@ -14,6 +14,7 @@ import {
   getRepeatedStyleItem,
   setRepeatedStyleItem,
 } from "../../shared/repeated-style";
+import { formatAssetName } from "~/builder/shared/assets/asset-utils";
 
 const isValidURL = (value: string) => {
   try {
@@ -115,7 +116,7 @@ export const ImageControl = ({
           color="neutral"
           css={{ maxWidth: "100%", justifySelf: "right" }}
         >
-          {asset?.name ?? "Choose image..."}
+          {asset ? formatAssetName(asset) : "Choose image..."}
         </Button>
       </FloatingPanel>
     </Flex>

apps/builder/app/builder/features/style-panel/sections/backgrounds/background-thumbnail.tsx

@@ -12,6 +12,7 @@ import brokenImage from "~/shared/images/broken-image-placeholder.svg";
 import { humanizeString } from "~/shared/string-utils";
 import { useComputedStyles } from "../../shared/model";
 import { getComputedRepeatedItem } from "../../shared/repeated-style";
+import { formatAssetName } from "~/builder/shared/assets/asset-utils";
 
 export const repeatedProperties = [
   "background-image",
@@ -89,7 +90,7 @@ export const getBackgroundLabel = (
   ) {
     const asset = assets.get(backgroundImageStyle.value.value);
     if (asset) {
-      return asset.name;
+      return formatAssetName(asset);
     }
   }
 

apps/builder/app/builder/shared/assets/asset-utils.test.ts

@@ -0,0 +1,25 @@
+import { expect, test } from "vitest";
+import { parseAssetName } from "./asset-utils";
+
+test("parse asset name", () => {
+  expect(parseAssetName("hello_hash.ext")).toEqual({
+    basename: "hello",
+    hash: "hash",
+    ext: "ext",
+  });
+  expect(parseAssetName("hello.ext")).toEqual({
+    basename: "hello",
+    hash: "",
+    ext: "ext",
+  });
+  expect(parseAssetName("hello_hash1.ext_hash2")).toEqual({
+    basename: "hello",
+    hash: "hash1",
+    ext: "ext_hash2",
+  });
+  expect(parseAssetName("hello_hash1_hash2")).toEqual({
+    basename: "hello_hash1",
+    hash: "hash2",
+    ext: "",
+  });
+});

apps/builder/app/builder/shared/assets/asset-utils.ts

@@ -175,3 +175,31 @@ export const uploadingFileDataToAsset = (
 
   return asset;
 };
+
+type ParsedAssetName = {
+  basename: string;
+  hash: string;
+  ext: string;
+};
+
+export const parseAssetName = (name: string): ParsedAssetName => {
+  let hash = "";
+  let ext = "";
+  const lastDotAt = name.lastIndexOf(".");
+  if (lastDotAt > -1) {
+    ext = name.slice(lastDotAt + 1);
+    name = name.slice(0, lastDotAt);
+  }
+  const lastUnderscoreAt = name.lastIndexOf("_");
+  if (lastUnderscoreAt > -1) {
+    hash = name.slice(lastUnderscoreAt + 1);
+    name = name.slice(0, lastUnderscoreAt);
+  }
+  return { basename: name, hash, ext };
+};
+
+export const formatAssetName = (asset: Pick<Asset, "name" | "filename">) => {
+  const { basename, ext } = parseAssetName(asset.name);
+  const formattedName = `${asset.filename ?? basename}.${ext}`;
+  return formattedName;
+};

apps/builder/app/builder/shared/assets/types.ts

@@ -2,7 +2,7 @@ import type { Asset } from "@webstudio-is/sdk";
 
 type PreviewAsset = Pick<
   Asset,
-  "name" | "id" | "format" | "description" | "type"
+  "name" | "filename" | "id" | "format" | "description" | "type"
 >;
 
 export type UploadedAssetContainer = {

apps/builder/app/builder/shared/assets/use-assets.tsx

@@ -29,6 +29,7 @@ import type {
   UploadingAssetContainer,
 } from "./types";
 import {
+  formatAssetName,
   getFileName,
   getMimeType,
   getSha256Hash,
@@ -253,6 +254,27 @@ const getVideoDimensions = async (file: File) => {
   });
 };
 
+const deduplicateAssetName = (name: string) => {
+  const existingNames = new Set();
+  for (const asset of $assets.get().values()) {
+    existingNames.add(formatAssetName(asset));
+  }
+  // eslint-disable-next-line no-constant-condition
+  for (let index = 0; true; index += 1) {
+    const suffix = index === 0 ? "" : `_${index}`;
+    const lastDotAt = name.lastIndexOf(".");
+    if (lastDotAt === -1) {
+      return name;
+    }
+    const basename = name.slice(0, lastDotAt);
+    const ext = name.slice(lastDotAt);
+    const nameWithSuffix = basename + suffix + ext;
+    if (!existingNames.has(nameWithSuffix)) {
+      return nameWithSuffix;
+    }
+  }
+};
+
 const uploadAsset = async ({
   authToken,
   projectId,
@@ -275,7 +297,10 @@ const uploadAsset = async ({
     metaFormData.append("type", mimeType);
     // sanitizeS3Key here is just because of https://github.com/remix-run/remix/issues/4443
     // should be removed after fix
-    metaFormData.append("filename", sanitizeS3Key(fileName));
+    metaFormData.append(
+      "filename",
+      deduplicateAssetName(sanitizeS3Key(fileName))
+    );
 
     const authHeaders = new Headers();
     if (authToken !== undefined) {