AzureMonitor: Disable inputs if the ds is readOnly (#35805)

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

@@ -102,4 +102,15 @@ describe('Render', () => {
     }));
     expect(screen.queryByText('is no longer supported', { exact: false })).toBeInTheDocument();
   });
+
+  it('should disable inputs', () => {
+    setup((props) => ({
+      ...props,
+      options: {
+        ...props.options,
+        readOnly: true,
+      },
+    }));
+    expect(screen.queryByText('Load Workspaces')?.closest('button')).toBeDisabled();
+  });
 });

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

@@ -130,6 +130,7 @@ export const AnalyticsConfig: FunctionComponent<Props> = (props: Props) => {
                 value={workspaces.find((opt) => opt.value === defaultWorkspace)}
                 options={workspaces}
                 onChange={onDefaultWorkspaceChange}
+                isDisabled={props.options.readOnly}
               />
             </div>
           </div>
@@ -142,7 +143,7 @@ export const AnalyticsConfig: FunctionComponent<Props> = (props: Props) => {
                 size="sm"
                 type="button"
                 onClick={onLoadWorkspaces}
-                disabled={!hasRequiredFields}
+                disabled={!hasRequiredFields || props.options.readOnly}
               >
                 Load Workspaces
               </Button>

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import AzureCredentialsForm, { Props } from './AzureCredentialsForm';
 import { LegacyForms, Button } from '@grafana/ui';
-const { Input } = LegacyForms;
+const { Input, Select } = LegacyForms;
 
 const setup = (propsFunc?: (props: Props) => Props) => {
   let props: Props = {
@@ -86,5 +86,14 @@ describe('Render', () => {
       }));
       expect(wrapper.find(Button).exists()).toBe(false);
     });
+
+    it('should disable cloud selector', () => {
+      const wrapper = setup((props) => ({
+        ...props,
+        disabled: true,
+      }));
+      const selects = wrapper.find(Select);
+      selects.forEach((s) => expect(s.prop('isDisabled')).toBe(true));
+    });
   });
 });

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

@@ -160,6 +160,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
               value={authTypeOptions.find((opt) => opt.value === credentials.authType)}
               options={authTypeOptions}
               onChange={onAuthTypeChange}
+              isDisabled={disabled}
             />
           </div>
         </div>
@@ -177,6 +178,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
                   value={azureCloudOptions.find((opt) => opt.value === credentials.azureCloud)}
                   options={azureCloudOptions}
                   onChange={onAzureCloudChange}
+                  isDisabled={disabled}
                 />
               </div>
             </div>

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import InsightsConfig, { Props } from './InsightsConfig';
+import { Button, LegacyForms } from '@grafana/ui';
+const { Input } = LegacyForms;
 
 const setup = (propOverrides?: object) => {
   const props: Props = {
@@ -81,4 +83,25 @@ describe('Render', () => {
     });
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('should disable buttons and inputs', () => {
+    const wrapper = setup({
+      options: {
+        secureJsonFields: {
+          appInsightsApiKey: true,
+        },
+        jsonData: {
+          appInsightsAppId: 'cddcc020-2c94-460a-a3d0-df3147ffa792',
+        },
+        secureJsonData: {
+          appInsightsApiKey: 'e7f3f661-a933-4b3f-8176-51c4f982ec48',
+        },
+        readOnly: true,
+      },
+    });
+    const buttons = wrapper.find(Button);
+    const inputs = wrapper.find(Input);
+    buttons.forEach((b) => expect(b.prop('disabled')).toBe(true));
+    inputs.forEach((i) => expect(i.prop('disabled')).toBe(true));
+  });
 });

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

@@ -35,7 +35,12 @@ export class InsightsConfig extends PureComponent<Props> {
               </div>
               <div className="gf-form">
                 <div className="max-width-30 gf-form-inline">
-                  <Button variant="secondary" type="button" onClick={this.onAppInsightsResetApiKey}>
+                  <Button
+                    variant="secondary"
+                    type="button"
+                    onClick={this.onAppInsightsResetApiKey}
+                    disabled={this.props.options.readOnly}
+                  >
                     reset
                   </Button>
                 </div>
@@ -51,6 +56,7 @@ export class InsightsConfig extends PureComponent<Props> {
                     placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
                     value={options.secureJsonData!.appInsightsApiKey || ''}
                     onChange={onUpdateSecureJsonDataOption('appInsightsApiKey')}
+                    disabled={this.props.options.readOnly}
                   />
                 </div>
               </div>
@@ -64,6 +70,7 @@ export class InsightsConfig extends PureComponent<Props> {
                   className="width-30"
                   value={options.jsonData.appInsightsAppId || ''}
                   onChange={onUpdateJsonDataOption('appInsightsAppId')}
+                  disabled={this.props.options.readOnly}
                 />
               </div>
             </div>

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

@@ -35,6 +35,7 @@ export const MonitorConfig: FunctionComponent<Props> = (props: Props) => {
         azureCloudOptions={azureClouds}
         onCredentialsChange={onCredentialsChange}
         getSubscriptions={getSubscriptions}
+        disabled={props.options.readOnly}
       />
     </>
   );

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

@@ -169,6 +169,7 @@ exports[`Render should render component 1`] = `
         >
           <Input
             className="width-30"
+            disabled={false}
             placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
             value=""
           />
@@ -191,6 +192,7 @@ exports[`Render should render component 1`] = `
         >
           <Input
             className="width-30"
+            disabled={false}
             value=""
           />
         </div>