Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(lib): provide more properties to selected asset #395

Merged
merged 6 commits into from
Sep 18, 2024
Merged

feat(lib): provide more properties to selected asset #395

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f74ed34
feat(SHAPE-7043): provide more properties to selected asset
eunjae-lee Sep 16, 2024
9a855d8
fix tests
eunjae-lee Sep 16, 2024
1fd7f28
fix sandbox
eunjae-lee Sep 16, 2024
39e6f92
return full asset object
eunjae-lee Sep 17, 2024
7c79fef
clean up test cases
eunjae-lee Sep 18, 2024
52ca8f8
fix sandbox
eunjae-lee Sep 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 30 additions & 1 deletion packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginActions.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,9 +231,29 @@ describe('createPluginActions', () => {
field: 'dummy',
callbackId: TEST_CALLBACK_ID,
filename,
fieldtype: 'asset',
name: '',
meta_data: {},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a question: Since metadata has already title, source, and such, why do we need the properties twice?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not 100% sure, but I think it can contain more than that.

Screenshot 2024-09-17 at 14 12 47

https://www.storyblok.com/docs/api/management/core-resources/assets/the-asset-object

title: '',
copyright: '',
focus: '',
alt: '',
source: '',
is_private: false,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @eunjae-lee 👋

I don't know how feasible it would be but would be possible to also have the is_external_url property added? 🤔
May it not be possible or not make sense but just commenting once I saw this property exists in the image shared on the issue's description.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm 🤔 I actually don't know about external asset. Do you know @Dawntraoz maybe? I want to test a situation where is_external_url is true.

Copy link
Contributor

@Dawntraoz Dawntraoz Sep 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indeed @eunjae-lee, you need to go to the image field definition in the Block and check the Allow External URL, then when creating the story, instead of selecting an asset from the Assets Library, you should click on the externalURL icon and add a link to an image (for example for this one: https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg). Then you will be able to see the is_external_url to true!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you @Dawntraoz! I've followed your instruction, and I was able to upload an external asset.

Screenshot 2024-09-17 at 14 07 35

But, in asset selector, I don't see that. I feel like this should be normal, right? (It's just attached to the story as an external URL, but not really uploaded to my space).

So, if I understand this correctly, the selected asset can never be external. What do you think?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You have a point since the message sent only involves Asset Manager iteration in the field plugin. It will always be false 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess that's why is_external_url even doesn't exist on storyfront right before it's passed down to field plugin.

})
const result = await promise
expect(result).toEqual({ filename })
expect(result).toEqual({
filename,
fieldtype: 'asset',
name: '',
meta_data: {},
title: '',
copyright: '',
focus: '',
alt: '',
source: '',
is_private: false,
})
})
it('does not call the callack function when callbackId does not match', async () => {
const WRONG_CALLBACK_ID = TEST_CALLBACK_ID + '_wrong'
Expand All @@ -255,6 +275,15 @@ describe('createPluginActions', () => {
field: 'dummy',
callbackId: WRONG_CALLBACK_ID,
filename,
fieldtype: 'asset',
name: '',
meta_data: {},
title: '',
copyright: '',
focus: '',
alt: '',
source: '',
is_private: false,
})
const resolvedFn = jest.fn()
const rejectedFn = jest.fn()
Expand Down
9 changes: 9 additions & 0 deletions ...teFieldPlugin/createPluginActions/createPluginMessageListener/handlePluginMessage.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,15 @@ describe('handlePluginMessage', () => {
filename: '/my-file.jpg',
field: 'callback-uid',
callbackId: 'test-callback-id',
fieldtype: 'asset',
name: '',
meta_data: {},
title: '',
copyright: '',
focus: '',
alt: '',
source: '',
is_private: false,
}
const callbacks = mockCallbacks()
handlePluginMessage(data, uid, callbacks)
Expand Down
18 changes: 18 additions & 0 deletions packages/field-plugin/src/messaging/pluginMessage/containerToPluginMessage/Asset.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,15 @@ import { AssetSelectedMessage } from './AssetSelectedMessage'

const stub: Asset = {
filename: 'https://somthing.com/myimage.jpg',
fieldtype: 'asset',
name: '',
meta_data: {},
title: '',
copyright: '',
focus: '',
alt: '',
source: '',
is_private: false,
}

const assetSelectedMessage: AssetSelectedMessage = {
Expand All @@ -11,6 +20,15 @@ const assetSelectedMessage: AssetSelectedMessage = {
callbackId: 'test-callback-id',
action: 'asset-selected',
filename: 'https://somthing.com/myimage.jpg',
fieldtype: 'asset',
name: '',
meta_data: {},
title: '',
copyright: '',
focus: '',
alt: '',
source: '',
is_private: false,
}

describe('Asset', function () {
Expand Down
9 changes: 9 additions & 0 deletions packages/field-plugin/src/messaging/pluginMessage/containerToPluginMessage/Asset.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,15 @@ import { AssetSelectedMessage } from './AssetSelectedMessage'

export type Asset = {
filename: string
fieldtype: 'asset'
name: string
meta_data: Record<string, string>
title: string
copyright: string
focus: string
alt: string
source: string
is_private: boolean
}

export const isAsset = (data: unknown): data is Asset =>
Expand Down
9 changes: 9 additions & 0 deletions ...-plugin/src/messaging/pluginMessage/containerToPluginMessage/AssetSelectedMessage.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,15 @@ const stub: AssetSelectedMessage = {
field: 'dummy-field',
callbackId: 'test-callback-id',
filename: 'https://somthing.com/myimage.jpg',
fieldtype: 'asset',
name: '',
meta_data: {},
title: '',
copyright: '',
focus: '',
alt: '',
source: '',
is_private: false,
}

describe('AssetSelectedMessage', function () {
Expand Down
9 changes: 9 additions & 0 deletions packages/sandbox/src/components/FieldPluginSandbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,6 +252,15 @@ const useSandbox = (
action: 'asset-selected',
callbackId: message.callbackId,
filename: `${originFromPluginParams(pluginParams)}/icon.svg`,
fieldtype: 'asset',
name: '',
meta_data: {},
title: '',
copyright: '',
focus: '',
alt: '',
source: '',
is_private: false,
})
},
[uid, pluginParams, dispatchAssetSelected],
Expand Down
Loading