feat(SW-2541): Changed asset types to only add the data needed

remix/app/components/ImageEditModal.tsx

@@ -11,11 +11,11 @@ import {
 import { ChangeEvent, useEffect, useState } from "react"
 
 import FocalPointPicker from "~/shared-components/FocalPointPicker"
-import type { FocalPoint, InsertResponse } from "~/types/imagevault"
+import type { FocalPoint, ImageVaultAsset } from "~/types/imagevault"
 
 type ImageEditModalProps = {
-  fieldData: InsertResponse
-  setData: (data: InsertResponse) => void
+  fieldData: ImageVaultAsset
+  setData: (data: ImageVaultAsset) => void
   closeModal: () => void
 }
 
@@ -28,47 +28,33 @@ export default function ImageEditModal({
   const [caption, setCaption] = useState("")
   const [focalPoint, setFocalPoint] = useState<FocalPoint>({ x: 50, y: 50 })
 
-  const assetUrl = fieldData.MediaConversions[0].Url
+  const assetUrl = fieldData.url
 
   useEffect(() => {
-    if (fieldData.Metadata && fieldData.Metadata.length) {
-      const altText = fieldData.Metadata.find((meta) =>
-        meta.Name.includes("AltText_")
-      )?.Value
-
-      const caption = fieldData.Metadata.find((meta) =>
-        meta.Name.includes("Title_")
-      )?.Value
-
-      setAltText(altText ?? "")
-      setCaption(caption ?? "")
+    if (fieldData.meta.alt) {
+      setAltText(fieldData.meta.alt)
     }
-  }, [fieldData.Metadata])
+    if (fieldData.meta.caption) {
+      setCaption(fieldData.meta.caption)
+    }
+  }, [fieldData.meta])
 
   useEffect(() => {
-    if (fieldData.FocalPoint) {
-      setFocalPoint(fieldData.FocalPoint)
+    if (fieldData.focalPoint) {
+      setFocalPoint(fieldData.focalPoint)
     }
-  }, [fieldData.FocalPoint])
+  }, [fieldData.focalPoint])
 
   function handleSave() {
-    const metaData = fieldData.Metadata ?? []
-
-    const newMetadata = metaData.map((meta) => {
-      if (meta.Name.includes("AltText_")) {
-        return { ...meta, Value: altText }
-      }
-      if (meta.Name.includes("Title_")) {
-        return { ...meta, Value: caption }
-      }
-      return meta
-    })
-
-    setData({
+    const newData = {
       ...fieldData,
-      Metadata: newMetadata,
-      FocalPoint: focalPoint,
-    })
+      meta: {
+        alt: altText,
+        caption,
+      },
+      focalPoint,
+    }
+    setData(newData)
     closeModal()
   }
 
@@ -132,7 +118,11 @@ export default function ImageEditModal({
 
           <FieldComponent>
             <FieldLabel htmlFor="imageVaultId">Imagevault Id</FieldLabel>
-            <TextInput value={fieldData.Id} name="imageVaultId" disabled />
+            <TextInput
+              value={fieldData.imageVaultId}
+              name="imageVaultId"
+              disabled
+            />
           </FieldComponent>
         </div>
       </ModalBody>

remix/app/components/ImageVaultDAM.tsx

@@ -7,12 +7,16 @@ import {
   FieldLabel,
   cbModal,
 } from "@contentstack/venus-components"
-import { isInsertResponse, openImageVault } from "~/utils/imagevault"
+import {
+  getImageVaultAssetFromData,
+  isInsertResponse,
+  openImageVault,
+} from "~/utils/imagevault"
 import ImageEditModal from "./ImageEditModal"
 
 import type UiLocation from "@contentstack/app-sdk/dist/src/uiLocation"
 import type { CbModalProps } from "@contentstack/venus-components/build/components/Modal/Modal"
-import type { InsertResponse } from "~/types/imagevault"
+import type { ImageVaultAsset, InsertResponse } from "~/types/imagevault"
 import type { Lang } from "~/types/lang"
 import type {
   EntryDataPublishDetails,
@@ -23,7 +27,7 @@ import FullSizeImage from "./FullSizeImage"
 export type ImageVaultDAMProps = {
   sdk: UiLocation
   config: ImageVaultDAMConfig
-  initialData: InsertResponse | null
+  initialData: ImageVaultAsset | InsertResponse | null
 }
 
 type DAMButtonProps = { onClick: () => void }
@@ -47,30 +51,26 @@ function DAMButton({ onClick }: DAMButtonProps) {
 }
 
 type MediaProps = {
-  media: InsertResponse
+  media: ImageVaultAsset
   onDelete: () => void
   onEdit: () => void
 }
 
 function Media({ media, onDelete, onEdit }: MediaProps) {
-  // MediaConversions is an array but will only contain one object
-  const { Url, Height, FormatHeight, Width, FormatWidth, Name, AspectRatio } =
-    media.MediaConversions[0]
+  const { url, meta, dimensions } = media
+  const { width, height, aspectRatio } = dimensions
+  const assetUrl = media.url
+  const assetTitle = `Id: ${media.imageVaultId} - ${media.fileName}`
 
-  const assetUrl = Url
-  const title = `Id: ${media.Id} - ${media.Name}`
-  const width = FormatWidth || Width
-  const height = FormatHeight || Height
-  const alt =
-    media.Metadata?.find((meta) => meta.Name.includes("AltText_"))?.Value ||
-    Name
+  const alt = meta.alt || meta.caption || ""
+  const title = meta.caption || meta.alt || ""
 
   return (
-    <div key={Url} style={{ fontFamily: "Inter" }}>
+    <div key={url} style={{ fontFamily: "Inter" }}>
       <AssetCardVertical
         assetType="image"
         assetUrl={assetUrl}
-        title={title}
+        title={assetTitle}
         version="v2"
         width={width}
         height={height}
@@ -84,10 +84,10 @@ function Media({ media, onDelete, onEdit }: MediaProps) {
                 <FullSizeImage
                   // eslint-disable-next-line react/prop-types
                   onClose={props.closeModal}
-                  imageUrl={Url}
+                  imageUrl={url}
                   alt={alt}
-                  title={Name}
-                  aspectRatio={AspectRatio}
+                  title={title}
+                  aspectRatio={aspectRatio}
                 />
               )
             },
@@ -117,7 +117,8 @@ export default function ImageVaultDAM({
   config,
   initialData,
 }: ImageVaultDAMProps) {
-  const [media, setMedia] = useState<InsertResponse | null>(initialData)
+  const imageVaultAsset = getImageVaultAssetFromData(initialData)
+  const [media, setMedia] = useState(imageVaultAsset)
 
   const field = sdk.location.CustomField?.field
   const frame = sdk.location.CustomField?.frame
@@ -133,12 +134,10 @@ export default function ImageVaultDAM({
   }, [frame])
 
   const handleMedia = useCallback(
-    (result?: InsertResponse) => {
+    (asset?: ImageVaultAsset) => {
       if (field) {
         flushSync(() => {
-          const data = result
-            ? { ...result, FocalPoint: result.FocalPoint || { x: 50, y: 50 } }
-            : null
+          const data = asset || null
           setMedia(data)
           field.setData(data)
           document.body.style.overflow = "hidden"
@@ -150,13 +149,9 @@ export default function ImageVaultDAM({
     [field, updateFrameHeight]
   )
 
-  useEffect(() => {
-    updateFrameHeight()
-  }, [updateFrameHeight])
-
   const handleEdit = useCallback(() => {
-    const fieldData = field?.getData() as InsertResponse
-    if (isInsertResponse(fieldData)) {
+    const fieldData = field?.getData()
+    if (fieldData) {
       cbModal({
         // @ts-expect-error: Component is badly typed
         component: (compProps) => (
@@ -177,6 +172,18 @@ export default function ImageVaultDAM({
     }
   }, [field, handleMedia])
 
+  useEffect(() => {
+    updateFrameHeight()
+  }, [updateFrameHeight])
+
+  // The existing data might still be in InsertResponse format if the user has not edited it yet.
+  // We'll convert it to ImageVaultAsset when the user edits the the emtry.
+  useEffect(() => {
+    if (isInsertResponse(initialData) && imageVaultAsset) {
+      handleMedia(imageVaultAsset)
+    }
+  }, [initialData, imageVaultAsset, handleMedia])
+
   if (!field || !frame || !entry || !stack) {
     return <p>Initializing custom field...</p>
   }