Prevent submitting the datasource form in Loki's datasource configuration page (#31823)

packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { CustomHeadersSettings, Props } from './CustomHeadersSettings';
+import { Button } from '../Button';
 
 const setup = (propOverrides?: object) => {
   const props: Props = {
@@ -48,6 +49,11 @@ describe('Render', () => {
     expect(wrapper.find('SecretFormField').exists()).toBeTruthy();
   });
 
+  it('add header button should not submit the form', () => {
+    const wrapper = setup();
+    expect(wrapper.find(Button).getDOMNode()).toHaveAttribute('type', 'button');
+  });
+
   it('should remove a header', () => {
     const wrapper = setup({
       dataSourceConfig: {

packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx

@@ -206,6 +206,7 @@ export class CustomHeadersSettings extends PureComponent<Props, State> {
           <Button
             variant="secondary"
             icon="plus"
+            type="button"
             onClick={(e) => {
               this.onHeaderAdd();
             }}

public/app/plugins/datasource/loki/configuration/DerivedFields.test.tsx

@@ -38,6 +38,12 @@ describe('DerivedFields', () => {
     expect(wrapper.find(Button).filterWhere((button: any) => button.contains('Show example log message')).length).toBe(
       1
     );
+    expect(
+      wrapper
+        .find(Button)
+        .filterWhere((button: any) => button.contains('Show example log message'))
+        .getDOMNode()
+    ).toHaveAttribute('type', 'button');
     expect(wrapper.find(DerivedField).length).toBe(2);
   });
 

public/app/plugins/datasource/loki/configuration/DerivedFields.tsx

@@ -82,7 +82,7 @@ export const DerivedFields = (props: Props) => {
           </Button>
 
           {value && value.length > 0 && (
-            <Button variant="secondary" onClick={() => setShowDebug(!showDebug)}>
+            <Button variant="secondary" type="button" onClick={() => setShowDebug(!showDebug)}>
               {showDebug ? 'Hide example log message' : 'Show example log message'}
             </Button>
           )}