Merge pull request #7747 from marshmalien/add-settings-framework

Add settings navigation skeleton

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

awx/ui_next/src/components/AppContainer/NavExpandableGroup.jsx

@@ -34,6 +34,15 @@ class NavExpandableGroup extends Component {
     const { groupId, groupTitle, routes } = this.props;
     const { isExpanded } = this.state;
 
+    if (routes.length === 1) {
+      const [{ path }] = routes;
+      return (
+        <NavItem itemId={groupId} isActive={this.isActivePath(path)} key={path}>
+          <Link to={path}>{groupTitle}</Link>
+        </NavItem>
+      );
+    }
+
     return (
       <NavExpandable
         isActive={this.isActiveGroup()}

awx/ui_next/src/contexts/Config.jsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useContext } from 'react';
 
 // eslint-disable-next-line import/prefer-default-export
 export const ConfigContext = React.createContext({});
 
 export const ConfigProvider = ConfigContext.Provider;
 export const Config = ConfigContext.Consumer;
+export const useConfig = () => useContext(ConfigContext);

awx/ui_next/src/routeConfig.js

@@ -13,11 +13,7 @@ import NotificationTemplates from './screens/NotificationTemplate';
 import Organizations from './screens/Organization';
 import Projects from './screens/Project';
 import Schedules from './screens/Schedule';
-import AuthSettings from './screens/AuthSetting';
+import Settings from './screens/Setting';
-import JobsSettings from './screens/JobsSetting';
-import SystemSettings from './screens/SystemSetting';
-import UISettings from './screens/UISetting';
-import License from './screens/License';
 import Teams from './screens/Team';
 import Templates from './screens/Template';
 import Users from './screens/User';
@@ -134,32 +130,12 @@ function getRouteConfig(i18n) {
     },
     {
       groupTitle: i18n._(t`Settings`),
-      groupId: 'settings_group',
+      groupId: 'settings',
       routes: [
         {
-          title: i18n._(t`Authentication`),
+          title: i18n._(t`Settings`),
-          path: '/auth_settings',
+          path: '/settings',
-          screen: AuthSettings,
+          screen: Settings,
-        },
-        {
-          title: i18n._(t`Jobs`),
-          path: '/jobs_settings',
-          screen: JobsSettings,
-        },
-        {
-          title: i18n._(t`System`),
-          path: '/system_settings',
-          screen: SystemSettings,
-        },
-        {
-          title: i18n._(t`User Interface`),
-          path: '/ui_settings',
-          screen: UISettings,
-        },
-        {
-          title: i18n._(t`License`),
-          path: '/license',
-          screen: License,
         },
       ],
     },

awx/ui_next/src/screens/AuthSetting/AuthSettings.jsx

@@ -1,28 +0,0 @@
-import React, { Component, Fragment } from 'react';
-import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
-import {
-  PageSection,
-  PageSectionVariants,
-  Title,
-} from '@patternfly/react-core';
-
-class AuthSettings extends Component {
-  render() {
-    const { i18n } = this.props;
-    const { light } = PageSectionVariants;
-
-    return (
-      <Fragment>
-        <PageSection variant={light} className="pf-m-condensed">
-          <Title size="2xl" headingLevel="h2">
-            {i18n._(t`Authentication Settings`)}
-          </Title>
-        </PageSection>
-        <PageSection />
-      </Fragment>
-    );
-  }
-}
-
-export default withI18n()(AuthSettings);

awx/ui_next/src/screens/AuthSetting/AuthSettings.test.jsx

@@ -1,29 +0,0 @@
-import React from 'react';
-
-import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
-
-import AuthSettings from './AuthSettings';
-
-describe('<AuthSettings />', () => {
-  let pageWrapper;
-  let pageSections;
-  let title;
-
-  beforeEach(() => {
-    pageWrapper = mountWithContexts(<AuthSettings />);
-    pageSections = pageWrapper.find('PageSection');
-    title = pageWrapper.find('Title');
-  });
-
-  afterEach(() => {
-    pageWrapper.unmount();
-  });
-
-  test('initially renders without crashing', () => {
-    expect(pageWrapper.length).toBe(1);
-    expect(pageSections.length).toBe(2);
-    expect(title.length).toBe(1);
-    expect(title.props().size).toBe('2xl');
-    expect(pageSections.first().props().variant).toBe('light');
-  });
-});

awx/ui_next/src/screens/AuthSetting/index.js

@@ -1 +0,0 @@
-export { default } from './AuthSettings';

awx/ui_next/src/screens/JobsSetting/JobsSettings.jsx

@@ -1,28 +0,0 @@
-import React, { Component, Fragment } from 'react';
-import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
-import {
-  PageSection,
-  PageSectionVariants,
-  Title,
-} from '@patternfly/react-core';
-
-class JobsSettings extends Component {
-  render() {
-    const { i18n } = this.props;
-    const { light } = PageSectionVariants;
-
-    return (
-      <Fragment>
-        <PageSection variant={light} className="pf-m-condensed">
-          <Title size="2xl" headingLevel="h2">
-            {i18n._(t`Jobs Settings`)}
-          </Title>
-        </PageSection>
-        <PageSection />
-      </Fragment>
-    );
-  }
-}
-
-export default withI18n()(JobsSettings);

awx/ui_next/src/screens/JobsSetting/JobsSettings.test.jsx

@@ -1,29 +0,0 @@
-import React from 'react';
-
-import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
-
-import JobsSettings from './JobsSettings';
-
-describe('<JobsSettings />', () => {
-  let pageWrapper;
-  let pageSections;
-  let title;
-
-  beforeEach(() => {
-    pageWrapper = mountWithContexts(<JobsSettings />);
-    pageSections = pageWrapper.find('PageSection');
-    title = pageWrapper.find('Title');
-  });
-
-  afterEach(() => {
-    pageWrapper.unmount();
-  });
-
-  test('initially renders without crashing', () => {
-    expect(pageWrapper.length).toBe(1);
-    expect(pageSections.length).toBe(2);
-    expect(title.length).toBe(1);
-    expect(title.props().size).toBe('2xl');
-    expect(pageSections.first().props().variant).toBe('light');
-  });
-});

awx/ui_next/src/screens/JobsSetting/index.js

@@ -1 +0,0 @@
-export { default } from './JobsSettings';

awx/ui_next/src/screens/License/License.jsx

@@ -1,28 +0,0 @@
-import React, { Component, Fragment } from 'react';
-import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
-import {
-  PageSection,
-  PageSectionVariants,
-  Title,
-} from '@patternfly/react-core';
-
-class License extends Component {
-  render() {
-    const { i18n } = this.props;
-    const { light } = PageSectionVariants;
-
-    return (
-      <Fragment>
-        <PageSection variant={light} className="pf-m-condensed">
-          <Title size="2xl" headingLevel="h2">
-            {i18n._(t`License`)}
-          </Title>
-        </PageSection>
-        <PageSection />
-      </Fragment>
-    );
-  }
-}
-
-export default withI18n()(License);

awx/ui_next/src/screens/License/License.test.jsx

@@ -1,29 +0,0 @@
-import React from 'react';
-
-import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
-
-import License from './License';
-
-describe('<License />', () => {
-  let pageWrapper;
-  let pageSections;
-  let title;
-
-  beforeEach(() => {
-    pageWrapper = mountWithContexts(<License />);
-    pageSections = pageWrapper.find('PageSection');
-    title = pageWrapper.find('Title');
-  });
-
-  afterEach(() => {
-    pageWrapper.unmount();
-  });
-
-  test('initially renders without crashing', () => {
-    expect(pageWrapper.length).toBe(1);
-    expect(pageSections.length).toBe(2);
-    expect(title.length).toBe(1);
-    expect(title.props().size).toBe('2xl');
-    expect(pageSections.first().props().variant).toBe('light');
-  });
-});

awx/ui_next/src/screens/Setting/ActivityStream/ActivityStream.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Redirect, Route, Switch } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { PageSection, Card } from '@patternfly/react-core';
+import ActivityStreamDetail from './ActivityStreamDetail';
+import ActivityStreamEdit from './ActivityStreamEdit';
+
+function ActivityStream({ i18n }) {
+  const baseUrl = '/settings/activity_stream';
+  return (
+    <PageSection>
+      <Card>
+        {i18n._(t`Activity stream settings`)}
+        <Switch>
+          <Redirect from={baseUrl} to={`${baseUrl}/details`} exact />
+          <Route path={`${baseUrl}/details`}>
+            <ActivityStreamDetail />
+          </Route>
+          <Route path={`${baseUrl}/edit`}>
+            <ActivityStreamEdit />
+          </Route>
+        </Switch>
+      </Card>
+    </PageSection>
+  );
+}
+
+export default withI18n()(ActivityStream);

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+import ActivityStream from './ActivityStream';
+
+describe('<ActivityStream />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<ActivityStream />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('Card').text()).toContain('Activity stream settings');
+  });
+});

awx/ui_next/src/screens/Setting/ActivityStream/ActivityStreamDetail/ActivityStreamDetail.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Button } from '@patternfly/react-core';
+import { CardBody, CardActionsRow } from '../../../../components/Card';
+
+function ActivityStreamDetail({ i18n }) {
+  return (
+    <CardBody>
+      {i18n._(t`Detail coming soon :)`)}
+      <CardActionsRow>
+        <Button
+          aria-label={i18n._(t`Edit`)}
+          component={Link}
+          to="/settings/activity_stream/edit"
+        >
+          {i18n._(t`Edit`)}
+        </Button>
+      </CardActionsRow>
+    </CardBody>
+  );
+}
+
+export default withI18n()(ActivityStreamDetail);

awx/ui_next/src/screens/Setting/ActivityStream/ActivityStreamDetail/ActivityStreamDetail.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../../testUtils/enzymeHelpers';
+import ActivityStreamDetail from './ActivityStreamDetail';
+
+describe('<ActivityStreamDetail />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<ActivityStreamDetail />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('ActivityStreamDetail').length).toBe(1);
+  });
+});

awx/ui_next/src/screens/Setting/ActivityStream/ActivityStreamDetail/index.js

@@ -0,0 +1 @@
+export { default } from './ActivityStreamDetail';

awx/ui_next/src/screens/Setting/ActivityStream/ActivityStreamEdit/ActivityStreamEdit.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Button } from '@patternfly/react-core';
+import { CardBody, CardActionsRow } from '../../../../components/Card';
+
+function ActivityStreamEdit({ i18n }) {
+  return (
+    <CardBody>
+      {i18n._(t`Edit form coming soon :)`)}
+      <CardActionsRow>
+        <Button
+          aria-label={i18n._(t`Cancel`)}
+          component={Link}
+          to="/settings/activity_stream/details"
+        >
+          {i18n._(t`Cancel`)}
+        </Button>
+      </CardActionsRow>
+    </CardBody>
+  );
+}
+
+export default withI18n()(ActivityStreamEdit);

awx/ui_next/src/screens/Setting/ActivityStream/ActivityStreamEdit/ActivityStreamEdit.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../../testUtils/enzymeHelpers';
+import ActivityStreamEdit from './ActivityStreamEdit';
+
+describe('<ActivityStreamEdit />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<ActivityStreamEdit />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('ActivityStreamEdit').length).toBe(1);
+  });
+});

awx/ui_next/src/screens/Setting/ActivityStream/ActivityStreamEdit/index.js

@@ -0,0 +1 @@
+export { default } from './ActivityStreamEdit';

awx/ui_next/src/screens/Setting/ActivityStream/index.js

@@ -0,0 +1 @@
+export { default } from './ActivityStream';

awx/ui_next/src/screens/Setting/AzureAD/AzureAD.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Redirect, Route, Switch } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { PageSection, Card } from '@patternfly/react-core';
+import AzureADDetail from './AzureADDetail';
+import AzureADEdit from './AzureADEdit';
+
+function AzureAD({ i18n }) {
+  const baseUrl = '/settings/azure';
+
+  return (
+    <PageSection>
+      <Card>
+        {i18n._(t`Azure AD settings`)}
+        <Switch>
+          <Redirect from={baseUrl} to={`${baseUrl}/details`} exact />
+          <Route path={`${baseUrl}/details`}>
+            <AzureADDetail />
+          </Route>
+          <Route path={`${baseUrl}/edit`}>
+            <AzureADEdit />
+          </Route>
+        </Switch>
+      </Card>
+    </PageSection>
+  );
+}
+
+export default withI18n()(AzureAD);

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+import AzureAD from './AzureAD';
+
+describe('<AzureAD />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<AzureAD />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('Card').text()).toContain('Azure AD settings');
+  });
+});

awx/ui_next/src/screens/Setting/AzureAD/AzureADDetail/AzureADDetail.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Button } from '@patternfly/react-core';
+import { CardBody, CardActionsRow } from '../../../../components/Card';
+
+function AzureADDetail({ i18n }) {
+  return (
+    <CardBody>
+      {i18n._(t`Detail coming soon :)`)}
+      <CardActionsRow>
+        <Button
+          aria-label={i18n._(t`Edit`)}
+          component={Link}
+          to="/settings/azure/edit"
+        >
+          {i18n._(t`Edit`)}
+        </Button>
+      </CardActionsRow>
+    </CardBody>
+  );
+}
+
+export default withI18n()(AzureADDetail);

awx/ui_next/src/screens/Setting/AzureAD/AzureADDetail/AzureADDetail.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../../testUtils/enzymeHelpers';
+import AzureADDetail from './AzureADDetail';
+
+describe('<AzureADDetail />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<AzureADDetail />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('AzureADDetail').length).toBe(1);
+  });
+});

awx/ui_next/src/screens/Setting/AzureAD/AzureADDetail/index.js

@@ -0,0 +1 @@
+export { default } from './AzureADDetail';

awx/ui_next/src/screens/Setting/AzureAD/AzureADEdit/AzureADEdit.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Button } from '@patternfly/react-core';
+import { CardBody, CardActionsRow } from '../../../../components/Card';
+
+function AzureADEdit({ i18n }) {
+  return (
+    <CardBody>
+      {i18n._(t`Edit form coming soon :)`)}
+      <CardActionsRow>
+        <Button
+          aria-label={i18n._(t`Cancel`)}
+          component={Link}
+          to="/settings/azure/details"
+        >
+          {i18n._(t`Cancel`)}
+        </Button>
+      </CardActionsRow>
+    </CardBody>
+  );
+}
+
+export default withI18n()(AzureADEdit);

awx/ui_next/src/screens/Setting/AzureAD/AzureADEdit/AzureADEdit.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../../testUtils/enzymeHelpers';
+import AzureADEdit from './AzureADEdit';
+
+describe('<AzureADEdit />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<AzureADEdit />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('AzureADEdit').length).toBe(1);
+  });
+});

awx/ui_next/src/screens/Setting/AzureAD/AzureADEdit/index.js

@@ -0,0 +1 @@
+export { default } from './AzureADEdit';

awx/ui_next/src/screens/Setting/AzureAD/index.js

@@ -0,0 +1 @@
+export { default } from './AzureAD';

awx/ui_next/src/screens/Setting/GitHub/GitHub.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Redirect, Route, Switch } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { PageSection, Card } from '@patternfly/react-core';
+import GitHubDetail from './GitHubDetail';
+import GitHubEdit from './GitHubEdit';
+
+function GitHub({ i18n }) {
+  const baseUrl = '/settings/github';
+
+  return (
+    <PageSection>
+      <Card>
+        {i18n._(t`GitHub settings`)}
+        <Switch>
+          <Redirect from={baseUrl} to={`${baseUrl}/details`} exact />
+          <Route path={`${baseUrl}/details`}>
+            <GitHubDetail />
+          </Route>
+          <Route path={`${baseUrl}/edit`}>
+            <GitHubEdit />
+          </Route>
+        </Switch>
+      </Card>
+    </PageSection>
+  );
+}
+
+export default withI18n()(GitHub);

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+import GitHub from './GitHub';
+
+describe('<GitHub />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<GitHub />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('Card').text()).toContain('GitHub settings');
+  });
+});

awx/ui_next/src/screens/Setting/GitHub/GitHubDetail/GitHubDetail.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Button } from '@patternfly/react-core';
+import { CardBody, CardActionsRow } from '../../../../components/Card';
+
+function GitHubDetail({ i18n }) {
+  return (
+    <CardBody>
+      {i18n._(t`Detail coming soon :)`)}
+      <CardActionsRow>
+        <Button
+          aria-label={i18n._(t`Edit`)}
+          component={Link}
+          to="/settings/github/edit"
+        >
+          {i18n._(t`Edit`)}
+        </Button>
+      </CardActionsRow>
+    </CardBody>
+  );
+}
+
+export default withI18n()(GitHubDetail);

awx/ui_next/src/screens/Setting/GitHub/GitHubDetail/GitHubDetail.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../../testUtils/enzymeHelpers';
+import GitHubDetail from './GitHubDetail';
+
+describe('<GitHubDetail />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<GitHubDetail />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('GitHubDetail').length).toBe(1);
+  });
+});

awx/ui_next/src/screens/Setting/GitHub/GitHubDetail/index.js

@@ -0,0 +1 @@
+export { default } from './GitHubDetail';

awx/ui_next/src/screens/Setting/GitHub/GitHubEdit/GitHubEdit.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Button } from '@patternfly/react-core';
+import { CardBody, CardActionsRow } from '../../../../components/Card';
+
+function GitHubEdit({ i18n }) {
+  return (
+    <CardBody>
+      {i18n._(t`Edit form coming soon :)`)}
+      <CardActionsRow>
+        <Button
+          aria-label={i18n._(t`Cancel`)}
+          component={Link}
+          to="/settings/github/details"
+        >
+          {i18n._(t`Cancel`)}
+        </Button>
+      </CardActionsRow>
+    </CardBody>
+  );
+}
+
+export default withI18n()(GitHubEdit);

awx/ui_next/src/screens/Setting/GitHub/GitHubEdit/GitHubEdit.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../../testUtils/enzymeHelpers';
+import GitHubEdit from './GitHubEdit';
+
+describe('<GitHubEdit />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<GitHubEdit />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('GitHubEdit').length).toBe(1);
+  });
+});

awx/ui_next/src/screens/Setting/GitHub/GitHubEdit/index.js

@@ -0,0 +1 @@
+export { default } from './GitHubEdit';

awx/ui_next/src/screens/Setting/GitHub/index.js

@@ -0,0 +1 @@
+export { default } from './GitHub';

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Redirect, Route, Switch } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { PageSection, Card } from '@patternfly/react-core';
+import GoogleOAuth2Detail from './GoogleOAuth2Detail';
+import GoogleOAuth2Edit from './GoogleOAuth2Edit';
+
+function GoogleOAuth2({ i18n }) {
+  const baseUrl = '/settings/google_oauth2';
+
+  return (
+    <PageSection>
+      <Card>
+        {i18n._(t`Google OAuth 2.0 settings`)}
+        <Switch>
+          <Redirect from={baseUrl} to={`${baseUrl}/details`} exact />
+          <Route path={`${baseUrl}/details`}>
+            <GoogleOAuth2Detail />
+          </Route>
+          <Route path={`${baseUrl}/edit`}>
+            <GoogleOAuth2Edit />
+          </Route>
+        </Switch>
+      </Card>
+    </PageSection>
+  );
+}
+
+export default withI18n()(GoogleOAuth2);

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+import GoogleOAuth2 from './GoogleOAuth2';
+
+describe('<GoogleOAuth2 />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<GoogleOAuth2 />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('Card').text()).toContain('Google OAuth 2.0 settings');
+  });
+});

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Button } from '@patternfly/react-core';
+import { CardBody, CardActionsRow } from '../../../../components/Card';
+
+function GoogleOAuth2Detail({ i18n }) {
+  return (
+    <CardBody>
+      {i18n._(t`Detail coming soon :)`)}
+      <CardActionsRow>
+        <Button
+          aria-label={i18n._(t`Edit`)}
+          component={Link}
+          to="/settings/google_oauth2/edit"
+        >
+          {i18n._(t`Edit`)}
+        </Button>
+      </CardActionsRow>
+    </CardBody>
+  );
+}
+
+export default withI18n()(GoogleOAuth2Detail);

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../../testUtils/enzymeHelpers';
+import GoogleOAuth2Detail from './GoogleOAuth2Detail';
+
+describe('<GoogleOAuth2Detail />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<GoogleOAuth2Detail />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('GoogleOAuth2Detail').length).toBe(1);
+  });
+});

awx/ui_next/src/screens/Setting/GoogleOAuth2/GoogleOAuth2Detail/index.js

@@ -0,0 +1 @@
+export { default } from './GoogleOAuth2Detail';

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Button } from '@patternfly/react-core';
+import { CardBody, CardActionsRow } from '../../../../components/Card';
+
+function GoogleOAuth2Edit({ i18n }) {
+  return (
+    <CardBody>
+      {i18n._(t`Edit form coming soon :)`)}
+      <CardActionsRow>
+        <Button
+          aria-label={i18n._(t`Cancel`)}
+          component={Link}
+          to="/settings/google_oauth2/details"
+        >
+          {i18n._(t`Cancel`)}
+        </Button>
+      </CardActionsRow>
+    </CardBody>
+  );
+}
+
+export default withI18n()(GoogleOAuth2Edit);

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../../testUtils/enzymeHelpers';
+import GoogleOAuth2Edit from './GoogleOAuth2Edit';
+
+describe('<GoogleOAuth2Edit />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<GoogleOAuth2Edit />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('GoogleOAuth2Edit').length).toBe(1);
+  });
+});

awx/ui_next/src/screens/Setting/GoogleOAuth2/GoogleOAuth2Edit/index.js

@@ -0,0 +1 @@
+export { default } from './GoogleOAuth2Edit';

awx/ui_next/src/screens/Setting/GoogleOAuth2/index.js

@@ -0,0 +1 @@
+export { default } from './GoogleOAuth2';

awx/ui_next/src/screens/Setting/Jobs/Jobs.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Redirect, Route, Switch } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { PageSection, Card } from '@patternfly/react-core';
+import JobsDetail from './JobsDetail';
+import JobsEdit from './JobsEdit';
+
+function Jobs({ i18n }) {
+  const baseUrl = '/settings/jobs';
+
+  return (
+    <PageSection>
+      <Card>
+        {i18n._(t`Jobs settings`)}
+        <Switch>
+          <Redirect from={baseUrl} to={`${baseUrl}/details`} exact />
+          <Route path={`${baseUrl}/details`}>
+            <JobsDetail />
+          </Route>
+          <Route path={`${baseUrl}/edit`}>
+            <JobsEdit />
+          </Route>
+        </Switch>
+      </Card>
+    </PageSection>
+  );
+}
+
+export default withI18n()(Jobs);

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+import Jobs from './Jobs';
+
+describe('<Jobs />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<Jobs />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('Card').text()).toContain('Jobs settings');
+  });
+});

awx/ui_next/src/screens/Setting/Jobs/JobsDetail/JobsDetail.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Button } from '@patternfly/react-core';
+import { CardBody, CardActionsRow } from '../../../../components/Card';
+
+function JobsDetail({ i18n }) {
+  return (
+    <CardBody>
+      {i18n._(t`Detail coming soon :)`)}
+      <CardActionsRow>
+        <Button
+          aria-label={i18n._(t`Edit`)}
+          component={Link}
+          to="/settings/jobs/edit"
+        >
+          {i18n._(t`Edit`)}
+        </Button>
+      </CardActionsRow>
+    </CardBody>
+  );
+}
+
+export default withI18n()(JobsDetail);

awx/ui_next/src/screens/Setting/Jobs/JobsDetail/JobsDetail.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../../testUtils/enzymeHelpers';
+import JobsDetail from './JobsDetail';
+
+describe('<JobsDetail />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<JobsDetail />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('JobsDetail').length).toBe(1);
+  });
+});

awx/ui_next/src/screens/Setting/Jobs/JobsDetail/index.js

@@ -0,0 +1 @@
+export { default } from './JobsDetail';

awx/ui_next/src/screens/Setting/Jobs/JobsEdit/JobsEdit.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Button } from '@patternfly/react-core';
+import { CardBody, CardActionsRow } from '../../../../components/Card';
+
+function JobsEdit({ i18n }) {
+  return (
+    <CardBody>
+      {i18n._(t`Edit form coming soon :)`)}
+      <CardActionsRow>
+        <Button
+          aria-label={i18n._(t`Cancel`)}
+          component={Link}
+          to="/settings/jobs/details"
+        >
+          {i18n._(t`Cancel`)}
+        </Button>
+      </CardActionsRow>
+    </CardBody>
+  );
+}
+
+export default withI18n()(JobsEdit);

awx/ui_next/src/screens/Setting/Jobs/JobsEdit/JobsEdit.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../../testUtils/enzymeHelpers';
+import JobsEdit from './JobsEdit';
+
+describe('<JobsEdit />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<JobsEdit />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('JobsEdit').length).toBe(1);
+  });
+});

awx/ui_next/src/screens/Setting/Jobs/JobsEdit/index.js

@@ -0,0 +1 @@
+export { default } from './JobsEdit';

awx/ui_next/src/screens/Setting/Jobs/index.js

@@ -0,0 +1 @@
+export { default } from './Jobs';

awx/ui_next/src/screens/Setting/LDAP/LDAP.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Redirect, Route, Switch } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { PageSection, Card } from '@patternfly/react-core';
+import LDAPDetail from './LDAPDetail';
+import LDAPEdit from './LDAPEdit';
+
+function LDAP({ i18n }) {
+  const baseUrl = '/settings/ldap';
+
+  return (
+    <PageSection>
+      <Card>
+        {i18n._(t`LDAP settings`)}
+        <Switch>
+          <Redirect from={baseUrl} to={`${baseUrl}/details`} exact />
+          <Route path={`${baseUrl}/details`}>
+            <LDAPDetail />
+          </Route>
+          <Route path={`${baseUrl}/edit`}>
+            <LDAPEdit />
+          </Route>
+        </Switch>
+      </Card>
+    </PageSection>
+  );
+}
+
+export default withI18n()(LDAP);

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+import LDAP from './LDAP';
+
+describe('<LDAP />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<LDAP />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('Card').text()).toContain('LDAP settings');
+  });
+});

awx/ui_next/src/screens/Setting/LDAP/LDAPDetail/LDAPDetail.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Button } from '@patternfly/react-core';
+import { CardBody, CardActionsRow } from '../../../../components/Card';
+
+function LDAPDetail({ i18n }) {
+  return (
+    <CardBody>
+      {i18n._(t`Detail coming soon :)`)}
+      <CardActionsRow>
+        <Button
+          aria-label={i18n._(t`Edit`)}
+          component={Link}
+          to="/settings/ldap/edit"
+        >
+          {i18n._(t`Edit`)}
+        </Button>
+      </CardActionsRow>
+    </CardBody>
+  );
+}
+
+export default withI18n()(LDAPDetail);

awx/ui_next/src/screens/Setting/LDAP/LDAPDetail/LDAPDetail.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../../testUtils/enzymeHelpers';
+import LDAPDetail from './LDAPDetail';
+
+describe('<LDAPDetail />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<LDAPDetail />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('LDAPDetail').length).toBe(1);
+  });
+});

awx/ui_next/src/screens/Setting/LDAP/LDAPDetail/index.js

@@ -0,0 +1 @@
+export { default } from './LDAPDetail';

awx/ui_next/src/screens/Setting/LDAP/LDAPEdit/LDAPEdit.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Button } from '@patternfly/react-core';
+import { CardBody, CardActionsRow } from '../../../../components/Card';
+
+function LDAPEdit({ i18n }) {
+  return (
+    <CardBody>
+      {i18n._(t`Edit form coming soon :)`)}
+      <CardActionsRow>
+        <Button
+          aria-label={i18n._(t`Cancel`)}
+          component={Link}
+          to="/settings/ldap/details"
+        >
+          {i18n._(t`Cancel`)}
+        </Button>
+      </CardActionsRow>
+    </CardBody>
+  );
+}
+
+export default withI18n()(LDAPEdit);

awx/ui_next/src/screens/Setting/LDAP/LDAPEdit/LDAPEdit.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../../testUtils/enzymeHelpers';
+import LDAPEdit from './LDAPEdit';
+
+describe('<LDAPEdit />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<LDAPEdit />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('LDAPEdit').length).toBe(1);
+  });
+});

awx/ui_next/src/screens/Setting/LDAP/LDAPEdit/index.js

@@ -0,0 +1 @@
+export { default } from './LDAPEdit';

awx/ui_next/src/screens/Setting/LDAP/index.js

@@ -0,0 +1 @@
+export { default } from './LDAP';

awx/ui_next/src/screens/Setting/License/License.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Redirect, Route, Switch } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { PageSection, Card } from '@patternfly/react-core';
+import LicenseDetail from './LicenseDetail';
+import LicenseEdit from './LicenseEdit';
+
+function License({ i18n }) {
+  const baseUrl = '/settings/license';
+
+  return (
+    <PageSection>
+      <Card>
+        {i18n._(t`License settings`)}
+        <Switch>
+          <Redirect from={baseUrl} to={`${baseUrl}/details`} exact />
+          <Route path={`${baseUrl}/details`}>
+            <LicenseDetail />
+          </Route>
+          <Route path={`${baseUrl}/edit`}>
+            <LicenseEdit />
+          </Route>
+        </Switch>
+      </Card>
+    </PageSection>
+  );
+}
+
+export default withI18n()(License);

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+import License from './License';
+
+describe('<License />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<License />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('Card').text()).toContain('License settings');
+  });
+});

awx/ui_next/src/screens/Setting/License/LicenseDetail/LicenseDetail.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Button } from '@patternfly/react-core';
+import { CardBody, CardActionsRow } from '../../../../components/Card';
+
+function LicenseDetail({ i18n }) {
+  return (
+    <CardBody>
+      {i18n._(t`Detail coming soon :)`)}
+      <CardActionsRow>
+        <Button
+          aria-label={i18n._(t`Edit`)}
+          component={Link}
+          to="/settings/license/edit"
+        >
+          {i18n._(t`Edit`)}
+        </Button>
+      </CardActionsRow>
+    </CardBody>
+  );
+}
+
+export default withI18n()(LicenseDetail);

awx/ui_next/src/screens/Setting/License/LicenseDetail/LicenseDetail.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../../testUtils/enzymeHelpers';
+import LicenseDetail from './LicenseDetail';
+
+describe('<LicenseDetail />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<LicenseDetail />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('LicenseDetail').length).toBe(1);
+  });
+});

awx/ui_next/src/screens/Setting/License/LicenseDetail/index.js

@@ -0,0 +1 @@
+export { default } from './LicenseDetail';

awx/ui_next/src/screens/Setting/License/LicenseEdit/LicenseEdit.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Button } from '@patternfly/react-core';
+import { CardBody, CardActionsRow } from '../../../../components/Card';
+
+function LicenseEdit({ i18n }) {
+  return (
+    <CardBody>
+      {i18n._(t`Edit form coming soon :)`)}
+      <CardActionsRow>
+        <Button
+          aria-label={i18n._(t`Cancel`)}
+          component={Link}
+          to="/settings/license/details"
+        >
+          {i18n._(t`Cancel`)}
+        </Button>
+      </CardActionsRow>
+    </CardBody>
+  );
+}
+
+export default withI18n()(LicenseEdit);

awx/ui_next/src/screens/Setting/License/LicenseEdit/LicenseEdit.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../../testUtils/enzymeHelpers';
+import LicenseEdit from './LicenseEdit';
+
+describe('<LicenseEdit />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<LicenseEdit />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('LicenseEdit').length).toBe(1);
+  });
+});

awx/ui_next/src/screens/Setting/License/LicenseEdit/index.js

@@ -0,0 +1 @@
+export { default } from './LicenseEdit';

awx/ui_next/src/screens/Setting/Logging/Logging.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Redirect, Route, Switch } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { PageSection, Card } from '@patternfly/react-core';
+import LoggingDetail from './LoggingDetail';
+import LoggingEdit from './LoggingEdit';
+
+function Logging({ i18n }) {
+  const baseUrl = '/settings/logging';
+
+  return (
+    <PageSection>
+      <Card>
+        {i18n._(t`Logging settings`)}
+        <Switch>
+          <Redirect from={baseUrl} to={`${baseUrl}/details`} exact />
+          <Route path={`${baseUrl}/details`}>
+            <LoggingDetail />
+          </Route>
+          <Route path={`${baseUrl}/edit`}>
+            <LoggingEdit />
+          </Route>
+        </Switch>
+      </Card>
+    </PageSection>
+  );
+}
+
+export default withI18n()(Logging);

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+import Logging from './Logging';
+
+describe('<Logging />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<Logging />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('Card').text()).toContain('Logging settings');
+  });
+});

awx/ui_next/src/screens/Setting/Logging/LoggingDetail/LoggingDetail.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Button } from '@patternfly/react-core';
+import { CardBody, CardActionsRow } from '../../../../components/Card';
+
+function LoggingDetail({ i18n }) {
+  return (
+    <CardBody>
+      {i18n._(t`Detail coming soon :)`)}
+      <CardActionsRow>
+        <Button
+          aria-label={i18n._(t`Edit`)}
+          component={Link}
+          to="/settings/logging/edit"
+        >
+          {i18n._(t`Edit`)}
+        </Button>
+      </CardActionsRow>
+    </CardBody>
+  );
+}
+
+export default withI18n()(LoggingDetail);

awx/ui_next/src/screens/Setting/Logging/LoggingDetail/LoggingDetail.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../../testUtils/enzymeHelpers';
+import LoggingDetail from './LoggingDetail';
+
+describe('<LoggingDetail />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<LoggingDetail />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('LoggingDetail').length).toBe(1);
+  });
+});

awx/ui_next/src/screens/Setting/Logging/LoggingDetail/index.js

@@ -0,0 +1 @@
+export { default } from './LoggingDetail';

awx/ui_next/src/screens/Setting/Logging/LoggingEdit/LoggingEdit.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Button } from '@patternfly/react-core';
+import { CardBody, CardActionsRow } from '../../../../components/Card';
+
+function LoggingEdit({ i18n }) {
+  return (
+    <CardBody>
+      {i18n._(t`Edit form coming soon :)`)}
+      <CardActionsRow>
+        <Button
+          aria-label={i18n._(t`Cancel`)}
+          component={Link}
+          to="/settings/logging/details"
+        >
+          {i18n._(t`Cancel`)}
+        </Button>
+      </CardActionsRow>
+    </CardBody>
+  );
+}
+
+export default withI18n()(LoggingEdit);

awx/ui_next/src/screens/Setting/Logging/LoggingEdit/LoggingEdit.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../../testUtils/enzymeHelpers';
+import LoggingEdit from './LoggingEdit';
+
+describe('<LoggingEdit />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<LoggingEdit />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('LoggingEdit').length).toBe(1);
+  });
+});

awx/ui_next/src/screens/Setting/Logging/LoggingEdit/index.js

@@ -0,0 +1 @@
+export { default } from './LoggingEdit';

awx/ui_next/src/screens/Setting/Logging/index.js

@@ -0,0 +1 @@
+export { default } from './Logging';

awx/ui_next/src/screens/Setting/MiscSystem/MiscSystem.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Redirect, Route, Switch } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { PageSection, Card } from '@patternfly/react-core';
+import MiscSystemDetail from './MiscSystemDetail';
+import MiscSystemEdit from './MiscSystemEdit';
+
+function MiscSystem({ i18n }) {
+  const baseUrl = '/settings/miscellaneous_system';
+
+  return (
+    <PageSection>
+      <Card>
+        {i18n._(t`Miscellaneous system settings`)}
+        <Switch>
+          <Redirect from={baseUrl} to={`${baseUrl}/details`} exact />
+          <Route path={`${baseUrl}/details`}>
+            <MiscSystemDetail />
+          </Route>
+          <Route path={`${baseUrl}/edit`}>
+            <MiscSystemEdit />
+          </Route>
+        </Switch>
+      </Card>
+    </PageSection>
+  );
+}
+
+export default withI18n()(MiscSystem);

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+import MiscSystem from './MiscSystem';
+
+describe('<MiscSystem />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<MiscSystem />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('Card').text()).toContain(
+      'Miscellaneous system settings'
+    );
+  });
+});

awx/ui_next/src/screens/Setting/MiscSystem/MiscSystemDetail/MiscSystemDetail.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Button } from '@patternfly/react-core';
+import { CardBody, CardActionsRow } from '../../../../components/Card';
+
+function MiscSystemDetail({ i18n }) {
+  return (
+    <CardBody>
+      {i18n._(t`Detail coming soon :)`)}
+      <CardActionsRow>
+        <Button
+          aria-label={i18n._(t`Edit`)}
+          component={Link}
+          to="/settings/miscellaneous_system/edit"
+        >
+          {i18n._(t`Edit`)}
+        </Button>
+      </CardActionsRow>
+    </CardBody>
+  );
+}
+
+export default withI18n()(MiscSystemDetail);

awx/ui_next/src/screens/Setting/MiscSystem/MiscSystemDetail/MiscSystemDetail.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../../testUtils/enzymeHelpers';
+import MiscSystemDetail from './MiscSystemDetail';
+
+describe('<MiscSystemDetail />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<MiscSystemDetail />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('MiscSystemDetail').length).toBe(1);
+  });
+});

awx/ui_next/src/screens/Setting/MiscSystem/MiscSystemDetail/index.js

@@ -0,0 +1 @@
+export { default } from './MiscSystemDetail';

awx/ui_next/src/screens/Setting/MiscSystem/MiscSystemEdit/MiscSystemEdit.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Button } from '@patternfly/react-core';
+import { CardBody, CardActionsRow } from '../../../../components/Card';
+
+function MiscSystemEdit({ i18n }) {
+  return (
+    <CardBody>
+      {i18n._(t`Edit form coming soon :)`)}
+      <CardActionsRow>
+        <Button
+          aria-label={i18n._(t`Cancel`)}
+          component={Link}
+          to="/settings/miscellaneous_system/details"
+        >
+          {i18n._(t`Cancel`)}
+        </Button>
+      </CardActionsRow>
+    </CardBody>
+  );
+}
+
+export default withI18n()(MiscSystemEdit);

awx/ui_next/src/screens/Setting/MiscSystem/MiscSystemEdit/MiscSystemEdit.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../../testUtils/enzymeHelpers';
+import MiscSystemEdit from './MiscSystemEdit';
+
+describe('<MiscSystemEdit />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<MiscSystemEdit />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('MiscSystemEdit').length).toBe(1);
+  });
+});

awx/ui_next/src/screens/Setting/MiscSystem/MiscSystemEdit/index.js

@@ -0,0 +1 @@
+export { default } from './MiscSystemEdit';

awx/ui_next/src/screens/Setting/MiscSystem/index.js

@@ -0,0 +1 @@
+export { default } from './MiscSystem';

awx/ui_next/src/screens/Setting/Radius/Radius.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Redirect, Route, Switch } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { PageSection, Card } from '@patternfly/react-core';
+import RadiusDetail from './RadiusDetail';
+import RadiusEdit from './RadiusEdit';
+
+function Radius({ i18n }) {
+  const baseUrl = '/settings/radius';
+
+  return (
+    <PageSection>
+      <Card>
+        {i18n._(t`Radius settings`)}
+        <Switch>
+          <Redirect from={baseUrl} to={`${baseUrl}/details`} exact />
+          <Route path={`${baseUrl}/details`}>
+            <RadiusDetail />
+          </Route>
+          <Route path={`${baseUrl}/edit`}>
+            <RadiusEdit />
+          </Route>
+        </Switch>
+      </Card>
+    </PageSection>
+  );
+}
+
+export default withI18n()(Radius);

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+import Radius from './Radius';
+
+describe('<Radius />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<Radius />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('Card').text()).toContain('Radius settings');
+  });
+});

awx/ui_next/src/screens/Setting/Radius/RadiusDetail/RadiusDetail.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Button } from '@patternfly/react-core';
+import { CardBody, CardActionsRow } from '../../../../components/Card';
+
+function RadiusDetail({ i18n }) {
+  return (
+    <CardBody>
+      {i18n._(t`Detail coming soon :)`)}
+      <CardActionsRow>
+        <Button
+          aria-label={i18n._(t`Edit`)}
+          component={Link}
+          to="/settings/radius/edit"
+        >
+          {i18n._(t`Edit`)}
+        </Button>
+      </CardActionsRow>
+    </CardBody>
+  );
+}
+
+export default withI18n()(RadiusDetail);

awx/ui_next/src/screens/Setting/Radius/RadiusDetail/RadiusDetail.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../../testUtils/enzymeHelpers';
+import RadiusDetail from './RadiusDetail';
+
+describe('<RadiusDetail />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<RadiusDetail />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('RadiusDetail').length).toBe(1);
+  });
+});

awx/ui_next/src/screens/Setting/Radius/RadiusDetail/index.js

@@ -0,0 +1 @@
+export { default } from './RadiusDetail';

awx/ui_next/src/screens/Setting/Radius/RadiusEdit/RadiusEdit.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Button } from '@patternfly/react-core';
+import { CardBody, CardActionsRow } from '../../../../components/Card';
+
+function RadiusEdit({ i18n }) {
+  return (
+    <CardBody>
+      {i18n._(t`Edit form coming soon :)`)}
+      <CardActionsRow>
+        <Button
+          aria-label={i18n._(t`Cancel`)}
+          component={Link}
+          to="/settings/radius/details"
+        >
+          {i18n._(t`Cancel`)}
+        </Button>
+      </CardActionsRow>
+    </CardBody>
+  );
+}
+
+export default withI18n()(RadiusEdit);

awx/ui_next/src/screens/Setting/Radius/RadiusEdit/RadiusEdit.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../../../testUtils/enzymeHelpers';
+import RadiusEdit from './RadiusEdit';
+
+describe('<RadiusEdit />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mountWithContexts(<RadiusEdit />);
+  });
+  afterEach(() => {
+    wrapper.unmount();
+  });
+  test('initially renders without crashing', () => {
+    expect(wrapper.find('RadiusEdit').length).toBe(1);
+  });
+});

awx/ui_next/src/screens/Setting/Radius/RadiusEdit/index.js

@@ -0,0 +1 @@
+export { default } from './RadiusEdit';