feat(admin-ui): Expose provider for defining page tabs

packages/admin-ui/src/lib/catalog/src/catalog.module.ts

@@ -144,12 +144,14 @@ export class CatalogModule {
         bulkActionRegistryService.registerBulkAction(deleteStockLocationsBulkAction);
 
         pageService.registerPageTab({
+            priority: 0,
             location: 'product-list',
             tab: _('catalog.products'),
             route: '',
             component: ProductListComponent,
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'product-detail',
             tab: _('catalog.products'),
             route: '',
@@ -166,12 +168,14 @@ export class CatalogModule {
             }),
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'product-list',
             tab: _('catalog.product-variants'),
             route: 'variants',
             component: ProductVariantListComponent,
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'stock-location-detail',
             tab: _('catalog.stock-location'),
             route: '',
@@ -188,12 +192,14 @@ export class CatalogModule {
             }),
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'product-list',
             tab: _('catalog.stock-locations'),
             route: 'stock-locations',
             component: StockLocationListComponent,
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'product-variant-detail',
             tab: _('catalog.product-variants'),
             route: '',
@@ -214,12 +220,14 @@ export class CatalogModule {
             }),
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'facet-list',
             tab: _('catalog.facets'),
             route: '',
             component: FacetListComponent,
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'facet-detail',
             tab: _('catalog.facet'),
             route: '',
@@ -236,12 +244,14 @@ export class CatalogModule {
             }),
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'collection-list',
             tab: _('catalog.collections'),
             route: '',
             component: CollectionListComponent,
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'collection-detail',
             tab: _('catalog.collection'),
             route: '',
@@ -258,12 +268,14 @@ export class CatalogModule {
             }),
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'asset-list',
             tab: _('catalog.assets'),
             route: '',
             component: AssetListComponent,
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'asset-detail',
             tab: _('catalog.asset'),
             route: '',

packages/admin-ui/src/lib/core/src/providers/page/page.service.ts

@@ -1,18 +1,87 @@
-import { Injectable, Type } from '@angular/core';
+import { APP_INITIALIZER, Injectable, Provider, Type } from '@angular/core';
 import { Route } from '@angular/router';
 import { map } from 'rxjs/operators';
-import { BaseDetailComponent, detailComponentWithResolver } from '../../common/base-detail.component';
+import { detailComponentWithResolver } from '../../common/base-detail.component';
 import { PageLocationId } from '../../common/component-registry-types';
 import { CanDeactivateDetailGuard } from '../../shared/providers/routing/can-deactivate-detail-guard';
 
+/**
+ * @description
+ * The object used to configure a new page tab.
+ *
+ * @docsCategory tabs
+ */
 export interface PageTabConfig {
+    /**
+     * @description
+     * A valid location representing a list or detail page.
+     */
     location: PageLocationId;
+    /**
+     * @description
+     * An optional icon to display in the tab. The icon
+     * should be a valid shape name from the [Clarity Icons](https://core.clarity.design/foundation/icons/shapes/)
+     * set.
+     */
     tabIcon?: string;
+    /**
+     * @description
+     * The route path to the tab. This will be appended to the
+     * route of the parent page.
+     */
     route: string;
+    /**
+     * @description
+     * The name of the tab to display in the UI.
+     */
     tab: string;
+    /**
+     * @description
+     * The priority of the tab. Tabs with a lower priority will be displayed first.
+     */
+    priority?: number;
+    /**
+     * @description
+     * The component to render at the route of the tab.
+     */
     component: Type<any> | ReturnType<typeof detailComponentWithResolver>;
 }
 
+/**
+ * @description
+ * Add a tab to an existing list or detail page.
+ *
+ * @example
+ * ```TypeScript
+ * \@NgModule({
+ *   imports: [SharedModule],
+ *   providers: [
+ *     registerPageTab({
+ *       location: 'product-list',
+ *       tab: 'Deleted Products',
+ *       route: 'deleted',
+ *       component: DeletedProductListComponent,
+ *     }),
+ *   ],
+ * })
+ * export class MyUiExtensionModule {}
+ * ```
+ * @docsCategory tabs
+ */
+export function registerPageTab(config: PageTabConfig): Provider {
+    return {
+        provide: APP_INITIALIZER,
+        multi: true,
+        useFactory: (pageService: PageService) => () => {
+            pageService.registerPageTab({
+                ...config,
+                priority: config.priority || 1,
+            });
+        },
+        deps: [PageService],
+    };
+}
+
 @Injectable({
     providedIn: 'root',
 })
@@ -60,7 +129,7 @@ export class PageService {
     }
 
     getPageTabs(location: PageLocationId): PageTabConfig[] {
-        return this.registry.get(location) || [];
+        return this.registry.get(location)?.sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0)) || [];
     }
 }
 

packages/admin-ui/src/lib/customer/src/customer.module.ts

@@ -65,12 +65,14 @@ export class CustomerModule {
         bulkActionRegistryService.registerBulkAction(removeCustomerGroupMembersBulkAction);
 
         pageService.registerPageTab({
+            priority: 0,
             location: 'customer-list',
             tab: _('customer.customers'),
             route: '',
             component: CustomerListComponent,
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'customer-detail',
             tab: _('customer.customer'),
             route: '',
@@ -89,12 +91,14 @@ export class CustomerModule {
             }),
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'customer-group-list',
             tab: _('customer.customer-groups'),
             route: '',
             component: CustomerGroupListComponent,
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'customer-group-detail',
             tab: _('customer.customer-group'),
             route: '',

packages/admin-ui/src/lib/marketing/src/marketing.module.ts

@@ -38,12 +38,14 @@ export class MarketingModule {
         bulkActionRegistryService.registerBulkAction(deletePromotionsBulkAction);
 
         pageService.registerPageTab({
+            priority: 0,
             location: 'promotion-list',
             tab: _('breadcrumb.promotions'),
             route: '',
             component: PromotionListComponent,
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'promotion-detail',
             tab: _('marketing.promotion'),
             route: '',

packages/admin-ui/src/lib/order/src/order.module.ts

@@ -104,12 +104,14 @@ import { OrderDataTableComponent } from './components/order-data-table/order-dat
 export class OrderModule {
     constructor(private pageService: PageService) {
         pageService.registerPageTab({
+            priority: 0,
             location: 'order-list',
             tab: _('order.orders'),
             route: '',
             component: OrderListComponent,
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'order-detail',
             tab: _('order.order'),
             route: '',
@@ -142,6 +144,7 @@ export class OrderModule {
             }),
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'draft-order-detail',
             tab: _('order.order'),
             route: '',

packages/admin-ui/src/lib/settings/src/components/tax-rate-detail/tax-rate-detail.component.ts

@@ -1,20 +1,14 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
-import { FormBuilder, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { FormBuilder, Validators } from '@angular/forms';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
-    BaseDetailComponent,
     CreateTaxRateInput,
     CustomerGroup,
-    CustomFieldConfig,
     DataService,
     GetTaxRateDetailDocument,
-    GetZoneListQuery,
-    ItemOf,
     LanguageCode,
     NotificationService,
     Permission,
-    ServerConfigService,
     TAX_RATE_FRAGMENT,
     TaxCategoryFragment,
     TaxRate,

packages/admin-ui/src/lib/settings/src/settings.module.ts

@@ -147,12 +147,14 @@ export class SettingsModule {
         bulkActionRegistryService.registerBulkAction(removeZoneMembersBulkAction);
 
         pageService.registerPageTab({
+            priority: 0,
             location: 'seller-list',
             tab: _('breadcrumb.sellers'),
             route: '',
             component: SellerListComponent,
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'seller-detail',
             tab: _('settings.seller'),
             route: '',
@@ -169,12 +171,14 @@ export class SettingsModule {
             }),
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'channel-list',
             tab: _('breadcrumb.channels'),
             route: '',
             component: ChannelListComponent,
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'channel-detail',
             tab: _('settings.channel'),
             route: '',
@@ -195,12 +199,14 @@ export class SettingsModule {
             }),
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'administrator-list',
             tab: _('breadcrumb.administrators'),
             route: '',
             component: AdministratorListComponent,
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'administrator-detail',
             tab: _('settings.administrator'),
             route: '',
@@ -219,12 +225,14 @@ export class SettingsModule {
             }),
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'role-list',
             tab: _('breadcrumb.roles'),
             route: '',
             component: RoleListComponent,
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'role-detail',
             tab: _('settings.role'),
             route: '',
@@ -241,12 +249,14 @@ export class SettingsModule {
             }),
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'shipping-method-list',
             tab: _('breadcrumb.shipping-methods'),
             route: '',
             component: ShippingMethodListComponent,
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'shipping-method-detail',
             tab: _('settings.shipping-method'),
             route: '',
@@ -263,18 +273,21 @@ export class SettingsModule {
             }),
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'shipping-method-list',
             tab: _('settings.test-shipping-methods'),
             route: 'test',
             component: TestShippingMethodsComponent,
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'payment-method-list',
             tab: _('breadcrumb.payment-methods'),
             route: '',
             component: PaymentMethodListComponent,
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'payment-method-detail',
             tab: _('settings.payment-method'),
             route: '',
@@ -291,12 +304,14 @@ export class SettingsModule {
             }),
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'tax-category-list',
             tab: _('breadcrumb.tax-categories'),
             route: '',
             component: TaxCategoryListComponent,
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'tax-category-detail',
             tab: _('settings.tax-category'),
             route: '',
@@ -313,12 +328,14 @@ export class SettingsModule {
             }),
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'tax-rate-list',
             tab: _('breadcrumb.tax-rates'),
             route: '',
             component: TaxRateListComponent,
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'tax-rate-detail',
             tab: _('settings.tax-rate'),
             route: '',
@@ -335,12 +352,14 @@ export class SettingsModule {
             }),
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'country-list',
             tab: _('breadcrumb.countries'),
             route: '',
             component: CountryListComponent,
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'country-detail',
             tab: _('settings.country'),
             route: '',
@@ -357,12 +376,14 @@ export class SettingsModule {
             }),
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'zone-list',
             tab: _('breadcrumb.zones'),
             route: '',
             component: ZoneListComponent,
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'zone-detail',
             tab: _('settings.zone'),
             route: '',
@@ -379,12 +400,14 @@ export class SettingsModule {
             }),
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'global-setting-detail',
             tab: _('breadcrumb.global-settings'),
             route: '',
             component: GlobalSettingsComponent,
         });
         pageService.registerPageTab({
+            priority: 0,
             location: 'profile',
             tab: _('breadcrumb.profile'),
             route: '',