Merge 30fe8d9 into addccb4

client/src/app/controls/group-tabs/group-tabs.component.html

@@ -1,17 +1,17 @@
-<nav *ngIf="tabs && control" 
+<nav *ngIf="tabs && currentTabId" 
     [id]="'group-tab-' + groupId"
     role="tablist"
     #groupTabs>
     <div *ngFor="let tabItem of tabs"
         (click)="select(tabItem.id)"
         class="clickable group-tab"
-        [class.selected-container]="tabItem.id === selectedTabId"
-        [tabindex]="tabItem.id === selectedTabId ? 0 : -1"
+        [class.selected-container]="tabItem.id === currentTabId"
+        [tabindex]="tabItem.id === currentTabId ? 0 : -1"
         (keydown)="onKeyDown($event)"
         role="tab"
         [id]="'group-tab-item-' + tabItem.id"
         [attr.aria-controls]="'group-tab-item-' + tabItem.id"
-        [attr.aria-selected]="tabItem.id === selectedTabId"
+        [attr.aria-selected]="tabItem.id === currentTabId"
         [attr.aria-label]="tabItem.title">
 
         <div [load-image]="tabItem.iconUrl" class="icon-medium"></div>

client/src/app/controls/group-tabs/group-tabs.component.ts

@@ -6,6 +6,7 @@ import {
     Input,
     SimpleChanges,
     Output,
+    AfterViewInit,
 } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { KeyCodes } from '../../shared/models/constants';
@@ -23,30 +24,46 @@ export interface GroupTab {
     templateUrl: './group-tabs.component.html',
     styleUrls: ['./group-tabs.component.scss'],
 })
-export class GroupTabsComponent implements OnChanges {
+export class GroupTabsComponent implements AfterViewInit, OnChanges {
     @ViewChild('groupTabs') groupTabs: ElementRef;
     @Input() control: FormControl;
     @Input() tabs: GroupTab[];
     @Input() groupId: string;
+    @Input() selectedTabId: string;
     @Output() valueChanged: Subject<string>;
 
-    public selectedTabId: string;
+    public currentTabId: string;
     private _originalTabId: string;
 
     constructor() {
         this.valueChanged = new Subject<string>();
     }
 
+    ngAfterViewInit() {
+        this._setFocusOnSelectedTab();
+    }
+
     ngOnChanges(changes: SimpleChanges) {
+        let selectedTabId: string;
+
+        if (changes['selectedTabId']) {
+            selectedTabId = this.selectedTabId;
+        }
+
         if (changes['control']) {
-            this._originalTabId = this.control.value;
-            this.selectedTabId = this.control.value;
+            selectedTabId = this.control.value;
+        }
+
+        if (selectedTabId) {
+            this._originalTabId = selectedTabId;
+            this.currentTabId = selectedTabId;
+            this._setFocusOnSelectedTab();
         }
     }
 
     onKeyDown(event: KeyboardEvent) {
         if (event.keyCode === KeyCodes.arrowRight || event.keyCode === KeyCodes.arrowLeft) {
-            let curIndex = this.tabs.findIndex(tab => tab.id === this.selectedTabId);
+            let curIndex = this.tabs.findIndex(tab => tab.id === this.currentTabId);
             const tabElements = this._getTabElements();
             this._setFocus(false, tabElements, curIndex);
 
@@ -64,28 +81,38 @@ export class GroupTabsComponent implements OnChanges {
     }
 
     select(tabId: string) {
-        if (tabId !== this._originalTabId) {
-            this.control.markAsDirty();
-        } else {
-            this.control.markAsPristine();
-        }
+        if (this.control) {
+            if (tabId !== this._originalTabId) {
+                this.control.markAsDirty();
+            } else {
+                this.control.markAsPristine();
+            }
 
-        this.control.setValue(tabId);
-        this.selectedTabId = tabId;
+            this.control.setValue(tabId);
+        }
+        this.currentTabId = tabId;
         this.valueChanged.next(tabId);
     }
 
+    private _setFocusOnSelectedTab() {
+        const curIndex = this.tabs.findIndex(tab => tab.id === this.currentTabId);
+        const tabElements = this._getTabElements();
+        this._setFocus(true, tabElements, curIndex);
+    }
+
     private _getTabElements() {
-        return this.groupTabs.nativeElement.children;
+        return this.groupTabs && this.groupTabs.nativeElement ? this.groupTabs.nativeElement.children : [];
     }
 
     private _setFocus(set: boolean, elements: HTMLCollection, index: number) {
-        const tab = Dom.getTabbableControl(<HTMLElement>elements[index]);
+        if (elements.length > 0) {
+            const tab = Dom.getTabbableControl(<HTMLElement>elements[index]);
 
-        if (set) {
-            Dom.setFocus(tab);
-        } else {
-            Dom.clearFocus(tab);
+            if (set) {
+                Dom.setFocus(tab);
+            } else {
+                Dom.clearFocus(tab);
+            }
         }
     }
 

client/src/app/shared/shared.module.ts

@@ -74,6 +74,7 @@ import { FlexListDirective } from '../controls/flex-list/flex-list.directive';
 import { QuotaService } from './services/quota.service';
 import { RemoveSpacesPipe } from './pipes/remove-spaces.pipe';
 import { MarkdownModule } from 'ngx-markdown';
+import { GroupTabsComponent } from '../controls/group-tabs/group-tabs.component';
 
 export function ArmServiceFactory(
     http: Http,
@@ -134,7 +135,8 @@ export function AiServiceFactory() {
         CardInfoControlComponent,
         InvalidmessageDirective,
         FlexListDirective,
-        RemoveSpacesPipe
+        RemoveSpacesPipe,
+        GroupTabsComponent,
     ],
     exports: [
         CommonModule,
@@ -177,7 +179,8 @@ export function AiServiceFactory() {
         InvalidmessageDirective,
         NgUploaderModule,
         FlexListDirective,
-        RemoveSpacesPipe
+        RemoveSpacesPipe,
+        GroupTabsComponent,
     ],
     imports: [
         FormsModule,
@@ -209,8 +212,8 @@ export class SharedModule {
                         UserService,
                         PortalService,
                         AiService,
-                        Injector
-                    ]
+                        Injector,
+                    ],
                 },
                 CacheService,
                 ScenarioService,
@@ -228,8 +231,8 @@ export class SharedModule {
                 { provide: AiService, useFactory: AiServiceFactory },
                 { provide: ErrorHandler, useClass: GlobalErrorHandler },
                 ApplicationInsightsService,
-                QuotaService
-            ]
+                QuotaService,
+            ],
         };
     }
 }

client/src/app/site/container-settings/container-settings.module.ts

@@ -17,7 +17,6 @@ import { ContainerACRService } from './services/container-acr.service';
 import { ContainerLogsService } from './services/container-logs.service';
 import { ContainerMultiConfigService } from './services/container-multiconfig.service';
 import { ContainerValidationService } from './services/container-validation.service';
-import { GroupTabsComponent } from '../../controls/group-tabs/group-tabs.component';
 
 @NgModule({
     imports: [
@@ -38,7 +37,6 @@ import { GroupTabsComponent } from '../../controls/group-tabs/group-tabs.compone
         ContainerImageSourcePrivateRegistryComponent,
         ContainerLogsComponent,
         ContainerContinuousDeliveryComponent,
-        GroupTabsComponent,
     ],
     providers: [
         ContainerSettingsManager,

client/src/app/site/spec-picker/spec-picker.component.html

@@ -1,26 +1,12 @@
 <div id="spec-picker-container" *ngIf="specManager && specManager.selectedSpecGroup">
   <div id="spec-picker-shield" *ngIf="isUpdating || shieldEnabled" [class.spec-picker-shield-menu]="isOpenedFromMenu"></div>
 
-  <!-- TODO(michinoy): Switch to using GroupTabs control (WI #3158544)-->
-  <nav id="spec-group-tabs" role="tablist" #specGroupTabs>
-    <div *ngFor="let specGroup of specManager.specGroups"
-      (click)="selectGroup(specGroup)"
-      class="clickable spec-group"
-      [class.selected-spec-group]="specGroup === specManager.selectedSpecGroup"
-      [tabindex]="specGroup === specManager.selectedSpecGroup ? 0 : -1"
-      (keydown)="onGroupTabKeyPress($event)"
-      role="tab"
-      [id]="'spec-group-tab-' + specGroup.id"
-      [attr.aria-controls]="'spec-group-tab-' + specGroup.id"
-      [attr.aria-selected]="specGroup === specManager.selectedSpecGroup"
-      [attr.aria-label]="specGroup.title"
-      aria-describedBy="subGroupDescriptionId">
-
-      <div [load-image]="specGroup.iconUrl" class="icon-medium"></div>
-      <h3>{{specGroup.title}}</h3>
-      <h4 id="subGroupDescriptionId">{{specGroup.description}}</h4>
-    </div>
-  </nav>
+  <group-tabs
+    [tabs] = "specManager.specGroups"
+    groupId = "spec-group"
+    [selectedTabId] = "specManager.selectedSpecGroup.id"
+    (valueChanged)="selectGroup($event)">
+  </group-tabs>
 
   <section role="tabpanel"
     [id]="'spec-group-tab-' + specManager.selectedSpecGroup.id"

client/src/app/site/spec-picker/spec-picker.component.spec.ts

@@ -20,6 +20,7 @@ import { MockLogService } from '../../test/mocks/log.service.mock';
 import { TelemetryService } from '../../shared/services/telemetry.service';
 import { SpecPickerInput, NewPlanSpecPickerData, PlanPriceSpecManager } from './price-spec-manager/plan-price-spec-manager';
 import { PortalResources } from '../../shared/models/portal-resources';
+import { GroupTabsComponent } from '../../controls/group-tabs/group-tabs.component';
 
 describe('SpecPickerComponent', () => {
     let component: SpecPickerComponent;
@@ -37,16 +38,18 @@ describe('SpecPickerComponent', () => {
                 SpecListComponent,
                 SpecFeatureListComponent,
                 RemoveSpacesPipe,
-                MockDirective(LoadImageDirective)],
+                GroupTabsComponent,
+                MockDirective(LoadImageDirective),
+            ],
             imports: [TranslateModule.forRoot()],
             providers: [
                 { provide: AuthzService, useClass: MockAuthzService },
                 { provide: PortalService, useClass: MockPortalService },
                 { provide: BroadcastService, useClass: MockBroadcastService },
                 { provide: LogService, useClass: MockLogService },
                 { provide: TelemetryService, useClass: MockTelemetryService },
-                { provide: PlanPriceSpecManager, useClass: MockSpecManager }
-            ]
+                { provide: PlanPriceSpecManager, useClass: MockSpecManager },
+            ],
         })
             .compileComponents();
     }));
@@ -76,7 +79,7 @@ describe('SpecPickerComponent', () => {
             data: {
                 id: planResourceId,
                 data: null,
-                specPicker: component
+                specPicker: component,
             },
         };
 
@@ -94,7 +97,7 @@ describe('SpecPickerComponent', () => {
             resourceId: planResourceId,
             dashboardType: null,
             node: null,
-            data: null
+            data: null,
         };
 
         component.viewInfoInput = input;
@@ -115,7 +118,7 @@ describe('SpecPickerComponent', () => {
             resourceId: planResourceId,
             dashboardType: null,
             node: null,
-            data: null
+            data: null,
         };
 
         const authZService: MockAuthzService = TestBed.get(AuthzService);
@@ -137,7 +140,7 @@ describe('SpecPickerComponent', () => {
             resourceId: planResourceId,
             dashboardType: null,
             node: null,
-            data: null
+            data: null,
         };
 
         const authZService: MockAuthzService = TestBed.get(AuthzService);