From c488a744eb9ccb71ae3d0bf94cefe4caefd060a9 Mon Sep 17 00:00:00 2001
From: Mike Turley <mturley@redhat.com>
Date: Thu, 17 Jan 2019 14:19:46 -0500
Subject: [PATCH 1/6] Break GeneralSettings out from Settings component

---
 .../screens/App/Settings/GeneralSettings.js   |  84 +++++++++++
 .../react/screens/App/Settings/Settings.js    | 140 ++++++------------
 2 files changed, 128 insertions(+), 96 deletions(-)
 create mode 100644 app/javascript/react/screens/App/Settings/GeneralSettings.js

diff --git a/app/javascript/react/screens/App/Settings/GeneralSettings.js b/app/javascript/react/screens/App/Settings/GeneralSettings.js
new file mode 100644
index 0000000000..7728f846fd
--- /dev/null
+++ b/app/javascript/react/screens/App/Settings/GeneralSettings.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { reduxForm, Field } from 'redux-form';
+import { Form, Button, Spinner } from 'patternfly-react';
+import NumberInput from '../common/forms/NumberInput';
+
+export class GeneralSettings extends React.Component {
+  componentDidMount() {
+    const { fetchServersAction, fetchServersUrl, fetchSettingsAction, fetchSettingsUrl } = this.props;
+    fetchServersAction(fetchServersUrl);
+    fetchSettingsAction(fetchSettingsUrl);
+  }
+
+  onApplyClick = () => {
+    const { patchSettingsAction, servers, settingsForm } = this.props;
+    patchSettingsAction(servers, settingsForm.values);
+  };
+
+  render() {
+    const { isFetchingServers, isFetchingSettings, isSavingSettings, savedSettings, settingsForm } = this.props;
+
+    const hasUnsavedChanges =
+      settingsForm &&
+      settingsForm.values &&
+      Object.keys(savedSettings).some(key => savedSettings[key] !== settingsForm.values[key]);
+
+    return (
+      <Spinner loading={isFetchingServers || isFetchingSettings} style={{ marginTop: 15 }}>
+        <div className="migration-settings">
+          <h2>{__('Concurrent Migrations')}</h2>
+          <Form style={{ padding: '0 20px' }}>
+            <Form.FormGroup>
+              <Form.ControlLabel>{__('Maximum concurrent migrations per conversion host')}</Form.ControlLabel>
+              <div style={{ width: 100 }}>
+                <Field
+                  id="max_concurrent_tasks_per_host"
+                  name="max_concurrent_tasks_per_host"
+                  component={NumberInput}
+                  normalize={NumberInput.normalizeStringToInt}
+                  min={1}
+                />
+              </div>
+            </Form.FormGroup>
+            <Form.FormGroup>
+              <Button bsStyle="primary" onClick={this.onApplyClick} disabled={!hasUnsavedChanges || isSavingSettings}>
+                {__('Apply')}
+              </Button>
+              <br />
+              {isSavingSettings && (
+                <div style={{ paddingTop: 10 }}>
+                  <Spinner loading size="xs" inline />
+                  {__(' Applying...')}
+                </div>
+              )}
+            </Form.FormGroup>
+          </Form>
+        </div>
+      </Spinner>
+    );
+  }
+}
+
+GeneralSettings.propTypes = {
+  fetchServersAction: PropTypes.func,
+  fetchSettingsAction: PropTypes.func,
+  patchSettingsAction: PropTypes.func,
+  isFetchingServers: PropTypes.bool,
+  isFetchingSettings: PropTypes.bool,
+  isSavingSettings: PropTypes.bool,
+  servers: PropTypes.array,
+  savedSettings: PropTypes.object,
+  settingsForm: PropTypes.object,
+  fetchServersUrl: PropTypes.string,
+  fetchSettingsUrl: PropTypes.string
+};
+
+GeneralSettings.defaultProps = {
+  fetchServersUrl: '/api/servers',
+  fetchSettingsUrl: '/api/settings'
+};
+
+export default reduxForm({
+  form: 'settings'
+})(GeneralSettings);
diff --git a/app/javascript/react/screens/App/Settings/Settings.js b/app/javascript/react/screens/App/Settings/Settings.js
index 263dda7a2d..db6dfed099 100644
--- a/app/javascript/react/screens/App/Settings/Settings.js
+++ b/app/javascript/react/screens/App/Settings/Settings.js
@@ -1,100 +1,48 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { reduxForm, Field } from 'redux-form';
-import { Breadcrumb, Form, Button, Spinner } from 'patternfly-react';
+import { Breadcrumb } from 'patternfly-react';
 import Toolbar from '../../../config/Toolbar';
-import NumberInput from '../common/forms/NumberInput';
-
-export class Settings extends React.Component {
-  componentDidMount() {
-    const { fetchServersAction, fetchServersUrl, fetchSettingsAction, fetchSettingsUrl } = this.props;
-    fetchServersAction(fetchServersUrl);
-    fetchSettingsAction(fetchSettingsUrl);
-  }
-
-  onApplyClick = () => {
-    const { patchSettingsAction, servers, settingsForm } = this.props;
-    patchSettingsAction(servers, settingsForm.values);
-  };
-
-  render() {
-    const { isFetchingServers, isFetchingSettings, isSavingSettings, savedSettings, settingsForm } = this.props;
-
-    const toolbarContent = (
-      <Toolbar>
-        <Breadcrumb.Item href="/dashboard/maintab?tab=compute">{__('Compute')}</Breadcrumb.Item>
-        <Breadcrumb.Item href="#/plans">{__('Migration')}</Breadcrumb.Item>
-        <Breadcrumb.Item active>{__('Migration Settings')}</Breadcrumb.Item>
-      </Toolbar>
-    );
-
-    const hasUnsavedChanges =
-      settingsForm &&
-      settingsForm.values &&
-      Object.keys(savedSettings).some(key => savedSettings[key] !== settingsForm.values[key]);
-
-    const settingsContent = (
-      <Spinner loading={isFetchingServers || isFetchingSettings} style={{ marginTop: 15 }}>
-        <div className="migration-settings">
-          <h2>{__('Concurrent Migrations')}</h2>
-          <Form style={{ padding: '0 20px' }}>
-            <Form.FormGroup>
-              <Form.ControlLabel>{__('Maximum concurrent migrations per conversion host')}</Form.ControlLabel>
-              <div style={{ width: 100 }}>
-                <Field
-                  id="max_concurrent_tasks_per_host"
-                  name="max_concurrent_tasks_per_host"
-                  component={NumberInput}
-                  normalize={NumberInput.normalizeStringToInt}
-                  min={1}
-                />
-              </div>
-            </Form.FormGroup>
-            <Form.FormGroup>
-              <Button bsStyle="primary" onClick={this.onApplyClick} disabled={!hasUnsavedChanges || isSavingSettings}>
-                {__('Apply')}
-              </Button>
-              <br />
-              {isSavingSettings && (
-                <div style={{ paddingTop: 10 }}>
-                  <Spinner loading size="xs" inline />
-                  {__(' Applying...')}
-                </div>
-              )}
-            </Form.FormGroup>
-          </Form>
-        </div>
-      </Spinner>
-    );
-
-    return (
-      <React.Fragment>
-        {toolbarContent}
-        {settingsContent}
-      </React.Fragment>
-    );
-  }
-}
-
-Settings.propTypes = {
-  fetchServersAction: PropTypes.func,
-  fetchSettingsAction: PropTypes.func,
-  patchSettingsAction: PropTypes.func,
-  isFetchingServers: PropTypes.bool,
-  isFetchingSettings: PropTypes.bool,
-  isSavingSettings: PropTypes.bool,
-  servers: PropTypes.array,
-  savedSettings: PropTypes.object,
-  settingsForm: PropTypes.object,
-  fetchServersUrl: PropTypes.string,
-  fetchSettingsUrl: PropTypes.string
-};
-
-Settings.defaultProps = {
-  fetchServersUrl: '/api/servers',
-  fetchSettingsUrl: '/api/settings'
+import GeneralSettings from './GeneralSettings';
+
+const Settings = props => {
+  const {
+    fetchServersAction,
+    fetchSettingsAction,
+    patchSettingsAction,
+    isFetchingServers,
+    isFetchingSettings,
+    isSavingSettings,
+    servers,
+    savedSettings,
+    settingsForm
+  } = props;
+
+  const toolbarContent = (
+    <Toolbar>
+      <Breadcrumb.Item href="/dashboard/maintab?tab=compute">{__('Compute')}</Breadcrumb.Item>
+      <Breadcrumb.Item href="#/plans">{__('Migration')}</Breadcrumb.Item>
+      <Breadcrumb.Item active>{__('Migration Settings')}</Breadcrumb.Item>
+    </Toolbar>
+  );
+
+  return (
+    <React.Fragment>
+      {toolbarContent}
+      <GeneralSettings
+        fetchServersAction={fetchServersAction}
+        fetchSettingsAction={fetchSettingsAction}
+        patchSettingsAction={patchSettingsAction}
+        isFetchingServers={isFetchingServers}
+        isFetchingSettings={isFetchingSettings}
+        isSavingSettings={isSavingSettings}
+        servers={servers}
+        savedSettings={savedSettings}
+        settingsForm={settingsForm}
+        initialValues={savedSettings}
+        enableReinitialize
+        destroyOnUnmount={false}
+      />
+    </React.Fragment>
+  );
 };
 
-export default reduxForm({
-  form: 'settings'
-})(Settings);
+export default Settings;
\ No newline at end of file

From c7e88b484c728e5df8c688bbec7304f1641dce64 Mon Sep 17 00:00:00 2001
From: Mike Turley <mturley@redhat.com>
Date: Thu, 17 Jan 2019 15:03:09 -0500
Subject: [PATCH 2/6] Add tab bar connected to routes

---
 app/javascript/react/config/config.js         |  5 ++
 .../App/Settings/ConversionHostsSettings.js   |  5 ++
 .../screens/App/Settings/GeneralSettings.js   |  1 -
 .../react/screens/App/Settings/Settings.js    | 77 +++++++++++++++----
 .../react/screens/App/Settings/index.js       |  8 +-
 5 files changed, 74 insertions(+), 22 deletions(-)
 create mode 100644 app/javascript/react/screens/App/Settings/ConversionHostsSettings.js

diff --git a/app/javascript/react/config/config.js b/app/javascript/react/config/config.js
index 2f633720f1..c1ed5e874c 100644
--- a/app/javascript/react/config/config.js
+++ b/app/javascript/react/config/config.js
@@ -14,6 +14,11 @@ export const links = [
     component: Settings,
     menu_item_id: 'menu_item_settings'
   },
+  {
+    path: 'settings/conversion_hosts',
+    component: Settings,
+    menu_item_id: 'menu_item_settings'
+  },
   {
     path: 'plan/:id',
     component: PlanContainer,
diff --git a/app/javascript/react/screens/App/Settings/ConversionHostsSettings.js b/app/javascript/react/screens/App/Settings/ConversionHostsSettings.js
new file mode 100644
index 0000000000..efdf0da73f
--- /dev/null
+++ b/app/javascript/react/screens/App/Settings/ConversionHostsSettings.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+const ConversionHostsSettings = () => <h2>Hello World</h2>;
+
+export default ConversionHostsSettings;
diff --git a/app/javascript/react/screens/App/Settings/GeneralSettings.js b/app/javascript/react/screens/App/Settings/GeneralSettings.js
index 7728f846fd..89dfd52597 100644
--- a/app/javascript/react/screens/App/Settings/GeneralSettings.js
+++ b/app/javascript/react/screens/App/Settings/GeneralSettings.js
@@ -27,7 +27,6 @@ export class GeneralSettings extends React.Component {
     return (
       <Spinner loading={isFetchingServers || isFetchingSettings} style={{ marginTop: 15 }}>
         <div className="migration-settings">
-          <h2>{__('Concurrent Migrations')}</h2>
           <Form style={{ padding: '0 20px' }}>
             <Form.FormGroup>
               <Form.ControlLabel>{__('Maximum concurrent migrations per conversion host')}</Form.ControlLabel>
diff --git a/app/javascript/react/screens/App/Settings/Settings.js b/app/javascript/react/screens/App/Settings/Settings.js
index db6dfed099..61cd82dd5c 100644
--- a/app/javascript/react/screens/App/Settings/Settings.js
+++ b/app/javascript/react/screens/App/Settings/Settings.js
@@ -1,10 +1,14 @@
 import React from 'react';
-import { Breadcrumb } from 'patternfly-react';
+import PropTypes from 'prop-types';
+import { Breadcrumb, Tabs } from 'patternfly-react';
 import Toolbar from '../../../config/Toolbar';
 import GeneralSettings from './GeneralSettings';
+import ConversionHostsSettings from './ConversionHostsSettings';
 
 const Settings = props => {
   const {
+    match,
+    redirectTo,
     fetchServersAction,
     fetchSettingsAction,
     patchSettingsAction,
@@ -24,25 +28,66 @@ const Settings = props => {
     </Toolbar>
   );
 
+  const generalSettings = (
+    <GeneralSettings
+      fetchServersAction={fetchServersAction}
+      fetchSettingsAction={fetchSettingsAction}
+      patchSettingsAction={patchSettingsAction}
+      isFetchingServers={isFetchingServers}
+      isFetchingSettings={isFetchingSettings}
+      isSavingSettings={isSavingSettings}
+      servers={servers}
+      savedSettings={savedSettings}
+      settingsForm={settingsForm}
+      initialValues={savedSettings}
+      enableReinitialize
+      destroyOnUnmount={false}
+    />
+  );
+
+  const tabs = (
+    <div style={{ marginTop: 10 }}>
+      <Tabs id="settings-tabs" activeKey={match.path} onSelect={key => redirectTo(key)}>
+        <Tabs.Tab eventKey="/settings" title={__('Concurrent Migrations')}>
+          {generalSettings}
+        </Tabs.Tab>
+        <Tabs.Tab eventKey="/settings/conversion_hosts" title={__('Conversion Hosts')}>
+          <ConversionHostsSettings />
+        </Tabs.Tab>
+      </Tabs>
+    </div>
+  );
+
+  // TODO remove this when we are ready to release ConversionHostsSettings
+  const hideConversionHostSettings = false;
+
   return (
     <React.Fragment>
       {toolbarContent}
-      <GeneralSettings
-        fetchServersAction={fetchServersAction}
-        fetchSettingsAction={fetchSettingsAction}
-        patchSettingsAction={patchSettingsAction}
-        isFetchingServers={isFetchingServers}
-        isFetchingSettings={isFetchingSettings}
-        isSavingSettings={isSavingSettings}
-        servers={servers}
-        savedSettings={savedSettings}
-        settingsForm={settingsForm}
-        initialValues={savedSettings}
-        enableReinitialize
-        destroyOnUnmount={false}
-      />
+      {hideConversionHostSettings ? (
+        <React.Fragment>
+          <h2>{__('Concurrent Migrations')}</h2>
+          {generalSettings}
+        </React.Fragment>
+      ) : (
+        tabs
+      )}
     </React.Fragment>
   );
 };
 
-export default Settings;
\ No newline at end of file
+Settings.propTypes = {
+  match: PropTypes.object,
+  redirectTo: PropTypes.func,
+  fetchServersAction: PropTypes.func,
+  fetchSettingsAction: PropTypes.func,
+  patchSettingsAction: PropTypes.func,
+  isFetchingServers: PropTypes.bool,
+  isFetchingSettings: PropTypes.bool,
+  isSavingSettings: PropTypes.bool,
+  servers: PropTypes.array,
+  savedSettings: PropTypes.object,
+  settingsForm: PropTypes.object
+};
+
+export default Settings;
diff --git a/app/javascript/react/screens/App/Settings/index.js b/app/javascript/react/screens/App/Settings/index.js
index 061848e93d..e25d9e3ec4 100644
--- a/app/javascript/react/screens/App/Settings/index.js
+++ b/app/javascript/react/screens/App/Settings/index.js
@@ -3,6 +3,7 @@ import Settings from './Settings';
 
 import * as SettingsActions from './SettingsActions';
 import * as NotificationActions from '../common/NotificationList/NotificationListActions';
+import * as RouterActions from '../../../../redux/actions/routerActions';
 
 import reducer from './SettingsReducer';
 
@@ -11,16 +12,13 @@ export const reducers = { settings: reducer };
 const mapStateToProps = ({ settings, form }, ownProps) => ({
   ...settings,
   ...ownProps.data,
-  settingsForm: form.settings,
-  initialValues: settings.savedSettings,
-  enableReinitialize: true,
-  destroyOnUnmount: false
+  settingsForm: form.settings
 });
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => Object.assign(stateProps, ownProps.data, dispatchProps);
 
 export default connect(
   mapStateToProps,
-  Object.assign(SettingsActions, NotificationActions),
+  Object.assign(SettingsActions, NotificationActions, RouterActions),
   mergeProps
 )(Settings);

From f5043e39aef2071f3a17c8b0a64144fb741cafec Mon Sep 17 00:00:00 2001
From: Mike Turley <mturley@redhat.com>
Date: Thu, 17 Jan 2019 15:17:15 -0500
Subject: [PATCH 3/6] Fix existing tests

---
 ...ttings.test.js => GeneralSettings.test.js} | 14 +--
 .../GeneralSettings.test.js.snap              | 73 ++++++++++++++
 .../__snapshots__/Settings.test.js.snap       | 97 -------------------
 3 files changed, 80 insertions(+), 104 deletions(-)
 rename app/javascript/react/screens/App/Settings/__tests__/{Settings.test.js => GeneralSettings.test.js} (66%)
 create mode 100644 app/javascript/react/screens/App/Settings/__tests__/__snapshots__/GeneralSettings.test.js.snap
 delete mode 100644 app/javascript/react/screens/App/Settings/__tests__/__snapshots__/Settings.test.js.snap

diff --git a/app/javascript/react/screens/App/Settings/__tests__/Settings.test.js b/app/javascript/react/screens/App/Settings/__tests__/GeneralSettings.test.js
similarity index 66%
rename from app/javascript/react/screens/App/Settings/__tests__/Settings.test.js
rename to app/javascript/react/screens/App/Settings/__tests__/GeneralSettings.test.js
index 4bdb3a2a06..7d326c3df0 100644
--- a/app/javascript/react/screens/App/Settings/__tests__/Settings.test.js
+++ b/app/javascript/react/screens/App/Settings/__tests__/GeneralSettings.test.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import { Spinner } from 'patternfly-react';
 import { shallow } from 'enzyme';
-import { Settings } from '../Settings';
+import { GeneralSettings } from '../GeneralSettings';
 import { servers, settings } from '../settings.fixures';
 import { getFormValuesFromApiSettings } from '../helpers';
 
-describe('Settings component', () => {
+describe('GeneralSettings component', () => {
   const defaultFormValues = getFormValuesFromApiSettings(settings);
   const getBaseProps = () => ({
     fetchServersAction: jest.fn(),
@@ -16,20 +16,20 @@ describe('Settings component', () => {
     servers: servers.resources
   });
 
-  it('renders the settings page', () => {
-    const component = shallow(<Settings {...getBaseProps()} />);
+  it('renders the general settings page', () => {
+    const component = shallow(<GeneralSettings {...getBaseProps()} />);
     expect(component).toMatchSnapshot();
   });
 
-  it('renders the settings page with Applying spinner when saving', () => {
-    const component = shallow(<Settings {...getBaseProps()} isSavingSettings />);
+  it('renders the general settings page with Applying spinner when saving', () => {
+    const component = shallow(<GeneralSettings {...getBaseProps()} isSavingSettings />);
     const applying = component.find(Spinner).findWhere(child => child.text() === ' Applying...');
     expect(applying).toHaveLength(1);
   });
 
   it('properly calls patchSettingsAction on apply click', () => {
     const patchSettingsAction = jest.fn();
-    const component = shallow(<Settings {...getBaseProps()} patchSettingsAction={patchSettingsAction} />);
+    const component = shallow(<GeneralSettings {...getBaseProps()} patchSettingsAction={patchSettingsAction} />);
     component.find('Button').simulate('click');
     expect(patchSettingsAction).toBeCalledWith(servers.resources, defaultFormValues);
   });
diff --git a/app/javascript/react/screens/App/Settings/__tests__/__snapshots__/GeneralSettings.test.js.snap b/app/javascript/react/screens/App/Settings/__tests__/__snapshots__/GeneralSettings.test.js.snap
new file mode 100644
index 0000000000..03189be06d
--- /dev/null
+++ b/app/javascript/react/screens/App/Settings/__tests__/__snapshots__/GeneralSettings.test.js.snap
@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GeneralSettings component renders the general settings page 1`] = `
+<Spinner
+  className=""
+  inline={false}
+  inverse={false}
+  loading={false}
+  size="md"
+  style={
+    Object {
+      "marginTop": 15,
+    }
+  }
+>
+  <div
+    className="migration-settings"
+  >
+    <Form
+      bsClass="form"
+      componentClass="form"
+      horizontal={false}
+      inline={false}
+      style={
+        Object {
+          "padding": "0 20px",
+        }
+      }
+    >
+      <FormGroup
+        bsClass="form-group"
+      >
+        <ControlLabel
+          bsClass="control-label"
+          srOnly={false}
+        >
+          Maximum concurrent migrations per conversion host
+        </ControlLabel>
+        <div
+          style={
+            Object {
+              "width": 100,
+            }
+          }
+        >
+          <Field
+            component={[Function]}
+            id="max_concurrent_tasks_per_host"
+            min={1}
+            name="max_concurrent_tasks_per_host"
+            normalize={[Function]}
+          />
+        </div>
+      </FormGroup>
+      <FormGroup
+        bsClass="form-group"
+      >
+        <Button
+          active={false}
+          block={false}
+          bsClass="btn"
+          bsStyle="primary"
+          disabled={true}
+          onClick={[Function]}
+        >
+          Apply
+        </Button>
+        <br />
+      </FormGroup>
+    </Form>
+  </div>
+</Spinner>
+`;
diff --git a/app/javascript/react/screens/App/Settings/__tests__/__snapshots__/Settings.test.js.snap b/app/javascript/react/screens/App/Settings/__tests__/__snapshots__/Settings.test.js.snap
deleted file mode 100644
index c4ababd96c..0000000000
--- a/app/javascript/react/screens/App/Settings/__tests__/__snapshots__/Settings.test.js.snap
+++ /dev/null
@@ -1,97 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Settings component renders the settings page 1`] = `
-<React.Fragment>
-  <Toolbar>
-    <BreadcrumbItem
-      active={false}
-      href="/dashboard/maintab?tab=compute"
-    >
-      Compute
-    </BreadcrumbItem>
-    <BreadcrumbItem
-      active={false}
-      href="#/plans"
-    >
-      Migration
-    </BreadcrumbItem>
-    <BreadcrumbItem
-      active={true}
-    >
-      Migration Settings
-    </BreadcrumbItem>
-  </Toolbar>
-  <Spinner
-    className=""
-    inline={false}
-    inverse={false}
-    loading={false}
-    size="md"
-    style={
-      Object {
-        "marginTop": 15,
-      }
-    }
-  >
-    <div
-      className="migration-settings"
-    >
-      <h2>
-        Concurrent Migrations
-      </h2>
-      <Form
-        bsClass="form"
-        componentClass="form"
-        horizontal={false}
-        inline={false}
-        style={
-          Object {
-            "padding": "0 20px",
-          }
-        }
-      >
-        <FormGroup
-          bsClass="form-group"
-        >
-          <ControlLabel
-            bsClass="control-label"
-            srOnly={false}
-          >
-            Maximum concurrent migrations per conversion host
-          </ControlLabel>
-          <div
-            style={
-              Object {
-                "width": 100,
-              }
-            }
-          >
-            <Field
-              component={[Function]}
-              id="max_concurrent_tasks_per_host"
-              min={1}
-              name="max_concurrent_tasks_per_host"
-              normalize={[Function]}
-            />
-          </div>
-        </FormGroup>
-        <FormGroup
-          bsClass="form-group"
-        >
-          <Button
-            active={false}
-            block={false}
-            bsClass="btn"
-            bsStyle="primary"
-            disabled={true}
-            onClick={[Function]}
-          >
-            Apply
-          </Button>
-          <br />
-        </FormGroup>
-      </Form>
-    </div>
-  </Spinner>
-</React.Fragment>
-`;

From f89f74c7af80a77513034d3d70f2aebb7281e392 Mon Sep 17 00:00:00 2001
From: Mike Turley <mturley@redhat.com>
Date: Thu, 17 Jan 2019 15:28:44 -0500
Subject: [PATCH 4/6] Turn off the new tabs for now

---
 app/javascript/react/screens/App/Settings/Settings.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/react/screens/App/Settings/Settings.js b/app/javascript/react/screens/App/Settings/Settings.js
index 61cd82dd5c..5b442e2ab3 100644
--- a/app/javascript/react/screens/App/Settings/Settings.js
+++ b/app/javascript/react/screens/App/Settings/Settings.js
@@ -59,7 +59,7 @@ const Settings = props => {
   );
 
   // TODO remove this when we are ready to release ConversionHostsSettings
-  const hideConversionHostSettings = false;
+  const hideConversionHostSettings = true;
 
   return (
     <React.Fragment>

From db48bd17128dd57187e306cd31c35e8a0a694231 Mon Sep 17 00:00:00 2001
From: Mike Turley <mturley@redhat.com>
Date: Tue, 22 Jan 2019 08:26:58 -0500
Subject: [PATCH 5/6] Switch to direct Tab component import

---
 app/javascript/react/screens/App/Settings/Settings.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/javascript/react/screens/App/Settings/Settings.js b/app/javascript/react/screens/App/Settings/Settings.js
index 5b442e2ab3..50ab2837d3 100644
--- a/app/javascript/react/screens/App/Settings/Settings.js
+++ b/app/javascript/react/screens/App/Settings/Settings.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Breadcrumb, Tabs } from 'patternfly-react';
+import { Breadcrumb, Tabs, Tab } from 'patternfly-react';
 import Toolbar from '../../../config/Toolbar';
 import GeneralSettings from './GeneralSettings';
 import ConversionHostsSettings from './ConversionHostsSettings';
@@ -48,12 +48,12 @@ const Settings = props => {
   const tabs = (
     <div style={{ marginTop: 10 }}>
       <Tabs id="settings-tabs" activeKey={match.path} onSelect={key => redirectTo(key)}>
-        <Tabs.Tab eventKey="/settings" title={__('Concurrent Migrations')}>
+        <Tab eventKey="/settings" title={__('Concurrent Migrations')}>
           {generalSettings}
-        </Tabs.Tab>
-        <Tabs.Tab eventKey="/settings/conversion_hosts" title={__('Conversion Hosts')}>
+        </Tab>
+        <Tab eventKey="/settings/conversion_hosts" title={__('Conversion Hosts')}>
           <ConversionHostsSettings />
-        </Tabs.Tab>
+        </Tab>
       </Tabs>
     </div>
   );

From b700cddb5a9701051c4f346499f9d125c351bf3b Mon Sep 17 00:00:00 2001
From: Mike Turley <mturley@redhat.com>
Date: Thu, 24 Jan 2019 13:46:01 -0500
Subject: [PATCH 6/6] Move GeneralSettings into its own container component

---
 .../react/screens/App/Settings/Settings.js    | 86 +++++--------------
 .../react/screens/App/Settings/index.js       | 14 +--
 .../ConversionHostsSettings.js                |  0
 .../screens/ConversionHostsSettings/index.js  |  3 +
 .../GeneralSettings}/GeneralSettings.js       |  2 +-
 .../__tests__/GeneralSettings.test.js         |  4 +-
 .../GeneralSettings.test.js.snap              |  0
 .../Settings/screens/GeneralSettings/index.js | 22 +++++
 8 files changed, 51 insertions(+), 80 deletions(-)
 rename app/javascript/react/screens/App/Settings/{ => screens/ConversionHostsSettings}/ConversionHostsSettings.js (100%)
 create mode 100644 app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/index.js
 rename app/javascript/react/screens/App/Settings/{ => screens/GeneralSettings}/GeneralSettings.js (97%)
 rename app/javascript/react/screens/App/Settings/{ => screens/GeneralSettings}/__tests__/GeneralSettings.test.js (91%)
 rename app/javascript/react/screens/App/Settings/{ => screens/GeneralSettings}/__tests__/__snapshots__/GeneralSettings.test.js.snap (100%)
 create mode 100644 app/javascript/react/screens/App/Settings/screens/GeneralSettings/index.js

diff --git a/app/javascript/react/screens/App/Settings/Settings.js b/app/javascript/react/screens/App/Settings/Settings.js
index 50ab2837d3..ff6b3e1cbe 100644
--- a/app/javascript/react/screens/App/Settings/Settings.js
+++ b/app/javascript/react/screens/App/Settings/Settings.js
@@ -2,75 +2,38 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Breadcrumb, Tabs, Tab } from 'patternfly-react';
 import Toolbar from '../../../config/Toolbar';
-import GeneralSettings from './GeneralSettings';
-import ConversionHostsSettings from './ConversionHostsSettings';
+import GeneralSettings from './screens/GeneralSettings';
+import ConversionHostsSettings from './screens/ConversionHostsSettings';
 
 const Settings = props => {
-  const {
-    match,
-    redirectTo,
-    fetchServersAction,
-    fetchSettingsAction,
-    patchSettingsAction,
-    isFetchingServers,
-    isFetchingSettings,
-    isSavingSettings,
-    servers,
-    savedSettings,
-    settingsForm
-  } = props;
-
-  const toolbarContent = (
-    <Toolbar>
-      <Breadcrumb.Item href="/dashboard/maintab?tab=compute">{__('Compute')}</Breadcrumb.Item>
-      <Breadcrumb.Item href="#/plans">{__('Migration')}</Breadcrumb.Item>
-      <Breadcrumb.Item active>{__('Migration Settings')}</Breadcrumb.Item>
-    </Toolbar>
-  );
-
-  const generalSettings = (
-    <GeneralSettings
-      fetchServersAction={fetchServersAction}
-      fetchSettingsAction={fetchSettingsAction}
-      patchSettingsAction={patchSettingsAction}
-      isFetchingServers={isFetchingServers}
-      isFetchingSettings={isFetchingSettings}
-      isSavingSettings={isSavingSettings}
-      servers={servers}
-      savedSettings={savedSettings}
-      settingsForm={settingsForm}
-      initialValues={savedSettings}
-      enableReinitialize
-      destroyOnUnmount={false}
-    />
-  );
-
-  const tabs = (
-    <div style={{ marginTop: 10 }}>
-      <Tabs id="settings-tabs" activeKey={match.path} onSelect={key => redirectTo(key)}>
-        <Tab eventKey="/settings" title={__('Concurrent Migrations')}>
-          {generalSettings}
-        </Tab>
-        <Tab eventKey="/settings/conversion_hosts" title={__('Conversion Hosts')}>
-          <ConversionHostsSettings />
-        </Tab>
-      </Tabs>
-    </div>
-  );
+  const { match, redirectTo } = props;
 
   // TODO remove this when we are ready to release ConversionHostsSettings
   const hideConversionHostSettings = true;
 
   return (
     <React.Fragment>
-      {toolbarContent}
+      <Toolbar>
+        <Breadcrumb.Item href="/dashboard/maintab?tab=compute">{__('Compute')}</Breadcrumb.Item>
+        <Breadcrumb.Item href="#/plans">{__('Migration')}</Breadcrumb.Item>
+        <Breadcrumb.Item active>{__('Migration Settings')}</Breadcrumb.Item>
+      </Toolbar>
       {hideConversionHostSettings ? (
         <React.Fragment>
           <h2>{__('Concurrent Migrations')}</h2>
-          {generalSettings}
+          <GeneralSettings />
         </React.Fragment>
       ) : (
-        tabs
+        <div style={{ marginTop: 10 }}>
+          <Tabs id="settings-tabs" activeKey={match.path} onSelect={key => redirectTo(key)}>
+            <Tab eventKey="/settings" title={__('Concurrent Migrations')}>
+              <GeneralSettings />
+            </Tab>
+            <Tab eventKey="/settings/conversion_hosts" title={__('Conversion Hosts')}>
+              <ConversionHostsSettings />
+            </Tab>
+          </Tabs>
+        </div>
       )}
     </React.Fragment>
   );
@@ -78,16 +41,7 @@ const Settings = props => {
 
 Settings.propTypes = {
   match: PropTypes.object,
-  redirectTo: PropTypes.func,
-  fetchServersAction: PropTypes.func,
-  fetchSettingsAction: PropTypes.func,
-  patchSettingsAction: PropTypes.func,
-  isFetchingServers: PropTypes.bool,
-  isFetchingSettings: PropTypes.bool,
-  isSavingSettings: PropTypes.bool,
-  servers: PropTypes.array,
-  savedSettings: PropTypes.object,
-  settingsForm: PropTypes.object
+  redirectTo: PropTypes.func
 };
 
 export default Settings;
diff --git a/app/javascript/react/screens/App/Settings/index.js b/app/javascript/react/screens/App/Settings/index.js
index e25d9e3ec4..c7763403d0 100644
--- a/app/javascript/react/screens/App/Settings/index.js
+++ b/app/javascript/react/screens/App/Settings/index.js
@@ -1,24 +1,16 @@
 import { connect } from 'react-redux';
 import Settings from './Settings';
-
-import * as SettingsActions from './SettingsActions';
-import * as NotificationActions from '../common/NotificationList/NotificationListActions';
-import * as RouterActions from '../../../../redux/actions/routerActions';
-
 import reducer from './SettingsReducer';
+import * as RouterActions from '../../../../redux/actions/routerActions';
 
 export const reducers = { settings: reducer };
 
-const mapStateToProps = ({ settings, form }, ownProps) => ({
-  ...settings,
-  ...ownProps.data,
-  settingsForm: form.settings
-});
+const mapStateToProps = () => ({});
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => Object.assign(stateProps, ownProps.data, dispatchProps);
 
 export default connect(
   mapStateToProps,
-  Object.assign(SettingsActions, NotificationActions, RouterActions),
+  RouterActions,
   mergeProps
 )(Settings);
diff --git a/app/javascript/react/screens/App/Settings/ConversionHostsSettings.js b/app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/ConversionHostsSettings.js
similarity index 100%
rename from app/javascript/react/screens/App/Settings/ConversionHostsSettings.js
rename to app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/ConversionHostsSettings.js
diff --git a/app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/index.js b/app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/index.js
new file mode 100644
index 0000000000..a35db09d2c
--- /dev/null
+++ b/app/javascript/react/screens/App/Settings/screens/ConversionHostsSettings/index.js
@@ -0,0 +1,3 @@
+import ConversionHostsSettings from './ConversionHostsSettings';
+
+export default ConversionHostsSettings;
diff --git a/app/javascript/react/screens/App/Settings/GeneralSettings.js b/app/javascript/react/screens/App/Settings/screens/GeneralSettings/GeneralSettings.js
similarity index 97%
rename from app/javascript/react/screens/App/Settings/GeneralSettings.js
rename to app/javascript/react/screens/App/Settings/screens/GeneralSettings/GeneralSettings.js
index 89dfd52597..ffb7f70a6c 100644
--- a/app/javascript/react/screens/App/Settings/GeneralSettings.js
+++ b/app/javascript/react/screens/App/Settings/screens/GeneralSettings/GeneralSettings.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { reduxForm, Field } from 'redux-form';
 import { Form, Button, Spinner } from 'patternfly-react';
-import NumberInput from '../common/forms/NumberInput';
+import NumberInput from '../../../common/forms/NumberInput';
 
 export class GeneralSettings extends React.Component {
   componentDidMount() {
diff --git a/app/javascript/react/screens/App/Settings/__tests__/GeneralSettings.test.js b/app/javascript/react/screens/App/Settings/screens/GeneralSettings/__tests__/GeneralSettings.test.js
similarity index 91%
rename from app/javascript/react/screens/App/Settings/__tests__/GeneralSettings.test.js
rename to app/javascript/react/screens/App/Settings/screens/GeneralSettings/__tests__/GeneralSettings.test.js
index 7d326c3df0..0f30efcea6 100644
--- a/app/javascript/react/screens/App/Settings/__tests__/GeneralSettings.test.js
+++ b/app/javascript/react/screens/App/Settings/screens/GeneralSettings/__tests__/GeneralSettings.test.js
@@ -2,8 +2,8 @@ import React from 'react';
 import { Spinner } from 'patternfly-react';
 import { shallow } from 'enzyme';
 import { GeneralSettings } from '../GeneralSettings';
-import { servers, settings } from '../settings.fixures';
-import { getFormValuesFromApiSettings } from '../helpers';
+import { servers, settings } from '../../../settings.fixures';
+import { getFormValuesFromApiSettings } from '../../../helpers';
 
 describe('GeneralSettings component', () => {
   const defaultFormValues = getFormValuesFromApiSettings(settings);
diff --git a/app/javascript/react/screens/App/Settings/__tests__/__snapshots__/GeneralSettings.test.js.snap b/app/javascript/react/screens/App/Settings/screens/GeneralSettings/__tests__/__snapshots__/GeneralSettings.test.js.snap
similarity index 100%
rename from app/javascript/react/screens/App/Settings/__tests__/__snapshots__/GeneralSettings.test.js.snap
rename to app/javascript/react/screens/App/Settings/screens/GeneralSettings/__tests__/__snapshots__/GeneralSettings.test.js.snap
diff --git a/app/javascript/react/screens/App/Settings/screens/GeneralSettings/index.js b/app/javascript/react/screens/App/Settings/screens/GeneralSettings/index.js
new file mode 100644
index 0000000000..b4534df1b2
--- /dev/null
+++ b/app/javascript/react/screens/App/Settings/screens/GeneralSettings/index.js
@@ -0,0 +1,22 @@
+import { connect } from 'react-redux';
+import GeneralSettings from './GeneralSettings';
+
+import * as SettingsActions from '../../SettingsActions';
+import * as RouterActions from '../../../../../../redux/actions/routerActions';
+
+const mapStateToProps = ({ settings, form }, ownProps) => ({
+  ...settings,
+  ...ownProps.data,
+  settingsForm: form.settings,
+  initialValues: settings.savedSettings,
+  enableReinitialize: true,
+  destroyOnUnmount: false
+});
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => Object.assign(stateProps, ownProps.data, dispatchProps);
+
+export default connect(
+  mapStateToProps,
+  Object.assign(SettingsActions, RouterActions),
+  mergeProps
+)(GeneralSettings);