Added ability to enable/disable headers.

Closes #1258

packages/altair-app/src/app/actions/headers/headers.ts

@@ -6,6 +6,7 @@ export const ADD_HEADER = 'ADD_HEADER';
 export const REMOVE_HEADER = 'REMOVE_HEADER';
 export const EDIT_HEADER_KEY = 'EDIT_HEADER_KEY';
 export const EDIT_HEADER_VALUE = 'EDIT_HEADER_VALUE';
+export const EDIT_HEADER_ENABLED = 'EDIT_HEADER_ENABLED';
 export const SET_HEADERS = 'SET_HEADERS';
 
 export class AddHeaderAction implements NGRXAction {
@@ -32,10 +33,23 @@ export class EditHeaderValueAction implements NGRXAction {
     constructor(public payload: any, public windowId: string) {}
 }
 
+export class EditHeaderEnabledAction implements NGRXAction {
+    readonly type = EDIT_HEADER_ENABLED;
+
+    constructor(public payload: { val: boolean, i: number }, public windowId: string) {}
+}
+
 export class SetHeadersAction implements NGRXAction {
   readonly type = SET_HEADERS;
 
   constructor(public payload: { headers: Array<fromHeaders.Header> }, public windowId: string) { }
 }
 
-export type Action = AddHeaderAction | RemoveHeaderAction | EditHeaderKeyAction | EditHeaderValueAction | SetHeadersAction;
+export type Action =
+    | AddHeaderAction
+    | RemoveHeaderAction
+    | EditHeaderKeyAction
+    | EditHeaderValueAction
+    | EditHeaderEnabledAction
+    | SetHeadersAction
+    ;

packages/altair-app/src/app/containers/window/window.component.html

@@ -106,7 +106,16 @@
 
       <ng-template #modalContent>
         <div class="app-dialog-body">
-          <div class="set-header-input-container" *ngFor="let header of headers$ | async;trackBy:trackByFn; let i = index">
+          <div
+            class="set-header-input-container"
+            *ngFor="let header of headers$ | async;trackBy:trackByFn; let i = index"
+            [ngClass]="{ 'set-header-input-container--disabled': !header.enabled }"
+          >
+            <label
+              nz-checkbox
+              [ngModel]="header.enabled"
+              (ngModelChange)="headerEnabledChange($event, i)"
+            ></label>
             <div class="set-header-input-column">
               <app-fancy-input
                 class="set-header-input"

packages/altair-app/src/app/containers/window/window.component.ts

@@ -371,6 +371,10 @@ export class WindowComponent implements OnInit, OnDestroy {
     this.store.dispatch(new headerActions.EditHeaderValueAction({ val, i }, this.windowId));
   }
 
+  headerEnabledChange(val: boolean, i: number) {
+    this.store.dispatch(new headerActions.EditHeaderEnabledAction({ val, i }, this.windowId));
+  }
+
   removeHeader(i: number) {
     this.store.dispatch(new headerActions.RemoveHeaderAction(i, this.windowId));
   }

packages/altair-app/src/app/reducers/headers/headers.ts

@@ -9,43 +9,50 @@ export const getInitialHeadersState = () => {
     if (altairConfig.initialData.headers) {
         initialHeaders = Object.keys(altairConfig.initialData.headers).map(key => ({
             key,
-            value: altairConfig.initialData.headers[key] ? '' + altairConfig.initialData.headers[key] : ''
+            value: altairConfig.initialData.headers[key] ? '' + altairConfig.initialData.headers[key] : '',
+            enabled: true,
         }));
     }
-    initialHeaders = [ ...initialHeaders, { key: '', value: '' } ];
+    initialHeaders = [ ...initialHeaders, { key: '', value: '', enabled: true } ];
 
     return initialHeaders;
 };
-
+let isReduced = false;
 export interface Header {
     key: string;
     value: string;
+    enabled?: boolean;
 }
 
-export interface State extends Array<Header> {
-    [index: number]: Header;
-}
+export type State = Header[];
 
 export function headerReducer(state = getInitialHeadersState(), action: headers.Action): State {
     switch (action.type) {
         case headers.ADD_HEADER:
             return [
                 ...state,
-                { key: '', value: '' }
+                { key: '', value: '', enabled: true }
             ];
         case headers.SET_HEADERS:
             return [ ...action.payload.headers ];
         case headers.EDIT_HEADER_KEY:
             return state.map((val, i) => {
                 if (i === action.payload.i) {
-                    return { key: action.payload.val, value: val.value };
+                    return { ...val, key: action.payload.val };
                 }
                 return val;
             });
         case headers.EDIT_HEADER_VALUE:
             return state.map((val, i) => {
                 if (i === action.payload.i) {
-                    return { key: val.key, value: action.payload.val };
+                    return { ...val, value: action.payload.val };
+                }
+                return val;
+            });
+        case headers.EDIT_HEADER_ENABLED:
+            return state.map((val, i) => {
+                if (i === action.payload.i) {
+                    return { ...val, enabled: action.payload.val };
                 }
                 return val;
             });
@@ -54,6 +61,16 @@ export function headerReducer(state = getInitialHeadersState(), action: headers.
                 return i !== action.payload;
             });
         default:
+            if (!isReduced) {
+                isReduced = true;
+                // Ensure backward compatibility
+                return state.map(header => {
+                    return {
+                        ...header,
+                        enabled: header.enabled === false ? header.enabled : true
+                    }
+                });
+            }
             return state;
     }
 }

packages/altair-app/src/app/services/environment/environment.service.ts

@@ -75,6 +75,7 @@ export class EnvironmentService {
       return {
         key: this.hydrate(header.key, options),
         value: this.hydrate(header.value, options),
+        enabled: header.enabled,
       };
     });
 

packages/altair-app/src/app/services/gql/gql.service.ts

@@ -116,7 +116,7 @@ export class GqlService {
 
     if (headers && headers.length) {
       headers.forEach(header => {
-        if (!forbiddenHeaders.includes(header.key) && header.key && header.value) {
+        if (!forbiddenHeaders.includes(header.key) && header.enabled && header.key && header.value) {
           newHeaders = newHeaders.set(header.key, header.value);
         }
       });

packages/altair-app/src/scss/components/_dialog.scss

@@ -1,89 +1,111 @@
-.app-dialog{
+.app-dialog {
   background: var(--theme-bg-color);
   border-radius: 5px;
   padding: 20px;
   box-shadow: 0 5px 12px 2px rgba(var(--rgb-black), .1);
 }
-.app-dialog-header{
+
+.app-dialog-header {
   margin-bottom: 30px;
   color: var(--theme-font-color);
   font-size: fontsize(14);
 }
-.app-dialog-title{
+
+.app-dialog-title {
   color: $green;
   font-weight: bold;
   font-size: fontsize(14);
   text-transform: uppercase;
   line-height: 1;
 }
-.app-dialog-body{
+
+.app-dialog-body {
   margin-bottom: 10px;
   // max-height: 500px;
   overflow: auto;
 }
+
 .app-dialog-section {
   margin-bottom: 20px;
 }
+
 .app-dialog-footer {
   width: 100%;
 }
 
-.dialog-select, .dialog-input {
+.dialog-select,
+.dialog-input {
   display: block;
   font-size: fontsize(14);
   padding: 5px 0;
   line-height: 1;
-  border: none;
+  border: 0;
   border-bottom: 2px solid var(--theme-border-color);
   transition: all .3s ease;
   min-width: 250px;
   border-radius: 0;
   background: transparent;
   color: var(--theme-font-color);
-  &:focus{
+
+  &:focus {
     border-color: $green;
   }
+
   option {
     color: $black;
   }
 }
+
 .dialog-textarea {
   width: 100%;
   border: 1px solid $green;
   border-radius: 4px;
 }
+
 .dialog-block {
   width: 100%;
   display: block;
 }
+
 .set-header-input-container {
   display: flex;
+  align-items: center;
   flex: 1;
   margin-bottom: 30px;
 }
+
+.set-header-input-container--disabled {
+  opacity: .5;
+}
+
 .set-header-input-column {
   max-width: 50%;
   flex: 1;
   padding: 0 10px;
 }
-.set-header-input, .dialog-input {
+
+.set-header-input,
+.dialog-input {
   font-size: fontsize(14);
   padding: 5px 0;
   // line-height: 1;
-  border: none;
+  border: 0;
   border-bottom: 2px solid var(--theme-border-color);
   transition: all .3s ease;
-  &:focus{
+
+  &:focus {
     border-color: $green;
   }
 }
+
 .header-input-remove-button {
   font-size: fontsize(16);
   background: transparent;
-  border: none;
+  border: 0;
   cursor: pointer;
   transition: all .3s ease;
-  &:hover{
+
+  &:hover {
     color: $red;
   }
 }