Merge pull request AdobeDocs#349 from AdobeDocs/webhooks2

Add ACCS webhooks Admin docs

Author: keharper

src/data/navigation/sections/webhooks.js

@@ -7,6 +7,10 @@ module.exports = [
       title: "Use cases",
       path: "webhooks/use-cases.md"
     },
+    {
+      title: "Manage webhooks from the Admin",
+      path: "/webhooks/create-webhooks.md"
+    },
     {
       title: "Configure hooks",
       path: "/webhooks/hooks.md"

src/pages/_images/webhooks/edit-hook-settings.png

@@ -0,0 +1,118 @@
+---
+title: Create events from the Admin
+description: Learn about managing webhook subscriptions through the Admin in Adobe Commerce Cloud Service.
+keywords:
+  - Extensibility
+noIndex: true
+---
+
+# Create events from the Admin
+
+<InlineAlert variant="info" slots="text1" />
+
+This feature is available only in Adobe Commerce as a Cloud Service (ACCS).
+
+Adobe Commerce webhooks allow developers to trigger calls to external systems synchronously when an Adobe Commerce event occurs. In addition to the [webhooks REST endpoints](https://developer.adobe.com/commerce/services/cloud/guides/rest/webhooks/) available for subscribing and unsubscribing webhooks, Commerce Cloud Service supports configuring webhooks through the Admin.
+
+## View registered hooks
+
+In the Admin, select **System** > **Webhooks** > **Webhooks Subscriptions** to display the _Webhooks_ grid page.
+
+![Webhooks grid page](../_images/webhooks/webhooks-subscriptions-grid.png)
+
+The rows of this grid show configuration settings for all registered hooks, both active and inactive.
+
+## Create a new hook
+
+Click **Add New Webhook** from the grid page to display the form for creating a new hook.
+
+![New webhook](../_images/webhooks/new-hook-settings.png)
+
+The **Hook settings** configuration panel contains the following fields:
+
+Field | Description
+--- | ---
+**Webhook Method** | Select one of the supported Commerce webhook names from the dropdown.
+**Webhook Type** | Select whether to run the webhook `before` or `after` the original action.
+**Batch Name** | A unique name for the batch. Use a descriptive name that encompasses all the hooks in the batch. The name must contain English alphanumeric characters and underscores (_) only.
+**Batch Order** | A sort order for batch execution. The provided value overwrites the batch order set for hooks within the same batch that were configured earlier. A default value of 0 is saved if no value is set.
+**Hook Name** |  A name that must be unique within a batch. The name must contain English alphanumeric characters and underscores (_) only.
+**Hook Priority** | The priority of the merging hook results in the batch. The priority is treated as 0 if a value is not set.
+**URL** | The HTTP endpoint to send the request for processing.
+**Timeout** | A hard timeout limit (milliseconds) for the request. Requests exceeding this timeout are aborted and logged. The default value of 0 indicates there is no timeout limit.
+**Soft timeout** | A soft timeout limit (milliseconds) for the request. Requests exceeding this timeout are logged for debugging purposes.
+**Cache TTL** | The cache time-to-live (in seconds) for requests with the same URL, body, and headers. If this attribute is not specified, or if the value set to `0`, the response is not cached.
+**Fallback error message** | The error message to display when the hook fails.
+**Required** | Specifies whether hook execution is required or optional. When set to `Optional`, if the hook fails to execute, the failure is logged and subsequent hooks continue to be processed. When set to `Required`, a failure terminates the process.
+**Active** | Indicates whether to skip a removed hook during the batch execution.
+**Method** | The HTTP method (POST, PUT, GET, or DELETE) used to invoke the hook.
+
+You must define at least one hook field, and you will usually need to define request headers. You can also optionally define rules that allow the webhook to run in limited situations. Continue defining these entities and click **Save** when you have fully defined a new webhook.
+
+### Configure developer console OAuth
+
+The **Developer Console OAuth** configuration panel provides the ability to configure the details of an OAuth credential from the Adobe Developer Console. If configured and enabled, an IMS token will be generated using the credential details and passed in an Authorization header with the hook request.
+
+See [Setting up the OAuth Server-to-Server credential](https://developer.adobe.com/developer-console/docs/guides/authentication/ServerToServerAuthentication/implementation/#setting-up-the-oauth-server-to-server-credential) for information on creating an OAuth credential in the Adobe Developer Console.
+
+Field | Description
+--- | ---
+**Enabled** | Indicates whether to use OAuth credential details to generate an Authorization token for hook requests.
+**Client ID** | The Client ID for the OAuth credential.
+**Client Secret** | The Client Secret for the OAuth credential.
+**Organization ID** | The Organization ID for the OAuth credential.
+
+### Configure hook fields
+
+The **Hook Fields** configuration panel defines the payload of a webhook request. [Define the hook body](./hooks.md#define-the-hook-body) describes how to construct the payload.
+
+Field | Description
+--- | ---
+**Name** | The path to the field to include in the transmitted webhook, such as `product.sku`.
+**Source** | The path to the value in the default webhook. If not set, the **Name** value is used.
+**Active** | Indicates whether to include the field in the payload.
+
+### Configure hook headers
+
+The **Hook Headers** configuration panel defines the headers of a webhook request. [Define request headers](./hooks.md#define-request-headers) describes how to send authorization tokens and other connection parameters.
+
+Field | Description
+--- | ---
+**Name** | The header name, in the same form as it will be sent. For example, `Authorization`.
+**Value** | The value of the header, such as `Bearer: <token>`.
+**Active** | Set to **No** to remove the header from the request.
+
+### Configure hook rules
+
+The **Hook Rules** configuration panel allows you to define rules that trigger a webhook when certain conditions are met. [Create conditional webhooks](./conditional-webhooks.md) describes how to configure hook rules.
+
+Field | Description
+--- | ---
+**Field** | The event field to be evaluated. For nested fields, use the dot-separated format, such as `data.order.product.id`.
+**Value** | The value to be compared.
+**Operator** | Defines which comparison operator to use. Examples include `equal`, `notEqual`, and `regex`.
+**Active** | Set to **No** to remove the rule from the request.
+
+## Webhook grid actions
+
+Actions for each hook in the **Webhooks** grid are available in the **Action** column.
+
+### Edit or delete an existing hook
+
+Click **Select** > **Edit** in the **Action** column to display a form for editing an existing hook's configuration.
+
+![Edit hook settings](../_images/webhooks/edit-hook-settings.png)
+
+Click **Select** > **Delete** in the **Action** column to delete an existing hook.
+
+### Testing a webhook
+
+Click **Select** > **Test Webhook** in the **Action** column for a hook to open a page for testing execution of all hooks configured for the same webhook method and webhook type.
+
+![Test webhook](../_images/webhooks/test-webhook.png)
+
+In the **Request payload** textarea, input a webhook request payload in JSON format. After clicking the **Run Webhook** button, a banner will show at the top of the page indicating if webhook execution was successful or if an exception occurred. In the **Resolved payload** section, a JSON object showing the payload returned by the webhook after processing hook response operations is displayed.
+
+### Accessing hook logs
+
+Click **Select** > **Show Logs** in the **Action** column to open a grid displaying logging activity. The grid resembles the [Webhook Logs grid](./responses.md#database-logging), but displays activity for the one specific hook only.

src/pages/_images/webhooks/new-hook-settings.png

@@ -94,7 +94,7 @@ Point to the `AddProductToCartResolver` class in the `header.resolver` attribute
 
 The payload for a hook can be large, but in many cases you only need to transmit a few fields to perform the desired operation on the remote server.
 
-Defining the hook requires knowledge of the structure of the original event and the requirements of the remote call. You can use the `bin/magento [webhooks:info](commands.md#display-the-payload-of-a-webhook) <webhook-name>` command to return the default payload of a webhook.
+Defining the hook requires knowledge of the structure of the original event and the requirements of the remote call. You can use the `bin/magento webhooks:info <webhook-name>` [command](./commands.md#display-the-payload-of-a-webhook) to return the default payload of a webhook.
 
 Imagine that the command returned a Commerce webhook with the following structure: