docs: Separate adding and overriding nav items (#1928)

docs/content/plugins/extending-the-admin-ui/_index.md

@@ -7,7 +7,7 @@ weight: 5
 
 When creating a plugin, you may wish to extend the Admin UI in order to expose a graphical interface to the plugin's functionality.
 
-This is possible by defining [AdminUiExtensions]({{< ref "admin-ui-extension" >}}). 
+This is possible by defining [AdminUiExtensions]({{< ref "admin-ui-extension" >}}).
 
 {{< alert "primary" >}}
 For a complete working example of a Vendure plugin which extends the Admin UI, see the [real-world-vendure Reviews plugin](https://github.com/vendure-ecommerce/real-world-vendure/tree/master/src/plugins/reviews)
@@ -15,7 +15,7 @@ For a complete working example of a Vendure plugin which extends the Admin UI, s
 
 ## How It Works
 
-A UI extension is an [Angular module](https://angular.io/guide/ngmodules) which gets compiled into the Admin UI application bundle by the [`compileUiExtensions`]({{< relref "compile-ui-extensions" >}}) function exported by the `@vendure/ui-devkit` package. Internally, the ui-devkit package makes use of the Angular CLI to compile an optimized set of JavaScript bundles containing your extensions. 
+A UI extension is an [Angular module](https://angular.io/guide/ngmodules) which gets compiled into the Admin UI application bundle by the [`compileUiExtensions`]({{< relref "compile-ui-extensions" >}}) function exported by the `@vendure/ui-devkit` package. Internally, the ui-devkit package makes use of the Angular CLI to compile an optimized set of JavaScript bundles containing your extensions.
 
 ## Use Your Favourite Framework
 
@@ -28,9 +28,9 @@ The Vendure Admin UI is built with Angular, and writing UI extensions in Angular
 
 Angular uses the concept of modules ([NgModules](https://angular.io/guide/ngmodules)) for organizing related code. These modules can be lazily-loaded, which means that the code is not loaded when the app starts, but only later once that code is required. This keeps the main bundle small and improves performance.
 
-When creating your UI extensions, you can set your module to be either `lazy` or `shared`. Shared modules are loaded _eagerly_, i.e. their code is bundled up with the main app and loaded as soon as the app loads. 
+When creating your UI extensions, you can set your module to be either `lazy` or `shared`. Shared modules are loaded _eagerly_, i.e. their code is bundled up with the main app and loaded as soon as the app loads.
 
-As a rule, modules defining new routes should be lazily loaded (so that the code is only loaded once that route is activated), and modules defining [new navigations items]({{< relref "adding-navigation-items" >}}) and [custom form input]({{< relref "custom-form-inputs" >}}) should be set to `shared`.
+As a rule, modules defining new routes should be lazily loaded (so that the code is only loaded once that route is activated), and modules defining [new navigations items]({{< relref "modifying-navigation-items" >}}) and [custom form input]({{< relref "custom-form-inputs" >}}) should be set to `shared`.
 
 ## Dev mode
 

docs/content/plugins/extending-the-admin-ui/bulk-actions/_index.md → docs/content/plugins/extending-the-admin-ui/add-actions-to-pages/_index.md

@@ -1,22 +1,58 @@
 ---
-title: 'Bulk Actions'
-weight: 7
+title: 'Add Actions To Pages'
+weight: 5
 ---
 
-# Bulk Actions
+# Add Actions To Pages
+
+
+## Adding ActionBar buttons
+
+It may not always make sense to navigate to your extension view from the main nav menu. For example, a "product reviews" extension that shows reviews for a particular product. In this case, you can add new buttons to the "ActionBar", which is the horizontal section at the top of each screen containing the primary actions for that view. This is done using the [addActionBarItem function]({{< relref "add-action-bar-item" >}}).
+
+### ActionBar Example
+
+```TypeScript
+import { NgModule } from '@angular/core';
+import { SharedModule, addActionBarItem } from '@vendure/admin-ui/core';
+
+@NgModule({
+  imports: [SharedModule],
+  providers: [
+    addActionBarItem({
+      id: 'product-reviews',
+      label: 'Product reviews',
+      locationId: 'product-detail',
+      buttonStyle: 'outline',
+      routerLink: route => {
+          const id = route.snapshot.params.id;
+          return ['./extensions/reviews', id];
+      },
+      requiresPermission: 'SuperAdmin'
+    }),
+  ],
+})
+export class SharedExtensionModule {}
+```
+
+{{< figure src="./ui-extensions-actionbar.jpg" >}}
+
+In each list or detail view in the app, the ActionBar has a unique `locationId` which is how the app knows in which view to place your button. The complete list of available locations into which you can add new ActionBar can be found in the [ActionBarLocationId docs]({{< relref "action-bar-location-id" >}}).
+
+## Adding Bulk Actions
 
 Certain list views in the Admin UI support bulk actions. There are a default set of bulk actions that are defined by the Admin UI itself (e.g. delete, assign to channels), but using the `@vendure/ui-devit` package
 you are also able to define your own bulk actions.
 
-{{< figure src="./bulk-actions-screenshot.png" >}} 
+{{< figure src="./bulk-actions-screenshot.png" >}}
 
 Use cases for bulk actions include things like:
 
 - Sending multiple products to a 3rd-party localization service
-- Exporting selected products to csv 
+- Exporting selected products to csv
 - Bulk-updating custom field data
 
-## Bulk Action Example
+### Bulk Action Example
 
 A bulk action must be provided to a [ui-extension shared module]({{< relref "extending-the-admin-ui" >}}#lazy-vs-shared-modules) using the [`registerBulkAction` function]({{< relref "register-bulk-action" >}})
 
@@ -28,18 +64,18 @@ import { ModalService, registerBulkAction, SharedModule } from '@vendure/admin-u
   imports: [SharedModule],
   providers: [
     ProductDataTranslationService,
-      
+
     // Here is where we define our bulk action
-    // for sending the selected products to a 3rd-party 
-    // translation API  
+    // for sending the selected products to a 3rd-party
+    // translation API
     registerBulkAction({
       // This tells the Admin UI that this bulk action should be made
-      // available on the product list view.  
+      // available on the product list view.
       location: 'product-list',
       label: 'Send to translation service',
       icon: 'language',
       // Here is the logic that is executed when the bulk action menu item
-      // is clicked.  
+      // is clicked.
       onClick: ({ injector, selection }) => {
         const modalService = injector.get(ModalService);
         const translationService = injector.get(ProductDataTranslationService);
@@ -63,7 +99,7 @@ import { ModalService, registerBulkAction, SharedModule } from '@vendure/admin-u
 export class MyUiExtensionModule {}
 ```
 
-## Conditionally displaying bulk actions
+### Conditionally displaying bulk actions
 
 Sometimes a bulk action only makes sense in certain circumstances. For example, the "assign to channel" action only makes sense when your server has multiple channels set up.
 
@@ -80,7 +116,7 @@ registerBulkAction({
     .userStatus()
     .mapSingle(({ userStatus }) => 1 < userStatus.channels.length)
     .toPromise(),
-  // ...  
+  // ...
 });
 ```
 

docs/content/plugins/extending-the-admin-ui/adding-navigation-items/_index.md → docs/content/plugins/extending-the-admin-ui/modifying-navigation-items/_index.md

@@ -1,5 +1,5 @@
 ---
-title: 'Adding Navigation Items'
+title: 'Modify Navigation Items'
 weight: 5
 ---
 
@@ -7,7 +7,7 @@ weight: 5
 
 ## Extending the NavMenu
 
-Once you have defined some custom routes in a lazy extension module, you need some way for the administrator to access them. For this you will use the [addNavMenuItem]({{< relref "add-nav-menu-item" >}}) and [addNavMenuSection]({{< relref "add-nav-menu-item" >}}) functions. 
+Once you have defined some custom routes in a lazy extension module, you need some way for the administrator to access them. For this you will use the [addNavMenuItem]({{< relref "add-nav-menu-item" >}}) and [addNavMenuSection]({{< relref "add-nav-menu-item" >}}) functions.
 
 Let's add a new section to the Admin UI main nav bar containing a link to the "greeter" module from the [Using Angular]({{< relref "../using-angular" >}}) example:
 
@@ -63,40 +63,7 @@ Running the server will compile our new shared module into the app, and the resu
 
 ## Overriding existing items
 
-It is also possible to override one of the default (built-in) nav menu sections or items. This can be useful for example if you wish to provide a completely different implementation of the product list view. 
+It is also possible to override one of the default (built-in) nav menu sections or items. This can be useful for example if you wish to provide a completely different implementation of the product list view.
 
 This is done by setting the `id` property to that of an existing nav menu section or item.
 
-
-## Adding new ActionBar buttons
-
-It may not always make sense to navigate to your extension view from the main nav menu. For example, a "product reviews" extension that shows reviews for a particular product. In this case, you can add new buttons to the "ActionBar", which is the horizontal section at the top of each screen containing the primary actions for that view. This is done using the [addActionBarItem function]({{< relref "add-action-bar-item" >}}).
-
-Here's an example of how this is done:
-
-```TypeScript
-import { NgModule } from '@angular/core';
-import { SharedModule, addActionBarItem } from '@vendure/admin-ui/core';
-
-@NgModule({
-  imports: [SharedModule],
-  providers: [
-    addActionBarItem({
-      id: 'product-reviews',
-      label: 'Product reviews',
-      locationId: 'product-detail',
-      buttonStyle: 'outline',
-      routerLink: route => {
-          const id = route.snapshot.params.id;
-          return ['./extensions/reviews', id];
-      },
-      requiresPermission: 'SuperAdmin'
-    }),
-  ],
-})
-export class SharedExtensionModule {}
-```
-
-{{< figure src="./ui-extensions-actionbar.jpg" >}}
-
-In each list or detail view in the app, the ActionBar has a unique `locationId` which is how the app knows in which view to place your button. The complete list of available locations into which you can add new ActionBar can be found in the [ActionBarLocationId docs]({{< relref "action-bar-location-id" >}}).

docs/content/plugins/extending-the-admin-ui/using-angular/_index.md

@@ -132,4 +132,4 @@ Now go to the Admin UI app in your browser and log in. You should now be able to
 
 ## Next Steps
 
-Now you have created your new route, you need a way for your admin to access it. See [Adding Navigation Items]({{< relref "../adding-navigation-items" >}})
+Now you have created your new route, you need a way for your admin to access it. See [Adding Navigation Items]({{< relref "../modifying-navigation-items" >}})

docs/content/plugins/extending-the-admin-ui/using-other-frameworks/_index.md

@@ -54,14 +54,14 @@ import { hostExternalFrame } from '@vendure/admin-ui/core';
     RouterModule.forChild([
       hostExternalFrame({
         path: '',
-          
+
         // You can also use parameters which allow the app
         // to have dynamic routing, e.g.
         // path: ':slug'
         // Then you can use the getActivatedRoute() function from the
         // UiDevkitClient in order to access the value of the "slug"
         // parameter.
-          
+
         breadcrumbLabel: 'React App',
         // This is the URL to the compiled React app index.
         // The next step will explain the "assets/react-app" path.
@@ -105,10 +105,10 @@ export const config: VendureConfig = {
             {
               // We want to lazy-load our extension...
               type: 'lazy',
-              // ...when the `/admin/extensions/react-ui` 
-              // route is activated 
+              // ...when the `/admin/extensions/react-ui`
+              // route is activated
               route: 'react-ui',
-              // The filename of the extension module 
+              // The filename of the extension module
               // relative to the `extensionPath` above
               ngModuleFileName: 'react-extension.module.ts',
               // The name of the extension module class exported
@@ -213,7 +213,7 @@ const disableProduct = (id: string) => {
 
 If your extension does not have a build step, you can still include the UiDevkitClient as a local resource, which will expose a `VendureUiClient` global object:
 
-```HTML 
+```HTML
 <!-- src/ui-extension/plain-js-app/index.html -->
 <head>
   <script src="../devkit/ui-devkit.js"></script>
@@ -231,10 +231,10 @@ If your extension does not have a build step, you can still include the UiDevkit
          message: 'Updated Product',
        });
     })
-  } 
+  }
 </script>
 ```
 
 ## Next Steps
 
-Now you have created your extension, you need a way for your admin to access it. See [Adding Navigation Items]({{< relref "../adding-navigation-items" >}})
+Now you have created your extension, you need a way for your admin to access it. See [Adding Navigation Items]({{< relref "../modifying-navigation-items" >}})