[Prototype] Metaobject details extensions

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';

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';

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:
@@ -231,6 +237,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:

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';

packages/ui-extensions/src/surfaces/admin/api/order-routing-rule/metafields.ts → 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;
+}

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<ExtensionTarget> {
+  applyMetafieldsChange: ApplyMetafieldsChange;
+  data: {
+    selected: {
+      id: string;
+      definitionType: string;
+    }[];
+  };
+}
+
+export interface MetaobjectDetailsActionApi<
+  ExtensionTarget extends AnyExtensionTarget,
+> extends ActionExtensionApi<ExtensionTarget> {
+  applyMetafieldsChange: ApplyMetafieldsChange;
+  data: {
+    selected: {
+      id: string;
+      definitionType: string;
+    }[];
+  };
+}

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;

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<ExtensionTarget extends AnyExtensionTarget>

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';

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');

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';
@@ -47,6 +49,10 @@ type OrderRoutingComponents = AnyComponentBuilder<
   Pick<Components, 'InternalLocationList'>
 >;
 
+type CustomDataComponents = AnyComponentBuilder<
+  Pick<Components, 'InternalMetaobjectField'>
+>;
+
 /**
  * See the [list of available components](/docs/api/admin-extensions/components).
  */
@@ -56,6 +62,7 @@ type AllComponents = AnyComponentBuilder<
     | 'CustomerSegmentTemplate'
     | 'InternalCustomerSegmentTemplate'
     | 'InternalLocationList'
+    | 'InternalMetaobjectField'
   >
 >;
 
@@ -174,6 +181,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<
+    MetaobjectDetailsBlockApi<'admin.metaobject-details.block.render'>,
+    AllComponents | CustomDataComponents
+  >;
+
   /**
    * Renders an admin block in the gift card details page.
    *
@@ -275,6 +292,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<
+    MetaobjectDetailsActionApi<'admin.metaobject-details.action.render'>,
+    AllComponents | CustomDataComponents
+  >;
+
   /**
    * Renders an admin action extension in the product index page. Open this extension from the "More Actions" menu.
    *