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
2025-06-18 13:14:02 +00:00
parent b1aaa6fd56
commit 7e64becb40
20 changed files with 5450 additions and 3072 deletions
--- a/remix/.eslintrc.cjs
+++ b/remix/.eslintrc.cjs
@@ -1,90 +0,0 @@
-/**
- * This is intended to be a basic starting point for linting in your app.
- * It relies on recommended configs out of the box for simplicity, but you can
- * and should modify this configuration to best suit your team's needs.
- */
-
-/** @type {import('eslint').Linter.Config} */
-module.exports = {
-  root: true,
-  parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-  env: {
-    browser: true,
-    commonjs: true,
-    es6: true,
-  },
-  ignorePatterns: ["build/**/*", "node_modules/**/*", "public/**/*"],
-
-  // Base config
-  extends: ["eslint:recommended"],
-
-  overrides: [
-    // React
-    {
-      files: ["**/*.{js,jsx,ts,tsx}"],
-      plugins: ["react", "jsx-a11y"],
-      rules: {
-        "react/jsx-uses-vars": "error",
-        "react/jsx-uses-react": "error",
-      },
-      extends: [
-        "plugin:react/recommended",
-        "plugin:react/jsx-runtime",
-        "plugin:react-hooks/recommended",
-        "plugin:jsx-a11y/recommended",
-      ],
-      settings: {
-        react: {
-          version: "detect",
-        },
-        formComponents: ["Form"],
-        linkComponents: [
-          { name: "Link", linkAttribute: "to" },
-          { name: "NavLink", linkAttribute: "to" },
-        ],
-        "import/resolver": {
-          typescript: {
-            project: "./remix/tsconfig.json",
-          },
-        },
-      },
-    },
-
-    // Typescript
-    {
-      files: ["**/*.{ts,tsx}"],
-      plugins: ["@typescript-eslint", "import"],
-      parser: "@typescript-eslint/parser",
-      settings: {
-        "import/internal-regex": "^~/",
-        "import/resolver": {
-          node: {
-            extensions: [".ts", ".tsx"],
-          },
-          typescript: {
-            alwaysTryTypes: true,
-          },
-        },
-      },
-      extends: [
-        "plugin:@typescript-eslint/recommended",
-        "plugin:import/recommended",
-        "plugin:import/typescript",
-      ],
-    },
-
-    // Node
-    {
-      files: [".eslintrc.cjs"],
-      env: {
-        node: true,
-      },
-    },
-  ],
-}
--- a/remix/app/components/ConfigForm.tsx
+++ b/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: {},
            })
          }}
--- a/remix/app/components/ImageEditModal.tsx
+++ b/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>
--- a/remix/app/components/ImageVaultDAM.tsx
+++ b/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 })
          }}
        />
      )}
--- a/remix/app/hooks/useApp.ts
+++ b/remix/app/hooks/useApp.ts
@@ -1,10 +1,10 @@
 import UiLocation from "@contentstack/app-sdk/dist/src/uiLocation"
-import { useEffect, useState } from "react"
+import { useEffect, useRef, useState } from "react"

 export class SDKLoadingError extends Error {}

 export default function useApp() {
-  const modalElementId = "field"
+  const ref = useRef<HTMLDivElement>(null)
  const [, setError] = useState()
  const [sdk, setSdk] = useState<UiLocation>()
  const [config, setConfig] = useState<Record<string, string>>()
@@ -20,8 +20,7 @@ export default function useApp() {
        const config = await initSdk.getConfig()
        setConfig(config)

-        const iframeWrapperRef = document.getElementById(modalElementId)
-        window.iframeRef = iframeWrapperRef
+        window.iframeRef = ref.current
        window.postRobot = initSdk.postRobot
      } catch (e) {
        let err: Error
@@ -43,6 +42,6 @@ export default function useApp() {
  return {
    sdk,
    config,
-    modalElementId,
+    ref,
  }
 }
--- a/remix/app/routes/field.tsx
+++ b/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>
  )
 }
--- a/remix/env.d.ts
+++ b/remix/env.d.ts
@@ -1,2 +1 @@
-/// <reference types="@remix-run/node" />
 /// <reference types="vite/client" />
--- a/remix/eslint.config.mjs
+++ b/remix/eslint.config.mjs
@@ -0,0 +1,133 @@
+import { fixupConfigRules, fixupPluginRules } from "@eslint/compat"
+import { FlatCompat } from "@eslint/eslintrc"
+import js from "@eslint/js"
+import typescriptEslint from "@typescript-eslint/eslint-plugin"
+import tsParser from "@typescript-eslint/parser"
+import _import from "eslint-plugin-import"
+import jsxA11Y from "eslint-plugin-jsx-a11y"
+import react from "eslint-plugin-react"
+import { defineConfig, globalIgnores } from "eslint/config"
+import globals from "globals"
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+})
+
+export default defineConfig([
+  globalIgnores(["build/**/*", "node_modules/**/*", "public/**/*"]),
+  {
+    extends: compat.extends("eslint:recommended"),
+
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.commonjs,
+      },
+
+      ecmaVersion: "latest",
+      sourceType: "module",
+
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+  },
+  {
+    files: ["**/*.{js,jsx,ts,tsx}"],
+
+    extends: fixupConfigRules(
+      compat.extends(
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended"
+      )
+    ),
+
+    plugins: {
+      react: fixupPluginRules(react),
+      "jsx-a11y": fixupPluginRules(jsxA11Y),
+    },
+
+    settings: {
+      react: {
+        version: "detect",
+      },
+
+      formComponents: ["Form"],
+
+      linkComponents: [
+        {
+          name: "Link",
+          linkAttribute: "to",
+        },
+        {
+          name: "NavLink",
+          linkAttribute: "to",
+        },
+      ],
+
+      "import/resolver": {
+        typescript: {
+          project: "./remix/tsconfig.json",
+        },
+      },
+    },
+
+    rules: {
+      "react/jsx-uses-vars": "error",
+      "react/jsx-uses-react": "error",
+    },
+  },
+  {
+    files: ["**/*.{ts,tsx}"],
+
+    extends: fixupConfigRules(
+      compat.extends(
+        "plugin:@typescript-eslint/recommended",
+        "plugin:import/recommended",
+        "plugin:import/typescript"
+      )
+    ),
+
+    plugins: {
+      "@typescript-eslint": fixupPluginRules(typescriptEslint),
+      import: fixupPluginRules(_import),
+    },
+
+    languageOptions: {
+      parser: tsParser,
+    },
+
+    settings: {
+      "import/internal-regex": "^~/",
+
+      "import/resolver": {
+        node: {
+          extensions: [".ts", ".tsx"],
+        },
+
+        typescript: {
+          alwaysTryTypes: true,
+        },
+      },
+    },
+  },
+  {
+    files: ["**/.eslintrc.cjs"],
+
+    languageOptions: {
+      globals: {
+        ...globals.node,
+      },
+    },
+  },
+])
--- a/remix/package.json
+++ b/remix/package.json
@@ -12,14 +12,14 @@
    "typecheck": "tsc"
  },
  "dependencies": {
-    "@remix-run/node": "^2.13.1",
-    "@remix-run/react": "^2.13.1",
-    "usehooks-ts": "^3.1.0"
+    "@remix-run/node": "^2.16.8",
+    "@remix-run/react": "^2.16.8",
+    "usehooks-ts": "^3.1.1"
  },
  "devDependencies": {
-    "@remix-run/dev": "^2.13.1"
+    "@remix-run/dev": "^2.16.8"
  },
  "engines": {
-    "node": ">=18.0.0"
+    "node": ">=22.0.0"
  }
 }
--- a/remix/tsconfig.json
+++ b/remix/tsconfig.json
@@ -10,6 +10,8 @@
    "**/*.tsx"
  ],
  "compilerOptions": {
+    "types": ["@remix-run/node", "vite/client"],
+    "skipLibCheck": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
--- a/remix/vite.config.ts
+++ b/remix/vite.config.ts
@@ -1,15 +1,15 @@
 import { vitePlugin as remix } from "@remix-run/dev"
 import { defineConfig } from "vite"
+import devtoolsJson from "vite-plugin-devtools-json"
+import { libInjectCss } from "vite-plugin-lib-inject-css"
 import tsconfigPaths from "vite-tsconfig-paths"

 export default defineConfig({
  plugins: [
-    remix({
-      ssr: false,
-    }),
+    remix({ ssr: false }),
    tsconfigPaths(),
+    libInjectCss(),
+    devtoolsJson(),
  ],
-  build: {
-    emptyOutDir: true,
-  },
+  build: { emptyOutDir: true },
 })