fix(admin-ui): Fix missing product variant list tab

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

@@ -178,7 +178,7 @@ export class CatalogModule {
         });
         pageService.registerPageTab({
             priority: 0,
-            location: 'product-variant-list',
+            location: 'product-list',
             tab: _('catalog.product-variants'),
             route: 'variants',
             component: ProductVariantListComponent,

packages/admin-ui/src/lib/catalog/src/components/product-list/product-list.component.ts

@@ -18,7 +18,7 @@ import { delay, switchMap } from 'rxjs/operators';
     selector: 'vdr-products-list',
     templateUrl: './product-list.component.html',
     styleUrls: ['./product-list.component.scss'],
-    standalone: false
+    standalone: false,
 })
 export class ProductListComponent
     extends TypedBaseListComponent<typeof ProductListQueryDocument, 'products'>
@@ -26,7 +26,7 @@ export class ProductListComponent
 {
     pendingSearchIndexUpdates = 0;
     dataTableListId = 'product-list';
-    pageLocationId = 'product-list';
+    pageLocationId = 'product-list' as const;
     readonly customFields = this.getCustomFieldConfig('Product');
     readonly filters = this.createFilterCollection()
         .addIdFilter()

packages/admin-ui/src/lib/catalog/src/components/product-variant-list/product-variant-list.component.html

@@ -1,9 +1,17 @@
-<vdr-page-block *ngIf="!hideLanguageSelect">
-    <vdr-language-selector
-        [availableLanguageCodes]="availableLanguages$ | async"
-        [currentLanguageCode]="contentLanguage$ | async"
-        (languageCodeChange)="setLanguage($event)"
-    ></vdr-language-selector>
+<vdr-page-block>
+    <vdr-action-bar>
+        <vdr-ab-left>
+            <vdr-language-selector *ngIf="!hideLanguageSelect"
+                                   [availableLanguageCodes]="availableLanguages$ | async"
+                                   [currentLanguageCode]="contentLanguage$ | async"
+                                   (languageCodeChange)="setLanguage($event)"
+            ></vdr-language-selector>
+        </vdr-ab-left>
+        <vdr-ab-right>
+            <vdr-action-bar-items [locationId]="pageLocationId" />
+            <vdr-action-bar-dropdown-menu [locationId]="pageLocationId" />
+        </vdr-ab-right>
+    </vdr-action-bar>
 </vdr-page-block>
 <vdr-data-table-2
     class="mt-2"
@@ -68,9 +76,11 @@
             <a
                 class="button-ghost"
                 [routerLink]="['/catalog/products', variant.productId, 'variants', variant.id]"
-                ><span>{{ variant.name }}</span
-                ><clr-icon shape="arrow right"
-            /></a>
+            ><span>{{ variant.name }}</span
+            >
+                <clr-icon shape="arrow right"
+                />
+            </a>
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column [heading]="'catalog.sku' | translate" id="sku" [sort]="sorts.get('sku')">
@@ -81,11 +91,13 @@
     <vdr-dt2-column [heading]="'common.enabled' | translate" id="enabled">
         <ng-template let-variant="item">
             <vdr-chip *ngIf="variant.enabled" colorType="success">{{
-                'common.enabled' | translate
-            }}</vdr-chip>
+                    'common.enabled' | translate
+                }}
+            </vdr-chip>
             <vdr-chip *ngIf="!variant.enabled" colorType="warning">{{
-                'common.disabled' | translate
-            }}</vdr-chip>
+                    'common.disabled' | translate
+                }}
+            </vdr-chip>
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
@@ -97,7 +109,8 @@
             {{ variant.price | localeCurrency : variant.currencyCode }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.price-with-tax' | translate" id="price-with-tax" [sort]="sorts.get('priceWithTax')">
+    <vdr-dt2-column [heading]="'common.price-with-tax' | translate" id="price-with-tax"
+                    [sort]="sorts.get('priceWithTax')">
         <ng-template let-variant="item">
             {{ variant.priceWithTax | localeCurrency : variant.currencyCode }}
         </ng-template>
@@ -108,10 +121,11 @@
             <vdr-chip *ngFor="let stockLevel of variant.stockLevels" [title]="stockLevel.stockLocation?.name">
                 <div class="flex center">
                     <div>
-                        {{ stockLevel.stockOnHand
+                        {{
+                            stockLevel.stockOnHand
                         }}<span class="ml-1" *ngIf="stockLevel.stockAllocated"
-                            >({{ stockLevel.stockAllocated }} allocated)</span
-                        >
+                    >({{ stockLevel.stockAllocated }} allocated)</span
+                    >
                     </div>
                 </div>
             </vdr-chip>

packages/admin-ui/src/lib/catalog/src/components/product-variant-list/product-variant-list.component.ts

@@ -12,7 +12,7 @@ import {
     selector: 'vdr-product-variant-list',
     templateUrl: './product-variant-list.component.html',
     styleUrls: ['./product-variant-list.component.scss'],
-    standalone: false
+    standalone: false,
 })
 export class ProductVariantListComponent
     extends TypedBaseListComponent<typeof ProductVariantListQueryDocument, 'productVariants'>
@@ -20,6 +20,7 @@ export class ProductVariantListComponent
 {
     @Input() productId?: string;
     @Input() hideLanguageSelect = false;
+    pageLocationId = 'product-variant-list' as const;
     @Input() dataTableId: DataTableLocationId | undefined;
     readonly customFields = this.getCustomFieldConfig('ProductVariant');
     readonly filters = this.createFilterCollection()