fix: add check readOnly for auth settings

VictoriaMetrics · Oct 10, 2023 · d0f156e · d0f156e
1 parent 699f3be
commit d0f156e
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 19 deletions.
diff --git a/src/components/PromQueryField.test.tsx b/src/components/PromQueryField.test.tsx
@@ -1,9 +1,9 @@
-import { render, screen, waitFor } from '@testing-library/react';
+import { getByTestId, render, screen, waitFor } from '@testing-library/react';
 // @ts-ignore
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
-import { PanelData, LoadingState, DataFrame } from '@grafana/data';
+import { PanelData, LoadingState, DataFrame, CoreApp } from '@grafana/data';
 
 import { PrometheusDatasource } from '../datasource';
 import PromQlLanguageProvider from '../language_provider';
@@ -149,6 +149,22 @@ describe('PromQueryField', () => {
       expect(labelBrowser).toHaveTextContent('Metrics browser');
     });
   });
+
+  it('should not run query onBlur', async () => {
+    const onRunQuery = jest.fn();
+    const { container } = render(<PromQueryField {...defaultProps} app={CoreApp.Explore} onRunQuery={onRunQuery} />);
+
+    // wait for component to rerender
+    await screen.findByRole('button');
+
+    const input = getByTestId(container, 'dummy-code-input');
+    expect(input).toBeInTheDocument();
+    await userEvent.type(input, 'metric');
+
+    // blur element
+    await userEvent.click(document.body);
+    expect(onRunQuery).not.toHaveBeenCalled();
+  });
 });
 
 function makeLanguageProvider(options: { metrics: string[][] }) {

diff --git a/src/configuration/AzureAuthSettings.tsx b/src/configuration/AzureAuthSettings.tsx
@@ -65,12 +65,13 @@ export const AzureAuthSettings = (props: HttpSettingsBaseProps) => {
 
   return (
     <>
-      <h6>Azure Authentication</h6>
+      <h6>Azure authentication</h6>
       <AzureCredentialsForm
         managedIdentityEnabled={config.azure.managedIdentityEnabled}
         credentials={credentials}
         azureCloudOptions={KnownAzureClouds}
         onCredentialsChange={onCredentialsChange}
+        disabled={dataSourceConfig.readOnly}
       />
       <h6>Azure configuration</h6>
       <div className="gf-form-group">

diff --git a/src/configuration/AzureCredentialsForm.tsx b/src/configuration/AzureCredentialsForm.tsx
@@ -29,6 +29,7 @@ export interface Props {
   azureCloudOptions?: SelectableValue[];
   onCredentialsChange: (updatedCredentials: AzureCredentials) => void;
   getSubscriptions?: () => Promise<SelectableValue[]>;
+  disabled?: boolean;
 }
 
 const authTypeOptions: Array<SelectableValue<AzureAuthType>> = [
@@ -43,7 +44,7 @@ const authTypeOptions: Array<SelectableValue<AzureAuthType>> = [
 ];
 
 export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) => {
-  const { credentials, azureCloudOptions, onCredentialsChange, getSubscriptions } = props;
+  const { credentials, azureCloudOptions, onCredentialsChange, getSubscriptions, disabled } = props;
   const hasRequiredFields = isCredentialsComplete(credentials);
 
   const [subscriptions, setSubscriptions] = useState<Array<SelectableValue<string>>>([]);
@@ -177,6 +178,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
               value={authTypeOptions.find((opt) => opt.value === credentials.authType)}
               options={authTypeOptions}
               onChange={onAuthTypeChange}
+              isDisabled={disabled}
             />
           </div>
         </div>
@@ -194,6 +196,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
                   value={azureCloudOptions.find((opt) => opt.value === credentials.azureCloud)}
                   options={azureCloudOptions}
                   onChange={onAzureCloudChange}
+                  isDisabled={disabled}
                 />
               </div>
             </div>
@@ -207,6 +210,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
                   placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
                   value={credentials.tenantId || ''}
                   onChange={onTenantIdChange}
+                  disabled={disabled}
                 />
               </div>
             </div>
@@ -220,6 +224,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
                   placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
                   value={credentials.clientId || ''}
                   onChange={onClientIdChange}
+                  disabled={disabled}
                 />
               </div>
             </div>
@@ -232,13 +237,15 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
                 </InlineFormLabel>
                 <Input id="azure-client-secret" className="width-25" placeholder="configured" disabled={true} />
               </div>
-              <div className="gf-form">
-                <div className="max-width-30 gf-form-inline">
-                  <Button variant="secondary" type="button" onClick={onClientSecretReset}>
-                    reset
-                  </Button>
+              {!disabled && (
+                <div className="gf-form">
+                  <div className="max-width-30 gf-form-inline">
+                    <Button variant="secondary" type="button" onClick={onClientSecretReset}>
+                      reset
+                    </Button>
+                  </div>
                 </div>
-              </div>
+              )}
             </div>
           ) : (
             <div className="gf-form-inline">
@@ -250,6 +257,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
                     placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
                     value={credentials.clientSecret || ''}
                     onChange={onClientSecretChange}
+                    disabled={disabled}
                   />
                 </div>
               </div>
@@ -271,6 +279,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
                   }
                   options={subscriptions}
                   onChange={onSubscriptionChange}
+                  isDisabled={disabled}
                 />
               </div>
             </div>

diff --git a/src/configuration/ConfigEditor.tsx b/src/configuration/ConfigEditor.tsx
@@ -31,14 +31,9 @@ import { HelpfulLinks } from "./HelpfulLinks";
 import { LimitsSettings } from "./LimitsSettings";
 import { PromSettings } from './PromSettings';
 
-// export enum DataSourceType {
-//   Alertmanager = 'alertmanager',
-// }
-
 export type Props = DataSourcePluginOptionsEditorProps<PromOptions>;
 export const ConfigEditor = (props: Props) => {
   const { options, onOptionsChange } = props;
-  // const alertmanagers = Object.values(config.datasources).filter((ds) => ds.type === DataSourceType.Alertmanager);
   // use ref so this is evaluated only first time it renders and the select does not disappear suddenly.
   const showAccessOptions = useRef(props.options.access === 'direct');
 

diff --git a/src/utils/getRefreshFromUrl.test.ts b/src/utils/getRefreshFromUrl.test.ts
@@ -59,11 +59,11 @@ describe('getRefreshFromUrl', () => {
       'when called with refresh:{$refresh}, isAllowedInterval:{$isAllowedInterval}, minRefreshInterval:{$minRefreshInterval}, refreshIntervals:{$refreshIntervals} then it should return: $expected',
       ({ refresh, isAllowedInterval, minRefreshInterval, refreshIntervals, expected }) => {
         const actual = getRefreshFromUrl({
-          urlRefresh: `${refresh}`,
+          urlRefresh: refresh,
           currentRefresh: 'currentRefresh',
-          minRefreshInterval: `${minRefreshInterval}`,
-          isAllowedIntervalFn: () => !!isAllowedInterval,
-          refreshIntervals: Array.isArray(refreshIntervals) ? refreshIntervals.map(s => `${s}`) : undefined,
+          minRefreshInterval,
+          isAllowedIntervalFn: () => isAllowedInterval,
+          refreshIntervals,
         });
 
         expect(actual).toBe(expected);