Feat/SW-3031 imagevault updates

* chore(SW-3031): Updated dependencies
* feat(SW-3031): Added Imagevault Id to title and updated delete functionality

Approved-by: Michael Zetterberg

remix/app/components/ImageVaultDAM.tsx

@@ -8,7 +8,6 @@ import {
   cbModal,
 } from "@contentstack/venus-components"
 import { isInsertResponse, openImageVault } from "~/utils/imagevault"
-import FullSizeImage from "./FullSizeImage"
 import ImageEditModal from "./ImageEditModal"
 
 import type UiLocation from "@contentstack/app-sdk/dist/src/uiLocation"
@@ -19,6 +18,7 @@ import type {
   EntryDataPublishDetails,
   ImageVaultDAMConfig,
 } from "~/utils/imagevault"
+import FullSizeImage from "./FullSizeImage"
 
 export type ImageVaultDAMProps = {
   sdk: UiLocation
@@ -26,9 +26,7 @@ export type ImageVaultDAMProps = {
   initialData: InsertResponse | null
 }
 
-type DAMButtonProps = {
-  onClick: () => void
-}
+type DAMButtonProps = { onClick: () => void }
 
 function DAMButton({ onClick }: DAMButtonProps) {
   return (
@@ -60,7 +58,7 @@ function Media({ media, onDelete, onEdit }: MediaProps) {
     media.MediaConversions[0]
 
   const assetUrl = Url
-  const title = media.Name
+  const title = `Id: ${media.Id} - ${media.Name}`
   const width = FormatWidth || Width
   const height = FormatHeight || Height
   const alt =
@@ -130,7 +128,7 @@ export default function ImageVaultDAM({
     if (frame?.updateHeight) {
       // We need to recalculate the height of the iframe when an image is added.
       // Cannot use flushSync inside useEffect.
-      setTimeout(() => frame.updateHeight(document.body.scrollHeight), 0)
+      setTimeout(() => frame.updateHeight(), 0)
     }
   }, [frame])
 
@@ -139,14 +137,10 @@ export default function ImageVaultDAM({
       if (field) {
         flushSync(() => {
           const data = result
-            ? {
-                ...result,
-                FocalPoint: result.FocalPoint || { x: 50, y: 50 },
-              }
+            ? { ...result, FocalPoint: result.FocalPoint || { x: 50, y: 50 } }
             : null
           setMedia(data)
-          // Data inside the field is supposed to be an empty object if nothing is selected
-          field.setData(data || {})
+          field.setData(data)
           document.body.style.overflow = "hidden"
         })
       }
@@ -175,11 +169,7 @@ export default function ImageVaultDAM({
         modalProps: {
           size: "max",
           style: {
-            content: {
-              maxHeight: "90dvh",
-              maxWidth: "90dvw",
-              width: "auto",
-            },
+            content: { maxHeight: "90dvh", maxWidth: "90dvw", width: "auto" },
             overlay: {},
           },
         },
@@ -205,22 +195,16 @@ export default function ImageVaultDAM({
 
   return (
     <div>
-      <div>
-        <FieldLabel htmlFor="imagevaultpicker" version="v2">
-          ImageVault Asset
-        </FieldLabel>
-      </div>
+      <FieldLabel htmlFor="imagevaultpicker" version="v2">
+        ImageVault Asset
+      </FieldLabel>
 
       {media ? (
         <Media media={media} onDelete={handleMedia} onEdit={handleEdit} />
       ) : (
         <DAMButton
           onClick={() => {
-            openImageVault({
-              config,
-              entryData,
-              onSuccess: handleMedia,
-            })
+            openImageVault({ config, entryData, onSuccess: handleMedia })
           }}
         />
       )}