tabbed url, refresh stays on tab, refactor tabbed footer logic across components

packages/frontend/projects/upgrade/src/app/core/auth/auth.service.ts

@@ -65,7 +65,7 @@ export class AuthService {
     } else {
       originalDestinationUrl = this.environment.useHashRouting
         ? this.DOMref.location.hash.substring(1) || 'home'
-        : this.DOMref.location.pathname;
+        : this.DOMref.location.pathname + this.DOMref.location.search;
     }
 
     this.setRedirectionUrl(originalDestinationUrl);

packages/frontend/projects/upgrade/src/app/core/auth/store/auth.effects.ts

@@ -111,7 +111,7 @@ export class AuthEffects {
         tap(([action, redirectUrl]) => {
           this.authService.deferFetchUserExperimentDataAfterNavigationEnd(action.user, action.googleCredential);
           const path = redirectUrl || '/home';
-          this.router.navigate([path]);
+          this.router.navigateByUrl(path);
         })
       ),
     { dispatch: false }

packages/frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.service.ts

@@ -9,7 +9,6 @@ import {
   selectSearchKey,
   selectSearchString,
   selectIsLoadingUpsertFeatureFlag,
-  selectActiveDetailsTabIndex,
   selectIsLoadingUpdateFeatureFlagStatus,
   selectSelectedFeatureFlag,
   selectSearchFeatureFlagParams,
@@ -71,7 +70,6 @@ export class FeatureFlagsService {
   selectedFeatureFlag$ = this.store$.pipe(select(selectSelectedFeatureFlag));
   searchParams$ = this.store$.pipe(select(selectSearchFeatureFlagParams));
   selectRootTableState$ = this.store$.select(selectRootTableState);
-  activeDetailsTabIndex$ = this.store$.pipe(select(selectActiveDetailsTabIndex));
   selectFeatureFlagInclusions$ = this.store$.pipe(select(selectFeatureFlagInclusions));
   selectFeatureFlagInclusionsLength$ = this.store$.pipe(
     select(selectFeatureFlagInclusions),
@@ -167,10 +165,6 @@ export class FeatureFlagsService {
     this.store$.dispatch(FeatureFlagsActions.actionSetSortingType({ sortingType }));
   }
 
-  setActiveDetailsTab(activeDetailsTabIndex: number) {
-    this.store$.dispatch(FeatureFlagsActions.actionSetActiveDetailsTabIndex({ activeDetailsTabIndex }));
-  }
-
   addFeatureFlagInclusionPrivateSegmentList(list: AddPrivateSegmentListRequest) {
     this.store$.dispatch(FeatureFlagsActions.actionAddFeatureFlagInclusionList({ list }));
   }

packages/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.actions.ts

@@ -144,11 +144,6 @@ export const actionSetSortingType = createAction(
   props<{ sortingType: SORT_AS_DIRECTION }>()
 );
 
-export const actionSetActiveDetailsTabIndex = createAction(
-  '[Feature Flags] Set Active Details Tab Index',
-  props<{ activeDetailsTabIndex: number }>()
-);
-
 export const actionUpdateFeatureFlagStatus = createAction(
   '[Feature Flags] Update Feature Flag Status',
   props<{ updateFeatureFlagStatusRequest: UpdateFeatureFlagStatusRequest }>()

packages/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.effects.ts

@@ -8,16 +8,7 @@ import { Router } from '@angular/router';
 import { Store, select } from '@ngrx/store';
 import { AppState, NotificationService } from '../../core.module';
 import { TranslateService } from '@ngx-translate/core';
-import {
-  selectTotalFlags,
-  selectSearchKey,
-  selectSkipFlags,
-  selectSortKey,
-  selectSortAs,
-  selectSearchString,
-  selectIsAllFlagsFetched,
-  selectFeatureFlagPaginationParams,
-} from './feature-flags.selectors';
+import { selectSearchString, selectFeatureFlagPaginationParams } from './feature-flags.selectors';
 import { selectCurrentUser } from '../../auth/store/auth.selectors';
 import { CommonExportHelpersService } from '../../../shared/services/common-export-helpers.service';
 import { of } from 'rxjs';

packages/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.model.ts

@@ -194,7 +194,6 @@ export interface FeatureFlagState extends EntityState<FeatureFlag> {
   isLoadingUpsertPrivateSegmentList: boolean;
   hasInitialFeatureFlagsDataLoaded: boolean;
   duplicateKeyFound: boolean;
-  activeDetailsTabIndex: number;
   skipFlags: number;
   totalFlags: number;
   searchKey: FLAG_SEARCH_KEY;

packages/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.reducer.ts

@@ -20,7 +20,6 @@ export const initialState: FeatureFlagState = adapter.getInitialState({
   isLoadingUpsertPrivateSegmentList: false,
   hasInitialFeatureFlagsDataLoaded: false,
   duplicateKeyFound: false,
-  activeDetailsTabIndex: 0,
   skipFlags: 0,
   totalFlags: null,
   searchKey: FLAG_SEARCH_KEY.ALL,
@@ -129,10 +128,6 @@ const reducer = createReducer(
   on(FeatureFlagsActions.actionSetSearchString, (state, { searchString }) => ({ ...state, searchValue: searchString })),
   on(FeatureFlagsActions.actionSetSortKey, (state, { sortKey }) => ({ ...state, sortKey })),
   on(FeatureFlagsActions.actionSetSortingType, (state, { sortingType }) => ({ ...state, sortAs: sortingType })),
-  on(FeatureFlagsActions.actionSetActiveDetailsTabIndex, (state, { activeDetailsTabIndex }) => ({
-    ...state,
-    activeDetailsTabIndex,
-  })),
 
   // Feature Flag Inclusion List Add Actions
   on(FeatureFlagsActions.actionAddFeatureFlagInclusionList, (state) => ({

packages/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.selectors.ts

@@ -108,11 +108,6 @@ export const selectSortKey = createSelector(selectFeatureFlagsState, (state) =>
 
 export const selectSortAs = createSelector(selectFeatureFlagsState, (state) => state.sortAs);
 
-export const selectActiveDetailsTabIndex = createSelector(
-  selectFeatureFlagsState,
-  (state) => state.activeDetailsTabIndex
-);
-
 export const selectFeatureFlagsListLength = createSelector(
   selectAllFeatureFlags,
   (featureFlags) => featureFlags.length

packages/frontend/projects/upgrade/src/app/core/local-storage/local-storage.service.ts

@@ -73,7 +73,6 @@ export class LocalStorageService {
       isLoadingUpsertPrivateSegmentList: false,
       hasInitialFeatureFlagsDataLoaded: false,
       duplicateKeyFound: false,
-      activeDetailsTabIndex: 0,
       skipFlags: 0,
       totalFlags: null,
       searchKey: (featureFlagSearchKey as FLAG_SEARCH_KEY) || FLAG_SEARCH_KEY.ALL,

packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-overview-details-section-card/experiment-overview-details-section-card.component.html

@@ -35,8 +35,9 @@
   </ng-container>
 
   <!-- footer -->
-  <app-experiment-overview-details-footer
+  <app-common-tabbed-section-card-footer
     footer
-    (tabChange)="onSelectedTabChange($event)"
-  ></app-experiment-overview-details-footer>
+    [tabLabels]="tabLabels"
+    (selectedTabChange)="onSelectedTabChange($event)"
+  ></app-common-tabbed-section-card-footer>
 </app-common-section-card>

packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-overview-details-section-card/experiment-overview-details-section-card.component.ts

@@ -6,7 +6,7 @@ import {
   CommonSectionCardOverviewDetailsComponent,
 } from '../../../../../../../shared-standalone-component-lib/components';
 import { ActionButton } from '../../../../../../../shared-standalone-component-lib/components/common-section-card-action-buttons/common-section-card-action-buttons.component';
-import { ExperimentOverviewDetailsFooterComponent } from './experiment-overview-details-footer/experiment-overview-details-footer.component';
+import { CommonTabbedSectionCardFooterComponent } from '../../../../../../../shared-standalone-component-lib/components/common-tabbed-section-card-footer/common-tabbed-section-card-footer.component';
 import { CommonModule } from '@angular/common';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { IMenuButtonItem, EXPERIMENT_SEARCH_KEY } from 'upgrade_types';
@@ -36,7 +36,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
     CommonSectionCardTitleHeaderComponent,
     CommonSectionCardActionButtonsComponent,
     CommonSectionCardOverviewDetailsComponent,
-    ExperimentOverviewDetailsFooterComponent,
+    CommonTabbedSectionCardFooterComponent,
     TranslateModule,
     MatTooltipModule,
   ],
@@ -57,6 +57,11 @@ export class ExperimentOverviewDetailsSectionCardComponent implements OnInit, On
   subscriptions = new Subscription();
   emailId = '';
   bullettedListKeys = [EXPERIMENT_OVERVIEW_LABELS.ADAPTIVE_ALGORITHM_PARAMETERS];
+  tabLabels = [
+    { label: 'Design', disabled: false },
+    { label: 'Data', disabled: false },
+    { label: 'Logs', disabled: false },
+  ];
 
   // Action buttons - maps ExperimentActionButton[] to ActionButton[]
   // Only shown when user has update permission

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

@@ -5,28 +5,29 @@
         [data]="featureFlag"
         [isSectionCardExpanded]="isSectionCardExpanded"
         (sectionCardExpandChange)="onSectionCardExpandChange($event)"
+        (tabChange)="onTabChange($event)"
         section-card
       ></app-feature-flag-overview-details-section-card>
       <app-feature-flag-inclusions-section-card
         [data]="featureFlag"
         [isSectionCardExpanded]="isSectionCardExpanded"
-        *ngIf="(activeTabIndex$ | async) === 0"
+        *ngIf="activeTabIndex === 0"
         section-card
       >
         inclusions-card
       </app-feature-flag-inclusions-section-card>
       <app-feature-flag-exclusions-section-card
         [data]="featureFlag"
         [isSectionCardExpanded]="isSectionCardExpanded"
-        *ngIf="(activeTabIndex$ | async) === 0"
+        *ngIf="activeTabIndex === 0"
         section-card
       >
         exclusions-card
       </app-feature-flag-exclusions-section-card>
       <app-feature-flag-exposures-section-card
         [data]="featureFlag"
         [isSectionCardExpanded]="isSectionCardExpanded"
-        *ngIf="(activeTabIndex$ | async) === 1"
+        *ngIf="activeTabIndex === 1"
         section-card
       >
         exposures-card

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

@@ -30,7 +30,7 @@ import { filter, map, startWith } from 'rxjs/operators';
 })
 export class FeatureFlagDetailsPageContentComponent implements OnInit, OnDestroy {
   isSectionCardExpanded = true;
-  activeTabIndex$ = this.featureFlagsService.activeDetailsTabIndex$;
+  activeTabIndex = 0;
   featureFlag$: Observable<FeatureFlag>;
 
   featureFlagIdSub: Subscription;
@@ -71,6 +71,10 @@ export class FeatureFlagDetailsPageContentComponent implements OnInit, OnDestroy
     this.isSectionCardExpanded = expanded;
   }
 
+  onTabChange(tabIndex: number): void {
+    this.activeTabIndex = tabIndex;
+  }
+
   ngOnDestroy() {
     this.featureFlagIdSub.unsubscribe();
   }

packages/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component.html

@@ -32,5 +32,9 @@
   </ng-container>
 
   <!-- footer -->
-  <app-feature-flag-overview-details-footer footer></app-feature-flag-overview-details-footer>
+  <app-common-tabbed-section-card-footer
+    footer
+    [tabLabels]="tabLabels"
+    (selectedTabChange)="onSelectedTabChange($event)"
+  ></app-common-tabbed-section-card-footer>
 </app-common-section-card>

packages/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component.ts

@@ -4,7 +4,7 @@ import {
   CommonSectionCardComponent,
   CommonSectionCardTitleHeaderComponent,
 } from '../../../../../../../shared-standalone-component-lib/components';
-import { FeatureFlagOverviewDetailsFooterComponent } from './feature-flag-overview-details-footer/feature-flag-overview-details-footer.component';
+import { CommonTabbedSectionCardFooterComponent } from '../../../../../../../shared-standalone-component-lib/components/common-tabbed-section-card-footer/common-tabbed-section-card-footer.component';
 import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 import { FeatureFlagsService } from '../../../../../../../core/feature-flags/feature-flags.service';
 import { FEATURE_FLAG_STATUS, FILTER_MODE, FLAG_SEARCH_KEY, IMenuButtonItem } from 'upgrade_types';
@@ -30,7 +30,7 @@ import { AuthService } from '../../../../../../../core/auth/auth.service';
     CommonSectionCardTitleHeaderComponent,
     CommonSectionCardActionButtonsComponent,
     CommonSectionCardOverviewDetailsComponent,
-    FeatureFlagOverviewDetailsFooterComponent,
+    CommonTabbedSectionCardFooterComponent,
     TranslateModule,
   ],
   templateUrl: './feature-flag-overview-details-section-card.component.html',
@@ -39,6 +39,7 @@ import { AuthService } from '../../../../../../../core/auth/auth.service';
 })
 export class FeatureFlagOverviewDetailsSectionCardComponent implements OnInit, OnDestroy {
   @Output() sectionCardExpandChange = new EventEmitter<boolean>();
+  @Output() tabChange = new EventEmitter<number>();
   permissions$: Observable<UserPermission> = this.authService.userPermissions$;
   featureFlag$ = this.featureFlagService.selectedFeatureFlag$;
   flagAndPermissions$: Observable<{ flag: FeatureFlag; permissions: UserPermission }> = combineLatest([
@@ -54,6 +55,10 @@ export class FeatureFlagOverviewDetailsSectionCardComponent implements OnInit, O
   menuButtonItems$: Observable<IMenuButtonItem[]>;
   isSectionCardExpanded = true;
   emailId = '';
+  tabLabels = [
+    { label: 'Participants', disabled: false },
+    { label: 'Data', disabled: true },
+  ];
 
   constructor(
     private readonly dialogService: DialogService,
@@ -218,6 +223,10 @@ export class FeatureFlagOverviewDetailsSectionCardComponent implements OnInit, O
     this.router.navigate(['/featureflags']);
   }
 
+  onSelectedTabChange(tabIndex: number): void {
+    this.tabChange.emit(tabIndex);
+  }
+
   ngOnDestroy(): void {
     this.subscriptions.unsubscribe();
   }

packages/frontend/projects/upgrade/src/app/features/dashboard/profile/profile-root/profile-root.component.html

@@ -3,19 +3,25 @@ <h1 class="ft-32-700 title">{{ 'profile.heading.text' | translate }}</h1>
   <span class="ft-16-400 subtitle" [innerHTML]="'profile.sub-heading.text' | translate"></span>
 
   <mat-card appearance="raised" class="tabs-wrapper">
-    <mat-tab-group [selectedIndex]="0" [mat-stretch-tabs]="false" [dynamicHeight]="true" disableRipple>
+    <mat-tab-group
+      [selectedIndex]="selectedIndex"
+      (selectedTabChange)="onSelectedTabChange($event)"
+      [mat-stretch-tabs]="false"
+      [dynamicHeight]="true"
+      disableRipple
+    >
       <mat-tab>
         <ng-template mat-tab-label>
           <span class="ft-22-600 tab-label">
-            {{ 'profile.heading.text' | translate }}
+            {{ tabLabels[0].label | translate }}
           </span>
         </ng-template>
         <profile-info></profile-info>
       </mat-tab>
       <mat-tab>
         <ng-template mat-tab-label>
           <span class="ft-22-600 tab-label">
-            {{ 'global.metrics.text' | translate }}
+            {{ tabLabels[1].label | translate }}
           </span>
         </ng-template>
         <profile-metrics></profile-metrics>