Add a button to clear Azure Monitor Logs credentials (#36256)

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AnalyticsConfig.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import AnalyticsConfig, { Props } from './AnalyticsConfig';
+import userEvent from '@testing-library/user-event';
 
 const setup = (propsFunc?: (props: Props) => Props) => {
   let props: Props = {
@@ -103,6 +104,26 @@ describe('Render', () => {
     expect(screen.queryByText('is no longer supported', { exact: false })).toBeInTheDocument();
   });
 
+  it('should clean up the error when reseting the credentials', async () => {
+    const onUpdate = jest.fn();
+    setup((props) => ({
+      ...props,
+      options: {
+        ...props.options,
+        jsonData: {
+          ...props.options.jsonData,
+          azureLogAnalyticsSameAs: false,
+        },
+      },
+      updateOptions: onUpdate,
+    }));
+    expect(screen.queryByText('is no longer supported', { exact: false })).toBeInTheDocument();
+    userEvent.click(screen.getByText('Clear Azure Monitor Logs Credentials'));
+    expect(onUpdate).toHaveBeenCalled();
+    const newOpts = onUpdate.mock.calls[0][0]({});
+    expect(newOpts).toEqual({ jsonData: { azureLogAnalyticsSameAs: true } });
+  });
+
   it('should disable inputs', () => {
     setup((props) => ({
       ...props,

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AnalyticsConfig.tsx

@@ -91,6 +91,18 @@ export const AnalyticsConfig: FunctionComponent<Props> = (props: Props) => {
     });
   };
 
+  const onClearAzLogsCreds = () => {
+    updateOptions((options) => {
+      return {
+        ...options,
+        jsonData: {
+          ...options.jsonData,
+          azureLogAnalyticsSameAs: true,
+        },
+      };
+    });
+  };
+
   return (
     <>
       <h3 className="page-heading">Azure Monitor Logs</h3>
@@ -113,7 +125,9 @@ export const AnalyticsConfig: FunctionComponent<Props> = (props: Props) => {
             }}
             getSubscriptions={getSubscriptions}
             disabled={true}
-          />
+          >
+            <Button onClick={onClearAzLogsCreds}>Clear Azure Monitor Logs Credentials</Button>
+          </AzureCredentialsForm>
         </>
       )}
       <div className="gf-form-group">

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AzureCredentialsForm.test.tsx

@@ -95,5 +95,14 @@ describe('Render', () => {
       const selects = wrapper.find(Select);
       selects.forEach((s) => expect(s.prop('isDisabled')).toBe(true));
     });
+
+    it('should render a children component', () => {
+      const wrapper = setup((props) => ({
+        ...props,
+        children: <button>click me</button>,
+      }));
+      const button = wrapper.find('button');
+      expect(button.text()).toBe('click me');
+    });
   });
 });

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AzureCredentialsForm.tsx

@@ -12,6 +12,7 @@ export interface Props {
   onCredentialsChange?: (updatedCredentials: AzureCredentials) => void;
   getSubscriptions?: () => Promise<SelectableValue[]>;
   disabled?: boolean;
+  children?: JSX.Element;
 }
 
 const authTypeOptions: Array<SelectableValue<AzureAuthType>> = [
@@ -282,6 +283,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
           )}
         </>
       )}
+      {props.children}
     </div>
   );
 };

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/__snapshots__/AnalyticsConfig.test.tsx.snap

@@ -284,6 +284,15 @@ exports[`Render should enable azure log analytics load workspaces button 1`] = `
           </div>
         </div>
       </div>
+      <button
+        class="css-5tn967-button"
+      >
+        <span
+          class="css-1mhnkuh"
+        >
+          Clear Azure Monitor Logs Credentials
+        </span>
+      </button>
     </div>
     <div
       class="gf-form-group"