Fixed authorization header remove logic

src/components/operations/operation-details/ko/runtime/authorization.ts

@@ -36,6 +36,7 @@ export class Authorization {
     public readonly products: ko.Observable<Product[]>;
     public readonly selectedSubscriptionKey: ko.Observable<string>;
     public readonly collapsedAuth: ko.Observable<boolean>;
+    private deleteAuthorizationHeader: boolean = false;
 
     constructor(
         private readonly sessionManager: SessionManager,
@@ -137,15 +138,22 @@ export class Authorization {
     }
 
     private setAuthorizationHeader(accessToken: string): void {
-        this.removeAuthorizationHeader();
+        const authorizationHeader = this.getAuthorizationHeader();
 
+        if (authorizationHeader) {
+            authorizationHeader.value(accessToken);
+            this.deleteAuthorizationHeader = false;
+            return;
+        }
+
+        this.deleteAuthorizationHeader = true;
         const keyHeader = new ConsoleHeader();
         keyHeader.name(KnownHttpHeaders.Authorization);
         keyHeader.description = "Subscription key.";
-        keyHeader.secret = true;
+        keyHeader.secret(true);
         keyHeader.inputTypeValue("password");
         keyHeader.type = "string";
-        keyHeader.required = true;
+        keyHeader.required = false;
         keyHeader.value(accessToken);
 
         if (!this.isGraphQL()) {
@@ -174,6 +182,10 @@ export class Authorization {
         return this.findHeader(subscriptionKeyHeaderName);
     }
 
+    private getAuthorizationHeader(): ConsoleHeader {
+        return this.findHeader(KnownHttpHeaders.Authorization);
+    }
+
     private setSubscriptionKeyHeader(subscriptionKey: string): void {
         this.removeSubscriptionKeyHeader();
 
@@ -186,7 +198,7 @@ export class Authorization {
         const keyHeader = new ConsoleHeader();
         keyHeader.name(subscriptionKeyHeaderName);
         keyHeader.description = "Subscription key.";
-        keyHeader.secret = true;
+        keyHeader.secret(true);
         keyHeader.inputTypeValue("password");
         keyHeader.type = "string";
         keyHeader.required = true;
@@ -201,29 +213,29 @@ export class Authorization {
         }
     }
 
-    private async clearStoredCredentials(grantTypeChanged?: boolean): Promise<void> {
+    private async clearStoredCredentials(): Promise<void> {
         await this.sessionManager.removeItem(oauthSessionKey);
-
-        if (grantTypeChanged) {
-            this.removeAuthorizationHeader(true);
-        }
     }
 
-    private removeAuthorizationHeader(clearValue: boolean = false): void {
-        const authorizationHeader = this.findHeader(KnownHttpHeaders.Authorization);
+    private removeAuthorizationHeader(): void {
+        const authorizationHeader = this.getAuthorizationHeader();
 
-        if (clearValue && authorizationHeader && authorizationHeader.required) {
-            authorizationHeader.value(null);
-        } else {
-            this.removeHeader(authorizationHeader);
+        if (authorizationHeader) {
+            if (!this.deleteAuthorizationHeader) {
+                authorizationHeader.value(null);
+            } else {
+                this.removeHeader(authorizationHeader);
+            }
         }
+
         this.authenticated(false);
     }
 
     private async onGrantTypeChange(grantType: string): Promise<void> {
-        await this.clearStoredCredentials(true);
+        await this.clearStoredCredentials();
 
         if (!grantType || grantType === GrantTypes.password) {
+            this.removeAuthorizationHeader();
             return;
         }
 

src/components/operations/operation-details/ko/runtime/operation-console.html

@@ -219,12 +219,12 @@ <h3>Headers
                             <!-- /ko -->
                             <!-- ko if: !header.options || header.options.length === 0 -->
                             <div class="input-group has-validation">
-                                <!-- ko if: !header.secret -->
+                                <!-- ko if: !header.secret() -->
                                 <input type="text" autocomplete="off" class="form-control form-control-sm"
                                     placeholder="value" spellcheck="false" aria-label="Header value"
                                     data-bind="textInput: header.value, attr:{'aria-required': header.required}">
                                 <!-- /ko -->
-                                <!-- ko if: header.secret -->
+                                <!-- ko if: header.secret() -->
                                 <input autocomplete="off" class="form-control form-control-sm" placeholder="value"
                                     spellcheck="false" aria-label="Header value"
                                     data-bind="attr: {type: header.inputTypeValue, 'aria-required': header.required}, textInput: header.value">

src/components/operations/operation-details/ko/runtime/operation-console.ts

@@ -238,7 +238,8 @@ export class OperationConsole {
             this.setVersionHeader();
         }
 
-        this.consoleOperation().request.meaningfulHeaders().forEach(header => header.value.subscribe(_ => this.updateRequestSummary()));
+        this.consoleOperation().request.headers().forEach(header => header.value.subscribe(_ => this.updateRequestSummary()));
+        this.consoleOperation().request.headers().forEach(header => header.name.subscribe(_ => this.updateRequestSummary()));
         this.consoleOperation().request.body.subscribe(_ => this.updateRequestSummary());
         this.consoleOperation().request.queryParameters().forEach(parameter => parameter.value.subscribe(_ => this.updateRequestSummary()));
 
@@ -320,6 +321,7 @@ export class OperationConsole {
         const newHeader = new ConsoleHeader();
         this.consoleOperation().request.headers.push(newHeader);
         newHeader.value.subscribe(_ => this.updateRequestSummary());
+        newHeader.name.subscribe(_ => this.updateRequestSummary());
 
         this.updateRequestSummary();
     }

src/models/console/consoleHeader.ts

@@ -1,4 +1,5 @@
 import * as ko from "knockout";
+import { KnownHttpHeaders } from "../knownHttpHeaders";
 import { Parameter } from "../parameter";
 
 export class ConsoleHeader {
@@ -9,7 +10,7 @@ export class ConsoleHeader {
     public readonly options: string[];
     public inputTypeValue: ko.Observable<string>;
     public required: boolean;
-    public secret: boolean;
+    public secret: ko.Observable<boolean>;
     public revealed: ko.Observable<boolean>;
     public description: string;
     public type: string;
@@ -27,6 +28,7 @@ export class ConsoleHeader {
     constructor(contract?: Parameter) {
         this.name = ko.observable(null);
         this.value = ko.observable(null);
+        this.secret = ko.observable();
         this.revealed = ko.observable(false);
         this.inputTypeValue = ko.observable("text");
         this.options = [];
@@ -37,8 +39,18 @@ export class ConsoleHeader {
         this.description = "Additional header.";
         this.hiddenValue = ko.computed<string>(() => this.value()?.replace(/./g, "•"));
 
+        this.name.subscribe(name => {
+            if (name == KnownHttpHeaders.Authorization) {
+                this.secret(true);
+            } else {
+                this.secret(false);
+            }
+        });
+
+        this.secret.subscribe(() => this.inputTypeValue((this.secret() && !this.revealed() ? "password" : "text")));
+
         this.revealed.subscribe(() => {
-            this.inputTypeValue(this.secret && !this.revealed() ? "password" : "text");
+            this.inputTypeValue(this.secret() && !this.revealed() ? "password" : "text");
         });
 
         this.name.extend(<any>{ required: { message: `Name is required.` } });
@@ -52,8 +64,7 @@ export class ConsoleHeader {
         this.options = contract.values;
         this.description = contract.description ? contract.description : "";
         this.type = contract.type;
-        this.secret = false;
-        this.inputTypeValue(this.secret && !this.revealed() ? "password" : "text");
+        this.secret(this.name() == KnownHttpHeaders.Authorization ? true : false);
 
         if (this.required) {
             this.value.extend(<any>{ required: { message: `Value is required.` } });