From 8ccb806b44c0b8e8166d2f1842dcaf6766722f07 Mon Sep 17 00:00:00 2001
From: kgough <kgough@redhat.com>
Date: Thu, 17 May 2018 15:13:54 +1000
Subject: [PATCH] refactor(ZNTA-2514) replace TMMergeModal modal and toggle
 components with antd Modal and Switch

---
 .../ProjectVersion/TMMergeImportedTM.js       |  5 +++--
 .../containers/ProjectVersion/TMMergeModal.js | 20 +++++++++++--------
 .../ProjectVersion/TMMergeProjectSources.js   |  5 +++--
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/server/zanata-frontend/src/app/containers/ProjectVersion/TMMergeImportedTM.js b/server/zanata-frontend/src/app/containers/ProjectVersion/TMMergeImportedTM.js
index 6b7be912ea..b37cbb28f1 100644
--- a/server/zanata-frontend/src/app/containers/ProjectVersion/TMMergeImportedTM.js
+++ b/server/zanata-frontend/src/app/containers/ProjectVersion/TMMergeImportedTM.js
@@ -9,10 +9,11 @@ import Col from 'antd/lib/col'
 import 'antd/lib/col/style/css'
 import Row from 'antd/lib/row'
 import 'antd/lib/row/style/css'
+import Switch from 'antd/lib/switch'
+import 'antd/lib/switch/style/css'
 import {IGNORE_CHECK, FUZZY, REJECT} from '../../utils/EnumValueUtils'
 import {CopyLabel} from './TMMergeOptionsCommon'
 import Icon from '../../components/Icon'
-import Toggle from 'react-toggle'
 
 const tooltip = (
   <span id='copy-as-translated-TM'>
@@ -44,7 +45,7 @@ class TMMergeImportedTM extends Component {
       <span>
         <div>
           <span>
-            <Toggle icons={false} defaultChecked
+            <Switch defaultChecked
               onChange={this.toggleChange} />
           </span>
           <span>From </span>
diff --git a/server/zanata-frontend/src/app/containers/ProjectVersion/TMMergeModal.js b/server/zanata-frontend/src/app/containers/ProjectVersion/TMMergeModal.js
index 07c7049295..289c1281e0 100644
--- a/server/zanata-frontend/src/app/containers/ProjectVersion/TMMergeModal.js
+++ b/server/zanata-frontend/src/app/containers/ProjectVersion/TMMergeModal.js
@@ -5,6 +5,8 @@ import * as PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import { differenceWith, isEqual, throttle } from 'lodash'
 import {arrayMove} from 'react-sortable-hoc'
+import Modal from 'antd/lib/modal'
+import 'antd/lib/modal/style/css'
 import Button from 'antd/lib/button'
 import 'antd/lib/button/style/css'
 import Collapse from 'antd/lib/collapse'
@@ -14,7 +16,7 @@ import 'antd/lib/row/style/css'
 import Col from 'antd/lib/col'
 import 'antd/lib/col/style/css'
 import {
-  Icon, Modal, LoaderText, SelectableDropdown, Link} from '../../components'
+  Icon, LoaderText, SelectableDropdown, Link} from '../../components'
 import {ProjectVersionHorizontal} from './project-version-displays'
 import CancellableProgressBar
   from '../../components/ProgressBar/CancellableProgressBar'
@@ -468,15 +470,17 @@ class TMMergeModal extends Component {
       </span>
     )
     return (
-      <Modal id="tmMergeModal" show={showTMMergeModal}
-        onHide={toggleTMMergeModal} keyboard backdrop>
-        <Modal.Header>
-          <Modal.Title>Version TM Merge</Modal.Title>
+      <Modal
+        title='Version TM Merge'
+        visible={showTMMergeModal}
+        onCancel={toggleTMMergeModal}
+        footer={modalFooter}
+        width={'48rem'}>
+        <span>
           <p className="u-textDanger modalText-danger">
             {notification && notification.message}</p>
-        </Modal.Header>
-        <Modal.Body>{modalBody}</Modal.Body>
-        <Modal.Footer>{modalFooter}</Modal.Footer>
+          {modalBody}
+        </span>
       </Modal>
     )
   }
diff --git a/server/zanata-frontend/src/app/containers/ProjectVersion/TMMergeProjectSources.js b/server/zanata-frontend/src/app/containers/ProjectVersion/TMMergeProjectSources.js
index 735fa752c8..ad6ee54160 100644
--- a/server/zanata-frontend/src/app/containers/ProjectVersion/TMMergeProjectSources.js
+++ b/server/zanata-frontend/src/app/containers/ProjectVersion/TMMergeProjectSources.js
@@ -14,6 +14,8 @@ import Col from 'antd/lib/col'
 import 'antd/lib/col/style/css'
 import Tooltip from 'antd/lib/tooltip'
 import 'antd/lib/tooltip/style/css'
+import Switch from 'antd/lib/switch'
+import 'antd/lib/switch/style/css'
 import Input from 'antd/lib/input'
 import 'antd/lib/input/style/css'
 import {
@@ -21,7 +23,6 @@ import {
 } from '../../components'
 import ProjectVersionPanels from './ProjectVersionPanels'
 import TMMergeProjectTMOptions from './TMMergeProjectTMOptions'
-import Toggle from 'react-toggle'
 
 import {
   ProjectType, FromProjectVersionType
@@ -140,7 +141,7 @@ class TMMergeProjectSources extends Component {
       <span>
         <Row>
           <Col span={24}>
-            <Toggle icons={false} defaultChecked
+            <Switch defaultChecked
               onChange={this.toggleChange} />
             <span>From </span>
             <span className="panel-name">Project Source</span>