Hide the stale entity name in the breadcrumb while the details page shows its error state

Author: zackcl

packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-header/experiment-details-page-header.component.html

@@ -1,6 +1,6 @@
 <app-common-details-page-header
   rootName="experiments.title.text"
-  [detailsName]="(selectedExperiment$ | async)?.name ?? ''"
+  [detailsName]="(detailsName$ | async) ?? ''"
   rootLink="experiments"
 >
 </app-common-details-page-header>

packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-header/experiment-details-page-header.component.ts

@@ -2,6 +2,8 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { CommonDetailsPageHeaderComponent } from '@shared-component-lib';
 import { ExperimentService } from '../../../../../../core/experiments/experiments.service';
 import { CommonModule } from '@angular/common';
+import { combineLatest, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'app-experiment-details-page-header',
@@ -11,7 +13,12 @@ import { CommonModule } from '@angular/common';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExperimentDetailsPageHeaderComponent {
-  selectedExperiment$ = this.experimentService.selectedExperiment$;
+  // Suppress the cached experiment name while the details page shows its error state,
+  // so the breadcrumb doesn't display a stale name next to "not found"
+  detailsName$: Observable<string> = combineLatest([
+    this.experimentService.selectedExperiment$,
+    this.experimentService.experimentDetailsPageError$,
+  ]).pipe(map(([experiment, detailsPageError]) => (detailsPageError ? '' : experiment?.name ?? '')));
 
   constructor(private experimentService: ExperimentService) {}
 }

packages/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-header/feature-flag-details-page-header.component.html

@@ -1,6 +1,6 @@
 <app-common-details-page-header
   rootName="feature-flags.title.text"
-  [detailsName]="(selectedFeatureFlag$ | async)?.name ?? ''"
+  [detailsName]="(detailsName$ | async) ?? ''"
   rootLink="featureflags"
 >
 </app-common-details-page-header>

packages/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-header/feature-flag-details-page-header.component.ts

@@ -2,6 +2,8 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { CommonDetailsPageHeaderComponent } from '@shared-component-lib';
 import { FeatureFlagsService } from '../../../../../../core/feature-flags/feature-flags.service';
 import { CommonModule } from '@angular/common';
+import { combineLatest, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'app-feature-flag-details-page-header',
@@ -11,7 +13,12 @@ import { CommonModule } from '@angular/common';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FeatureFlagDetailsPageHeaderComponent {
-  selectedFeatureFlag$ = this.featureFlagService.selectedFeatureFlag$;
+  // Suppress the cached flag name while the details page shows its error state,
+  // so the breadcrumb doesn't display a stale name next to "not found"
+  detailsName$: Observable<string> = combineLatest([
+    this.featureFlagService.selectedFeatureFlag$,
+    this.featureFlagService.featureFlagDetailsPageError$,
+  ]).pipe(map(([featureFlag, detailsPageError]) => (detailsPageError ? '' : featureFlag?.name ?? '')));
 
   constructor(private featureFlagService: FeatureFlagsService) {}
 }

packages/frontend/projects/upgrade/src/app/features/dashboard/segments/pages/segment-details-page/segment-details-page-header/segment-details-page-header.component.html

@@ -1,6 +1,6 @@
 <app-common-details-page-header
   rootName="app-header.title.segments"
-  [detailsName]="(selectedSegment$ | async)?.name ?? ''"
+  [detailsName]="(detailsName$ | async) ?? ''"
   rootLink="segments"
 >
 </app-common-details-page-header>

packages/frontend/projects/upgrade/src/app/features/dashboard/segments/pages/segment-details-page/segment-details-page-header/segment-details-page-header.component.ts

@@ -2,6 +2,8 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { CommonDetailsPageHeaderComponent } from '@shared-component-lib';
 import { SegmentsService } from '../../../../../../core/segments/segments.service';
 import { CommonModule } from '@angular/common';
+import { combineLatest, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'app-segment-details-page-header',
@@ -11,7 +13,12 @@ import { CommonModule } from '@angular/common';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SegmentDetailsPageHeaderComponent {
-  selectedSegment$ = this.segmentsService.selectedSegment$;
+  // Suppress the cached segment name while the details page shows its error state,
+  // so the breadcrumb doesn't display a stale name next to "not found"
+  detailsName$: Observable<string> = combineLatest([
+    this.segmentsService.selectedSegment$,
+    this.segmentsService.segmentDetailsPageError$,
+  ]).pipe(map(([segment, detailsPageError]) => (detailsPageError ? '' : segment?.name ?? '')));
 
   constructor(private segmentsService: SegmentsService) {}
 }