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

Add localized description to the dev server kit #2703

Merged
merged 4 commits into from
Sep 4, 2023
Merged

Add localized description to the dev server kit #2703

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d2b95db
Added localized description to the dev server kit
alfonso-noriega Aug 24, 2023
2c8d351
Added missing pnpm version and fixed wrong quotes
alfonso-noriega Aug 29, 2023
6603c97
Add description property to deploy payload
alfonso-noriega Aug 28, 2023
84fddcf
Added changeset
alfonso-noriega Sep 4, 2023
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
6 changes: 6 additions & 0 deletions .changeset/angry-jars-worry.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@shopify/ui-extensions-server-kit': minor
'@shopify/cli': minor
---

Added support for optional localizable description to UI extensions dev and deploy
4 changes: 4 additions & 0 deletions packages/app/src/cli/models/extensions/specifications/ui_extension.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ describe('ui_extension', async () => {
extension_points: extensionPoints,
api_version: '2023-01' as const,
name: 'UI Extension',
description: 'This is an ordinary test extension.',
type: 'ui_extension',
metafields: [],
capabilities: {
Expand Down Expand Up @@ -77,6 +78,7 @@ describe('ui_extension', async () => {
],
api_version: '2023-01' as const,
name: 'UI Extension',
description: 'This is an ordinary test extension',
type: 'ui_extension',
metafields: [{namespace: 'test', key: 'test'}],
capabilities: {
Expand Down Expand Up @@ -107,6 +109,7 @@ describe('ui_extension', async () => {
const configuration = {
api_version: '2023-01' as const,
name: 'UI Extension',
description: 'This is an ordinary test extension',
type: 'ui_extension',
metafields: [{namespace: 'test', key: 'test'}],
capabilities: {
Expand Down Expand Up @@ -224,6 +227,7 @@ Please check the configuration in ${uiExtension.configuration.path}`),
extension_points: uiExtension.configuration.extension_points,
capabilities: uiExtension.configuration.capabilities,
name: uiExtension.configuration.name,
description: uiExtension.configuration.description,
api_version: uiExtension.configuration.api_version,
settings: uiExtension.configuration.settings,
})
Expand Down
1 change: 1 addition & 0 deletions packages/app/src/cli/models/extensions/specifications/ui_extension.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ const spec = createExtensionSpecification({
extension_points: config.extension_points,
capabilities: config.capabilities,
name: config.name,
description: config.description,
settings: config.settings,
localization: await loadLocalesConfig(directory, config.type),
}
Expand Down
1 change: 1 addition & 0 deletions packages/app/src/cli/services/dev/extension/payload.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ export async function getUIExtensionPayload(
title: extension.configuration.name,
handle: extension.handle,
name: extension.configuration.name,
description: extension.configuration.description,
apiVersion: extension.configuration.api_version,
approvalScopes: options.grantedScopes,
}
Expand Down
1 change: 1 addition & 0 deletions packages/app/src/cli/services/dev/extension/payload/models.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ export interface UIExtensionPayload {
handle: string
// user facing name for the extension
name: string
description?: string
approvalScopes: string[]
}

Expand Down
41 changes: 35 additions & 6 deletions packages/ui-extensions-server-kit/src/ExtensionServerClient/ExtensionServerClient.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,20 +153,23 @@ describe('ExtensionServerClient', () => {
translations: {
ja: {
welcome: 'いらっしゃいませ!',
description: '拡張子の説明',
},
en: {
welcome: 'Welcome!',
description: 'Extension description',
},
fr: {
welcome: 'Bienvenue!',
description: "Description de l'extension",
},
},
lastUpdated: 1684164163736,
}

const translatedLocalization = {
extensionLocale: 'ja',
translations: '{"welcome":"いらっしゃいませ!"}',
translations: '{"welcome":"いらっしゃいませ!","description":"拡張子の説明"}',
lastUpdated: localization.lastUpdated,
}

Expand All @@ -177,6 +180,7 @@ describe('ExtensionServerClient', () => {
uuid: '123',
type: 'ui_extension',
name: 't:welcome',
description: 't:description',
localization,
extensionPoints: [{localization}],
},
Expand All @@ -202,11 +206,13 @@ describe('ExtensionServerClient', () => {
uuid: '123',
type: 'ui_extension',
name: 'いらっしゃいませ!',
description: '拡張子の説明',
localization: translatedLocalization,
extensionPoints: [
{
localization: translatedLocalization,
name: 'いらっしゃいませ!',
description: '拡張子の説明',
},
],
},
Expand Down Expand Up @@ -285,12 +291,15 @@ describe('ExtensionServerClient', () => {
translations: {
ja: {
welcome: 'いらっしゃいませ!',
description: '拡張子の説明',
},
en: {
welcome: 'Welcome!',
description: 'Extension description',
},
fr: {
welcome: 'Bienvenue!',
description: "Description de l'extension",
},
},
lastUpdated: 1684164163736,
Expand All @@ -303,6 +312,7 @@ describe('ExtensionServerClient', () => {
uuid: '123',
type: 'ui_extension',
name: 't:welcome',
description: 't:description',
localization,
extensionPoints: [{localization}],
},
Expand Down Expand Up @@ -338,20 +348,23 @@ describe('ExtensionServerClient', () => {
translations: {
ja: {
welcome: 'いらっしゃいませ!',
description: '拡張子の説明',
},
en: {
welcome: 'Welcome!',
description: 'Extension description',
},
fr: {
welcome: 'Bienvenue!',
description: "Description de l'extension",
},
},
lastUpdated: 1684164163736,
}

const translatedLocalization = {
extensionLocale: 'ja',
translations: '{"welcome":"いらっしゃいませ!"}',
translations: '{"welcome":"いらっしゃいませ!","description":"拡張子の説明"}',
lastUpdated: localization.lastUpdated,
}

Expand All @@ -362,13 +375,15 @@ describe('ExtensionServerClient', () => {
uuid: '123',
type: 'ui_extension',
name: 't:welcome',
description: 't:description',
localization,
extensionPoints: [{localization}],
},
{
uuid: '456',
type: 'ui_extension',
name: 'Extension 456',
description: 'This is a test extension',
localization: null,
extensionPoints: [{localization: null}],
},
Expand All @@ -387,13 +402,17 @@ describe('ExtensionServerClient', () => {
uuid: '123',
type: 'ui_extension',
name: 'いらっしゃいませ!',
description: '拡張子の説明',
localization: translatedLocalization,
extensionPoints: [{localization: translatedLocalization, name: 'いらっしゃいませ!'}],
extensionPoints: [
{localization: translatedLocalization, name: 'いらっしゃいませ!', description: '拡張子の説明'},
],
},
{
uuid: '456',
type: 'ui_extension',
name: 'Extension 456',
description: 'This is a test extension',
localization: null,
extensionPoints: [{localization: null}],
},
Expand All @@ -413,20 +432,23 @@ describe('ExtensionServerClient', () => {
translations: {
ja: {
welcome: 'いらっしゃいませ!',
description: '拡張子の説明',
},
en: {
welcome: 'Welcome!',
description: 'Extension description',
},
fr: {
welcome: 'Bienvenue!',
description: "Description de l'extension",
},
},
lastUpdated: 1684164163736,
}

const translatedLocalization = {
extensionLocale: 'ja',
translations: '{"welcome":"いらっしゃいませ!"}',
translations: '{"welcome":"いらっしゃいませ!","description":"拡張子の説明"}',
lastUpdated: localization.lastUpdated,
}

Expand All @@ -437,13 +459,15 @@ describe('ExtensionServerClient', () => {
uuid: '123',
type: 'ui_extension',
name: 't:welcome',
description: 't:description',
localization,
extensionPoints: [{localization}],
},
{
uuid: '456',
type: 'ui_extension',
name: 'Extension 456',
description: 'This is a test extension',
localization: null,
extensionPoints: [{localization: null}],
},
Expand All @@ -463,13 +487,17 @@ describe('ExtensionServerClient', () => {
uuid: '123',
type: 'ui_extension',
name: 'いらっしゃいませ!',
description: '拡張子の説明',
localization: translatedLocalization,
extensionPoints: [{localization: translatedLocalization, name: 'いらっしゃいませ!'}],
extensionPoints: [
{localization: translatedLocalization, name: 'いらっしゃいませ!', description: '拡張子の説明'},
],
},
{
uuid: '456',
type: 'ui_extension',
name: 'Extension 456',
description: 'This is a test extension',
localization: null,
extensionPoints: [{localization: null}],
},
Expand Down Expand Up @@ -593,8 +621,9 @@ describe('ExtensionServerClient', () => {
uuid: '123',
type: 'ui_extension',
name: 'いらっしゃいませ!',
description: '拡張子の説明',
localization: {},
extensionPoints: [{localization: {}, name: 'いらっしゃいませ!'}],
extensionPoints: [{localization: {}, name: 'いらっしゃいませ!', description: '拡張子の説明'}],
},
],
})
Expand Down
18 changes: 13 additions & 5 deletions packages/ui-extensions-server-kit/src/ExtensionServerClient/ExtensionServerClient.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ export class ExtensionServerClient implements ExtensionServer.Client {
* extensionPoints: [{
* target: 'admin.product.item.action'
* name: 'en name'
* description: 'en description'
* localization: {...}
* }],
* }
Expand Down Expand Up @@ -220,8 +221,14 @@ export class ExtensionServerClient implements ExtensionServer.Client {
localization,
name:
parsedTranslation && extension.name.startsWith('t:')
? this._getLocalizedName(parsedTranslation, extension.name)
? this._getLocalizedValue(parsedTranslation, extension.name)
: extension.name,
...(extension.description && {
description:
parsedTranslation && extension.description?.startsWith('t:')
? this._getLocalizedValue(parsedTranslation, extension.description)
: extension.description,
}),
Comment on lines +226 to +231
Copy link
Contributor

Choose a reason for hiding this comment

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

probably don't need to check if there is a description, this should be safe:

Suggested change
...(extension.description && {
description:
parsedTranslation && extension.description?.startsWith('t:')
? this._getLocalizedValue(parsedTranslation, extension.description)
: extension.description,
}),
description:
parsedTranslation && extension.description?.startsWith('t:')
? this._getLocalizedValue(parsedTranslation, extension.description)
: extension.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.

Wouldn't that end up having also a description: undefined value in the payload if there is no description?

Copy link
Contributor

Choose a reason for hiding this comment

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

right, is that a bad thing? if you prefer to not have description at all that's ok for me.
but anyone reading the payload won't care if it's undefined or just not present, the result would be the same no?

Copy link
Member

Choose a reason for hiding this comment

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

It wouldn't make a difference since description is always optional. Consumers of the payload will always need to check if it's present so it doesn't matter if it's undefined or not set.

}

this.uiExtensionsByUuid[extension.uuid] = {
Expand All @@ -235,7 +242,7 @@ export class ExtensionServerClient implements ExtensionServer.Client {

private _getLocalizedExtensionPoints(
localization: FlattenedLocalization | Localization | null | undefined,
{extensionPoints, name}: ExtensionServer.UIExtension,
{extensionPoints, name, description}: ExtensionServer.UIExtension,
): ExtensionPoint[] {
if (!localization || !isFlattenedTranslations(localization)) {
return extensionPoints
Expand All @@ -246,13 +253,14 @@ export class ExtensionServerClient implements ExtensionServer.Client {
...extensionPoint,
localization,
name,
...(description && {description}),
}
})
}

private _getLocalizedName(translations: {[x: string]: string}, name: string): string {
const translationKey = name.replace('t:', '')
return translations[translationKey] || name
private _getLocalizedValue(translations: {[x: string]: string}, value: string): string {
const translationKey = value.replace('t:', '')
return translations[translationKey] || value
}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/ui-extensions-server-kit/src/i18n.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export interface ExtensionTranslationMap {
[key: string]: string
}

export const TRANSLATED_KEYS = ['localization', 'name']
export const TRANSLATED_KEYS = ['localization', 'name', 'description']
/**
* From a nested dictionary like the following :
*
Expand Down
1 change: 1 addition & 0 deletions packages/ui-extensions-server-kit/src/testing/extensions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export function mockExtension(obj: DeepPartial<ExtensionPayload> = {}): Extensio
return {
handle: 'my-extension',
name: 'My extension',
description: 'My extension description',
surface: 'admin',
type: 'purchase_option',
externalType: 'external_type',
Expand Down
2 changes: 2 additions & 0 deletions packages/ui-extensions-server-kit/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ export interface ExtensionPoint {
root: ResourceURL
localization?: FlattenedLocalization | Localization | null
name: string
description?: string
}

export type ExtensionPoints = string[] | ExtensionPoint[] | null
Expand All @@ -115,6 +116,7 @@ export interface ExtensionPayload {
version: string
surface: Surface
name: string
description?: string
handle: string
extensionPoints: ExtensionPoints
categories?: string[]
Expand Down
1 change: 1 addition & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.