Default to the first credential tab if no cookie

Also removes the credential dialog id, to ensure persistence across
sessions
This commit is contained in:
Sam Chow 2018-04-25 16:01:13 -04:00
parent f89ad30320
commit b5db46ad06
4 changed files with 16 additions and 14 deletions

View file

@ -9,27 +9,27 @@
<cor-tab-panel orientation="vertical" cor-cookie-tabs="quay.credentialsTab"> <cor-tab-panel orientation="vertical" cor-cookie-tabs="quay.credentialsTab">
<!-- Tabs --> <!-- Tabs -->
<cor-tabs> <cor-tabs>
<cor-tab tab-active="true" tab-id="cred-secret-{{ ::dialogID }}"> <cor-tab tab-active="true" tab-id="cred-secret">
<i class="fa" ng-class="entityIcon"></i> {{ secretTitle }} <i class="fa" ng-class="entityIcon"></i> {{ secretTitle }}
</cor-tab> </cor-tab>
<cor-tab tab-id="cred-kubernetes-{{ ::dialogID }}"> <cor-tab tab-id="cred-kubernetes">
<i class="fa kubernetes-icon icon"></i> Kubernetes Secret <i class="fa kubernetes-icon icon"></i> Kubernetes Secret
</cor-tab> </cor-tab>
<cor-tab tab-id="cred-rkt-{{ ::dialogID }}"> <cor-tab tab-id="cred-rkt">
<i class="fa rocket-icon icon"></i> rkt Configuration <i class="fa rocket-icon icon"></i> rkt Configuration
</cor-tab> </cor-tab>
<cor-tab tab-id="cred-docker-login-{{ ::dialogID }}"> <cor-tab tab-id="cred-docker">
<i class="fa docker-icon icon"></i> Docker Login <i class="fa docker-icon icon"></i> Docker Login
</cor-tab> </cor-tab>
<cor-tab tab-id="cred-docker-{{ ::dialogID }}"> <cor-tab tab-id="cred-docker-config">
<i class="fa docker-icon icon"></i> Docker Configuration <i class="fa docker-icon icon"></i> Docker Configuration
</cor-tab> </cor-tab>
<cor-tab tab-id="cred-mesos-{{ ::dialogID }}" quay-show="isDownloadSupported()"> <cor-tab tab-id="cred-mesos" quay-show="isDownloadSupported()">
<i class="fa mesos-icon icon"></i> Mesos Credentials <i class="fa mesos-icon icon"></i> Mesos Credentials
</cor-tab> </cor-tab>
</cor-tabs> </cor-tabs>
@ -41,7 +41,7 @@
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</h3> </h3>
<cor-tab-pane id="cred-secret-{{ ::dialogID }}"> <cor-tab-pane id="cred-secret">
<label>{{ secretTitle }}:</label> <label>{{ secretTitle }}:</label>
<div class="copy-box" value="credentials.password"></div> <div class="copy-box" value="credentials.password"></div>
<div class="help-text"> <div class="help-text">
@ -51,7 +51,7 @@
<div ng-transclude/> <div ng-transclude/>
</cor-tab-pane> </cor-tab-pane>
<cor-tab-pane id="cred-kubernetes-{{ ::dialogID }}"> <cor-tab-pane id="cred-kubernetes">
<label>Step 1: Download secret</label> <label>Step 1: Download secret</label>
<div class="action-text">First, download the Kubernetes pull secret for the {{ entityTitle }}:</div> <div class="action-text">First, download the Kubernetes pull secret for the {{ entityTitle }}:</div>
<ul class="action-bar"> <ul class="action-bar">
@ -85,7 +85,7 @@ spec:
</div> </div>
</cor-tab-pane> </cor-tab-pane>
<cor-tab-pane id="cred-mesos-{{ ::dialogID }}"> <cor-tab-pane id="cred-mesos">
<label>Step 1: Download credentials bundle</label> <label>Step 1: Download credentials bundle</label>
<div class="action-text">First, download the Docker credentials file as a bundle:</div> <div class="action-text">First, download the Docker credentials file as a bundle:</div>
<ul class="action-bar"> <ul class="action-bar">
@ -124,7 +124,7 @@ spec:
</div> </div>
</cor-tab-pane> </cor-tab-pane>
<cor-tab-pane id="cred-rkt-{{ ::dialogID }}"> <cor-tab-pane id="cred-rkt">
<label>Step 1: Download credentials config</label> <label>Step 1: Download credentials config</label>
<div class="action-text">First, download the rkt credentials file for the {{ entityTitle }}:</div> <div class="action-text">First, download the rkt credentials file for the {{ entityTitle }}:</div>
<ul class="action-bar"> <ul class="action-bar">
@ -139,13 +139,13 @@ spec:
<div class="copy-box" value="'mv ' + getRktFilename(credentials) + ' /etc/rkt/auth.d/'"></div> <div class="copy-box" value="'mv ' + getRktFilename(credentials) + ' /etc/rkt/auth.d/'"></div>
</cor-tab-pane> </cor-tab-pane>
<cor-tab-pane id="cred-docker-login-{{ ::dialogID }}"> <cor-tab-pane id="cred-docker">
<label>Run docker login</label> <label>Run docker login</label>
<div class="action-text">Enter the following command on the command line:</div> <div class="action-text">Enter the following command on the command line:</div>
<div class="copy-box" value="getDockerLogin(credentials)"></div> <div class="copy-box" value="getDockerLogin(credentials)"></div>
</cor-tab-pane> </cor-tab-pane>
<cor-tab-pane id="cred-docker-{{ ::dialogID }}"> <cor-tab-pane id="cred-docker-config">
<label>Step 1: Download credentials config</label> <label>Step 1: Download credentials config</label>
<div class="action-text">First, download the Docker credentials file for the {{ entityTitle }}:</div> <div class="action-text">First, download the Docker credentials file for the {{ entityTitle }}:</div>
<ul class="action-bar"> <ul class="action-bar">

View file

@ -20,6 +20,7 @@ export class CorCookieTabsDirective implements AfterContentInit {
public ngAfterContentInit(): void { public ngAfterContentInit(): void {
// Set initial tab // Set initial tab
const tabId: string = this.cookieService.get(this.cookieName); const tabId: string = this.cookieService.get(this.cookieName);
this.panel.activeTab.next(tabId); this.panel.activeTab.next(tabId);
this.panel.activeTab.subscribe((tab: string) => { this.panel.activeTab.subscribe((tab: string) => {

View file

@ -14,9 +14,9 @@ import 'rxjs/add/operator/filter';
} }
}) })
export class CorTabComponent implements OnInit { export class CorTabComponent implements OnInit {
@Input('@') public tabId: string; @Input('@') public tabId: string;
@Input('@') public tabTitle: string; @Input('@') public tabTitle: string;
@Input('<') public tabActive: boolean = false;
@Output() public tabInit: EventEmitter<any> = new EventEmitter(); @Output() public tabInit: EventEmitter<any> = new EventEmitter();
@Output() public tabShow: EventEmitter<any> = new EventEmitter(); @Output() public tabShow: EventEmitter<any> = new EventEmitter();
@ -29,6 +29,8 @@ export class CorTabComponent implements OnInit {
} }
public ngOnInit(): void { public ngOnInit(): void {
this.isActive = this.tabActive;
this.panel.activeTab this.panel.activeTab
.filter(tabId => tabId != undefined) .filter(tabId => tabId != undefined)
.subscribe((tabId: string) => { .subscribe((tabId: string) => {

View file

@ -34,7 +34,6 @@ angular.module('quay').directive('credentialsDialog', function () {
} }
$rootScope.credentialsDialogCounter++; $rootScope.credentialsDialogCounter++;
$scope.dialogID = $rootScope.credentialsDialogCounter;
$scope.hide = function() { $scope.hide = function() {
$element.find('.modal').modal('hide'); $element.find('.modal').modal('hide');