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/ConfigForm.tsx

@@ -27,23 +27,20 @@ export default function ConfigForm({
         <FieldLabel version="v2" htmlFor="baseUrl">
           Base url for contentstack
         </FieldLabel>
-        <Help text="Including the region. Used as publishing source on ImageVault" />
+        <Help
+          type="basic"
+          text="Including the region. Used as publishing source on ImageVault"
+        />
         <TextInput
           id="baseUrl"
           name="baseUrl"
           type="url"
           value={finalValues.baseUrl}
           onChange={(evt: ChangeEvent<HTMLInputElement>) => {
-            setFinalValues((prev) => ({
-              ...prev,
-              baseUrl: evt.target.value,
-            }))
+            setFinalValues((prev) => ({ ...prev, baseUrl: evt.target.value }))
 
             setInstallationData({
-              configuration: {
-                ...finalValues,
-                baseUrl: evt.target.value,
-              },
+              configuration: { ...finalValues, baseUrl: evt.target.value },
               serverConfiguration: {},
             })
           }}
@@ -61,7 +58,10 @@ export default function ConfigForm({
         <FieldLabel version="v2" htmlFor="formatId">
           Format Id for images
         </FieldLabel>
-        <Help text="Images are fetched with a certain format. This should be an id from ImageVault" />
+        <Help
+          type="basic"
+          text="Images are fetched with a certain format. This should be an id from ImageVault"
+        />
         <TextInput
           id="formatId"
           name="formatId"
@@ -73,16 +73,10 @@ export default function ConfigForm({
           version="v2"
           width="large"
           onChange={(evt: ChangeEvent<HTMLInputElement>) => {
-            setFinalValues((prev) => ({
-              ...prev,
-              formatId: evt.target.value,
-            }))
+            setFinalValues((prev) => ({ ...prev, formatId: evt.target.value }))
 
             setInstallationData({
-              configuration: {
-                ...finalValues,
-                formatId: evt.target.value,
-              },
+              configuration: { ...finalValues, formatId: evt.target.value },
               serverConfiguration: {},
             })
           }}

remix/app/components/ImageEditModal.tsx

@@ -129,6 +129,11 @@ export default function ImageEditModal({
               disabled
             />
           </FieldComponent>
+
+          <FieldComponent>
+            <FieldLabel htmlFor="imageVaultId">Imagevault Id</FieldLabel>
+            <TextInput value={fieldData.Id} name="imageVaultId" disabled />
+          </FieldComponent>
         </div>
       </ModalBody>
       <ModalFooter>

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 })
           }}
         />
       )}