Merge branch 'main' into SHAPE-5745-all-the-values-must-be-a-string-in-field-plugin-config-json

Author: BibiSebi

packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginActions.test.ts

@@ -5,6 +5,7 @@ import {
   ModalChangeMessage,
   ValueChangeMessage,
 } from '../../messaging'
+import { emptyAsset } from '../../messaging/pluginMessage/containerToPluginMessage/Asset.test'
 
 // INFO: The methods like `setContent` is not being resolved in this file because `pushCallback` doesn't resolve.
 // We can also mock `callbackQueue` and make it resolve, and resolve this `no-floating-promises` issue.
@@ -231,9 +232,10 @@ describe('createPluginActions', () => {
         field: 'dummy',
         callbackId: TEST_CALLBACK_ID,
         filename,
+        asset: emptyAsset,
       })
       const result = await promise
-      expect(result).toEqual({ filename })
+      expect(result).toEqual(emptyAsset)
     })
     it('does not call the callack function when callbackId does not match', async () => {
       const WRONG_CALLBACK_ID = TEST_CALLBACK_ID + '_wrong'
@@ -255,6 +257,7 @@ describe('createPluginActions', () => {
         field: 'dummy',
         callbackId: WRONG_CALLBACK_ID,
         filename,
+        asset: emptyAsset,
       })
       const resolvedFn = jest.fn()
       const rejectedFn = jest.fn()

packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginMessageListener/handlePluginMessage.test.ts

@@ -6,6 +6,7 @@ import {
   LoadedMessage,
   MessageToPlugin,
 } from '../../../messaging'
+import { emptyAsset } from '../../../messaging/pluginMessage/containerToPluginMessage/Asset.test'
 
 const uid = 'abc123'
 const mockCallbacks = (): PluginMessageCallbacks => ({
@@ -95,6 +96,7 @@ describe('handlePluginMessage', () => {
       filename: '/my-file.jpg',
       field: 'callback-uid',
       callbackId: 'test-callback-id',
+      asset: emptyAsset,
     }
     const callbacks = mockCallbacks()
     handlePluginMessage(data, uid, callbacks)

packages/field-plugin/src/messaging/pluginMessage/containerToPluginMessage/Asset.test.ts

@@ -1,8 +1,28 @@
-import { Asset, assetFromAssetSelectedMessage, isAsset } from './Asset'
+import {
+  Asset,
+  AssetWrapper,
+  assetFromAssetSelectedMessage,
+  isAsset,
+} from './Asset'
 import { AssetSelectedMessage } from './AssetSelectedMessage'
 
-const stub: Asset = {
+export const emptyAsset: Asset = {
+  id: 0,
+  fieldtype: 'asset',
+  name: '',
+  filename: '',
+  meta_data: {},
+  title: '',
+  copyright: '',
+  focus: '',
+  alt: '',
+  source: '',
+  is_private: false,
+}
+
+const stub: AssetWrapper = {
   filename: 'https://somthing.com/myimage.jpg',
+  asset: emptyAsset,
 }
 
 const assetSelectedMessage: AssetSelectedMessage = {
@@ -11,6 +31,7 @@ const assetSelectedMessage: AssetSelectedMessage = {
   callbackId: 'test-callback-id',
   action: 'asset-selected',
   filename: 'https://somthing.com/myimage.jpg',
+  asset: emptyAsset,
 }
 
 describe('Asset', function () {
@@ -35,24 +56,8 @@ describe('Asset', function () {
         assetFromAssetSelectedMessage(assetSelectedMessage),
       ).toHaveProperty('filename')
     })
-    it('keeps unknown properties', () => {
-      expect(
-        assetFromAssetSelectedMessage({
-          ...assetSelectedMessage,
-          unknownProperty: 'any-value',
-        }),
-      ).toHaveProperty('unknownProperty', 'any-value')
-    })
   })
   describe('validation', () => {
-    it('allows unknown properties', () => {
-      expect(
-        isAsset({
-          ...stub,
-          anUnknownProperty: 'something',
-        }),
-      ).toEqual(true)
-    })
     describe('the filename property', () => {
       it('is required', () => {
         expect(

packages/field-plugin/src/messaging/pluginMessage/containerToPluginMessage/Asset.ts

@@ -1,22 +1,37 @@
 import { hasKey } from '../../../utils'
 import { AssetSelectedMessage } from './AssetSelectedMessage'
 
+export type AssetWrapper = {
+  filename: string
+  asset: Asset
+}
+
 export type Asset = {
+  id: number
+  fieldtype: 'asset'
   filename: string
+  name: string
+  meta_data?: Record<string, unknown>
+  title: string
+  copyright: string
+  focus: string
+  alt: string
+  source?: string
+  is_external_url?: boolean
+  is_private?: boolean
+  src?: string
+  updated_at?: string
 }
 
-export const isAsset = (data: unknown): data is Asset =>
-  hasKey(data, 'filename') && typeof data.filename === 'string'
+export const isAsset = (data: unknown): data is AssetWrapper =>
+  hasKey(data, 'filename') &&
+  typeof data.filename === 'string' &&
+  hasKey(data, 'asset') &&
+  typeof data.asset === 'object'
 
 export const assetFromAssetSelectedMessage = (
   message: AssetSelectedMessage,
 ): Asset => {
-  const {
-    uid: _uid,
-    action: _action,
-    field: _field,
-    callbackId: _callbackId,
-    ...asset
-  } = message
+  const { asset } = message
   return asset
 }

packages/field-plugin/src/messaging/pluginMessage/containerToPluginMessage/AssetSelectedMessage.test.ts

@@ -3,13 +3,15 @@ import {
   isAssetSelectedMessage,
 } from './AssetSelectedMessage'
 import { isAsset } from './Asset'
+import { emptyAsset } from './Asset.test'
 
 const stub: AssetSelectedMessage = {
   action: 'asset-selected',
   uid: '-preview',
   field: 'dummy-field',
   callbackId: 'test-callback-id',
   filename: 'https://somthing.com/myimage.jpg',
+  asset: emptyAsset,
 }
 
 describe('AssetSelectedMessage', function () {
@@ -19,14 +21,6 @@ describe('AssetSelectedMessage', function () {
   it('is an Asset', () => {
     expect(isAsset(stub)).toEqual(true)
   })
-  it('allows unknown properties', () => {
-    expect(
-      isAssetSelectedMessage({
-        ...stub,
-        anUnknownProperty: 'something',
-      }),
-    ).toEqual(true)
-  })
   describe('the action property', () => {
     it('equals "asset-selected"', () => {
       expect(
@@ -45,13 +39,8 @@ describe('AssetSelectedMessage', function () {
   })
   describe('the field property', () => {
     it('is optional', () => {
-      expect(
-        isAssetSelectedMessage({
-          action: 'asset-selected',
-          uid: '-preview',
-          filename: 'https://somthing.com/myimage.jpg',
-        }),
-      ).toEqual(true)
+      const { field: _field, ...withoutField } = stub
+      expect(isAssetSelectedMessage(withoutField)).toEqual(true)
     })
     it('can be undefined', () => {
       expect(

packages/field-plugin/src/messaging/pluginMessage/containerToPluginMessage/AssetSelectedMessage.ts

@@ -1,11 +1,11 @@
 import { isMessageToPlugin, MessageToPlugin } from './MessageToPlugin'
 import { hasKey } from '../../../utils'
-import { Asset, isAsset } from './Asset'
+import { AssetWrapper, isAsset } from './Asset'
 
 export type AssetSelectedMessage = MessageToPlugin<'asset-selected'> & {
   field?: string
   callbackId: string
-} & Asset &
+} & AssetWrapper &
   Record<string, unknown>
 
 export const isAssetSelectedMessage = (

packages/sandbox/src/components/FieldPluginSandbox.tsx

@@ -252,6 +252,19 @@ const useSandbox = (
         action: 'asset-selected',
         callbackId: message.callbackId,
         filename: `${originFromPluginParams(pluginParams)}/icon.svg`,
+        asset: {
+          id: 0,
+          filename: `${originFromPluginParams(pluginParams)}/icon.svg`,
+          fieldtype: 'asset',
+          name: '',
+          meta_data: {},
+          title: '',
+          copyright: '',
+          focus: '',
+          alt: '',
+          source: '',
+          is_private: false,
+        },
       })
     },
     [uid, pluginParams, dispatchAssetSelected],