Merge pull request #269 from asalloum5/ui-sdk-2.0

Admin UI SDK 2.0 release, documentation update

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

@@ -83,8 +83,6 @@ Create an `ExtensionRegistration` React component that registers the menu config
 
    The extension ID should be the same as the one defined in the `extension-manifest.json`.
 
-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.
-
 ## Update the `App.js` routing
 
 Add the following route to your `App.js` file to define the correct routing to your app:
@@ -108,6 +106,27 @@ Make sure that your main page is correctly routed to the index. Here is an examp
 </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:
@@ -133,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

@@ -18,30 +18,28 @@ The following example defines success and error messages for multiple mass actio
 
 ```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'
+            }
         ]
-      }
     }
 }
 ```
@@ -72,15 +70,18 @@ The following example defines success and error messages for a custom order view
 
 ```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'
+        }
     ]
-  }
 }
 ```
 

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'
+            }
+        ]
     }
 }
 ```

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'
+        }
+    ]
 }
 ```
 

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
+```

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

@@ -19,23 +19,14 @@ Each application is limited to one section and one menu. To implement multiple m
 The following example creates the **Apps** > **First App on App Builder** menu option.
 
 ```javascript
-      menu: {
-        getItems() {
-          return [
-            {
-              id: `${extensionId}::first`,
-              title: 'First App on App Builder',
-              parent: `${extensionId}::apps`,
-              sortOrder: 1
-            },
-            {
-              id: `${extensionId}::apps`,
-              title: 'Apps',
-              isSection: true
-            }
-          ]
-        }
-      }
+menuItems: [
+    {
+        id: `${extensionId}::first`,
+        title: 'App on App Builder',
+        parent: `${extensionId}::apps`,
+        sortOrder: 1
+    }
+]
 ```
 
 ## Parameters

src/pages/admin-ui-sdk/extension-points/order/custom-fees.md

@@ -22,25 +22,22 @@ The fee amounts are in the base currency of the store.
 The following example enables the display of two fees on the Admin and storefront. The first instance applies a $1.00 fee to all orders. The second instance applies a fee of $5.00 when the order total is $20.00 or more.
 
 ```javascript
-
 order: {
-    getOrderCustomFees() {
-      return [
+    customFees: [
         {
-          id: 'test-fee-1',
-          label: 'Test Fee 1',
-          value: 1.00,
-          applyFeeOnLastCreditMemo: false
+            id: 'test-fee-1',
+            label: 'Test Fee 1',
+            value: 1.00,
+            applyFeeOnLastCreditMemo: false
         },
         {
-          id: 'test-fee-2',
-          label: 'Test Fee 2',
-          value: 5.00,
-          orderMinimumAmount: 20,
-          applyFeeOnLastInvoice: true
+            id: 'test-fee-2',
+            label: 'Test Fee 2',
+            value: 5.00,
+            orderMinimumAmount: 20,
+            applyFeeOnLastInvoice: true
         }
-      ]
-    }
+    ]
 }
 ```
 

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

@@ -18,27 +18,31 @@ You can use the [`aio api-mesh:describe` command](https://developer.adobe.com/gr
 
 ```javascript
 order: {
-    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'
+            }
+        ]
     }
 }
 ```