refactor(admin-ui): Extract CustomField label logic into pipe

packages/admin-ui/src/app/shared/components/custom-field-control/custom-field-control.component.html

@@ -1,5 +1,5 @@
 <div class="clr-form-control" *ngIf="compact">
-    <label for="basic" class="clr-control-label">{{ label }}</label>
+    <label for="basic" class="clr-control-label">{{ customField | customFieldLabel }}</label>
     <div class="clr-control-container">
         <div class="clr-input-wrapper">
             <ng-container *ngIf="hasCustomControl; else standardControls">
@@ -11,7 +11,7 @@
         </div>
     </div>
 </div>
-<vdr-form-field [label]="label" [for]="customField.name" *ngIf="!compact">
+<vdr-form-field [label]="customField | customFieldLabel" [for]="customField.name" *ngIf="!compact">
     <ng-container *ngIf="hasCustomControl; else standardControls">
         <div #customComponentPlaceholder></div>
     </ng-container>
@@ -35,7 +35,7 @@
         [disabled]="readonly || customField.readonly"
     >
         <option *ngFor="let option of stringOptions" [value]="option.value">
-            {{ getLabel(option.value, option.label) }}
+            {{ option | customFieldLabel }}
         </option>
     </select>
     <input

packages/admin-ui/src/app/shared/components/custom-field-control/custom-field-control.component.ts

@@ -3,15 +3,13 @@ import {
     Component,
     ComponentFactory,
     Input,
-    OnDestroy,
     OnInit,
     ViewChild,
     ViewContainerRef,
 } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
-import { Subscription } from 'rxjs';
 
-import { CustomFieldsFragment, LanguageCode, LocalizedString } from '../../../common/generated-types';
+import { CustomFieldsFragment } from '../../../common/generated-types';
 import {
     CustomFieldComponentService,
     CustomFieldControl,
@@ -28,7 +26,7 @@ import { DataService } from '../../../data/providers/data.service';
     templateUrl: './custom-field-control.component.html',
     styleUrls: ['./custom-field-control.component.scss'],
 })
-export class CustomFieldControlComponent implements OnInit, OnDestroy, AfterViewInit {
+export class CustomFieldControlComponent implements OnInit, AfterViewInit {
     @Input() entityName: CustomFieldEntityName;
     @Input('customFieldsFormGroup') formGroup: FormGroup;
     @Input() customField: CustomFieldsFragment;
@@ -39,8 +37,6 @@ export class CustomFieldControlComponent implements OnInit, OnDestroy, AfterView
     @ViewChild('customComponentPlaceholder', { read: ViewContainerRef, static: false })
     private customComponentPlaceholder: ViewContainerRef;
     private customComponentFactory: ComponentFactory<CustomFieldControl> | undefined;
-    private uiLanguageCode: LanguageCode;
-    private sub: Subscription;
 
     constructor(
         private dataService: DataService,
@@ -48,12 +44,6 @@ export class CustomFieldControlComponent implements OnInit, OnDestroy, AfterView
     ) {}
 
     ngOnInit(): void {
-        this.sub = this.dataService.client
-            .uiState()
-            .mapStream(data => data.uiState.language)
-            .subscribe(language => {
-                this.uiLanguageCode = language;
-            });
         this.customComponentFactory = this.customFieldComponentService.getCustomFieldComponent(
             this.entityName,
             this.customField.name,
@@ -73,12 +63,6 @@ export class CustomFieldControlComponent implements OnInit, OnDestroy, AfterView
         }
     }
 
-    ngOnDestroy(): void {
-        if (this.sub) {
-            this.sub.unsubscribe();
-        }
-    }
-
     get isTextInput(): boolean {
         if (this.customField.__typename === 'StringCustomFieldConfig') {
             return !this.customField.options;
@@ -101,12 +85,6 @@ export class CustomFieldControlComponent implements OnInit, OnDestroy, AfterView
         return [];
     }
 
-    get label(): string | undefined {
-        if (this.showLabel) {
-            return this.getLabel(this.customField.name, this.customField.label);
-        }
-    }
-
     get min(): string | number | undefined | null {
         switch (this.customField.__typename) {
             case 'IntCustomFieldConfig':
@@ -139,13 +117,4 @@ export class CustomFieldControlComponent implements OnInit, OnDestroy, AfterView
                 return this.customField.datetimeStep;
         }
     }
-
-    getLabel(defaultLabel: string, label?: LocalizedString[] | null): string {
-        if (label) {
-            const match = label.find(l => l.languageCode === this.uiLanguageCode);
-            return match ? match.value : label[0].value;
-        } else {
-            return defaultLabel;
-        }
-    }
 }

packages/admin-ui/src/app/shared/pipes/custom-field-label.pipe.ts

@@ -0,0 +1,48 @@
+import { OnDestroy, Pipe, PipeTransform } from '@angular/core';
+import { DataService } from '@vendure/admin-ui/src/app/data/providers/data.service';
+import { Subscription } from 'rxjs';
+
+import { CustomFieldConfig, LanguageCode, StringFieldOption } from '../../common/generated-types';
+
+/**
+ * Displays a localized label for a CustomField or StringFieldOption, falling back to the
+ * name/value if none are defined.
+ */
+@Pipe({
+    name: 'customFieldLabel',
+    pure: false,
+})
+export class CustomFieldLabelPipe implements PipeTransform, OnDestroy {
+    private readonly subscription: Subscription;
+    private uiLanguageCode: LanguageCode;
+
+    constructor(private dataService: DataService) {
+        this.subscription = dataService.client.uiState().stream$.subscribe(val => {
+            this.uiLanguageCode = val.uiState.language;
+        });
+    }
+
+    transform(value: CustomFieldConfig | StringFieldOption): string {
+        if (!value) {
+            return value;
+        }
+        const { label } = value;
+        const name = this.isCustomFieldConfig(value) ? value.name : value.value;
+        if (label) {
+            const match = label.find(l => l.languageCode === this.uiLanguageCode);
+            return match ? match.value : label[0].value;
+        } else {
+            return name;
+        }
+    }
+
+    ngOnDestroy(): void {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+
+    private isCustomFieldConfig(input: any): input is CustomFieldConfig {
+        return input.hasOwnProperty('name');
+    }
+}

packages/admin-ui/src/app/shared/shared-declarations.ts

@@ -19,6 +19,7 @@ export { CurrencyInputComponent } from './components/currency-input/currency-inp
 export {
     CustomFieldControlComponent,
 } from './components/custom-field-control/custom-field-control.component';
+export { CustomFieldLabelPipe } from './pipes/custom-field-label.pipe';
 export { CustomerLabelComponent } from './components/customer-label/customer-label.component';
 export { DataTableColumnComponent } from './components/data-table/data-table-column.component';
 export { DataTableComponent } from './components/data-table/data-table.component';

packages/admin-ui/src/app/shared/shared.module.ts

@@ -32,6 +32,7 @@ import {
     CurrencyNamePipe,
     CustomerLabelComponent,
     CustomFieldControlComponent,
+    CustomFieldLabelPipe,
     DataTableColumnComponent,
     DataTableComponent,
     DatetimePickerComponent,
@@ -142,6 +143,7 @@ const DECLARATIONS = [
     ChannelLabelPipe,
     IfDefaultChannelActiveDirective,
     ExtensionHostComponent,
+    CustomFieldLabelPipe,
 ];
 
 @NgModule({