Add localized description to the dev server kit

[alfonso-noriega]

WHY are these changes introduced?

Enabling localized description for deving ui_extensions.

Fixes #393

The optional description field is supported on the deploy flow for UI Extensions but there was this missing pice to be able to dev it.

WHAT is this pull request doing?

Adding description and the translation logic to the websocket message payloads.

How to test your changes?

• In the cli folder checkout this branch: git checkout update-drafts-for-all-extensions-in-dev
• Create a new app and admin extension (or reuse existing ones)
• Add a new locales entry for the description
• Add description to the toml file: description: 't:new_key'
• Run shopify app dev --path your_app_folder_here
• Open the dev console and navigate to the extension point of your extension
• Open the web inspector network tab and check the websocket messages contain the description

Measuring impact

How do we know this change was effective? Please choose one:

• n/a - this doesn't need measurement, e.g. a linting rule or a bug-fix
• Existing analytics will cater for this addition
• PR includes analytics changes to measure impact

Checklist

• I've considered possible cross-platform impacts (Mac, Linux, Windows)
• I've considered possible documentation changes
• I've made sure that any changes to dev or deploy have been reflected in the internal flowchart.

[github-actions]

Thanks for your contribution!

Depending on what you are working on, you may want to request a review from a Shopify team:

• Themes: @shopify/theme-code-tools
• UI extensions: @shopify/ui-extensions-cli
  • Checkout UI extensions: @shopify/checkout-ui-extensions-api-stewardship
• Hydrogen: @shopify/hydrogen
• Other: @shopify/cli-foundations

[github-actions]

Coverage report

St.❔	Category	Percentage	Covered / Total
🟡	Statements	73.32% (+0.01% 🔼)	6009/8196
🟡	Branches	69.93% (+0.02% 🔼)	2926/4184
🟡	Functions	72.21%	1536/2127
🟡	Lines	74.7% (+0.01% 🔼)	5700/7631

Test suite run success

1427 tests passing in 669 suites.

Report generated by 🧪jest coverage report action from 84fddcf

[vividviolet]

Looks great - dev flow works. We're just missing a change here to get the description deployed:

cli/packages/app/src/cli/models/extensions/specifications/ui_extension.ts

Line 50 in df627c5

return {

[isaacroldan]

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,

[alfonso-noriega]

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

[isaacroldan]

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?

[vividviolet]

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.

[vividviolet]

Looks good aside from the comment about the pnpm-lock. We also need a changeset. Can you generate one please?