fix(admin-ui): Display descriptions for custom fields

packages/admin-ui/src/lib/core/src/public_api.ts

@@ -220,6 +220,7 @@ export * from './shared/dynamic-form-inputs/text-form-input/text-form-input.comp
 export * from './shared/dynamic-form-inputs/textarea-form-input/textarea-form-input.component';
 export * from './shared/pipes/asset-preview.pipe';
 export * from './shared/pipes/channel-label.pipe';
+export * from './shared/pipes/custom-field-description.pipe';
 export * from './shared/pipes/custom-field-label.pipe';
 export * from './shared/pipes/duration.pipe';
 export * from './shared/pipes/file-size.pipe';

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

@@ -1,12 +1,25 @@
 <div class="clr-form-control" *ngIf="compact">
-    <label for="basic" class="clr-control-label">{{ customField | customFieldLabel:(uiLanguage$ | async) }}</label>
+    <div class="flex">
+        <label for="basic" class="clr-control-label"
+            >{{ customField | customFieldLabel: (uiLanguage$ | async) }}
+            <vdr-help-tooltip
+                *ngIf="customField | customFieldDescription: (uiLanguage$ | async) as description"
+                [content]="description"
+            ></vdr-help-tooltip>
+        </label>
+    </div>
     <div class="clr-control-container">
         <div class="clr-input-wrapper">
             <ng-container *ngTemplateOutlet="inputs"></ng-container>
         </div>
     </div>
 </div>
-<vdr-form-field [label]="customField | customFieldLabel:(uiLanguage$ | async)" [for]="customField.name" *ngIf="!compact">
+<vdr-form-field
+    [label]="customField | customFieldLabel: (uiLanguage$ | async)"
+    [tooltip]="customField | customFieldDescription: (uiLanguage$ | async)"
+    [for]="customField.name"
+    *ngIf="!compact"
+>
     <ng-container *ngTemplateOutlet="inputs"></ng-container>
 </vdr-form-field>
 

packages/admin-ui/src/lib/core/src/shared/pipes/custom-field-description.pipe.ts

@@ -0,0 +1,25 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+import { CustomFieldConfig, LanguageCode, StringFieldOption } from '../../common/generated-types';
+
+/**
+ * Displays a localized description for a CustomField
+ */
+@Pipe({
+    name: 'customFieldDescription',
+    pure: true,
+})
+export class CustomFieldDescriptionPipe implements PipeTransform {
+    transform(value: CustomFieldConfig, uiLanguageCode: LanguageCode | null): string {
+        if (!value) {
+            return value;
+        }
+        const { description } = value;
+        if (description) {
+            const match = description.find(l => l.languageCode === uiLanguageCode);
+            return match ? match.value : description[0].value;
+        } else {
+            return '';
+        }
+    }
+}

packages/admin-ui/src/lib/core/src/shared/shared.module.ts

@@ -124,6 +124,7 @@ import { TextFormInputComponent } from './dynamic-form-inputs/text-form-input/te
 import { TextareaFormInputComponent } from './dynamic-form-inputs/textarea-form-input/textarea-form-input.component';
 import { AssetPreviewPipe } from './pipes/asset-preview.pipe';
 import { ChannelLabelPipe } from './pipes/channel-label.pipe';
+import { CustomFieldDescriptionPipe } from './pipes/custom-field-description.pipe';
 import { CustomFieldLabelPipe } from './pipes/custom-field-label.pipe';
 import { DurationPipe } from './pipes/duration.pipe';
 import { FileSizePipe } from './pipes/file-size.pipe';
@@ -215,6 +216,7 @@ const DECLARATIONS = [
     IfDefaultChannelActiveDirective,
     ExtensionHostComponent,
     CustomFieldLabelPipe,
+    CustomFieldDescriptionPipe,
     FocalPointControlComponent,
     AssetPreviewPipe,
     LinkDialogComponent,