From b5db46ad0656a27111c46773cdaacc0db04c2e83 Mon Sep 17 00:00:00 2001
From: Sam Chow <schow@redhat.com>
Date: Wed, 25 Apr 2018 16:01:13 -0400
Subject: [PATCH] Default to the first credential tab if no cookie

Also removes the credential dialog id, to ensure persistence across
sessions
---
 static/directives/credentials-dialog.html     | 24 +++++++++----------
 .../cor-cookie-tabs.directive.ts              |  1 +
 .../ui/cor-tabs/cor-tab/cor-tab.component.ts  |  4 +++-
 static/js/directives/ui/credentials-dialog.js |  1 -
 4 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/static/directives/credentials-dialog.html b/static/directives/credentials-dialog.html
index 53672d9b3..e845622b8 100644
--- a/static/directives/credentials-dialog.html
+++ b/static/directives/credentials-dialog.html
@@ -9,27 +9,27 @@
           <cor-tab-panel orientation="vertical" cor-cookie-tabs="quay.credentialsTab">
             <!-- 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 }}
               </cor-tab>
 
-              <cor-tab tab-id="cred-kubernetes-{{ ::dialogID }}">
+              <cor-tab tab-id="cred-kubernetes">
                 <i class="fa kubernetes-icon icon"></i> Kubernetes Secret
               </cor-tab>
 
-              <cor-tab tab-id="cred-rkt-{{ ::dialogID }}">
+              <cor-tab tab-id="cred-rkt">
                 <i class="fa rocket-icon icon"></i> rkt Configuration
               </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
               </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
               </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
               </cor-tab>
             </cor-tabs>
@@ -41,7 +41,7 @@
                   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
               </h3>
 
-              <cor-tab-pane id="cred-secret-{{ ::dialogID }}">
+              <cor-tab-pane id="cred-secret">
                 <label>{{ secretTitle }}:</label>
                 <div class="copy-box" value="credentials.password"></div>
                 <div class="help-text">
@@ -51,7 +51,7 @@
                 <div ng-transclude/>
               </cor-tab-pane>
 
-              <cor-tab-pane id="cred-kubernetes-{{ ::dialogID }}">
+              <cor-tab-pane id="cred-kubernetes">
                 <label>Step 1: Download secret</label>
                 <div class="action-text">First, download the Kubernetes pull secret for the {{ entityTitle }}:</div>
                 <ul class="action-bar">
@@ -85,7 +85,7 @@ spec:
                   </div>
               </cor-tab-pane>
 
-              <cor-tab-pane id="cred-mesos-{{ ::dialogID }}">
+              <cor-tab-pane id="cred-mesos">
                 <label>Step 1: Download credentials bundle</label>
                 <div class="action-text">First, download the Docker credentials file as a bundle:</div>
                 <ul class="action-bar">
@@ -124,7 +124,7 @@ spec:
                 </div>
               </cor-tab-pane>
 
-              <cor-tab-pane id="cred-rkt-{{ ::dialogID }}">
+              <cor-tab-pane id="cred-rkt">
                 <label>Step 1: Download credentials config</label>
                 <div class="action-text">First, download the rkt credentials file for the {{ entityTitle }}:</div>
                 <ul class="action-bar">
@@ -139,13 +139,13 @@ spec:
                 <div class="copy-box" value="'mv ' + getRktFilename(credentials) + ' /etc/rkt/auth.d/'"></div>
               </cor-tab-pane>
 
-              <cor-tab-pane id="cred-docker-login-{{ ::dialogID }}">
+              <cor-tab-pane id="cred-docker">
                 <label>Run docker login</label>
                 <div class="action-text">Enter the following command on the command line:</div>
                 <div class="copy-box" value="getDockerLogin(credentials)"></div>
               </cor-tab-pane>
 
-              <cor-tab-pane id="cred-docker-{{ ::dialogID }}">
+              <cor-tab-pane id="cred-docker-config">
                 <label>Step 1: Download credentials config</label>
                 <div class="action-text">First, download the Docker credentials file for the {{ entityTitle }}:</div>
                 <ul class="action-bar">
diff --git a/static/js/directives/ui/cor-tabs/cor-cookie-tabs/cor-cookie-tabs.directive.ts b/static/js/directives/ui/cor-tabs/cor-cookie-tabs/cor-cookie-tabs.directive.ts
index d6f7e3302..ffba02bd9 100644
--- a/static/js/directives/ui/cor-tabs/cor-cookie-tabs/cor-cookie-tabs.directive.ts
+++ b/static/js/directives/ui/cor-tabs/cor-cookie-tabs/cor-cookie-tabs.directive.ts
@@ -20,6 +20,7 @@ export class CorCookieTabsDirective implements AfterContentInit {
   public ngAfterContentInit(): void {
     // Set initial tab
     const tabId: string = this.cookieService.get(this.cookieName);
+
     this.panel.activeTab.next(tabId);
 
     this.panel.activeTab.subscribe((tab: string) => {
diff --git a/static/js/directives/ui/cor-tabs/cor-tab/cor-tab.component.ts b/static/js/directives/ui/cor-tabs/cor-tab/cor-tab.component.ts
index 0fc76f7fd..cfda80acc 100644
--- a/static/js/directives/ui/cor-tabs/cor-tab/cor-tab.component.ts
+++ b/static/js/directives/ui/cor-tabs/cor-tab/cor-tab.component.ts
@@ -14,9 +14,9 @@ import 'rxjs/add/operator/filter';
   }
 })
 export class CorTabComponent implements OnInit {
-
   @Input('@') public tabId: string;
   @Input('@') public tabTitle: string;
+  @Input('<') public tabActive: boolean = false;
 
   @Output() public tabInit: EventEmitter<any> = new EventEmitter();
   @Output() public tabShow: EventEmitter<any> = new EventEmitter();
@@ -29,6 +29,8 @@ export class CorTabComponent implements OnInit {
   }
 
   public ngOnInit(): void {
+    this.isActive = this.tabActive;
+
     this.panel.activeTab
       .filter(tabId => tabId != undefined)
       .subscribe((tabId: string) => {
diff --git a/static/js/directives/ui/credentials-dialog.js b/static/js/directives/ui/credentials-dialog.js
index 5864d5c7a..ca9a81105 100644
--- a/static/js/directives/ui/credentials-dialog.js
+++ b/static/js/directives/ui/credentials-dialog.js
@@ -34,7 +34,6 @@ angular.module('quay').directive('credentialsDialog', function () {
       }
 
       $rootScope.credentialsDialogCounter++;
-      $scope.dialogID = $rootScope.credentialsDialogCounter;
 
       $scope.hide = function() {
         $element.find('.modal').modal('hide');