Merge branch 'main' into dependabot/npm_and_yarn/npm_and_yarn-7aabbe6aff

src/data/navigation/sections/admin-ui-sdk.js

@@ -42,7 +42,7 @@ module.exports = [
           path: "/admin-ui-sdk/extension-points/order/index.md",
           pages: [
             {
-              title: "get custom fees",
+              title: "custom fees",
               path: "/admin-ui-sdk/extension-points/order/custom-fees.md"
             },
             {

src/pages/admin-ui-sdk/app-registration.md

@@ -75,14 +75,13 @@ Create an `ExtensionRegistration` React component that registers the menu config
       await register({
         id: extensionId,
         methods: {
-          ...
         }
       }
     )
    }
    ```
 
-You must populate the `methods` section with calls to fetch menus, pages, and other entities to be displayed in the Admin. [Extension Points](extension-points/index.md) provides reference information and examples.
+   The extension ID should be the same as the one defined in the `extension-manifest.json`.
 
 ## Update the `App.js` routing
 
@@ -96,17 +95,38 @@ Make sure that your main page is correctly routed to the index. Here is an examp
 
 ```javascript
 <ErrorBoundary onError={onError} FallbackComponent={fallbackComponent}>
-  <BrowserRouter>
+  <HashRouter>
       <Provider theme={lightTheme} colorScheme={'light'}>
           <Routes>
               <Route path={'index.html'} element={<ExtensionRegistration />} />
               <Route index element={<MainPage runtime={props.runtime} ims={props.ims} />} />
           </Routes>
       </Provider>
-  </BrowserRouter>
+  </HashRouter>
 </ErrorBoundary>
 ```
 
+## Create a registration runtime action
+
+Under the `actions` repository in the project, create a `registration` respository in which you create the `index.js` file with the following code:
+
+```javascript
+async function main() {
+
+    return {
+        statusCode: 200,
+        body: {
+            registration: {
+            }
+        }
+    }
+}
+
+exports.main = main
+```
+
+You must populate the `registration` section with calls to fetch menus, pages, and other entities to be displayed in the Admin. [Extension Points](extension-points/index.md) provides reference information and examples.
+
 ## Update the `app.config.yaml` file
 
 Update the `app.config.yaml` [configuration file](https://developer.adobe.com/app-builder/docs/guides/configuration/) as follows:
@@ -132,9 +152,18 @@ actions: actions
 web: web-src
 runtimeManifest:
   packages:
-    SampleExtension:
+    admin-ui-sdk:
       license: Apache-2.0
       actions:
+        registration:
+          function: actions/registration/index.js
+          web: 'yes'
+          runtime: 'nodejs:18'
+          inputs:
+            LOG_LEVEL: debug
+          annotations:
+            require-adobe-auth: false
+            final: true
 ```
 
 Complete this file with the actions from your app.

src/pages/admin-ui-sdk/extension-points/banner-notification.md

@@ -10,77 +10,89 @@ keywords:
 
 The `bannerNotification` extension point defines the contents of banner notifications that display when customizing a mass action or order view button.
 
-## Example mass action customizations
+## Mass action customizations
+
+### Example
 
 The following example defines success and error messages for multiple mass actions.
 
 ```javascript
 bannerNotification: {
-    getMassActions() {
-      return {
+    massActions: {
         order: [
-          {
-            actionId: `${extensionId}::mass-action`,
-            successMessage: 'Selected orders were updated successfully',
-            errorMessage: 'App could not proceed with mass action on selected orders'
-          }
+            {
+                actionId: `${orderExtensionId}::mass-action-with-redirect`,
+                successMessage: 'Order custom success message',
+                errorMessage: 'Order custom error message'
+            }
         ],
         product: [
-          {
-            actionId: `${extensionId}::mass-action`,
-            successMessage: 'Selected products were updated successfully',
-            errorMessage: 'App could not proceed with mass action on selected products'
-          }
+            {
+                actionId: `${productExtensionId}::mass-action-with-redirect`,
+                successMessage: 'Product custom success message',
+                errorMessage: 'Product custom error message'
+            }
         ],
         customer: [
-          {
-            actionId: `${extensionId}::mass-action`,
-            successMessage: 'Selected customers were updated successfully',
-            errorMessage: 'App could not proceed with mass action on selected customers'
-          }
+            {
+                actionId: `${customerExtensionId}::mass-action-with-redirect`,
+                successMessage: 'Customer custom success message',
+                errorMessage: 'Customer custom error message'
+            }
         ]
-      }
     }
 }
 ```
 
-## Parameters
+### Parameters
 
 | Field | Type | Required | Description |
 | --- | --- | --- | --- |
-`customer.actionId` | Yes | The `actionId` of a customer mass action.
-where banner notification will be customized. It should be the same one that is defined in the customer mass action extension point.
-`customer.successMessage` | No | The success message to display when mass action is successful. A default message is displayed if this parameter is not defined.
-`customer.errorMessage` | No | The error message to display when mass action fails. A default message is displayed if this parameter is not defined.
+`customer.actionId` | string | Yes | The `actionId` of a customer mass action where a banner notification will be customized. It must match an ID that is defined in the customer mass action extension point.
+`customer.successMessage` | string | No | The success message to display when a mass action is successful. A default message is displayed if this parameter is not defined.
+`customer.errorMessage` | string | No | The error message to display when a mass action fails. A default message is displayed if this parameter is not defined.
 `order.actionId` | string | Yes | The `actionId` of an [order mass action](./order/mass-action.md).
-`order.successMessage` | No | The success message to display when mass action is successful. A default message is displayed if this parameter is not defined.
-`order.errorMessage` | No | The error message to display when mass action fails. A default message is displayed if this parameter is not defined.
-`product.actionId` | Yes | The `actionId` of a [product mass action](./product/mass-action.md).
-`product.successMessage` | No | The success message to display when mass action is successful. A default message is displayed if this parameter is not defined.
-`product.errorMessage` | No | The error message to display when mass action fails. A default message is displayed if this parameter is not defined.
+`order.successMessage` | string | No | The success message to display when a mass action is successful. A default message is displayed if this parameter is not defined.
+`order.errorMessage` | string | No | The error message to display when a mass action fails. A default message is displayed if this parameter is not defined.
+`product.actionId` | string | Yes | The `actionId` of a [product mass action](./product/mass-action.md).
+`product.successMessage` | string | No | The success message to display when a mass action is successful. A default message is displayed if this parameter is not defined.
+`product.errorMessage` | string | No | The error message to display when a mass action fails. A default message is displayed if this parameter is not defined.
+
+### Sample code
+
+The Adobe Commerce Extensibility Code Samples repository demonstrates how to customize [mass action banner notifications](https://github.com/adobe/adobe-commerce-samples/tree/main/admin-ui-sdk/banner-notification/custom-mass-actions).
 
-## Example order view button customization
+## Order view button customization
+
+### Example
 
 The following example defines success and error messages for a custom order view button.
 
 ```javascript
 bannerNotification: {
-  getOrderViewButtons() {
-    return [
-      {
-        buttonId: 'order-custom-view-button::create-return',
-        successMessage: 'Order View Button Success',
-        errorMessage: 'Order View Button Error'
-      }
+    orderViewButtons: [
+        {
+            buttonId: `${extensionId}::mass-action-with-redirect`,
+            successMessage: 'Custom success message',
+            errorMessage: 'Custom error message'
+        },
+        {
+            buttonId: `${extensionId}::create-return`,
+            successMessage: 'Custom success message',
+            errorMessage: 'Custom error message'
+        }
     ]
-  }
 }
 ```
 
-## Parameters
+### Parameters
 
 | Field | Type | Required | Description |
 | --- | --- | --- | --- |
-`buttonId` | Yes | A `buttonId` defined in an order view button extension point.
-`successMessage` | No | The success message to display when the view button notification is successful. A default message is displayed if this parameter is not defined.
-`errorMessage` | No | The error message to display when the view button notification fails. A default message is displayed if this parameter is not defined.
+`buttonId` | string | Yes | A `buttonId` defined in an order view button extension point.
+`successMessage` | string | No | The success message to display when the view button notification is successful. A default message is displayed if this parameter is not defined.
+`errorMessage` | string | No | The error message to display when the view button notification fails. A default message is displayed if this parameter is not defined.
+
+### Sample code
+
+The Adobe Commerce Extensibility Code Samples repository demonstrates how to customize [order view button banner notifications](https://github.com/adobe/adobe-commerce-samples/tree/main/admin-ui-sdk/banner-notification/custom-order-view-button).

src/pages/admin-ui-sdk/extension-points/customer/grid-columns.md

@@ -18,27 +18,31 @@ You can use the [`aio api-mesh:describe` command](https://developer.adobe.com/gr
 
 ```javascript
 customer: {
-    getGridColumns() {
-        return {
-            data:{
-                meshId:'MESH_ID',
-                apiKey: 'API_KEY'
+    gridColumns: {
+        data: {
+            meshId: 'MESH_ID',
+            apiKey: 'API_KEY'
+        },
+        properties:[
+            {
+                label: 'First App Column',
+                columnId: 'first_column',
+                type: 'string',
+                align: 'left'
             },
-            properties:[
-                {
-                    label: 'First App Column',
-                    columnId: 'first_column',
-                    type: 'string',
-                    align: 'left'
-                },
-                {
-                    label: 'Second App Column',
-                    columnId: 'second_column',
-                    type: 'integer',
-                    align: 'left'
-                }
-            ]
-        }
+            {
+                label: 'Second App Column',
+                columnId: 'second_column',
+                type: 'integer',
+                align: 'left'
+            },
+            {
+                label: 'Third App Column',
+                columnId: 'third_column',
+                type: 'date',
+                align: 'left'
+            }
+        ]
     }
 }
 ```
@@ -118,3 +122,7 @@ This sample `schema.json` file is referenced in the mesh configuration file. It
 | `properties.columnId` | string | Yes | The identifier used in the external dataset to identify the column. |
 | `properties.label` | string | Yes | The label of the column to display. |
 | `properties.type` | string | Yes | The data type of the values in the column. Supported values: `boolean`, `date`, `float`, `integer`, `string`. Date values must be ISO 8601-compliant. |
+
+## Sample code
+
+The Adobe Commerce Extensibility Code Samples repository demonstrates how to customize [customer grid columns](https://github.com/adobe/adobe-commerce-samples/tree/main/admin-ui-sdk/customer/custom-grid-columns).

src/pages/admin-ui-sdk/extension-points/customer/index.md

@@ -10,4 +10,5 @@ keywords:
 
 The Adobe Commerce Admin UI SDK enables you to make modifications to the following elements on the **Customer** > **All Customers** page in the Adobe Commerce Admin:
 
-* Add custom [columns](grid-columns.md) to the customer grid.
+* Add [custom columns](grid-columns.md) to the customer grid.
+* Add [custom mass actions](mass-action.md) to the customer grid.

src/pages/admin-ui-sdk/extension-points/customer/mass-action.md

@@ -18,32 +18,24 @@ The `path` parameter specifies where to redirect an action. The Admin UI SDK pro
 
 ```javascript
 customer: {
-    getMassActions() {
-        return [
-            {
-                actionId: `${extensionId}::first-mass-action`,
-                label: 'First App Mass Action',
-                confirm: {
-                    title: 'First App Mass Action',
-                    message: 'Are you sure your want to proceed with First App Mass Action on selected customers?'
-                },
-                path: '#/first-mass-action',
-                customerSelectLimit: 1
+    massActions: [
+        {
+            actionId: `${extensionId}::customer-mass-action`,
+            label: 'Customer Mass Action',
+            confirm: {
+                title: 'Mass Action',
+                message: 'Are you sure your want to proceed with Mass Action on selected customers?'
             },
-            {
-                actionId: `${extensionId}::another-first-mass-action`,
-                label: 'Another Mass Action',
-                title: 'Another Customers Mass Action',
-                path: '#/another-mass-action'
-            },
-            {
-              actionId: `${extensionId}::mass-action`,
-              label: 'Mass Action',
-              path: '#/mass-action',
-              displayIframe: false
-            }
-        ]
-    }
+            path: '#/customer-mass-action',
+            selectionLimit: 1
+        },
+        {
+            actionId: `${extensionId}::mass-action-with-redirect`,
+            label: 'Mass Action With Redirect',
+            title: 'Customer Mass Action With Redirect',
+            path: '#/mass-action-with-redirect'
+        }
+    ]
 }
 ```
 
@@ -60,3 +52,7 @@ customer: {
 | `customerSelectLimit` | integer | No | Set the maximum number of customers that can be selected for a mass action. By default, the number is unlimited. |
 | `displayIframe` | boolean | No | Indicates whether an iFrame will be displayed at the relative path. The default value is `true`. [Mass actions without iFrames](../../extension-points/index.md#mass-actions-without-iframes) provides additional details. |
 | `timeout` | integer | No | Only relevant when `displayIframe` is set to `false`. Timeout by seconds to the request sent to application. Default value is 10 seconds. |
+
+## Sample code
+
+The Adobe Commerce Extensibility Code Samples repository demonstrates how to customize [customer mass actions](https://github.com/adobe/adobe-commerce-samples/tree/main/admin-ui-sdk/customer/custom-mass-action).

src/pages/admin-ui-sdk/extension-points/index.md

@@ -77,3 +77,25 @@ The application can access details of the failed request using the `GET V1/admin
 
 - Use bulk update in Commerce to avoid inconsistency issues in case of failures.
 - Event and REST API responses contain the list of selected IDs for a request. It is the application's responsibility to monitor updates or failures in Commerce.
+
+## Migrate your extension point from version 1.x to 2.0
+
+Perform the following steps to update your extension points from Admin UI SDK 1.x to 2.0.
+
+### In your app on App Builder
+
+1. Create a [new runtime action](../app-registration.md#create-a-registration-runtime-action) under `actions/registration/index.js`. Use the updated example customization shown in the documentation for your extension point as a guide.Refer to the provided samples to create a new runtime action in your app.
+
+1. Modify the [`app.config.yaml` file](../app-registration.md#update-the-appconfigyaml-file) to include the registration attached to the admin-ui-sdk package.
+
+1. Remove all content from the methods in the [`ExtensionRegistration` class](../app-registration.md#add-an-extensionregistration-component) to prepare for the new version.
+
+1. [Deploy and publish](../publish.md) your app for testing.
+
+### In the Commerce instance
+
+Clear the cache in your Commerce instance to ensure all changes take effect properly by running the following command:
+
+```bash
+bin/magento cache:clean
+```