fix(admin-ui): Preserve changes between product/variant tabs

Relates to #632

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

@@ -96,7 +96,9 @@
                             </vdr-form-field>
                             <div
                                 class="auto-rename-wrapper"
-                                [class.visible]="(isNew$ | async) === false && detailForm.get(['product', 'name'])?.dirty"
+                                [class.visible]="
+                                    (isNew$ | async) === false && detailForm.get(['product', 'name'])?.dirty
+                                "
                             >
                                 <clr-checkbox-wrapper>
                                     <input
@@ -162,8 +164,8 @@
                     </div>
                     <div class="clr-col-md-auto">
                         <vdr-product-assets
-                            [assets]="product.assets"
-                            [featuredAsset]="product.featuredAsset"
+                            [assets]="assetChanges.assets || product.assets"
+                            [featuredAsset]="assetChanges.featuredAsset || product.featuredAsset"
                             (change)="assetChanges = $event"
                         ></vdr-product-assets>
                     </div>

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

@@ -14,7 +14,6 @@ import {
     findTranslation,
     flattenFacetValues,
     GlobalFlag,
-    IGNORE_CAN_DEACTIVATE_GUARD,
     LanguageCode,
     ModalService,
     NotificationService,
@@ -31,7 +30,7 @@ import { normalizeString } from '@vendure/common/lib/normalize-string';
 import { DEFAULT_CHANNEL_CODE } from '@vendure/common/lib/shared-constants';
 import { notNullOrUndefined } from '@vendure/common/lib/shared-utils';
 import { unique } from '@vendure/common/lib/unique';
-import { combineLatest, EMPTY, merge, Observable, of } from 'rxjs';
+import { combineLatest, EMPTY, merge, Observable } from 'rxjs';
 import {
     debounceTime,
     distinctUntilChanged,
@@ -198,13 +197,15 @@ export class ProductDetailComponent
     }
 
     navigateToTab(tabName: TabName) {
-        this.router.navigate(['./', { ...this.route.snapshot.params, tab: tabName }], {
-            queryParamsHandling: 'merge',
-            relativeTo: this.route,
-            state: {
-                [IGNORE_CAN_DEACTIVATE_GUARD]: true,
-            },
-        });
+        this.location.replaceState(
+            this.router
+                .createUrlTree(['./', { ...this.route.snapshot.params, tab: tabName }], {
+                    queryParamsHandling: 'merge',
+                    relativeTo: this.route,
+                    replaceUrl: true,
+                })
+                .toString(),
+        );
     }
 
     isDefaultChannel(channelCode: string): boolean {

packages/admin-ui/src/lib/core/src/shared/providers/routing/can-deactivate-detail-guard.ts

@@ -7,12 +7,6 @@ import { map } from 'rxjs/operators';
 import { DeactivateAware } from '../../../common/deactivate-aware';
 import { ModalService } from '../../../providers/modal/modal.service';
 
-/**
- * When added to the [state object](https://angular.io/api/router/NavigationExtras#state), this will
- * skip the CanDeactivateDetailGuard.
- */
-export const IGNORE_CAN_DEACTIVATE_GUARD = 'IGNORE_CAN_DEACTIVATE_GUARD';
-
 @Injectable()
 export class CanDeactivateDetailGuard implements CanDeactivate<DeactivateAware> {
     constructor(private modalService: ModalService, private router: Router) {}
@@ -23,12 +17,6 @@ export class CanDeactivateDetailGuard implements CanDeactivate<DeactivateAware>
         currentState: RouterStateSnapshot,
         nextState?: RouterStateSnapshot,
     ): boolean | Observable<boolean> {
-        const nav = this.router.getCurrentNavigation();
-        if (nav) {
-            if (nav.extras.state && nav.extras.state[IGNORE_CAN_DEACTIVATE_GUARD] != null) {
-                return true;
-            }
-        }
         if (!component.canDeactivate()) {
             return this.modalService
                 .dialog({