Merge pull request #8762 from marshmalien/setting-google-oauth2-edit-form

Add Google OAuth 2.0 setting edit form

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

awx/ui_next/src/screens/Setting/GoogleOAuth2/GoogleOAuth2.test.jsx

@@ -2,13 +2,28 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { createMemoryHistory } from 'history';
 import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
-import GoogleOAuth2 from './GoogleOAuth2';
+import { SettingsProvider } from '../../../contexts/Settings';
-
 import { SettingsAPI } from '../../../api';
+import mockAllOptions from '../shared/data.allSettingOptions.json';
+import GoogleOAuth2 from './GoogleOAuth2';
 
 jest.mock('../../../api/models/Settings');
 SettingsAPI.readCategory.mockResolvedValue({
-  data: {},
+  data: {
+    SOCIAL_AUTH_GOOGLE_OAUTH2_CALLBACK_URL:
+      'https://towerhost/sso/complete/google-oauth2/',
+    SOCIAL_AUTH_GOOGLE_OAUTH2_KEY: 'mock key',
+    SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET: '$encrypted$',
+    SOCIAL_AUTH_GOOGLE_OAUTH2_WHITELISTED_DOMAINS: [
+      'example.com',
+      'example_2.com',
+    ],
+    SOCIAL_AUTH_GOOGLE_OAUTH2_AUTH_EXTRA_ARGUMENTS: {},
+    SOCIAL_AUTH_GOOGLE_OAUTH2_ORGANIZATION_MAP: {
+      Default: {},
+    },
+    SOCIAL_AUTH_GOOGLE_OAUTH2_TEAM_MAP: {},
+  },
 });
 
 describe('<GoogleOAuth2 />', () => {
@@ -24,9 +39,14 @@ describe('<GoogleOAuth2 />', () => {
       initialEntries: ['/settings/google_oauth2/details'],
     });
     await act(async () => {
-      wrapper = mountWithContexts(<GoogleOAuth2 />, {
+      wrapper = mountWithContexts(
-        context: { router: { history } },
+        <SettingsProvider value={mockAllOptions.actions}>
-      });
+          <GoogleOAuth2 />
+        </SettingsProvider>,
+        {
+          context: { router: { history } },
+        }
+      );
     });
     expect(wrapper.find('GoogleOAuth2Detail').length).toBe(1);
   });
@@ -36,9 +56,14 @@ describe('<GoogleOAuth2 />', () => {
       initialEntries: ['/settings/google_oauth2/edit'],
     });
     await act(async () => {
-      wrapper = mountWithContexts(<GoogleOAuth2 />, {
+      wrapper = mountWithContexts(
-        context: { router: { history } },
+        <SettingsProvider value={mockAllOptions.actions}>
-      });
+          <GoogleOAuth2 />
+        </SettingsProvider>,
+        {
+          context: { router: { history } },
+        }
+      );
     });
     expect(wrapper.find('GoogleOAuth2Edit').length).toBe(1);
   });

awx/ui_next/src/screens/Setting/GoogleOAuth2/GoogleOAuth2Edit/GoogleOAuth2Edit.jsx

@@ -1,25 +1,171 @@
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
-import { withI18n } from '@lingui/react';
+import { Formik } from 'formik';
-import { t } from '@lingui/macro';
+import { Form } from '@patternfly/react-core';
-import { Button } from '@patternfly/react-core';
+import { CardBody } from '../../../../components/Card';
-import { CardBody, CardActionsRow } from '../../../../components/Card';
+import ContentError from '../../../../components/ContentError';
+import ContentLoading from '../../../../components/ContentLoading';
+import { FormSubmitError } from '../../../../components/FormField';
+import { FormColumnLayout } from '../../../../components/FormLayout';
+import { useSettings } from '../../../../contexts/Settings';
+import { RevertAllAlert, RevertFormActionGroup } from '../../shared';
+import {
+  EncryptedField,
+  InputField,
+  ObjectField,
+} from '../../shared/SharedFields';
+import { formatJson } from '../../shared/settingUtils';
+import useModal from '../../../../util/useModal';
+import useRequest from '../../../../util/useRequest';
+import { SettingsAPI } from '../../../../api';
+
+function GoogleOAuth2Edit() {
+  const history = useHistory();
+  const { isModalOpen, toggleModal, closeModal } = useModal();
+  const { PUT: options } = useSettings();
+
+  const {
+    isLoading,
+    error,
+    request: fetchGoogleOAuth2,
+    result: googleOAuth2,
+  } = useRequest(
+    useCallback(async () => {
+      const { data } = await SettingsAPI.readCategory('google-oauth2');
+      const mergedData = {};
+      Object.keys(data).forEach(key => {
+        if (!options[key]) {
+          return;
+        }
+        mergedData[key] = options[key];
+        mergedData[key].value = data[key];
+      });
+      return mergedData;
+    }, [options]),
+    null
+  );
+
+  useEffect(() => {
+    fetchGoogleOAuth2();
+  }, [fetchGoogleOAuth2]);
+
+  const { error: submitError, request: submitForm } = useRequest(
+    useCallback(
+      async values => {
+        await SettingsAPI.updateAll(values);
+        history.push('/settings/google_oauth2/details');
+      },
+      [history]
+    ),
+    null
+  );
+
+  const handleSubmit = async form => {
+    await submitForm({
+      ...form,
+      SOCIAL_AUTH_GOOGLE_OAUTH2_WHITELISTED_DOMAINS: formatJson(
+        form.SOCIAL_AUTH_GOOGLE_OAUTH2_WHITELISTED_DOMAINS
+      ),
+      SOCIAL_AUTH_GOOGLE_OAUTH2_AUTH_EXTRA_ARGUMENTS: formatJson(
+        form.SOCIAL_AUTH_GOOGLE_OAUTH2_AUTH_EXTRA_ARGUMENTS
+      ),
+      SOCIAL_AUTH_GOOGLE_OAUTH2_ORGANIZATION_MAP: formatJson(
+        form.SOCIAL_AUTH_GOOGLE_OAUTH2_ORGANIZATION_MAP
+      ),
+      SOCIAL_AUTH_GOOGLE_OAUTH2_TEAM_MAP: formatJson(
+        form.SOCIAL_AUTH_GOOGLE_OAUTH2_TEAM_MAP
+      ),
+    });
+  };
+
+  const handleRevertAll = async () => {
+    const defaultValues = Object.assign(
+      ...Object.entries(googleOAuth2).map(([key, value]) => ({
+        [key]: value.default,
+      }))
+    );
+    await submitForm(defaultValues);
+    closeModal();
+  };
+
+  const handleCancel = () => {
+    history.push('/settings/google_oauth2/details');
+  };
+
+  const initialValues = fields =>
+    Object.keys(fields).reduce((acc, key) => {
+      if (fields[key].type === 'list' || fields[key].type === 'nested object') {
+        const emptyDefault = fields[key].type === 'list' ? '[]' : '{}';
+        acc[key] = fields[key].value
+          ? JSON.stringify(fields[key].value, null, 2)
+          : emptyDefault;
+      } else {
+        acc[key] = fields[key].value ?? '';
+      }
+      return acc;
+    }, {});
 
-function GoogleOAuth2Edit({ i18n }) {
   return (
     <CardBody>
-      {i18n._(t`Edit form coming soon :)`)}
+      {isLoading && <ContentLoading />}
-      <CardActionsRow>
+      {!isLoading && error && <ContentError error={error} />}
-        <Button
+      {!isLoading && googleOAuth2 && (
-          aria-label={i18n._(t`Cancel`)}
+        <Formik
-          component={Link}
+          initialValues={initialValues(googleOAuth2)}
-          to="/settings/google_oauth2/details"
+          onSubmit={handleSubmit}
         >
-          {i18n._(t`Cancel`)}
+          {formik => (
-        </Button>
+            <Form autoComplete="off" onSubmit={formik.handleSubmit}>
-      </CardActionsRow>
+              <FormColumnLayout>
+                <InputField
+                  name="SOCIAL_AUTH_GOOGLE_OAUTH2_KEY"
+                  config={googleOAuth2.SOCIAL_AUTH_GOOGLE_OAUTH2_KEY}
+                />
+                <EncryptedField
+                  name="SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET"
+                  config={googleOAuth2.SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET}
+                />
+                <ObjectField
+                  name="SOCIAL_AUTH_GOOGLE_OAUTH2_WHITELISTED_DOMAINS"
+                  config={
+                    googleOAuth2.SOCIAL_AUTH_GOOGLE_OAUTH2_WHITELISTED_DOMAINS
+                  }
+                />
+                <ObjectField
+                  name="SOCIAL_AUTH_GOOGLE_OAUTH2_AUTH_EXTRA_ARGUMENTS"
+                  config={
+                    googleOAuth2.SOCIAL_AUTH_GOOGLE_OAUTH2_AUTH_EXTRA_ARGUMENTS
+                  }
+                />
+                <ObjectField
+                  name="SOCIAL_AUTH_GOOGLE_OAUTH2_ORGANIZATION_MAP"
+                  config={
+                    googleOAuth2.SOCIAL_AUTH_GOOGLE_OAUTH2_ORGANIZATION_MAP
+                  }
+                />
+                <ObjectField
+                  name="SOCIAL_AUTH_GOOGLE_OAUTH2_TEAM_MAP"
+                  config={googleOAuth2.SOCIAL_AUTH_GOOGLE_OAUTH2_TEAM_MAP}
+                />
+                {submitError && <FormSubmitError error={submitError} />}
+              </FormColumnLayout>
+              <RevertFormActionGroup
+                onCancel={handleCancel}
+                onSubmit={formik.handleSubmit}
+                onRevert={toggleModal}
+              />
+              {isModalOpen && (
+                <RevertAllAlert
+                  onClose={closeModal}
+                  onRevertAll={handleRevertAll}
+                />
+              )}
+            </Form>
+          )}
+        </Formik>
+      )}
     </CardBody>
   );
 }
 
-export default withI18n()(GoogleOAuth2Edit);
+export default GoogleOAuth2Edit;

awx/ui_next/src/screens/Setting/GoogleOAuth2/GoogleOAuth2Edit/GoogleOAuth2Edit.test.jsx

@@ -1,16 +1,196 @@
 import React from 'react';
-import { mountWithContexts } from '../../../../../testUtils/enzymeHelpers';
+import { act } from 'react-dom/test-utils';
+import { createMemoryHistory } from 'history';
+import {
+  mountWithContexts,
+  waitForElement,
+} from '../../../../../testUtils/enzymeHelpers';
+import { SettingsProvider } from '../../../../contexts/Settings';
+import { SettingsAPI } from '../../../../api';
+import mockAllOptions from '../../shared/data.allSettingOptions.json';
 import GoogleOAuth2Edit from './GoogleOAuth2Edit';
 
+jest.mock('../../../../api/models/Settings');
+SettingsAPI.updateAll.mockResolvedValue({});
+SettingsAPI.readCategory.mockResolvedValue({
+  data: {
+    SOCIAL_AUTH_GOOGLE_OAUTH2_CALLBACK_URL:
+      'https://towerhost/sso/complete/google-oauth2/',
+    SOCIAL_AUTH_GOOGLE_OAUTH2_KEY: 'mock key',
+    SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET: '$encrypted$',
+    SOCIAL_AUTH_GOOGLE_OAUTH2_WHITELISTED_DOMAINS: [
+      'example.com',
+      'example_2.com',
+    ],
+    SOCIAL_AUTH_GOOGLE_OAUTH2_AUTH_EXTRA_ARGUMENTS: {},
+    SOCIAL_AUTH_GOOGLE_OAUTH2_ORGANIZATION_MAP: {
+      Default: {},
+    },
+    SOCIAL_AUTH_GOOGLE_OAUTH2_TEAM_MAP: {},
+  },
+});
+
 describe('<GoogleOAuth2Edit />', () => {
   let wrapper;
-  beforeEach(() => {
+  let history;
-    wrapper = mountWithContexts(<GoogleOAuth2Edit />);
+
-  });
   afterEach(() => {
     wrapper.unmount();
+    jest.clearAllMocks();
   });
+
+  beforeEach(async () => {
+    history = createMemoryHistory({
+      initialEntries: ['/settings/google_oauth2/edit'],
+    });
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <SettingsProvider value={mockAllOptions.actions}>
+          <GoogleOAuth2Edit />
+        </SettingsProvider>,
+        {
+          context: { router: { history } },
+        }
+      );
+    });
+    await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
+  });
+
   test('initially renders without crashing', () => {
     expect(wrapper.find('GoogleOAuth2Edit').length).toBe(1);
   });
+
+  test('should display expected form fields', async () => {
+    expect(wrapper.find('FormGroup[label="Google OAuth2 Key"]').length).toBe(1);
+    expect(wrapper.find('FormGroup[label="Google OAuth2 Secret"]').length).toBe(
+      1
+    );
+    expect(
+      wrapper.find('FormGroup[label="Google OAuth2 Allowed Domains"]').length
+    ).toBe(1);
+    expect(
+      wrapper.find('FormGroup[label="Google OAuth2 Extra Arguments"]').length
+    ).toBe(1);
+    expect(
+      wrapper.find('FormGroup[label="Google OAuth2 Organization Map"]').length
+    ).toBe(1);
+    expect(
+      wrapper.find('FormGroup[label="Google OAuth2 Team Map"]').length
+    ).toBe(1);
+  });
+
+  test('should successfully send default values to api on form revert all', async () => {
+    expect(SettingsAPI.updateAll).toHaveBeenCalledTimes(0);
+    expect(wrapper.find('RevertAllAlert')).toHaveLength(0);
+    await act(async () => {
+      wrapper
+        .find('button[aria-label="Revert all to default"]')
+        .invoke('onClick')();
+    });
+    wrapper.update();
+    expect(wrapper.find('RevertAllAlert')).toHaveLength(1);
+    await act(async () => {
+      wrapper
+        .find('RevertAllAlert button[aria-label="Confirm revert all"]')
+        .invoke('onClick')();
+    });
+    wrapper.update();
+    expect(SettingsAPI.updateAll).toHaveBeenCalledTimes(1);
+    expect(SettingsAPI.updateAll).toHaveBeenCalledWith({
+      SOCIAL_AUTH_GOOGLE_OAUTH2_KEY: '',
+      SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET: '',
+      SOCIAL_AUTH_GOOGLE_OAUTH2_WHITELISTED_DOMAINS: [],
+      SOCIAL_AUTH_GOOGLE_OAUTH2_AUTH_EXTRA_ARGUMENTS: {},
+      SOCIAL_AUTH_GOOGLE_OAUTH2_ORGANIZATION_MAP: null,
+      SOCIAL_AUTH_GOOGLE_OAUTH2_TEAM_MAP: null,
+    });
+  });
+
+  test('should successfully send request to api on form submission', async () => {
+    act(() => {
+      wrapper
+        .find(
+          'FormGroup[fieldId="SOCIAL_AUTH_GOOGLE_OAUTH2_WHITELISTED_DOMAINS"] button[aria-label="Revert"]'
+        )
+        .invoke('onClick')();
+      wrapper
+        .find(
+          'FormGroup[fieldId="SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET"] button[aria-label="Revert"]'
+        )
+        .invoke('onClick')();
+      wrapper.find('input#SOCIAL_AUTH_GOOGLE_OAUTH2_KEY').simulate('change', {
+        target: { value: 'new key', name: 'SOCIAL_AUTH_GOOGLE_OAUTH2_KEY' },
+      });
+      wrapper
+        .find('CodeMirrorInput#SOCIAL_AUTH_GOOGLE_OAUTH2_ORGANIZATION_MAP')
+        .invoke('onChange')('{\n"Default":{\n"users":\nfalse\n}\n}');
+    });
+    wrapper.update();
+    await act(async () => {
+      wrapper.find('Form').invoke('onSubmit')();
+    });
+    expect(SettingsAPI.updateAll).toHaveBeenCalledTimes(1);
+    expect(SettingsAPI.updateAll).toHaveBeenCalledWith({
+      SOCIAL_AUTH_GOOGLE_OAUTH2_KEY: 'new key',
+      SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET: '',
+      SOCIAL_AUTH_GOOGLE_OAUTH2_WHITELISTED_DOMAINS: [],
+      SOCIAL_AUTH_GOOGLE_OAUTH2_AUTH_EXTRA_ARGUMENTS: {},
+      SOCIAL_AUTH_GOOGLE_OAUTH2_TEAM_MAP: {},
+      SOCIAL_AUTH_GOOGLE_OAUTH2_ORGANIZATION_MAP: {
+        Default: {
+          users: false,
+        },
+      },
+    });
+  });
+
+  test('should navigate to Google OAuth 2.0 detail on successful submission', async () => {
+    await act(async () => {
+      wrapper.find('Form').invoke('onSubmit')();
+    });
+    expect(history.location.pathname).toEqual(
+      '/settings/google_oauth2/details'
+    );
+  });
+
+  test('should navigate to Google OAuth 2.0 detail when cancel is clicked', async () => {
+    await act(async () => {
+      wrapper.find('button[aria-label="Cancel"]').invoke('onClick')();
+    });
+    expect(history.location.pathname).toEqual(
+      '/settings/google_oauth2/details'
+    );
+  });
+
+  test('should display error message on unsuccessful submission', async () => {
+    const error = {
+      response: {
+        data: { detail: 'An error occurred' },
+      },
+    };
+    SettingsAPI.updateAll.mockImplementation(() => Promise.reject(error));
+    expect(wrapper.find('FormSubmitError').length).toBe(0);
+    expect(SettingsAPI.updateAll).toHaveBeenCalledTimes(0);
+    await act(async () => {
+      wrapper.find('Form').invoke('onSubmit')();
+    });
+    wrapper.update();
+    expect(wrapper.find('FormSubmitError').length).toBe(1);
+    expect(SettingsAPI.updateAll).toHaveBeenCalledTimes(1);
+  });
+
+  test('should display ContentError on throw', async () => {
+    SettingsAPI.readCategory.mockImplementationOnce(() =>
+      Promise.reject(new Error())
+    );
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <SettingsProvider value={mockAllOptions.actions}>
+          <GoogleOAuth2Edit />
+        </SettingsProvider>
+      );
+    });
+    await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
+    expect(wrapper.find('ContentError').length).toBe(1);
+  });
 });