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/routes/field.tsx

@@ -1,3 +1,5 @@
+import "@contentstack/venus-components/build/main.css"
+
 import { Suspense, lazy, useEffect, useState } from "react"
 import { useScript } from "usehooks-ts"
 import useApp from "~/hooks/useApp"
@@ -5,19 +7,26 @@ import useApp from "~/hooks/useApp"
 import Disclaimer from "~/components/Disclaimer"
 import InvalidConfig from "~/components/InvalidConfig"
 
-import { isImageVaultDAMConfig } from "~/utils/imagevault"
+import { GenericObjectType } from "@contentstack/app-sdk/dist/src/types/common.types"
+import UiLocation from "@contentstack/app-sdk/dist/src/uiLocation"
 import type { InsertResponse } from "~/types/imagevault"
+import { isImageVaultDAMConfig } from "~/utils/imagevault"
 
 const ImageVaultDAM = lazy(() => import("~/components/ImageVaultDAM"))
 
-export default function Field() {
-  const { sdk, config: appConfig, modalElementId } = useApp()
+interface FieldContentProps {
+  sdk?: UiLocation
+  appConfig?: GenericObjectType
+}
+
+function FieldContent({ sdk, appConfig }: FieldContentProps) {
   const ivStatus = useScript(
     "/scripts/imagevault-insert-media/insertmediawindow.min.js"
   )
 
   const [showDisclaimer, setShowDisclaimer] = useState(false)
-  const [fieldData, setFieldData] = useState<InsertResponse>()
+  const [fieldData, setFieldData] = useState<InsertResponse | null>()
+  const [dataIsLoaded, setDataIsLoaded] = useState(false)
 
   const entry = sdk?.location.CustomField?.entry
   const field = sdk?.location.CustomField?.field
@@ -31,14 +40,19 @@ export default function Field() {
       if (field && entry) {
         const data = field.getData()
         const title = entry.getField("title").getData().toString()
-        if (data && title) {
-          setFieldData(data as InsertResponse)
-        } else {
-          throw new Error("Missing data or title for entry")
+        if (!title) {
+          throw new Error("Missing title for entry")
         }
+
+        if (data) {
+          setFieldData(data as InsertResponse)
+        }
+
+        setDataIsLoaded(true)
       }
     } catch (e) {
       setShowDisclaimer(true)
+      console.log("Unable to get field data from SDK: ", e)
     }
   }, [entry, field])
 
@@ -46,13 +60,13 @@ export default function Field() {
     return <Disclaimer />
   }
 
-  const loaded = !!(fieldData && ivStatus === "ready" && sdk && appConfig)
+  const loaded = !!(dataIsLoaded && ivStatus === "ready" && sdk && appConfig)
 
   const initialData =
     fieldData && Object.keys(fieldData).length > 0 ? fieldData : null
 
   if (!loaded) {
-    return <p style={{ fontFamily: "Inter" }}> Loading dependecies...</p>
+    return <p style={{ fontFamily: "Inter" }}> Loading dependencies...</p>
   }
 
   if (!isImageVaultDAMConfig(appConfig)) {
@@ -60,16 +74,21 @@ export default function Field() {
   }
 
   const fieldConfig = sdk.location.CustomField?.fieldConfig
-  const config = {
-    ...appConfig,
-    ...fieldConfig,
-  }
+  const config = { ...appConfig, ...fieldConfig }
 
   return (
-    <div id={modalElementId}>
-      <Suspense fallback={<p>Loading field...</p>}>
-        <ImageVaultDAM config={config} sdk={sdk} initialData={initialData} />
-      </Suspense>
+    <Suspense fallback={<p>Loading field...</p>}>
+      <ImageVaultDAM config={config} sdk={sdk} initialData={initialData} />
+    </Suspense>
+  )
+}
+
+export default function Field() {
+  const { sdk, config, ref } = useApp()
+
+  return (
+    <div ref={ref}>
+      <FieldContent sdk={sdk} appConfig={config} />
     </div>
   )
 }