feat(profile-settings): Add query-param to specify a tab (#906)

Author: futa-ikeda

src/app/features/settings/profile-settings/profile-settings.component.spec.ts

@@ -5,6 +5,7 @@ import { BehaviorSubject } from 'rxjs';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { ActivatedRoute } from '@angular/router';
 
 import { SelectComponent } from '@osf/shared/components/select/select.component';
 import { SubHeaderComponent } from '@osf/shared/components/sub-header/sub-header.component';
@@ -34,7 +35,11 @@ describe('ProfileSettingsComponent', () => {
           SelectComponent
         ),
       ],
-      providers: [MockProvider(IS_MEDIUM, isMedium), MockProvider(TranslateService)],
+      providers: [
+        MockProvider(IS_MEDIUM, isMedium),
+        MockProvider(TranslateService),
+        { provide: ActivatedRoute, useValue: { snapshot: { queryParams: {} } } },
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ProfileSettingsComponent);
@@ -46,6 +51,14 @@ describe('ProfileSettingsComponent', () => {
     expect(component).toBeTruthy();
   });
 
+  it('should update selected tab on init based on query param', () => {
+    const testTabValue = 2;
+    component['route'] = { snapshot: { queryParams: { tab: testTabValue } } } as any;
+
+    component.ngOnInit();
+    expect(component['selectedTab']).toBe(testTabValue);
+  });
+
   it('should update selected tab when onTabChange is called', () => {
     const newTabIndex = 2;
     component.onTabChange(newTabIndex);

src/app/features/settings/profile-settings/profile-settings.component.ts

@@ -2,9 +2,10 @@ import { TranslatePipe } from '@ngx-translate/core';
 
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from 'primeng/tabs';
 
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
 
 import { SelectComponent } from '@osf/shared/components/select/select.component';
 import { SubHeaderComponent } from '@osf/shared/components/sub-header/sub-header.component';
@@ -36,14 +37,28 @@ import { ProfileSettingsTabOption } from './enums';
   styleUrl: './profile-settings.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ProfileSettingsComponent {
+export class ProfileSettingsComponent implements OnInit {
   readonly isMedium = toSignal(inject(IS_MEDIUM));
   readonly tabOptions = PROFILE_SETTINGS_TAB_OPTIONS;
   readonly tabOption = ProfileSettingsTabOption;
 
+  private router = inject(Router);
+  private route = inject(ActivatedRoute);
   selectedTab = this.tabOption.Name;
 
+  ngOnInit(): void {
+    const tabParam = Number(this.route.snapshot.queryParams['tab']);
+    const selectedTab = tabParam && Object.values(this.tabOption).includes(tabParam) ? tabParam : this.tabOption.Name;
+
+    this.selectedTab = selectedTab;
+  }
+
   onTabChange(index: number): void {
     this.selectedTab = index;
+    this.router.navigate([], {
+      queryParams: { tab: index },
+      queryParamsHandling: 'merge',
+      replaceUrl: true,
+    });
   }
 }