From b7ae698f80be140875a67460e52088c89ca856ef Mon Sep 17 00:00:00 2001 From: Kyle Brumm Date: Fri, 13 Dec 2024 15:54:44 -0600 Subject: [PATCH 1/4] add metaobject details block extension --- .../surfaces/admin/staticPages/targets-overview.doc.ts | 6 ++++++ .../src/surfaces/admin/extension-targets.ts | 10 ++++++++++ 2 files changed, 16 insertions(+) diff --git a/packages/ui-extensions/docs/surfaces/admin/staticPages/targets-overview.doc.ts b/packages/ui-extensions/docs/surfaces/admin/staticPages/targets-overview.doc.ts index 163b031903..518f6654b9 100644 --- a/packages/ui-extensions/docs/surfaces/admin/staticPages/targets-overview.doc.ts +++ b/packages/ui-extensions/docs/surfaces/admin/staticPages/targets-overview.doc.ts @@ -231,6 +231,12 @@ You register targets in your \`shopify.extension.toml\` and inside the Javascrip description: 'This page shows information about a single discount. The `admin.discount-details.function-settings.render` target is available on this page.', }, + { + title: 'Metaobject details', + description: + 'This page shows information about a metaobject. The `admin.metaobject-details.block.render` target is available on this page.', + image: 'admin.metaobject-details.block.render.png', + }, { title: 'Order details', description: diff --git a/packages/ui-extensions/src/surfaces/admin/extension-targets.ts b/packages/ui-extensions/src/surfaces/admin/extension-targets.ts index fc45898515..5a179e2fe7 100644 --- a/packages/ui-extensions/src/surfaces/admin/extension-targets.ts +++ b/packages/ui-extensions/src/surfaces/admin/extension-targets.ts @@ -174,6 +174,16 @@ export interface ExtensionTargets { AllComponents >; + /** + * Renders an admin block in the metaobject details page. + * + * See the [list of available components](/docs/api/admin-extensions/components). + */ + 'admin.metaobject-details.block.render': RenderExtension< + BlockExtensionApi<'admin.metaobject-details.block.render'>, + AllComponents + >; + /** * Renders an admin block in the gift card details page. * From b3e2bcffcaed40753d81f523a3dac1c10adb2133 Mon Sep 17 00:00:00 2001 From: Kyle Brumm Date: Fri, 13 Dec 2024 15:54:54 -0600 Subject: [PATCH 2/4] add metaobject details action extension --- .../surfaces/admin/staticPages/targets-overview.doc.ts | 6 ++++++ .../src/surfaces/admin/extension-targets.ts | 10 ++++++++++ 2 files changed, 16 insertions(+) diff --git a/packages/ui-extensions/docs/surfaces/admin/staticPages/targets-overview.doc.ts b/packages/ui-extensions/docs/surfaces/admin/staticPages/targets-overview.doc.ts index 518f6654b9..c744fb3d90 100644 --- a/packages/ui-extensions/docs/surfaces/admin/staticPages/targets-overview.doc.ts +++ b/packages/ui-extensions/docs/surfaces/admin/staticPages/targets-overview.doc.ts @@ -108,6 +108,12 @@ You register targets in your \`shopify.extension.toml\` and inside the Javascrip 'This page shows information about a single gift card. The `admin.gift-card-details.action.render` target is available on this page. You can control the visibility of the action by using the `admin.gift-card-details.action.should-render` target.', image: 'admin.gift-card-details.action.render.png', }, + { + title: 'Metaobject details', + description: + 'This page shows information about a metaobject. The `admin.metaobject-details.action.render` target is available on this page. You can control the visibility of the action by using the `admin.metaobject-details.action.should-render` target.', + image: 'admin.metaobject-details.action.render.png', + }, { title: 'Order details', description: diff --git a/packages/ui-extensions/src/surfaces/admin/extension-targets.ts b/packages/ui-extensions/src/surfaces/admin/extension-targets.ts index 5a179e2fe7..270a08a171 100644 --- a/packages/ui-extensions/src/surfaces/admin/extension-targets.ts +++ b/packages/ui-extensions/src/surfaces/admin/extension-targets.ts @@ -285,6 +285,16 @@ export interface ExtensionTargets { AllComponents >; + /** + * Renders an admin action extension in the metaobject details page. Open this extension from the "More Actions" menu. + * + * See the [list of available components](/docs/api/admin-extensions/components). + */ + 'admin.metaobject-details.action.render': RenderExtension< + ActionExtensionApi<'admin.metaobject-details.action.render'>, + AllComponents + >; + /** * Renders an admin action extension in the product index page. Open this extension from the "More Actions" menu. * From 54c26b2e015122b2605445e19275814fc7201aeb Mon Sep 17 00:00:00 2001 From: Kyle Brumm Date: Fri, 13 Dec 2024 16:00:28 -0600 Subject: [PATCH 3/4] add InternalMetaobjectField component --- .../src/surfaces/admin/components.ts | 2 ++ .../InternalMetaobjectField.ts | 7 ++++++ .../src/surfaces/admin/components.ts | 2 ++ .../InternalMetaobjectField.ts | 23 +++++++++++++++++++ .../src/surfaces/admin/extension-targets.ts | 9 ++++++-- 5 files changed, 41 insertions(+), 2 deletions(-) create mode 100644 packages/ui-extensions-react/src/surfaces/admin/components/InternalMetaobjectField/InternalMetaobjectField.ts create mode 100644 packages/ui-extensions/src/surfaces/admin/components/InternalMetaobjectField/InternalMetaobjectField.ts diff --git a/packages/ui-extensions-react/src/surfaces/admin/components.ts b/packages/ui-extensions-react/src/surfaces/admin/components.ts index 258fbdddc4..b11859efb8 100644 --- a/packages/ui-extensions-react/src/surfaces/admin/components.ts +++ b/packages/ui-extensions-react/src/surfaces/admin/components.ts @@ -83,3 +83,5 @@ export {URLField} from './components/URLField/URLField'; export type {URLFieldProps} from './components/URLField/URLField'; export {InternalLocationList} from './components/InternalLocationList/InternalLocationList'; export type {InternalLocationListProps} from './components/InternalLocationList/InternalLocationList'; +export {InternalMetaobjectField} from './components/InternalMetaobjectField/InternalMetaobjectField'; +export type {InternalMetaobjectFieldProps} from './components/InternalMetaobjectField/InternalMetaobjectField'; diff --git a/packages/ui-extensions-react/src/surfaces/admin/components/InternalMetaobjectField/InternalMetaobjectField.ts b/packages/ui-extensions-react/src/surfaces/admin/components/InternalMetaobjectField/InternalMetaobjectField.ts new file mode 100644 index 0000000000..77540a712a --- /dev/null +++ b/packages/ui-extensions-react/src/surfaces/admin/components/InternalMetaobjectField/InternalMetaobjectField.ts @@ -0,0 +1,7 @@ +import {InternalMetaobjectField as BaseInternalMetaobjectField} from '@shopify/ui-extensions/admin'; +import {createRemoteReactComponent} from '@remote-ui/react'; + +export const InternalMetaobjectField = createRemoteReactComponent( + BaseInternalMetaobjectField, +); +export type {InternalMetaobjectFieldProps} from '@shopify/ui-extensions/admin'; diff --git a/packages/ui-extensions/src/surfaces/admin/components.ts b/packages/ui-extensions/src/surfaces/admin/components.ts index 2308539de5..15247d4cb1 100644 --- a/packages/ui-extensions/src/surfaces/admin/components.ts +++ b/packages/ui-extensions/src/surfaces/admin/components.ts @@ -87,3 +87,5 @@ export {URLField} from './components/URLField/URLField'; export type {URLFieldProps} from './components/URLField/URLField'; export {InternalLocationList} from './components/InternalLocationList/InternalLocationList'; export type {InternalLocationListProps} from './components/InternalLocationList/InternalLocationList'; +export {InternalMetaobjectField} from './components/InternalMetaobjectField/InternalMetaobjectField'; +export type {InternalMetaobjectFieldProps} from './components/InternalMetaobjectField/InternalMetaobjectField'; diff --git a/packages/ui-extensions/src/surfaces/admin/components/InternalMetaobjectField/InternalMetaobjectField.ts b/packages/ui-extensions/src/surfaces/admin/components/InternalMetaobjectField/InternalMetaobjectField.ts new file mode 100644 index 0000000000..d46e36f9ff --- /dev/null +++ b/packages/ui-extensions/src/surfaces/admin/components/InternalMetaobjectField/InternalMetaobjectField.ts @@ -0,0 +1,23 @@ +import {createRemoteComponent} from '@remote-ui/core'; + +export interface InternalMetaobjectFieldProps { + /** + * The id of the metaobject. + */ + id: string; + + /** + * The definition type of the metaobject. + */ + definitionType: string; + + /** + * The key of the metaobject field. + */ + fieldKey: string; +} + +export const InternalMetaobjectField = createRemoteComponent< + 'InternalMetaobjectField', + InternalMetaobjectFieldProps +>('InternalMetaobjectField'); diff --git a/packages/ui-extensions/src/surfaces/admin/extension-targets.ts b/packages/ui-extensions/src/surfaces/admin/extension-targets.ts index 270a08a171..7a2427adf6 100644 --- a/packages/ui-extensions/src/surfaces/admin/extension-targets.ts +++ b/packages/ui-extensions/src/surfaces/admin/extension-targets.ts @@ -47,6 +47,10 @@ type OrderRoutingComponents = AnyComponentBuilder< Pick >; +type CustomDataComponents = AnyComponentBuilder< + Pick +>; + /** * See the [list of available components](/docs/api/admin-extensions/components). */ @@ -56,6 +60,7 @@ type AllComponents = AnyComponentBuilder< | 'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate' | 'InternalLocationList' + | 'InternalMetaobjectField' > >; @@ -181,7 +186,7 @@ export interface ExtensionTargets { */ 'admin.metaobject-details.block.render': RenderExtension< BlockExtensionApi<'admin.metaobject-details.block.render'>, - AllComponents + AllComponents | CustomDataComponents >; /** @@ -292,7 +297,7 @@ export interface ExtensionTargets { */ 'admin.metaobject-details.action.render': RenderExtension< ActionExtensionApi<'admin.metaobject-details.action.render'>, - AllComponents + AllComponents | CustomDataComponents >; /** From 455155af3aab2d68d4bb0c2c81dbd3dd1b21fa10 Mon Sep 17 00:00:00 2001 From: Kyle Brumm Date: Fri, 13 Dec 2024 16:01:25 -0600 Subject: [PATCH 4/4] reorganize and add new metaobject detail types --- .../ui-extensions/src/surfaces/admin/api.ts | 2 ++ .../metafields.ts | 8 +++++ .../api/custom-data/metaobject-details.ts | 29 +++++++++++++++++++ .../admin/api/order-routing-rule/data.ts | 10 +------ .../order-routing-rule/order-routing-rule.ts | 2 +- .../src/surfaces/admin/extension-targets.ts | 6 ++-- 6 files changed, 45 insertions(+), 12 deletions(-) rename packages/ui-extensions/src/surfaces/admin/api/{order-routing-rule => custom-data}/metafields.ts (90%) create mode 100644 packages/ui-extensions/src/surfaces/admin/api/custom-data/metaobject-details.ts diff --git a/packages/ui-extensions/src/surfaces/admin/api.ts b/packages/ui-extensions/src/surfaces/admin/api.ts index 995aeb5234..9c84627ba3 100644 --- a/packages/ui-extensions/src/surfaces/admin/api.ts +++ b/packages/ui-extensions/src/surfaces/admin/api.ts @@ -9,3 +9,5 @@ export type {ProductDetailsConfigurationApi} from './api/product-configuration/p export type {ProductVariantDetailsConfigurationApi} from './api/product-configuration/product-variant-details-configuration'; export type {OrderRoutingRuleApi} from './api/order-routing-rule/order-routing-rule'; export type {ValidationSettingsApi} from './api/checkout-rules/validation-settings'; +export type {MetaobjectDetailsBlockApi} from './api/custom-data/metaobject-details'; +export type {MetaobjectDetailsActionApi} from './api/custom-data/metaobject-details'; diff --git a/packages/ui-extensions/src/surfaces/admin/api/order-routing-rule/metafields.ts b/packages/ui-extensions/src/surfaces/admin/api/custom-data/metafields.ts similarity index 90% rename from packages/ui-extensions/src/surfaces/admin/api/order-routing-rule/metafields.ts rename to packages/ui-extensions/src/surfaces/admin/api/custom-data/metafields.ts index 5f13c3552d..095a6c9a1a 100644 --- a/packages/ui-extensions/src/surfaces/admin/api/order-routing-rule/metafields.ts +++ b/packages/ui-extensions/src/surfaces/admin/api/custom-data/metafields.ts @@ -65,3 +65,11 @@ type MetafieldsChange = export type SupportedDefinitionType = (typeof supportedDefinitionTypes)[number]; export type ApplyMetafieldsChange = (changes: MetafieldsChange[]) => void; + +export interface Metafield { + id?: string | null; + key: string; + value?: string | null; + namespace?: string; + type?: SupportedDefinitionType; +} diff --git a/packages/ui-extensions/src/surfaces/admin/api/custom-data/metaobject-details.ts b/packages/ui-extensions/src/surfaces/admin/api/custom-data/metaobject-details.ts new file mode 100644 index 0000000000..3e7c460b9b --- /dev/null +++ b/packages/ui-extensions/src/surfaces/admin/api/custom-data/metaobject-details.ts @@ -0,0 +1,29 @@ +import {BlockExtensionApi} from '../block/block'; +import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets'; +import {ActionExtensionApi} from '../action/action'; + +import {ApplyMetafieldsChange} from './metafields'; + +export interface MetaobjectDetailsBlockApi< + ExtensionTarget extends AnyExtensionTarget, +> extends BlockExtensionApi { + applyMetafieldsChange: ApplyMetafieldsChange; + data: { + selected: { + id: string; + definitionType: string; + }[]; + }; +} + +export interface MetaobjectDetailsActionApi< + ExtensionTarget extends AnyExtensionTarget, +> extends ActionExtensionApi { + applyMetafieldsChange: ApplyMetafieldsChange; + data: { + selected: { + id: string; + definitionType: string; + }[]; + }; +} diff --git a/packages/ui-extensions/src/surfaces/admin/api/order-routing-rule/data.ts b/packages/ui-extensions/src/surfaces/admin/api/order-routing-rule/data.ts index 1a82329fa6..da1bd413d9 100644 --- a/packages/ui-extensions/src/surfaces/admin/api/order-routing-rule/data.ts +++ b/packages/ui-extensions/src/surfaces/admin/api/order-routing-rule/data.ts @@ -1,12 +1,4 @@ -import type {SupportedDefinitionType} from './metafields'; - -interface Metafield { - id?: string | null; - key: string; - value?: string | null; - namespace?: string; - type?: SupportedDefinitionType; -} +import type {Metafield} from '../custom-data/metafields'; interface OrderRoutingRule { label: string; diff --git a/packages/ui-extensions/src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts b/packages/ui-extensions/src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts index d3ef37e0f8..ec3632fd5d 100644 --- a/packages/ui-extensions/src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts +++ b/packages/ui-extensions/src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts @@ -1,7 +1,7 @@ import type {StandardApi} from '../standard/standard'; import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets'; -import {ApplyMetafieldsChange} from './metafields'; +import {ApplyMetafieldsChange} from '../custom-data/metafields'; import {Data} from './data'; export interface OrderRoutingRuleApi diff --git a/packages/ui-extensions/src/surfaces/admin/extension-targets.ts b/packages/ui-extensions/src/surfaces/admin/extension-targets.ts index 7a2427adf6..8a80ad8e80 100644 --- a/packages/ui-extensions/src/surfaces/admin/extension-targets.ts +++ b/packages/ui-extensions/src/surfaces/admin/extension-targets.ts @@ -11,6 +11,8 @@ import type { ProductVariantDetailsConfigurationApi, OrderRoutingRuleApi, ValidationSettingsApi, + MetaobjectDetailsBlockApi, + MetaobjectDetailsActionApi, } from './api'; import {AnyComponentBuilder} from '../../shared'; import {PurchaseOptionsCardConfigurationApi} from './api/purchase-options-card-action/purchase-options-card-action'; @@ -185,7 +187,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.metaobject-details.block.render': RenderExtension< - BlockExtensionApi<'admin.metaobject-details.block.render'>, + MetaobjectDetailsBlockApi<'admin.metaobject-details.block.render'>, AllComponents | CustomDataComponents >; @@ -296,7 +298,7 @@ export interface ExtensionTargets { * See the [list of available components](/docs/api/admin-extensions/components). */ 'admin.metaobject-details.action.render': RenderExtension< - ActionExtensionApi<'admin.metaobject-details.action.render'>, + MetaobjectDetailsActionApi<'admin.metaobject-details.action.render'>, AllComponents | CustomDataComponents >;