[apps] added documentation and screenshots for reusable modules

config/_default/menus/main.en.yaml

@@ -2913,6 +2913,11 @@ menu:
       parent: app_builder_components
       identifier: app_builder_tables
       weight: 703
+    - name: Reusable Modules
+      url: actions/app_builder/components/reusable_modules/
+      parent: app_builder_components
+      identifier: app_builder_reusable_modules
+      weight: 704
     - name: JavaScript Expressions
       url: actions/app_builder/expressions/
       parent: app_builder

content/en/actions/app_builder/components/reusable_modules.md

@@ -0,0 +1,69 @@
+---
+title: Reusable Modules
+description: Save and reuse groups of components and queries across multiple App Builder applications as modular templates.
+disable_toc: false
+aliases:
+- /service_management/app_builder/reusable_modules/
+- /service_management/app_builder/components/reusable_modules
+further_reading:
+- link: "/service_management/app_builder/components/"
+  tag: "Documentation"
+  text: "Components"
+- link: "/service_management/app_builder/build/"
+  tag: "Documentation"
+  text: "Build Apps"
+- link: "/service_management/app_builder/queries/"
+  tag: "Documentation"
+  text: "Queries"
+---
+
+Use the _Reusable Modules_ feature to save groups of components and queries as templates for reuse across your App Builder applications. Modules automatically include all dependencies to ensure your components function correctly.
+
+<div class="alert alert-info">Default modules are read-only. To modify a default module, duplicate it first.</div>
+
+## Create a reusable module
+
+There are three ways to create a reusable module:
+
+### From the Components panel
+1. Click **Create Module** from the component panel menu.
+   {{< img src="service_management/app_builder/app-builder-reusable-module-component-panel.png" alt="Create Module button in the Reusable Modules section of the Components panel" style="width:65%;">}}
+
+### From a component's instance name tab
+1. Select a component on the app canvas.
+1. Click the **Create Module** icon from the component instance name.
+   {{< img src="service_management/app_builder/app-builder-reusable-module-name-tab.png" alt="Create Module option in the component instance name tab" style="width:65%;">}}
+
+### From selected components
+1. On the app canvas, select multiple components you want to include in your module.
+1. In the side panel that appears, click **Create Module**.
+   {{< img src="service_management/app_builder/app-builder-reusable-modules-sidepanel.png" alt="Create Module option in the side panel after selecting multiple components" style="width:65%;">}}
+
+## Configure your module
+
+When creating your module, the module editor allows you to preview the components and queries, add a name and description, and review dependencies before saving.
+
+{{< img src="service_management/app_builder/app-builder-reusable-module-preview.png" alt="Module editor showing preview of components and queries with name and description fields" style="width:100%;">}}
+
+1. Enter a name and description for your module.
+1. Review the components and queries that are automatically included. The system includes all nested query dependencies.
+1. Click **Save Module**.
+
+## Use a reusable module in your app
+1. Go to the **Reusable Modules** section.
+1. Drag the module to the canvas or click to add it. The components and queries are copied into your app.
+
+
+## Delete a module
+1. Go to the **Reusable Modules** section.
+1. Click the edit icon next to the module you want to delete.
+1. In the module editor, click **Delete Module**.
+
+## Further reading
+
+{{< partial name="whats-next/whats-next.html" >}}
+
+<br>Do you have questions or feedback? Join the **#app-builder** channel on the [Datadog Community Slack][2].
+
+[1]: https://app.datadoghq.com/app-builder/apps/list
+[2]: https://chat.datadoghq.com/