fix(admin-ui): Fix setting facet values on new product

Fixes #2355

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

@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
     Asset,
@@ -20,7 +19,6 @@ import {
     PRODUCT_DETAIL_FRAGMENT,
     ProductDetailFragment,
     ProductVariantFragment,
-    ServerConfigService,
     TypedBaseDetailComponent,
     unicodePatternValidator,
     UpdateProductInput,
@@ -33,17 +31,8 @@ import { normalizeString } from '@vendure/common/lib/normalize-string';
 import { DEFAULT_CHANNEL_CODE } from '@vendure/common/lib/shared-constants';
 import { unique } from '@vendure/common/lib/unique';
 import { gql } from 'apollo-angular';
-import { combineLatest, concat, EMPTY, from, Observable } from 'rxjs';
-import {
-    distinctUntilChanged,
-    map,
-    mergeMap,
-    shareReplay,
-    skip,
-    switchMap,
-    switchMapTo,
-    take,
-} from 'rxjs/operators';
+import { combineLatest, concat, EMPTY, from, Observable, of } from 'rxjs';
+import { distinctUntilChanged, map, mergeMap, shareReplay, switchMap, take } from 'rxjs/operators';
 
 import { ProductDetailService } from '../../providers/product-detail/product-detail.service';
 import { ApplyFacetDialogComponent } from '../apply-facet-dialog/apply-facet-dialog.component';
@@ -91,9 +80,6 @@ export class ProductDetailComponent
     public readonly updatePermissions = [Permission.UpdateCatalog, Permission.UpdateProduct];
 
     constructor(
-        route: ActivatedRoute,
-        router: Router,
-        serverConfigService: ServerConfigService,
         private productDetailService: ProductDetailService,
         private formBuilder: FormBuilder,
         private modalService: ModalService,
@@ -106,11 +92,15 @@ export class ProductDetailComponent
 
     ngOnInit() {
         this.init();
-        const productFacetValues$ = this.entity$.pipe(map(product => product.facetValues));
+
+        const productFacetValues$ = this.isNew$.pipe(
+            switchMap(isNew => {
+                return isNew ? of([]) : this.entity$.pipe(map(product => product.facetValues));
+            }),
+        );
         const productGroup = this.detailForm;
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const formFacetValueIdChanges$ = productGroup.get('facetValueIds')!.valueChanges.pipe(
-            skip(1),
             distinctUntilChanged(),
             switchMap(ids =>
                 this.dataService.facet
@@ -121,7 +111,7 @@ export class ProductDetailComponent
         );
         this.facetValues$ = concat(
             productFacetValues$.pipe(take(1)),
-            productFacetValues$.pipe(switchMapTo(formFacetValueIdChanges$)),
+            productFacetValues$.pipe(switchMap(() => formFacetValueIdChanges$)),
         );
         this.productChannels$ = this.entity$.pipe(map(p => p.channels));
     }
@@ -261,6 +251,7 @@ export class ProductDetailComponent
                     facetValueIds: unique([...currentFacetValueIds, ...facetValueIds]),
                 });
                 productGroup.markAsDirty();
+                this.changeDetector.markForCheck();
             }
         });
     }