diff --git a/frontend/projects/upgrade/src/app/core/auth/auth.service.ts b/frontend/projects/upgrade/src/app/core/auth/auth.service.ts index c666d28bbe..b200c492a9 100644 --- a/frontend/projects/upgrade/src/app/core/auth/auth.service.ts +++ b/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); diff --git a/frontend/projects/upgrade/src/app/core/auth/store/auth.effects.ts b/frontend/projects/upgrade/src/app/core/auth/store/auth.effects.ts index 6a696c3f0c..d6a3a63606 100755 --- a/frontend/projects/upgrade/src/app/core/auth/store/auth.effects.ts +++ b/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 } diff --git a/frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.service.ts b/frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.service.ts index 4c26fe058b..fc4dfc3c29 100644 --- a/frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.service.ts +++ b/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 })); } diff --git a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.actions.ts b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.actions.ts index 8eb5cc2bf2..b205a8db5a 100644 --- a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.actions.ts +++ b/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 }>() diff --git a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.effects.ts b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.effects.ts index 5ea200440d..c1d08ddfa2 100644 --- a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.effects.ts +++ b/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'; diff --git a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.model.ts b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.model.ts index 6c2c62dde3..813cd5df56 100644 --- a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.model.ts +++ b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.model.ts @@ -194,7 +194,6 @@ export interface FeatureFlagState extends EntityState { isLoadingUpsertPrivateSegmentList: boolean; hasInitialFeatureFlagsDataLoaded: boolean; duplicateKeyFound: boolean; - activeDetailsTabIndex: number; skipFlags: number; totalFlags: number; searchKey: FLAG_SEARCH_KEY; diff --git a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.reducer.ts b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.reducer.ts index ac6d8a2ba0..569f071243 100644 --- a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.reducer.ts +++ b/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) => ({ diff --git a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.selectors.ts b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.selectors.ts index 306bda8a04..213606920e 100644 --- a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.selectors.ts +++ b/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 diff --git a/frontend/projects/upgrade/src/app/core/local-storage/local-storage.service.ts b/frontend/projects/upgrade/src/app/core/local-storage/local-storage.service.ts index f3a55782fd..3466296a44 100755 --- a/frontend/projects/upgrade/src/app/core/local-storage/local-storage.service.ts +++ b/frontend/projects/upgrade/src/app/core/local-storage/local-storage.service.ts @@ -71,7 +71,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, diff --git a/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-overview-details-section-card/experiment-overview-details-footer/experiment-overview-details-footer.component.html b/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-overview-details-section-card/experiment-overview-details-footer/experiment-overview-details-footer.component.html deleted file mode 100644 index ec9e6cf0be..0000000000 --- a/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-overview-details-section-card/experiment-overview-details-footer/experiment-overview-details-footer.component.html +++ /dev/null @@ -1,4 +0,0 @@ - diff --git a/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-overview-details-section-card/experiment-overview-details-footer/experiment-overview-details-footer.component.scss b/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-overview-details-section-card/experiment-overview-details-footer/experiment-overview-details-footer.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-overview-details-section-card/experiment-overview-details-footer/experiment-overview-details-footer.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-overview-details-section-card/experiment-overview-details-footer/experiment-overview-details-footer.component.ts deleted file mode 100644 index 239b70c0ab..0000000000 --- a/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-overview-details-section-card/experiment-overview-details-footer/experiment-overview-details-footer.component.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { ChangeDetectionStrategy, Component, EventEmitter, OnInit, Output } from '@angular/core'; -import { CommonTabbedSectionCardFooterComponent } from '../../../../../../../../shared-standalone-component-lib/components/common-tabbed-section-card-footer/common-tabbed-section-card-footer.component'; - -@Component({ - selector: 'app-experiment-overview-details-footer', - imports: [CommonTabbedSectionCardFooterComponent], - templateUrl: './experiment-overview-details-footer.component.html', - styleUrl: './experiment-overview-details-footer.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class ExperimentOverviewDetailsFooterComponent implements OnInit { - @Output() tabChange = new EventEmitter(); - - tabLabels = [ - { label: 'Design', disabled: false }, - { label: 'Data', disabled: false }, - ]; - - onSelectedTabChange(selectedTabIndex: number): void { - this.tabChange.emit(selectedTabIndex); - } - - ngOnInit(): void { - // Initialize with the first tab - } -} diff --git a/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 b/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 index d3c4f30d92..03a7d6816b 100644 --- a/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 +++ b/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 @@ - + [tabLabels]="tabLabels" + (selectedTabChange)="onSelectedTabChange($event)" + > diff --git a/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 b/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 index dcf130bf5d..19e370402d 100644 --- a/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 +++ b/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,10 @@ 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 }, + ]; // Action buttons - maps ExperimentActionButton[] to ActionButton[] // Only shown when user has update permission diff --git a/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 b/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 index d685c77ae1..19ca59b0bc 100644 --- a/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 +++ b/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,12 +5,13 @@ [data]="featureFlag" [isSectionCardExpanded]="isSectionCardExpanded" (sectionCardExpandChange)="onSectionCardExpandChange($event)" + (tabChange)="onTabChange($event)" section-card > inclusions-card @@ -18,7 +19,7 @@ exclusions-card @@ -26,7 +27,7 @@ exposures-card diff --git a/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 b/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 index 3b7254700c..7b4987ddcb 100644 --- a/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 +++ b/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; 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(); } diff --git a/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-footer/feature-flag-overview-details-footer.component.html b/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-footer/feature-flag-overview-details-footer.component.html deleted file mode 100644 index ec9e6cf0be..0000000000 --- a/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-footer/feature-flag-overview-details-footer.component.html +++ /dev/null @@ -1,4 +0,0 @@ - diff --git a/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-footer/feature-flag-overview-details-footer.component.scss b/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-footer/feature-flag-overview-details-footer.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/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-footer/feature-flag-overview-details-footer.component.ts b/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-footer/feature-flag-overview-details-footer.component.ts deleted file mode 100644 index 4df271698b..0000000000 --- a/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-footer/feature-flag-overview-details-footer.component.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; -import { CommonTabbedSectionCardFooterComponent } from '../../../../../../../../shared-standalone-component-lib/components/common-tabbed-section-card-footer/common-tabbed-section-card-footer.component'; -import { FeatureFlagsService } from '../../../../../../../../core/feature-flags/feature-flags.service'; - -@Component({ - selector: 'app-feature-flag-overview-details-footer', - imports: [CommonTabbedSectionCardFooterComponent], - templateUrl: './feature-flag-overview-details-footer.component.html', - styleUrl: './feature-flag-overview-details-footer.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class FeatureFlagOverviewDetailsFooterComponent implements OnInit { - tabLabels = [ - { label: 'Participants', disabled: false }, - { label: 'Data', disabled: true }, // Disabled because the Exposures section card is not implemented yet - ]; - - constructor(private featureFlagsService: FeatureFlagsService) {} - - onSelectedTabChange(selectedTabIndex: number): void { - this.featureFlagsService.setActiveDetailsTab(selectedTabIndex); - } - - ngOnInit(): void { - this.featureFlagsService.setActiveDetailsTab(0); - } -} diff --git a/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 b/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 index 7f5e89d7ec..275f847a41 100644 --- a/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 +++ b/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 @@ - + diff --git a/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 b/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 index 2e35cc509e..2a4b9897b7 100644 --- a/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 +++ b/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(); + @Output() tabChange = new EventEmitter(); permissions$: Observable = 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; 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(); } diff --git a/frontend/projects/upgrade/src/app/features/dashboard/segments/pages/segment-details-page/segment-details-page-content/segment-overview-details-section-card/segment-overview-details-footer/segment-overview-details-footer.component.html b/frontend/projects/upgrade/src/app/features/dashboard/segments/pages/segment-details-page/segment-details-page-content/segment-overview-details-section-card/segment-overview-details-footer/segment-overview-details-footer.component.html deleted file mode 100644 index 74b7a658dd..0000000000 --- a/frontend/projects/upgrade/src/app/features/dashboard/segments/pages/segment-details-page/segment-details-page-content/segment-overview-details-section-card/segment-overview-details-footer/segment-overview-details-footer.component.html +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/frontend/projects/upgrade/src/app/features/dashboard/segments/pages/segment-details-page/segment-details-page-content/segment-overview-details-section-card/segment-overview-details-footer/segment-overview-details-footer.component.scss b/frontend/projects/upgrade/src/app/features/dashboard/segments/pages/segment-details-page/segment-details-page-content/segment-overview-details-section-card/segment-overview-details-footer/segment-overview-details-footer.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/frontend/projects/upgrade/src/app/features/dashboard/segments/pages/segment-details-page/segment-details-page-content/segment-overview-details-section-card/segment-overview-details-footer/segment-overview-details-footer.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/segments/pages/segment-details-page/segment-details-page-content/segment-overview-details-section-card/segment-overview-details-footer/segment-overview-details-footer.component.ts deleted file mode 100644 index ed688f56b5..0000000000 --- a/frontend/projects/upgrade/src/app/features/dashboard/segments/pages/segment-details-page/segment-details-page-content/segment-overview-details-section-card/segment-overview-details-footer/segment-overview-details-footer.component.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core'; -import { CommonTabbedSectionCardFooterComponent } from '../../../../../../../../shared-standalone-component-lib/components/common-tabbed-section-card-footer/common-tabbed-section-card-footer.component'; -import { Segment } from '../../../../../../../../core/segments/store/segments.model'; -import { SEGMENT_TYPE } from 'upgrade_types'; - -@Component({ - selector: 'app-segment-overview-details-footer', - imports: [CommonTabbedSectionCardFooterComponent], - templateUrl: './segment-overview-details-footer.component.html', - styleUrl: './segment-overview-details-footer.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class SegmentOverviewDetailsFooterComponent implements OnInit { - @Input() segment: Segment; - selectedIndex = 0; - tabLabels = [ - { label: 'Lists', disabled: false }, - { label: 'Used By', disabled: false }, - ]; - @Output() tabChange = new EventEmitter(); - - ngOnInit(): void { - this.resetTabs(); - } - - ngOnChanges(): void { - this.resetTabs(); - } - - private resetTabs(): void { - if (this.segment?.type === SEGMENT_TYPE.GLOBAL_EXCLUDE) { - this.tabLabels = [{ label: 'Exclude Lists', disabled: false }]; - } - // Reset the selected index to the first tab - this.onSelectedTabChange(0); - } - - onSelectedTabChange(selectedTabIndex: number): void { - this.selectedIndex = selectedTabIndex; // Update the selected index - this.tabChange.emit(selectedTabIndex); - } -} diff --git a/frontend/projects/upgrade/src/app/features/dashboard/segments/pages/segment-details-page/segment-details-page-content/segment-overview-details-section-card/segment-overview-details-section-card.component.html b/frontend/projects/upgrade/src/app/features/dashboard/segments/pages/segment-details-page/segment-details-page-content/segment-overview-details-section-card/segment-overview-details-section-card.component.html index 3b3fa145ee..a255891831 100644 --- a/frontend/projects/upgrade/src/app/features/dashboard/segments/pages/segment-details-page/segment-details-page-content/segment-overview-details-section-card/segment-overview-details-section-card.component.html +++ b/frontend/projects/upgrade/src/app/features/dashboard/segments/pages/segment-details-page/segment-details-page-content/segment-overview-details-section-card/segment-overview-details-section-card.component.html @@ -29,9 +29,9 @@ - + [tabLabels]="(tabLabels$ | async) || []" + (selectedTabChange)="onSelectedTabChange($event)" + > diff --git a/frontend/projects/upgrade/src/app/features/dashboard/segments/pages/segment-details-page/segment-details-page-content/segment-overview-details-section-card/segment-overview-details-section-card.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/segments/pages/segment-details-page/segment-details-page-content/segment-overview-details-section-card/segment-overview-details-section-card.component.ts index 7323ca4438..fb4a9f64f7 100644 --- a/frontend/projects/upgrade/src/app/features/dashboard/segments/pages/segment-details-page/segment-details-page-content/segment-overview-details-section-card/segment-overview-details-section-card.component.ts +++ b/frontend/projects/upgrade/src/app/features/dashboard/segments/pages/segment-details-page/segment-details-page-content/segment-overview-details-section-card/segment-overview-details-section-card.component.ts @@ -5,11 +5,11 @@ import { CommonSectionCardTitleHeaderComponent, CommonSectionCardOverviewDetailsComponent, } from '../../../../../../../shared-standalone-component-lib/components'; +import { CommonTabbedSectionCardFooterComponent } from '../../../../../../../shared-standalone-component-lib/components/common-tabbed-section-card-footer/common-tabbed-section-card-footer.component'; import { Segment, SEGMENT_DETAILS_PAGE_ACTIONS } from '../../../../../../../core/segments/store/segments.model'; import { SEGMENT_STATUS, SEGMENT_SEARCH_KEY, IMenuButtonItem, SEGMENT_TYPE } from 'upgrade_types'; import { CommonModule } from '@angular/common'; import { TranslateModule } from '@ngx-translate/core'; -import { SegmentOverviewDetailsFooterComponent } from './segment-overview-details-footer/segment-overview-details-footer.component'; import { Router } from '@angular/router'; import { combineLatest, map, Observable, Subscription } from 'rxjs'; import { UserPermission } from '../../../../../../../core/auth/store/auth.models'; @@ -25,7 +25,7 @@ import { SegmentsService } from '../../../../../../../core/segments/segments.ser CommonSectionCardTitleHeaderComponent, CommonSectionCardActionButtonsComponent, CommonSectionCardOverviewDetailsComponent, - SegmentOverviewDetailsFooterComponent, + CommonTabbedSectionCardFooterComponent, TranslateModule, ], templateUrl: './segment-overview-details-section-card.component.html', @@ -37,6 +37,17 @@ export class SegmentOverviewDetailsSectionCardComponent implements OnInit, OnDes @Output() tabChange = new EventEmitter(); permissions$: Observable = this.authService.userPermissions$; segment$ = this.segmentsService.selectedSegment$; + tabLabels$: Observable<{ label: string; disabled?: boolean }[]> = this.segment$.pipe( + map((segment) => { + if (segment?.type === SEGMENT_TYPE.GLOBAL_EXCLUDE) { + return [{ label: 'Exclude Lists', disabled: false }]; + } + return [ + { label: 'Lists', disabled: false }, + { label: 'Used By', disabled: false }, + ]; + }) + ); segmentAndPermissions$: Observable<{ segment: Segment; permissions: UserPermission }> = combineLatest([ this.segment$, this.permissions$, diff --git a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-tabbed-section-card-footer/common-tabbed-section-card-footer.component.ts b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-tabbed-section-card-footer/common-tabbed-section-card-footer.component.ts index 0820c03129..a7ff58efbc 100644 --- a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-tabbed-section-card-footer/common-tabbed-section-card-footer.component.ts +++ b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-tabbed-section-card-footer/common-tabbed-section-card-footer.component.ts @@ -1,6 +1,16 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + EventEmitter, + inject, + Input, + OnInit, + Output, +} from '@angular/core'; import { MatTabChangeEvent, MatTabsModule } from '@angular/material/tabs'; +import { ActivatedRoute, Router } from '@angular/router'; /** * The `app-common-tabbed-section-card-footer` component provides a common footer component for tabbed sections. @@ -22,12 +32,51 @@ import { MatTabChangeEvent, MatTabsModule } from '@angular/material/tabs'; styleUrl: './common-tabbed-section-card-footer.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class CommonTabbedSectionCardFooterComponent { +export class CommonTabbedSectionCardFooterComponent implements OnInit { @Input() selectedIndex = 0; // Default to the first tab @Input() tabLabels: { label: string; disabled?: boolean }[] = []; @Output() selectedTabChange = new EventEmitter(); + router = inject(Router); + route = inject(ActivatedRoute); + changeDetector = inject(ChangeDetectorRef); + + ngOnInit(): void { + this.setSelectedTabFromQueryParams(); + } + onSelectedTabChange(event: MatTabChangeEvent) { + this.router.navigate([], { + relativeTo: this.route, + queryParams: { tab: event.index }, + queryParamsHandling: 'merge', + replaceUrl: true, + }); this.selectedTabChange.emit(event.index); } + + setSelectedTabFromQueryParams() { + const tab = this.route.snapshot.queryParamMap.get('tab'); + + if (tab) { + const selectedTab = parseInt(tab, 10); + + if (isNaN(selectedTab)) { + console.warn('Tab index from url is not a number'); + return; + } + + const tabWithinRange = selectedTab >= 0 && selectedTab < this.tabLabels.length; + + if (!tabWithinRange) { + console.warn('Tab index from url is out of range'); + return; + } + + this.selectedIndex = selectedTab; + } + + this.selectedTabChange.emit(this.selectedIndex); + this.changeDetector.markForCheck(); + } }