fix(admin-ui): Give all data table columns immutable ids

Previously the ID was based on the heading, which changed when updating the current
display language.

packages/admin-ui/src/lib/catalog/src/components/collection-contents/collection-contents.component.html

@@ -19,30 +19,30 @@
             [searchTermControl]="filterTermControl"
             [searchTermPlaceholder]="'catalog.filter-by-name' | translate"
         />
-        <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">
+        <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true">
             <ng-template let-variant="item">
                 {{ variant.id }}
             </ng-template>
         </vdr-dt2-column>
-        <vdr-dt2-column [heading]="'common.created-at' | translate" [hiddenByDefault]="true">
+        <vdr-dt2-column [heading]="'common.created-at' | translate" id="created-at" [hiddenByDefault]="true">
             <ng-template let-variant="item">
                 {{ variant.createdAt | localeDate : 'short' }}
             </ng-template>
         </vdr-dt2-column>
-        <vdr-dt2-column [heading]="'common.updated-at' | translate" [hiddenByDefault]="true">
+        <vdr-dt2-column [heading]="'common.updated-at' | translate" id="updated-at" [hiddenByDefault]="true">
             <ng-template let-variant="item">
                 {{ variant.updatedAt | localeDate : 'short' }}
             </ng-template>
         </vdr-dt2-column>
-        <vdr-dt2-column [heading]="'common.name' | translate" [optional]="false">
+        <vdr-dt2-column [heading]="'common.name' | translate" id="name" [optional]="false">
             <ng-template let-variant="item">
                 <a class="button-ghost" [routerLink]="['/catalog/inventory', variant.productId]"
                     ><span>{{ variant.name }}</span
                     ><clr-icon shape="arrow right"
                 /></a>
             </ng-template>
         </vdr-dt2-column>
-        <vdr-dt2-column [heading]="'catalog.sku' | translate" [optional]="false">
+        <vdr-dt2-column [heading]="'catalog.sku' | translate" id="sku" [optional]="false">
             <ng-template let-variant="item">
                 {{ variant.sku }}
             </ng-template>

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

@@ -45,13 +45,13 @@
                 [searchTermControl]="searchTermControl"
                 [searchTermPlaceholder]="'common.search-by-name' | translate"
             ></vdr-dt2-search>
-            <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">
+            <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true">
                 <ng-template let-collection="item">
                     {{ collection.id }}
                 </ng-template>
             </vdr-dt2-column>
             <vdr-dt2-column
-                [heading]="'common.created-at' | translate"
+                [heading]="'common.created-at' | translate" id="created-at"
                 [hiddenByDefault]="true"
                 [sort]="sorts.get('createdAt')"
             >
@@ -60,7 +60,7 @@
                 </ng-template>
             </vdr-dt2-column>
             <vdr-dt2-column
-                [heading]="'common.updated-at' | translate"
+                [heading]="'common.updated-at' | translate" id="updated-at"
                 [hiddenByDefault]="true"
                 [sort]="sorts.get('updatedAt')"
             >
@@ -69,7 +69,7 @@
                 </ng-template>
             </vdr-dt2-column>
             <vdr-dt2-column
-                [heading]="'common.position' | translate"
+                [heading]="'common.position' | translate" id="position"
                 [hiddenByDefault]="true"
                 [sort]="sorts.get('position')"
             >
@@ -78,7 +78,7 @@
                 </ng-template>
             </vdr-dt2-column>
             <vdr-dt2-column
-                [heading]="'common.name' | translate"
+                [heading]="'common.name' | translate" id="name"
                 [optional]="false"
                 [sort]="sorts.get('name')"
             >
@@ -104,7 +104,7 @@
                     </a>
                 </ng-template>
             </vdr-dt2-column>
-            <vdr-dt2-column [heading]="'common.breadcrumb' | translate">
+            <vdr-dt2-column [heading]="'common.breadcrumb' | translate" id="breadcrumb">
                 <ng-template let-collection="item">
                     <div class="breadcrumb">
                         <ng-container *ngIf="collection | collectionBreadcrumb as breadcrumbs">
@@ -118,12 +118,12 @@
                     </div>
                 </ng-template>
             </vdr-dt2-column>
-            <vdr-dt2-column [heading]="'common.slug' | translate" [sort]="sorts.get('slug')">
+            <vdr-dt2-column [heading]="'common.slug' | translate" id="slug" [sort]="sorts.get('slug')">
                 <ng-template let-collection="item">
                     {{ collection.slug }}
                 </ng-template>
             </vdr-dt2-column>
-            <vdr-dt2-column [heading]="'common.visibility' | translate">
+            <vdr-dt2-column [heading]="'common.visibility' | translate" id="visibility">
                 <ng-template let-collection="item">
                     <vdr-chip *ngIf="collection.isPrivate" colorType="warning">{{
                         'common.private' | translate
@@ -133,7 +133,7 @@
                         }}</vdr-chip>
                 </ng-template>
             </vdr-dt2-column>
-            <vdr-dt2-column [heading]="'common.view-contents' | translate" [optional]="false">
+            <vdr-dt2-column [heading]="'common.view-contents' | translate" id="view-contents" [optional]="false">
                 <ng-template let-collection="item">
                     <a
                         class="button-small bg-weight-150"

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

@@ -40,13 +40,13 @@
         [searchTermControl]="searchTermControl"
         [searchTermPlaceholder]="'catalog.filter-by-name' | translate"
     ></vdr-dt2-search>
-    <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true" [sort]="sorts.get('id')">
+    <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true" [sort]="sorts.get('id')">
         <ng-template let-facet="item">
             {{ facet.id }}
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.created-at' | translate"
+        [heading]="'common.created-at' | translate" id="created-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('createdAt')"
     >
@@ -55,28 +55,28 @@
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.updated-at' | translate"
+        [heading]="'common.updated-at' | translate" id="updated-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('updatedAt')"
     >
         <ng-template let-facet="item">
             {{ facet.updatedAt | localeDate : 'short' }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.name' | translate" [optional]="false" [sort]="sorts.get('name')">
+    <vdr-dt2-column [heading]="'common.name' | translate" id="name" [optional]="false" [sort]="sorts.get('name')">
         <ng-template let-facet="item">
             <a class="button-ghost" [routerLink]="['./', facet.id]"
                 ><span>{{ facet.name }}</span>
                 <clr-icon shape="arrow right"></clr-icon>
             </a>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.code' | translate">
+    <vdr-dt2-column [heading]="'common.code' | translate" id="code">
         <ng-template let-facet="item">
             {{ facet.code }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.visibility' | translate">
+    <vdr-dt2-column [heading]="'common.visibility' | translate" id="visibility">
         <ng-template let-facet="item">
             <vdr-chip *ngIf="facet.isPrivate" colorType="warning">{{
                 'common.private' | translate
@@ -86,7 +86,7 @@
             }}</vdr-chip>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'catalog.values' | translate">
+    <vdr-dt2-column [heading]="'catalog.values' | translate" id="values">
         <ng-template let-facet="item">
             <div class="facet-values-list">
                 <vdr-facet-value-chip

packages/admin-ui/src/lib/catalog/src/components/move-collections-dialog/move-collections-dialog.component.html

@@ -16,12 +16,12 @@
         [searchTermControl]="searchTermControl"
         [searchTermPlaceholder]="'common.search-by-name' | translate"
     ></vdr-dt2-search>
-    <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">
+    <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true">
         <ng-template let-collection="item">
             {{ collection.id }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.name' | translate" [optional]="false">
+    <vdr-dt2-column [heading]="'common.name' | translate" id="name" [optional]="false">
         <ng-template let-collection="item" let-depth="depth">
             <div [ngClass]="'indent-' + depth"></div>
             <clr-icon
@@ -46,7 +46,7 @@
             </button>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.breadcrumb' | translate">
+    <vdr-dt2-column [heading]="'common.breadcrumb' | translate" id="breadcrumb">
         <ng-template let-collection="item">
             <div class="breadcrumb">
                 <ng-container *ngIf="collection | collectionBreadcrumb as breadcrumbs">
@@ -60,7 +60,7 @@
             </div>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.slug' | translate">
+    <vdr-dt2-column [heading]="'common.slug' | translate" id="slug">
         <ng-template let-collection="item">
             {{ collection.slug }}
         </ng-template>

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

@@ -47,70 +47,17 @@
         [hostComponent]="this"
         [selectionManager]="selectionManager"
     ></vdr-bulk-action-menu>
-    <!--<ng-template #vdrDt2CustomSearch>
-            <div class="search-form">
-                <vdr-product-search-input
-                    #productSearchInputComponent
-                    [facetValueResults]="facetValues$ | async"
-                    (searchTermChange)="setSearchTerm($event)"
-                    (facetValueChange)="setFacetValueIds($event)"
-                ></vdr-product-search-input>
-                <vdr-dropdown class="search-settings-menu mr3">
-                    <button
-                        type="button"
-                        class="icon-button search-index-button"
-                        [title]="
-                            (pendingSearchIndexUpdates
-                                ? 'catalog.pending-search-index-updates'
-                                : 'catalog.search-index-controls'
-                            ) | translate
-                        "
-                        vdrDropdownTrigger
-                    >
-                        <clr-icon shape="cog"></clr-icon>
-                        <vdr-status-badge *ngIf="pendingSearchIndexUpdates" type="warning"></vdr-status-badge>
-                    </button>
-                    <vdr-dropdown-menu vdrPosition="bottom-right">
-                        <h4 class="dropdown-header">{{ 'catalog.search-index-controls' | translate }}</h4>
-                        <ng-container *ngIf="pendingSearchIndexUpdates">
-                            <button
-                                type="button"
-                                class="run-updates-button"
-                                vdrDropdownItem
-                                (click)="runPendingSearchIndexUpdates()"
-                                [disabled]="!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)"
-                            >
-                                <vdr-status-badge type="warning"></vdr-status-badge>
-                                {{
-                                    'catalog.run-pending-search-index-updates'
-                                        | translate : { count: pendingSearchIndexUpdates }
-                                }}
-                            </button>
-                            <div class="dropdown-divider"></div>
-                        </ng-container>
-                        <button
-                            type="button"
-                            vdrDropdownItem
-                            (click)="rebuildSearchIndex()"
-                            [disabled]="!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)"
-                        >
-                            {{ 'catalog.rebuild-search-index' | translate }}
-                        </button>
-                    </vdr-dropdown-menu>
-                </vdr-dropdown>
-            </div>
-        </ng-template>-->
     <vdr-dt2-search
         [searchTermControl]="searchTermControl"
         [searchTermPlaceholder]="'catalog.filter-by-name' | translate"
     />
-    <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true" [sort]="sorts.get('id')">
+    <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true" [sort]="sorts.get('id')">
         <ng-template let-product="item">
             {{ product.id }}
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.created-at' | translate"
+        [heading]="'common.created-at' | translate" id="created-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('createdAt')"
     >
@@ -119,15 +66,15 @@ <h4 class="dropdown-header">{{ 'catalog.search-index-controls' | translate }}</h
         </ng-template>
     </vdr-dt2-column>
     <vdr-dt2-column
-        [heading]="'common.updated-at' | translate"
+        [heading]="'common.updated-at' | translate" id="updated-at"
         [hiddenByDefault]="true"
         [sort]="sorts.get('updatedAt')"
     >
         <ng-template let-product="item">
             {{ product.updatedAt | localeDate : 'short' }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.image' | translate">
+    <vdr-dt2-column [heading]="'common.image' | translate" id="image">
         <ng-template let-product="item">
             <div class="image-placeholder">
                 <img
@@ -142,20 +89,20 @@ <h4 class="dropdown-header">{{ 'catalog.search-index-controls' | translate }}</h
             </div>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'catalog.name' | translate" [optional]="false" [sort]="sorts.get('name')">
+    <vdr-dt2-column [heading]="'catalog.name' | translate" id="name" [optional]="false" [sort]="sorts.get('name')">
         <ng-template let-product="item">
             <a class="button-ghost" [routerLink]="['./', product.id]"
                 ><span>{{ product.name }}</span
                 ><clr-icon shape="arrow right"
             /></a>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.slug' | translate" [sort]="sorts.get('slug')">
+    <vdr-dt2-column [heading]="'common.slug' | translate" id="slug" [sort]="sorts.get('slug')">
         <ng-template let-product="item">
             {{ product.slug }}
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'common.enabled' | translate">
+    <vdr-dt2-column [heading]="'common.enabled' | translate" id="enabled">
         <ng-template let-product="item">
             <vdr-chip *ngIf="product.enabled" colorType="success">{{
                 'common.enabled' | translate
@@ -165,7 +112,7 @@ <h4 class="dropdown-header">{{ 'catalog.search-index-controls' | translate }}</h
             }}</vdr-chip>
         </ng-template>
     </vdr-dt2-column>
-    <vdr-dt2-column [heading]="'catalog.number-of-variants' | translate">
+    <vdr-dt2-column [heading]="'catalog.number-of-variants' | translate" id="number-of-variants">
         <ng-template let-product="item">
             {{ 'catalog.variant-count' | translate : { count: product.variantList?.totalItems } }}
         </ng-template>

packages/admin-ui/src/lib/catalog/src/components/product-options-editor/product-options-editor.component.html

@@ -83,22 +83,22 @@
                         (pageChange)="paginationSettings[optionGroup.value.id].currentPage = $event"
                         [totalItems]="options.length"
                     >
-                        <vdr-dt2-column [heading]="'common.id' | translate" [hiddenByDefault]="true">
+                        <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true">
                             <ng-template let-optionControl="item">
                                 {{ optionControl.value.id }}
                             </ng-template>
                         </vdr-dt2-column>
-                        <vdr-dt2-column [heading]="'common.created-at' | translate" [hiddenByDefault]="true">
+                        <vdr-dt2-column [heading]="'common.created-at' | translate" id="created-at" [hiddenByDefault]="true">
                             <ng-template let-optionControl="item">
                                 {{ optionControl.value.createdAt | localeDate : 'short' }}
                             </ng-template>
                         </vdr-dt2-column>
-                        <vdr-dt2-column [heading]="'common.updated-at' | translate" [hiddenByDefault]="true">
+                        <vdr-dt2-column [heading]="'common.updated-at' | translate" id="updated-at" [hiddenByDefault]="true">
                             <ng-template let-optionControl="item">
                                 {{ optionControl.value.updatedAt | localeDate : 'short' }}
                             </ng-template>
                         </vdr-dt2-column>
-                        <vdr-dt2-column [heading]="'common.name' | translate" [optional]="false">
+                        <vdr-dt2-column [heading]="'common.name' | translate" id="name" [optional]="false">
                             <ng-template let-optionControl="item">
                                 <input
                                     type="text"
@@ -107,13 +107,13 @@
                                 />
                             </ng-template>
                         </vdr-dt2-column>
-                        <vdr-dt2-column [heading]="'common.code' | translate" [optional]="false">
+                        <vdr-dt2-column [heading]="'common.code' | translate" id="code" [optional]="false">
                             <ng-template let-optionControl="item">
                                 <input type="text" [formControl]="optionControl.get('code')" />
                             </ng-template>
                         </vdr-dt2-column>
                         <vdr-dt2-column
-                            [heading]="'common.custom-fields' | translate"
+                            [heading]="'common.custom-fields' | translate" id="custom-fields"
                             [hiddenByDefault]="optionCustomFields.length === 0"
                         >
                             <ng-template let-optionControl="item">