Merge pull request #209 from smiclea/refactor

Refactor copying multiline text

src/components/atoms/CopyMultilineValue/index.jsx

@@ -0,0 +1,64 @@
+/*
+Copyright (C) 2018  Cloudbase Solutions SRL
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+// @flow
+
+import React from 'react'
+import { observer } from 'mobx-react'
+import styled from 'styled-components'
+
+import CopyButton from '../CopyButton'
+import DomUtils from '../../../utils/DomUtils'
+import NotificationStore from '../../../stores/NotificationStore'
+
+const Wrapper = styled.div`
+  cursor: pointer;
+
+  &:hover > span {
+    opacity: 1;
+  }
+  > span {
+    background-position-y: 4px;
+    margin-left: 4px;
+  }
+`
+
+type Props = {
+  'data-test-id'?: string,
+  value: string,
+}
+@observer
+class CopyMultineValue extends React.Component<Props> {
+  handleCopy() {
+    let succesful = DomUtils.copyTextToClipboard(this.props.value)
+
+    if (succesful) {
+      NotificationStore.notify('The message has been copied to clipboard.')
+    }
+  }
+
+  render() {
+    return (
+      <Wrapper
+        onClick={() => { this.handleCopy() }}
+        data-test-id={this.props['data-test-id'] || 'copyMultilineValue'}
+      >
+        {this.props.value}
+        <CopyButton />
+      </Wrapper>
+    )
+  }
+}
+
+export default CopyMultineValue

src/components/organisms/EndpointDetailsContent/index.jsx

@@ -22,10 +22,8 @@ import EndpointLogos from '../../atoms/EndpointLogos'
 import PasswordValue from '../../atoms/PasswordValue'
 import Button from '../../atoms/Button'
 import CopyValue from '../../atoms/CopyValue'
+import CopyMultilineValue from '../../atoms/CopyMultilineValue'
 import StatusImage from '../../atoms/StatusImage'
-import CopyButton from '../../atoms/CopyButton'
-import NotificationStore from '../../../stores/NotificationStore'
-import DomUtils from '../../../utils/DomUtils'
 
 import type { Endpoint } from '../../../types/Endpoint'
 import type { MainItem } from '../../../types/MainItem'
@@ -58,17 +56,6 @@ const Label = styled.div`
   margin-bottom: 3px;
 `
 const Value = styled.div``
-const MultilineValue = styled.div`
-  cursor: pointer;
-
-  &:hover > span {
-    opacity: 1;
-  }
-  > span {
-    background-position-y: 4px;
-    margin-left: 4px;
-  }
-`
 const Buttons = styled.div`
   display: flex;
   justify-content: space-between;
@@ -101,14 +88,6 @@ type Props = {
 class EndpointDetailsContent extends React.Component<Props> {
   renderedKeys: { [string]: boolean }
 
-  handleCopy(text: string) {
-    let succesful = DomUtils.copyTextToClipboard(text)
-
-    if (succesful) {
-      NotificationStore.notify('The message has been copied to clipboard.')
-    }
-  }
-
   renderConnectionInfoLoading() {
     if (!this.props.loading) {
       return null
@@ -182,15 +161,6 @@ class EndpointDetailsContent extends React.Component<Props> {
     )
   }
 
-  renderMultilineValue(value: string, dataTestId?: string) {
-    return (
-      <MultilineValue onClick={() => { this.handleCopy(value) }} data-test-id={dataTestId}>
-        {value}
-        <CopyButton />
-      </MultilineValue>
-    )
-  }
-
   renderValue(value: string, dataTestId?: string) {
     return <CopyValue data-test-id={dataTestId} value={value} maxWidth="90%" />
   }
@@ -214,7 +184,7 @@ class EndpointDetailsContent extends React.Component<Props> {
           </Field>
           <Field>
             <Label>Description</Label>
-            {description ? this.renderMultilineValue(description, 'description') : <Value>-</Value>}
+            {description ? <CopyMultilineValue data-test-id="description" value={description} /> : <Value>-</Value>}
           </Field>
           <Field>
             <Label>Created</Label>
@@ -222,7 +192,7 @@ class EndpointDetailsContent extends React.Component<Props> {
           </Field>
           <Field>
             <Label>Used in replicas/migrations ({usage.length})</Label>
-            {usage.length > 0 ? this.renderMultilineValue(usage.map(i => i.instances.join(', ')).join(', ')) : <Value>-</Value>}
+            {usage.length > 0 ? <CopyMultilineValue value={usage.map(i => i.instances.join(', ')).join(', ')} /> : <Value>-</Value>}
           </Field>
           {this.renderConnectionInfoLoading()}
           {this.renderConnectionInfo(this.props.connectionInfo)}

src/components/organisms/MainDetails/index.jsx

@@ -23,7 +23,7 @@ import CopyValue from '../../atoms/CopyValue'
 import StatusIcon from '../../atoms/StatusIcon'
 import StatusImage from '../../atoms/StatusImage'
 import Table from '../../molecules/Table'
-import CopyButton from '../../atoms/CopyButton'
+import CopyMultilineValue from '../../atoms/CopyMultilineValue'
 
 import type { MainItem } from '../../../types/MainItem'
 import type { Endpoint } from '../../../types/Endpoint'
@@ -31,8 +31,6 @@ import StyleProps from '../../styleUtils/StyleProps'
 import Palette from '../../styleUtils/Palette'
 import DateUtils from '../../../utils/DateUtils'
 import LabelDictionary from '../../../utils/LabelDictionary'
-import DomUtils from '../../../utils/DomUtils'
-import NotificationStore from '../../../stores/NotificationStore'
 
 import arrowImage from './images/arrow.svg'
 
@@ -45,7 +43,8 @@ const ColumnsLayout = styled.div`
   display: flex;
 `
 const Column = styled.div`
-  width: ${props => props.width};
+  ${props => StyleProps.exactWidth(props.width)}
+  /* width: ${props => props.width}; */
 `
 const Arrow = styled.div`
   width: 34px;
@@ -108,17 +107,6 @@ const PropertyValue = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
 `
-const MultilineValue = styled.div`
-  cursor: pointer;
-
-  &:hover > span {
-    opacity: 1;
-  }
-  > span {
-    background-position-y: 4px;
-    margin-left: 4px;
-  }
-`
 
 type Props = {
   item: ?MainItem,
@@ -195,14 +183,6 @@ class MainDetails extends React.Component<Props> {
     return networks
   }
 
-  handleCopy(text: string) {
-    let succesful = DomUtils.copyTextToClipboard(text)
-
-    if (succesful) {
-      NotificationStore.notify('The message has been copied to clipboard.')
-    }
-  }
-
   renderLastExecutionTime() {
     let lastExecution = this.getLastExecution()
     if (lastExecution.updated_at || lastExecution.created_at) {
@@ -252,26 +232,6 @@ class MainDetails extends React.Component<Props> {
     return endpointIsMissing
   }
 
-  renderMultilineValue(value: string, dataTestId?: string) {
-    return (
-      <MultilineValue onClick={() => { this.handleCopy(value) }} data-test-id={dataTestId}>
-        {value}
-        <CopyButton />
-      </MultilineValue>
-    )
-  }
-
-  renderDescription() {
-    if (!this.props.item || !this.props.item.destination_environment || !this.props.item.destination_environment.description) {
-      return <Value>-</Value>
-    }
-    return this.renderMultilineValue(this.props.item.destination_environment.description, 'description')
-  }
-
-  renderInstances(instances: string[]) {
-    return this.renderMultilineValue(instances.join(', '))
-  }
-
   renderPropertiesTable(propertyNames: string[]) {
     let getValue = (value: any) => {
       if (value === true) {
@@ -350,7 +310,10 @@ class MainDetails extends React.Component<Props> {
           <Row>
             <Field>
               <Label>Description</Label>
-              {this.renderDescription()}
+              {this.props.item && this.props.item.destination_environment
+              && this.props.item.destination_environment.description
+                ? <CopyMultilineValue value={this.props.item.destination_environment.description} data-test-id="description" />
+                : <Value>-</Value>}
             </Field>
           </Row>
           <Row>
@@ -391,7 +354,7 @@ class MainDetails extends React.Component<Props> {
             <Row>
               <Field>
                 <Label>Instances</Label>
-                {this.renderInstances(this.props.item.instances)}
+                <CopyMultilineValue value={this.props.item.instances.join(', ')} />
               </Field>
             </Row>
           ) : null}