Add missing 'basic' to basic auth

Fix #33 by adding the missing 'Basic'
cloudspout · Nov 24, 2020 · 6ba38a0 · 6ba38a0
1 parent 8c860bd
commit 6ba38a0
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 50 deletions.
diff --git a/dist/module.js b/dist/module.js
diff --git a/dist/module.js.map b/dist/module.js.map
diff --git a/dist/plugin.json b/dist/plugin.json
@@ -32,7 +32,7 @@
         }
     ],
     "version": "7.0.22",
-    "updated": "2020-11-21"
+    "updated": "2020-11-24"
   },
   "dependencies": {
     "grafanaVersion": "7.x.x",

diff --git a/src/ButtonPanel.test.tsx b/src/ButtonPanel.test.tsx
@@ -1,43 +1,50 @@
 import { ButtonPanel } from './ButtonPanel';
 import { ButtonPanelOptions } from './types';
 
+class TestProps {
+  options: ButtonPanelOptions = {
+    url: '',
+    type: 'header',
+    contentType: '',
+    isAuth: false,
+    params: [],
+    text: '',
+    variant: 'primary',
+    orientation: '',
+  };
+}
+
 describe('ButtonPanel', () => {
-
-    let underTest : ButtonPanel;
-    let props: any;
-
-    beforeEach(() => {
-        let options : ButtonPanelOptions = {
-            url: '',
-            type: '',
-            contentType: '',
-            isAuth: false,
-            params: [],
-            text: '',
-            variant: 'primary',
-            orientation: '',
-
-        };
-        props = {
-            options
-         };
-        underTest = new ButtonPanel(props);
-    });
-
-    it('should set a proper orientation', () => {
-
-        expect(underTest.getOrientation()).toBe('center');
-
-        props.options.orientation = 'left';
-        expect(underTest.getOrientation()).toBe('left');
-
-        props.options.orientation = 'right';
-        expect(underTest.getOrientation()).toBe('right');
-
-        props.options.orientation = 'center';
-        expect(underTest.getOrientation()).toBe('center');
-
-    });
+  let underTest: ButtonPanel;
+  let props = new TestProps();
+
+  beforeEach(() => {
+    props = new TestProps();
+    underTest = new ButtonPanel(props);
+  });
+
+  it('should set a proper orientation', () => {
+    expect(underTest.getOrientation()).toBe('center');
+
+    props.options.orientation = 'left';
+    expect(underTest.getOrientation()).toBe('left');
+
+    props.options.orientation = 'right';
+    expect(underTest.getOrientation()).toBe('right');
+
+    props.options.orientation = 'center';
+    expect(underTest.getOrientation()).toBe('center');
+  });
+
+  it('should send a proper basic auth header', () => {
+    let url = new URL('http://example.com');
+
+    props.options.isAuth = true;
+    props.options.username = 'username';
+    props.options.password = 'password';
 
+    let actual = underTest.prepareFetchOpts(url);
+    expect(actual).toBeDefined();
+    expect((actual.headers as Headers).get('authorization')).toBe('Basic dXNlcm5hbWU6cGFzc3dvcmQ=');
   });
-  
+});
diff --git a/src/ButtonPanel.tsx b/src/ButtonPanel.tsx
@@ -1,4 +1,4 @@
-import "isomorphic-fetch";
+import 'isomorphic-fetch';
 import React, { PureComponent } from 'react';
 import { Button, IconName, ButtonVariant } from '@grafana/ui';
 import { PanelProps } from '@grafana/data';
@@ -30,7 +30,7 @@ export class ButtonPanel extends PureComponent<Props, ButtonPanelState> {
         return 'exclamation-triangle';
       case 'READY':
       default:
-        return this.props.options.icon;// options.icon;
+        return this.props.options.icon;
     }
   }
 
@@ -41,7 +41,7 @@ export class ButtonPanel extends PureComponent<Props, ButtonPanelState> {
       default:
         return '';
     }
-  };
+  }
 
   getOrientation() {
     if (!this.props.options.orientation) {
@@ -56,7 +56,7 @@ export class ButtonPanel extends PureComponent<Props, ButtonPanelState> {
       default:
         return 'center';
     }
-  };
+  }
 
   customStyle() {
     if (this.props.options.variant === 'custom') {
@@ -73,7 +73,7 @@ export class ButtonPanel extends PureComponent<Props, ButtonPanelState> {
     }
   }
 
-  variant() : ButtonVariant | undefined {
+  variant(): ButtonVariant | undefined {
     if (this.props.options.variant === 'custom') {
       return undefined;
     } else {
@@ -85,11 +85,11 @@ export class ButtonPanel extends PureComponent<Props, ButtonPanelState> {
     return this.interpolateVariables(this.props.options.text);
   }
 
-  interpolateVariables(text: string){
+  interpolateVariables(text: string) {
     return getTemplateSrv().replace(text, this.props.data.request?.scopedVars);
   }
 
-  prepareFetchOpts(url: URL) : RequestInit {    
+  prepareFetchOpts(url: URL): RequestInit {
     const { options } = this.props;
 
     const requestHeaders: HeadersInit = new Headers();
@@ -113,7 +113,7 @@ export class ButtonPanel extends PureComponent<Props, ButtonPanelState> {
     }
 
     if (options.isAuth) {
-      requestHeaders.set('Authorization', btoa(options.username + ':' + options.password));
+      requestHeaders.set('Authorization', 'Basic ' + btoa(options.username + ':' + options.password));
     }
 
     if (options.params) {

diff --git a/src/module.ts b/src/module.ts
@@ -118,7 +118,7 @@ export const plugin = new PanelPlugin<ButtonPanelOptions>(ButtonPanel).setPanelO
       settings: {
         disableNamedColors: true,
       },
-      showIf: config => config.variant == 'custom',
+      showIf: config => config.variant === 'custom',
     })
     .addColorPicker({
       path: 'backgroundColor',
@@ -127,7 +127,7 @@ export const plugin = new PanelPlugin<ButtonPanelOptions>(ButtonPanel).setPanelO
       settings: {
         disableNamedColors: true,
       },
-      showIf: config => config.variant == 'custom',
+      showIf: config => config.variant === 'custom',
     })
     .addRadio({
       path: 'orientation',