Fix Geo-IP cloud-storage config UI bugs

graylog2-web-interface/src/components/maps/configurations/ABSGeoIpFormGroup.test.tsx

@@ -25,13 +25,15 @@ import ABSGeoIpFormGroup from './ABSGeoIpFormGroup';
 
 describe('ABSGeoIpFormGroup', () => {
   const newConfig = {
+    enabled: true,
     azure_container: '',
     azure_account: '',
     azure_endpoint: '',
     azure_account_key: { set_value: '' },
   } as Partial<GeoIpConfigType>;
 
   const existingConfig = {
+    enabled: true,
     azure_container: 'my-container',
     azure_account: 'my-account',
     azure_endpoint: 'https://myaccount.blob.core.windows.net',
@@ -81,6 +83,15 @@ describe('ABSGeoIpFormGroup', () => {
     });
   });
 
+  it('disables all fields when the resolver is not enabled', async () => {
+    renderComponent({ ...newConfig, enabled: false });
+
+    expect(await screen.findByLabelText(/azure blob container name/i)).toBeDisabled();
+    expect(screen.getByLabelText(/azure blob endpoint url/i)).toBeDisabled();
+    expect(screen.getByLabelText(/azure account name/i)).toBeDisabled();
+    expect(screen.getByTestId('azure-account-key-input')).toBeDisabled();
+  });
+
   it('updates formik values correctly', async () => {
     render(
       <Formik initialValues={existingConfig as GeoIpConfigType} onSubmit={jest.fn()}>

graylog2-web-interface/src/components/maps/configurations/ABSGeoIpFormGroup.tsx

@@ -62,6 +62,7 @@ const ABSGeoIpFormGroup = () => {
         help="Your Azure Blob Container name."
         labelClassName=""
         required
+        disabled={!values.enabled}
         wrapperClassName=""
       />
       <FormikFormGroup
@@ -70,6 +71,7 @@ const ABSGeoIpFormGroup = () => {
         label="Azure Blob Endpoint URL"
         help="Your Azure Blob Endpoint URL, only required if you want to override the default endpoint."
         labelClassName=""
+        disabled={!values.enabled}
         wrapperClassName=""
       />
       <FormikFormGroup
@@ -79,12 +81,15 @@ const ABSGeoIpFormGroup = () => {
         placeholder="your-account-name"
         help="The name of your Azure storage account."
         required
+        disabled={!values.enabled}
         labelClassName=""
         wrapperClassName=""
       />
       {showResetPasswordButton ? (
         <Input id="azure_account_reset" label="Azure Account Key" labelClassName="col-sm-3" wrapperClassName="col-sm-9">
-          <Button onClick={toggleAccountKeyReset}>Reset password</Button>
+          <Button onClick={toggleAccountKeyReset} disabled={!values.enabled}>
+            Reset password
+          </Button>
         </Input>
       ) : (
         <Input
@@ -93,10 +98,11 @@ const ABSGeoIpFormGroup = () => {
           data-testid="azure-account-key-input"
           type="password"
           label="Azure account key"
+          disabled={!values.enabled}
           onChange={({ target: { value } }) => setAccessKey({ set_value: value })}
           buttonAfter={
             !isCreate ? (
-              <Button type="button" onClick={toggleAccountKeyReset}>
+              <Button type="button" onClick={toggleAccountKeyReset} disabled={!values.enabled}>
                 Undo Reset
               </Button>
             ) : undefined

graylog2-web-interface/src/components/maps/configurations/GCSGeoIpFormGroup.tsx

@@ -33,7 +33,7 @@ const GCSGeoIpFormGroup = () => {
         disabled={!values.enabled}
         label={
           <>
-            Googe Cloud Storage Project ID <InputOptionalInfo />
+            Google Cloud Storage Project ID <InputOptionalInfo />
           </>
         }
         name="gcs_project_id"

graylog2-web-interface/src/components/maps/configurations/GeoIpResolverConfig.test.tsx

@@ -85,7 +85,7 @@ describe('GeoIpResolverConfig', () => {
 
     expect(
       screen.getByRole('textbox', {
-        name: /googe cloud storage project id \(opt\.\)/i,
+        name: /google cloud storage project id \(opt\.\)/i,
       }),
     ).toBeInTheDocument();
 

graylog2-web-interface/src/components/maps/configurations/GeoIpResolverConfig.tsx

@@ -233,9 +233,11 @@ const GeoIpResolverConfig = ({ config = defaultConfig, updateConfig }: Props) =>
                         onChange={(option) => {
                           setFieldValue('pull_from_cloud', option);
 
-                          if (option !== CLOUD_STORAGE_OPTION.GCS) {
-                            setFieldValue('gcs_project_id', undefined);
-                          }
+                          setFieldValue('gcs_project_id', undefined);
+                          setFieldValue('azure_endpoint', undefined);
+                          setFieldValue('azure_account_key', undefined);
+                          setFieldValue('azure_account', undefined);
+                          setFieldValue('azure_container', undefined);
                         }}
                       />
                     </Input>