Convert Settings > oAuth application to new page template

+ DRY form wrappers, update test
elastic · Jun 17, 2021 · cc36617 · cc36617
1 parent 9240f4b
commit cc36617
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 84 deletions.
diff --git a/...public/applications/workplace_search/views/settings/components/oauth_application.test.tsx b/...public/applications/workplace_search/views/settings/components/oauth_application.test.tsx
@@ -16,8 +16,9 @@ import { shallow } from 'enzyme';
 
 import { EuiModal, EuiForm } from '@elastic/eui';
 
+import { getPageDescription } from '../../../../test_helpers';
+
 import { CredentialItem } from '../../../components/shared/credential_item';
-import { ViewContentHeader } from '../../../components/shared/view_content_header';
 import { OAUTH_DESCRIPTION, REDIRECT_INSECURE_ERROR_TEXT } from '../../../constants';
 
 import { OauthApplication } from './oauth_application';
@@ -77,7 +78,7 @@ describe('OauthApplication', () => {
   it('handles form submission', () => {
     const wrapper = shallow(<OauthApplication />);
     const preventDefault = jest.fn();
-    wrapper.find('form').simulate('submit', { preventDefault });
+    wrapper.find(EuiForm).simulate('submit', { preventDefault });
 
     expect(updateOauthApplication).toHaveBeenCalled();
   });
@@ -127,7 +128,7 @@ describe('OauthApplication', () => {
     });
     const wrapper = shallow(<OauthApplication />);
 
-    expect(wrapper.find(ViewContentHeader).prop('description')).toEqual(OAUTH_DESCRIPTION);
+    expect(getPageDescription(wrapper)).toEqual(OAUTH_DESCRIPTION);
     expect(wrapper.find('[data-test-subj="RedirectURIsRow"]').prop('error')).toEqual(
       REDIRECT_INSECURE_ERROR_TEXT
     );

diff --git a/...arch/public/applications/workplace_search/views/settings/components/oauth_application.tsx b/...arch/public/applications/workplace_search/views/settings/components/oauth_application.tsx
@@ -26,10 +26,10 @@ import {
 } from '@elastic/eui';
 
 import { LicensingLogic } from '../../../../shared/licensing';
+import { WorkplaceSearchPageTemplate } from '../../../components/layout';
 import { ContentSection } from '../../../components/shared/content_section';
 import { CredentialItem } from '../../../components/shared/credential_item';
 import { LicenseBadge } from '../../../components/shared/license_badge';
-import { ViewContentHeader } from '../../../components/shared/view_content_header';
 import {
   CLIENT_ID_LABEL,
   CLIENT_SECRET_LABEL,
@@ -112,89 +112,88 @@ export const OauthApplication: React.FC = () => {
   );
 
   return (
-    <>
-      <form onSubmit={handleSubmit}>
-        <EuiForm>
-          <ViewContentHeader title={NAV.SETTINGS_OAUTH} description={description} />
-          <ContentSection>
-            <EuiFormRow label={NAME_LABEL}>
-              <EuiFieldText
-                value={oauthApplication.name}
-                data-test-subj="OAuthAppName"
-                onChange={(e) => setOauthApplication({ ...oauthApplication, name: e.target.value })}
-                required
-                disabled={!hasPlatinumLicense}
-              />
-            </EuiFormRow>
-            <EuiSpacer size="xl" />
-            <EuiFormRow
-              data-test-subj="RedirectURIsRow"
-              label={REDIRECT_URIS_LABEL}
-              helpText={redirectUriHelpText}
-              isInvalid={redirectUriInvalid}
-              error={redirectErrorText}
-            >
-              <EuiTextArea
-                value={oauthApplication.redirectUri}
-                data-test-subj="RedirectURIsTextArea"
-                onChange={(e) =>
-                  setOauthApplication({ ...oauthApplication, redirectUri: e.target.value })
-                }
-                required
-                disabled={!hasPlatinumLicense}
-              />
-            </EuiFormRow>
-            <EuiSpacer size="xl" />
-            <EuiFormRow helpText={CONFIDENTIAL_HELP_TEXT}>
-              <EuiSwitch
-                label={CONFIDENTIAL_LABEL}
-                checked={oauthApplication.confidential}
-                data-test-subj="ConfidentialToggle"
-                onChange={(e) =>
-                  setOauthApplication({ ...oauthApplication, confidential: e.target.checked })
-                }
-                disabled={!hasPlatinumLicense}
+    <WorkplaceSearchPageTemplate
+      pageChrome={[NAV.SETTINGS, NAV.SETTINGS_OAUTH]}
+      pageHeader={{ pageTitle: NAV.SETTINGS_OAUTH, description }}
+    >
+      <EuiForm component="form" onSubmit={handleSubmit}>
+        <ContentSection>
+          <EuiFormRow label={NAME_LABEL}>
+            <EuiFieldText
+              value={oauthApplication.name}
+              data-test-subj="OAuthAppName"
+              onChange={(e) => setOauthApplication({ ...oauthApplication, name: e.target.value })}
+              required
+              disabled={!hasPlatinumLicense}
+            />
+          </EuiFormRow>
+          <EuiSpacer size="xl" />
+          <EuiFormRow
+            data-test-subj="RedirectURIsRow"
+            label={REDIRECT_URIS_LABEL}
+            helpText={redirectUriHelpText}
+            isInvalid={redirectUriInvalid}
+            error={redirectErrorText}
+          >
+            <EuiTextArea
+              value={oauthApplication.redirectUri}
+              data-test-subj="RedirectURIsTextArea"
+              onChange={(e) =>
+                setOauthApplication({ ...oauthApplication, redirectUri: e.target.value })
+              }
+              required
+              disabled={!hasPlatinumLicense}
+            />
+          </EuiFormRow>
+          <EuiSpacer size="xl" />
+          <EuiFormRow helpText={CONFIDENTIAL_HELP_TEXT}>
+            <EuiSwitch
+              label={CONFIDENTIAL_LABEL}
+              checked={oauthApplication.confidential}
+              data-test-subj="ConfidentialToggle"
+              onChange={(e) =>
+                setOauthApplication({ ...oauthApplication, confidential: e.target.checked })
+              }
+              disabled={!hasPlatinumLicense}
+            />
+          </EuiFormRow>
+          <EuiSpacer size="xl" />
+          <EuiButton
+            fill
+            color="primary"
+            data-test-subj="SaveOAuthApp"
+            type="submit"
+            disabled={!hasPlatinumLicense}
+          >
+            {SAVE_CHANGES_BUTTON}
+          </EuiButton>
+        </ContentSection>
+        {persisted && (
+          <ContentSection title={CREDENTIALS_TITLE} description={CREDENTIALS_DESCRIPTION}>
+            <EuiFormRow>
+              <CredentialItem
+                label={CLIENT_ID_LABEL}
+                value={oauthApplication.uid}
+                testSubj="ClientID"
               />
             </EuiFormRow>
-            <EuiSpacer size="xl" />
-            <EuiButton
-              fill
-              color="primary"
-              data-test-subj="SaveOAuthApp"
-              type="submit"
-              disabled={!hasPlatinumLicense}
-            >
-              {SAVE_CHANGES_BUTTON}
-            </EuiButton>
-          </ContentSection>
-          {persisted && (
-            <ContentSection title={CREDENTIALS_TITLE} description={CREDENTIALS_DESCRIPTION}>
-              <EuiFormRow>
-                <CredentialItem
-                  label={CLIENT_ID_LABEL}
-                  value={oauthApplication.uid}
-                  testSubj="ClientID"
-                />
-              </EuiFormRow>
-
-              {oauthApplication.confidential && (
-                <>
-                  <EuiSpacer size="s" />
-                  <EuiFormRow>
-                    <CredentialItem
-                      label={CLIENT_SECRET_LABEL}
-                      value={oauthApplication.secret}
-                      testSubj="ClientSecret"
-                    />
-                  </EuiFormRow>
-                </>
-              )}
-            </ContentSection>
-          )}
-        </EuiForm>
-      </form>
 
+            {oauthApplication.confidential && (
+              <>
+                <EuiSpacer size="s" />
+                <EuiFormRow>
+                  <CredentialItem
+                    label={CLIENT_SECRET_LABEL}
+                    value={oauthApplication.secret}
+                    testSubj="ClientSecret"
+                  />
+                </EuiFormRow>
+              </>
+            )}
+          </ContentSection>
+        )}
+      </EuiForm>
       {isLicenseModalVisible && licenseModal}
-    </>
+    </WorkplaceSearchPageTemplate>
   );
 };