Merge pull request #268 from asalloum5/update-doc

Fix some info in the doc and add missing parts for Admin UI SDK

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,13 +75,14 @@ Create an `ExtensionRegistration` React component that registers the menu config
       await register({
         id: extensionId,
         methods: {
-          ...
         }
       }
     )
    }
    ```
 
+   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
@@ -96,14 +97,14 @@ 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>
 ```
 

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

@@ -10,7 +10,9 @@ 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.
 
@@ -44,22 +46,27 @@ bannerNotification: {
 }
 ```
 
-## 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.
 
@@ -77,10 +84,14 @@ bannerNotification: {
 }
 ```
 
-## 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

@@ -118,3 +118,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

@@ -60,3 +60,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/menu.md

@@ -12,6 +12,8 @@ The `menu` extension point creates a new menu that redirects to the App Builder
 
 When you implement a menu that uses an iFrame, use a [`sharedContext`](./index.md#shared-contexts) to read the IMS token.
 
+Each application is limited to one section and one menu. To implement multiple menus, you must create a separate application for each menu.
+
 ## Example customization
 
 The following example creates the **Apps** > **First App on App Builder** menu option.
@@ -40,11 +42,11 @@ The following example creates the **Apps** > **First App on App Builder** menu o
 
 | Field | Type | Required | Description |
 | --- | --- | --- | --- |
-| `id` | string | Yes | A unique ID to identify the application menu in Adobe Commerce Admin. |
+| `id` | string | Yes | A unique ID to identify the application menu in Adobe Commerce Admin. The input allowed is uppercase and lowercase letters (a-z, A-Z), digits (0-9), forward slash (/), colons (:), and underscores (_). |
 | `isSection` | boolean | No | Indicates whether the menu item is a new section. The default value is `false`. |
 | `parent` | string | No | The parent menu. |
 | `sortOrder` | integer | No | The position of the menu, relative to other menus in the section. A value of `1` indicates the menu will be listed first. If this parameter is not specified, it will be placed randomly.
-| `title`  | string | No | The title to display. |
+| `title`  | string | No | The title to display in the menu bar. For the page title of the menu, check the [page extension point](./page.md). |
 
 ## Sample code
 

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

@@ -1,14 +1,14 @@
 ---
-title: Order get custom fees
+title: Order custom fees
 description: Retrieve custom fees applied to orders in the Adobe Commerce Admin.
 keywords:
   - App Builder
   - Extensibility
 ---
 
-# Order get custom fees
+# Order custom fees
 
-The `order get custom fees` extension point displays one or more customized fees or discounts on the following locations:
+The `order custom fees` extension point displays one or more customized fees or discounts on the following locations:
 
 * The Orders Total section of the Create Order page and related pages in the Admin.
 * Invoice pages in the Admin.
@@ -54,3 +54,7 @@ order: {
 `orderMinimumAmount` | float | No | The minimum amount of the order to apply the fee/discount. Default value: `0`.
 `applyFeeOnLastInvoice` | boolean | No | Whether to apply the fee/discount to the last invoice. If `false`, the fee/discount will be applied to the first invoice. Default value: `false`.
 `applyFeeOnLastCreditmemo` | boolean | No | Whether to refund the fee/discount to the last credit memo. If `false`, the fee/discount will be refunded to the first credit memo. Default value: `true`.
+
+## Sample code
+
+The Adobe Commerce Extensibility Code Samples repository demonstrates how to customize [order custom fees](https://github.com/adobe/adobe-commerce-samples/tree/main/admin-ui-sdk/order/custom-fees).

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

@@ -10,6 +10,7 @@ keywords:
 
 The Adobe Commerce Admin UI SDK enables you to make modifications to the following elements on the **Sales** > **Orders** page in the Adobe Commerce Admin:
 
-* Add custom [columns](grid-columns.md) to the order grid.
-* Create a custom [mass action](mass-action.md).
-* Add a custom [button](view-button.md).
+* Add [custom columns](grid-columns.md) to the order grid.
+* Add [custom mass actions](mass-action.md) to the order grid.
+* Add [custom buttons](view-button.md) to the order grid.
+* Add [custom fees](custom-fees.md) to the order grid.

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

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

src/pages/admin-ui-sdk/installation.md

@@ -43,7 +43,7 @@ This method installs the SDK on a cloud instance.
 1. Update your `composer.json` file:
 
    ```bash
-   composer require "magento/module-commerce-backend-uix": ">=1.0"
+   composer require "magento/commerce-backend-sdk": ">=1.0"
    ```
 
 1. Update dependencies and install the extension:
@@ -55,7 +55,7 @@ This method installs the SDK on a cloud instance.
    The `composer update` command updates all dependencies. If you do not want to update all dependencies at the same time, use this command instead:
 
    ```bash
-   composer update magento/module-commerce-backend-uix
+   composer update magento/commerce-backend-sdk
    ```
 
 1. Commit and push your changes.
@@ -67,7 +67,7 @@ This method installs the SDK on an On-premises instance.
 1. Add the SDK module to the `require` section of the `composer.json` file:
 
    ```bash
-   composer require "magento/module-commerce-backend-uix": ">=1.0"
+   composer require "magento/commerce-backend-sdk": ">=1.0"
    ```
 
 1. Update dependencies and install the extension:
@@ -79,7 +79,7 @@ This method installs the SDK on an On-premises instance.
    The `composer update` command updates all dependencies. If you do not want to update all dependencies at the same time, use this command instead:
 
    ```bash
-   composer update magento/module-commerce-backend-uix
+   composer update magento/commerce-backend-sdk
    ```
 
 1. Upgrade Adobe Commerce:
@@ -88,6 +88,12 @@ This method installs the SDK on an On-premises instance.
    bin/magento setup:upgrade
    ```
 
+1. Refresh indexes:
+
+   ```bash
+   bin/magento indexer:reindex
+   ```
+
 1. Clear the cache:
 
    ```bash
@@ -105,11 +111,11 @@ Use the following procedure to update patch versions of the SDK, such as from V1
 1. Run the following command to update the SDK:
 
    ```bash
-   composer update magento/module-commerce-backend-uix
+   composer update magento/commerce-backend-sdk
    ```
 
 1. Run the following commands to upgrade Adobe Commerce and clear the cache.
 
    ```bash
-   bin/magento setup:upgrade && bin/magento cache:clean
+   bin/magento setup:upgrade && bin/magento indexer:reindex && bin/magento cache:clean
    ```

src/pages/admin-ui-sdk/publish.md

@@ -10,12 +10,24 @@ keywords:
 
 After you have tested your app locally, you are ready to submit your app for approval. Once the app has been approved, it will be available in the Adobe App Registry. The Admin UI SDK can then be able to fetch the information it needs to create the app UI in Adobe Commerce.
 
+## Publish the application
+
 During the testing phase, an administrator of your enterprise organization performs the approvals. At this point, your app is not public.
 
 [Publishing Your First App Builder Application](https://developer.adobe.com/app-builder/docs/getting_started/publish_app/) in the _App Builder Getting Started_ guide describes how to publish your app. Deploy your app to your Production workspace, then use the following steps:
 
+1. Perform all testing. If any changes need to be made to your app, update your code and redeploy. Repeat these steps until you have completed all testing.
+
 1. Submit for publishing approval on your Adobe Developer Console.
 
-1. Your app must be approved by an enterprise organization administrator. Your administrator uses the My Exchange panel in the Developer Console to perform this task. Upon approval, the app is published and available for use by employees within your enterprise organization. Adobe Commerce can now find the app in the App Registry."
+1. Your app must be approved by an enterprise organization administrator. Your administrator uses the [Adobe Exchange Manage panel](https://exchange.adobe.com/manage) to perform this task. Upon approval, the app is published and available for use by employees within your enterprise organization. Adobe Commerce can now find the app in the App Registry.
+
+1. Perform additional testing if needed.
+
+## Update an already published application
+
+To update an already published application, you must revoke it and go through the approval process again.
+
+1. Ask an enterprise organization administrator to revoke your published application in the [Adobe Exchange Manage panel](https://exchange.adobe.com/manage). Note that once revoked, your application will no longer be public.
 
-1. Perform all testing. If any changes need to be made to your app, ask the administrator to reject the app within the My Exchange utility. Update your code and resubmit your app for approval. Repeat these steps until you have completed all testing.
+1. Deploy new changes to your application in the Production workspace and follow the same steps to publish the application.

src/pages/admin-ui-sdk/troubleshooting.md

@@ -38,6 +38,12 @@ In this comprehensive troubleshooting guide, we'll help you navigate through com
 
 *  **The latest changes are not correctly deployed and published.** Make sure you deploy the latest changes using  the `aio app deploy` command in the correct `org/project/workspace`.
 
+* Check the `system.log` file to ensure the issue related to the Admin UI SDK is detected. Run the following command to check the file:
+
+   ```bash
+   more var/log/system.log | grep -i "Admin UI SDK"
+   ```
+
 ## App menu is missing in the Commerce Admin
 
 It's common to have the App menu missing from the Commerce Admin menu when: