refactor(ZNTA-2514) fix merge conflicts

server/zanata-frontend/src/app/components/Button/Button.story.js

@@ -1,17 +1,12 @@
 // @ts-nocheck
 import React from 'react'
 import { storiesOf } from '@storybook/react'
-import {Button} from 'antd'
+import Button from 'antd/lib/button'
+import Layout from 'antd/lib/layout'
+
 storiesOf('Button', module)
     .add('default (no test)', () => (
-        <span>
-          <Button className='btn-default'>Default</Button>
-          <br />
-          <hr />
-          <Button className='btn-primary'>Primary</Button>
-          <br />
-          <hr />
-            <a href="https://ant.design/components/button/">
-              Component information</a>
-        </span>
+        <Layout>
+          <Button type='primary'>Primary style</Button>
+        </Layout>
     ))

server/zanata-frontend/src/app/components/DraggableVersionPanels/DraggableVersionPanels.test.js

@@ -4,8 +4,9 @@ import React from 'react'
 import * as ReactDOMServer from 'react-dom/server'
 import DraggableVersionPanels, {Item, DragHandle, tooltipSort} from '.'
 import {ListGroup, ListGroupItem, OverlayTrigger} from 'react-bootstrap'
-import {Icon, LockIcon} from '../../components'
-import {Button} from 'antd'
+import {LockIcon} from '../../components'
+import Button from 'antd/lib/button'
+import Icon from 'antd/lib/icon'
 
 const callback = function (_e) {}
 
@@ -60,22 +61,25 @@ describe('DraggableVersionPanels', () => {
     const expected = ReactDOMServer.renderToStaticMarkup(
       <ListGroup>
         <div>
-          <span className="versionMergeTitle-adjusted VersionMergeTitle">
-          Adjust priority of selected versions
-          </span><br />
-          <span className="u-textMuted versionMergeTitle-sub">(best first)</span>
-          <OverlayTrigger placement='top' overlay={tooltipSort}>
-            <Icon name='info' className='s0'
-              parentClassName='iconInfoVersionMerge' />
-          </OverlayTrigger>
-          <Item
-            // @ts-ignore
-            key={'meikai1:ver1'} index={0}
-            value={someVersions[0]} removeVersion={callback} />
-          <Item
-            // @ts-ignore
-            key={'meikai2:ver2'} index={1}
-            value={someVersions[1]} removeVersion={callback} />
+          <div className='ant-layout'>
+            <span className="versionMergeTitle-adjusted VersionMergeTitle">
+            Adjust priority of selected versions
+            </span><br />
+            <span className="u-textMuted versionMergeTitle-sub">(best first)</span>
+            <OverlayTrigger placement='top' overlay={tooltipSort}>
+              <Button className="btn-xs btn-link iconInfoVersionMerge">
+                <Icon type="info-circle-o" className="s0" />
+              </Button>
+            </OverlayTrigger>
+            <Item
+              // @ts-ignore
+              key={'meikai1:ver1'} index={0}
+              value={someVersions[0]} removeVersion={callback} />
+            <Item
+              // @ts-ignore
+              key={'meikai2:ver2'} index={1}
+              value={someVersions[1]} removeVersion={callback} />
+          </div>
         </div>
       </ListGroup>
     )
@@ -91,7 +95,7 @@ describe('DraggableVersionPanels', () => {
     const expected = ReactDOMServer.renderToStaticMarkup(
       <span className="no-v text-muted">
         Please select versions to sort<br />
-        <Icon name="version" className="s8" />
+        <Icon type="api" className="s8" />
       </span>
     )
     expect(actual).toEqual(expected)

server/zanata-frontend/src/app/components/DraggableVersionPanels/index.tsx

@@ -1,7 +1,7 @@
 import * as PropTypes from "prop-types";
 import React from "react";
 import { Component } from "react";
-import {Icon, LockIcon} from "../../components";
+import {LockIcon} from "../../components";
 import { FromProjectVersion, FromProjectVersionType
 } from "../../utils/prop-types-util";
 import {
@@ -12,20 +12,17 @@ import {
 import {
   ListGroup,
   ListGroupItem,
-  Tooltip,
-  OverlayTrigger
 } from "react-bootstrap";
-import { Button } from "antd";
+import Button from "antd/lib/button";
+import Icon from "antd/lib/icon";
+import Tooltip from "antd/lib/tooltip";
+import "antd/lib/tooltip/style/";
+import Layout from "antd/lib/layout";
 
-export const tooltipSort = (
-  <Tooltip id="tooltipsort">Best match will be chosen based on the priority of
-    selected projects. Exact matches take precendence.
-  </Tooltip>
-)
+export const tooltipSort = <span>Best match</span>;
 
 export const DragHandle = SortableHandle(() =>
-  <Icon name="menu" className="n1" parentClassName="drag-handle"
-    title="click to drag" />);
+  <Icon type="bars" className="n1 drag" title="click to drag" />);
 
 interface ItemProps {
   dispatch: (action: any) => void
@@ -79,17 +76,20 @@ class Items extends Component<ItemsProps, {}> {
         value={value} removeVersion={removeVersion} />))
     return (
       <div>
+        <Layout>
         <span className="versionMergeTitle-adjusted VersionMergeTitle">
         Adjust priority of selected versions
         </span><br />
         <span className="u-textMuted versionMergeTitle-sub">
         (best first)
         </span>
-        <OverlayTrigger placement="top" overlay={tooltipSort}>
-          <Icon name="info" className="s0"
-            parentClassName="iconInfoVersionMerge" />
-        </OverlayTrigger>
+        <Tooltip placement="top" title={tooltipSort} trigger="hover">
+          <Button className="btn-xs btn-link iconInfoVersionMerge">
+            <Icon type="info-circle-o" className="s0" />
+          </Button>
+        </Tooltip>
         {sortableItems}
+        </Layout>
       </div>
     )
   }
@@ -116,7 +116,7 @@ class DraggableVersionPanels extends Component<{
       return (
         <span className="no-v text-muted">
           Please select versions to sort<br />
-          <Icon name="version" className="s8" />
+          <Icon type="api" className="s8" />
         </span>
       )
     }

server/zanata-frontend/src/app/components/LockIcon/LockIcon.test.js

@@ -3,15 +3,15 @@
 import React from 'react'
 import * as ReactDOMServer from 'react-dom/server'
 import LockIcon from '.'
-import {Icon} from '../../components'
+import Icon from 'antd/lib/icon'
 
 describe('LockIcon', () => {
   it('renders a LockIcon when given a READONLY status', () => {
     const actual = ReactDOMServer.renderToStaticMarkup(
       <LockIcon status={'READONLY'} />
     )
     const expected = ReactDOMServer.renderToStaticMarkup(
-      <Icon name='locked' className='s0' parentClassName='icon-locked' />
+      <Icon type='lock' className='s0 icon-locked' />
     )
     expect(actual).toEqual(expected)
   })

server/zanata-frontend/src/app/components/ProgressBar/CancellableProgressBar.js

@@ -1,11 +1,10 @@
 import React from 'react'
 import { Component } from 'react'
 import * as PropTypes from 'prop-types'
-import {
-  Button, ProgressBar
-} from 'react-bootstrap'
+import { ProgressBar } from 'react-bootstrap'
 import { processStatusType } from '../../utils/prop-types-util'
 import { isProcessEnded } from '../../utils/EnumValueUtils'
+import Button from 'antd/lib/button'
 
 /**
  * This component can be used to show progress of a background task running on
@@ -62,7 +61,7 @@ class CancellableProgressBar extends Component {
         <ProgressBar now={processStatus.percentageComplete}
           label={`${heading} ${processStatus.percentageComplete}%`}
         />
-        <Button bsStyle="primary" className="btn-danger"
+        <Button className='btn-danger' type='danger'
           disabled={isProcessEnded(processStatus)}
           onClick={onCancelOperation}>
           {buttonLabel}

server/zanata-frontend/src/app/components/ProgressBar/CancellableProgressBar.test.js

@@ -23,8 +23,8 @@ describe('CancellableProgressBar', () => {
     const expected = ReactDOMServer.renderToStaticMarkup(
       <div className='bstrapReact'>
         <ProgressBar now={0}label={' 0%'} />
-        <button type='button' className='btn-danger btn btn-primary'>
-          Cancel TM Merge
+        <button type='button' className='ant-btn btn-danger ant-btn-danger'>
+          <span>Cancel TM Merge</span>
         </button>
       </div>
     )
@@ -44,8 +44,8 @@ describe('CancellableProgressBar', () => {
     )).toEqual(ReactDOMServer.renderToStaticMarkup(
       <div className='bstrapReact'>
         <ProgressBar now={0}label={' 0%'} />
-        <button disabled type='button' className='btn-danger btn btn-primary'>
-          Cancel TM Merge
+        <button disabled type='button' className='ant-btn btn-danger ant-btn-danger'>
+          <span>Cancel TM Merge</span>
         </button>
       </div>
     ))

server/zanata-frontend/src/app/components/Sidebar/Sidebar.story.js

@@ -13,7 +13,7 @@ const url = 'https://www.google.com'
 const linkname = 'Our awesome webpage'
 
 storiesOf('Sidebar', module)
-    .add('default', () => (
+    .add('default (no test)', () => (
         <div>
           <Sidebar />
           <div className='flexTab'>
@@ -26,31 +26,31 @@ storiesOf('Sidebar', module)
           </div>
       </div>
     ))
-    .add('AboutPage', () => (
+    .add('AboutPage (no test)', () => (
         <div>
           <Sidebar />
           <AboutPage aboutText={aboutText} aboutLink={url} linkName={linkname} />
         </div>
     ))
-    .add('PeoplePage', () => (
+    .add('PeoplePage (no test)', () => (
         <div>
           <Sidebar />
           <PeoplePage />
         </div>
     ))
-    .add('GroupsPage', () => (
+    .add('GroupsPage (no test)', () => (
         <div>
           <Sidebar />
           <GroupsPage />
         </div>
     ))
-    .add('LanguagesPage', () => (
+    .add('LanguagesPage (no test)', () => (
         <div>
           <Sidebar />
           <LanguagesPage />
         </div>
     ))
-    .add('DocumentsPage', () => (
+    .add('DocumentsPage (no test)', () => (
         <div>
           <Sidebar />
           <DocumentsPage />

server/zanata-frontend/src/app/components/Sidebar/index.jsx

@@ -1,8 +1,10 @@
 import React from 'react'
 import { Component } from 'react'
-import { Button, DropdownButton, MenuItem, ProgressBar,
+import { DropdownButton, MenuItem, ProgressBar,
   Nav, NavItem, Well } from 'react-bootstrap'
 import { Icon } from '../../components'
+import Button from 'antd/lib/button'
+
 /**
  * Root component for Sidebar
  */

server/zanata-frontend/src/app/components/Tooltip/Tooltip.story.js

@@ -1,34 +1,22 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
-import { Button, ButtonToolbar, OverlayTrigger,
-  Tooltip, Well } from 'react-bootstrap'
+import { Well } from 'react-bootstrap'
+import { Button, Tooltip, Layout } from 'antd'
 
-const tooltip = (
-    <Tooltip id='tooltip'><strong>Tooltip ahoy!</strong> Check this info.
-    </Tooltip>
-)
+const tooltip = <span id='tooltip'><strong>Tooltip ahoy!</strong></span>;
 
 storiesOf('Tooltip', module)
-    .add('default', () => (
+    .add('default (no test)', () => (
         <span>
+          <Layout>
           <h2><img src="https://i.imgur.com/v4qLk4p.png" width="42px" />Tooltip</h2>
           <Well bsSize="large">Tooltip component for a more stylish alternative to that anchor tag <code>title</code> attribute. Attach and position tooltips with <code>OverlayTrigger</code>.
             <hr />
             <ul><li><a href="https://react-bootstrap.github.io/components.html#tooltips-props">Props for react-bootstrap Tooltips</a></li></ul>
           </Well>
-        <ButtonToolbar>
-          <OverlayTrigger placement='left' overlay={tooltip}>
-            <Button bsStyle='default'>Holy guacamole!</Button>
-          </OverlayTrigger>
-          <OverlayTrigger placement='top' overlay={tooltip}>
-            <Button bsStyle='default'>Holy guacamole!</Button>
-          </OverlayTrigger>
-          <OverlayTrigger placement='bottom' overlay={tooltip}>
-            <Button bsStyle='default'>Holy guacamole!</Button>
-          </OverlayTrigger>
-          <OverlayTrigger placement='right' overlay={tooltip}>
-            <Button bsStyle='default'>Holy guacamole!</Button>
-          </OverlayTrigger>
-        </ButtonToolbar>
+          <Tooltip placement='top' overlay={tooltip}>
+            <Button className='btn-default'>Holy guacamole!</Button>
+          </Tooltip>
+          </Layout>
         </span>
     ))

server/zanata-frontend/src/app/containers/Explore/TeaserListHeader.jsx

@@ -2,7 +2,8 @@
 import React from 'react'
 import * as PropTypes from 'prop-types'
 import { Loader, Icon } from '../../components'
-import { Button, Layout } from 'antd'
+import Button from 'antd/lib/button'
+import Layout from 'antd/lib/layout'
 /**
  * Header with icon and paging for the TeaserList.
  */
@@ -50,8 +51,7 @@ const TeaserListHeader = ({
                 }} />
               <span className='pageCurrent'>{currentPage} of {totalPage}</span>
               <Button icon='right' className='btn-link iconsHeader'
-                aria-label='button'
-                disabled={currentPage === totalPage}
+                disabled={currentPage === totalPage} aria-label='button'
                 onClick={() => {
                   updatePage(type, currentPage, totalPage, false)
                 }} />

server/zanata-frontend/src/app/containers/Explore/index.js

@@ -5,7 +5,7 @@ import * as PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
 import { connect } from 'react-redux'
 import { isEmpty, debounce } from 'lodash'
-import { Button } from 'antd'
+import Button from 'antd/lib/button'
 import TeaserList from './TeaserList'
 import { TextInput, Icon } from '../../components'
 import {
@@ -158,7 +158,7 @@ class Explore extends Component {
             />
             <Button
               className='btn-link' disabled={isEmpty(searchText)}
-              onClick={this.handleClearSearch} aria-label="button">
+              onClick={this.handleClearSearch} aria-label='button'>
               Cancel
             </Button>
           </div>