Improve cell value copying of pointer cell (#1708)

* showing tooltip on mouse enter & leave

* added new arrow svg

* showing arrow icon if cell has follow link value

* Pill pointer, relation to follow link if selected

* added bottom margin for Pill

* following link even if cell is not selected on icon click

* using existing arrow icon

* removed arrow.svg file

* remove arrow outline

* removed Download & delete option from file Editor

* update Pill to download image on icon click

* update Browser cell file value

* opening upload dialog on double click

* File Editor on Edit Row dialog

* pill design update

* removing extra padding from pill

* showing new pointer layout on Edit row dialog

* making input fields light blue

* added margin in new pill design

* added undefined placeholder for edit row modal

* center toggle Input

* removed ccss comment

Author: sadakchap

src/components/BrowserCell/BrowserCell.react.js

@@ -243,12 +243,14 @@ export default class BrowserCell extends Component {
         value = object;
       }
       content = onPointerClick ? (
-        <a href='javascript:;' onClick={onPointerClick.bind(undefined, value)}>
-          <Pill value={value.id} />
-        </a>
+        <Pill
+          value={value.id}
+          onClick={onPointerClick.bind(undefined, value)}
+          followClick={true}
+        />
       ) : (
-          value.id
-        );
+        value.id
+      );
       this.copyableValue = value.id;
     }
     else if (type === 'Array') {
@@ -289,7 +291,7 @@ export default class BrowserCell extends Component {
       this.copyableValue = content = JSON.stringify(value);
     } else if (type === 'File') {
       const fileName = value.url() ? getFileName(value) : 'Uploading\u2026';
-      content = <Pill value={fileName} />;
+      content = <Pill value={fileName} fileDownloadLink={value.url()} />;
       this.copyableValue = fileName;
     } else if (type === 'ACL') {
       let pieces = [];
@@ -318,8 +320,8 @@ export default class BrowserCell extends Component {
       this.copyableValue = content = value.coordinates.map(coord => `(${coord})`)
     } else if (type === 'Relation') {
       content = setRelation ? (
-        <div style={{ textAlign: 'center', cursor: 'pointer' }}>
-          <Pill onClick={() => setRelation(value)} value='View relation' />
+        <div style={{ textAlign: 'center' }}>
+          <Pill onClick={() => setRelation(value)} value='View relation' followClick={true} />
         </div>
       ) : (
           'Relation'

src/components/Field/Field.scss

@@ -42,11 +42,12 @@
   min-height: 80px;
   text-align: right;
   padding: 0;
+  background: #f6fafb;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.input {
-  margin: 25px 20px 0 0;
-}
 
 .header {
   min-height: 56px;
@@ -56,10 +57,6 @@
     min-height: 56px;
   }
 
-  .input {
-    margin: 13px 20px 0 0;
-  }
-
   & ~ .field {
     background: #f5f5f7;
   }

src/components/FileEditor/FileEditor.react.js

@@ -26,8 +26,12 @@ export default class FileEditor extends React.Component {
   componentDidMount() {
     document.body.addEventListener('click', this.checkExternalClick);
     document.body.addEventListener('keypress', this.handleKey);
+    let fileInputElement = document.getElementById('fileInput');
+    if (fileInputElement) {
+      fileInputElement.click();
+    }
   }
-
+  
   componentWillUnmount() {
     document.body.removeEventListener('click', this.checkExternalClick);
     document.body.removeEventListener('keypress', this.handleKey);
@@ -72,13 +76,11 @@ export default class FileEditor extends React.Component {
   render() {
     const file = this.props.value;
     return (
-      <div ref='input' style={{ minWidth: this.props.width }} className={styles.editor}>
-        {file && file.url() ? <a href={file.url()} target='_blank' role='button' className={styles.download}>Download</a> : null}
+      <div ref='input' style={{ minWidth: this.props.width, display: 'none' }} className={styles.editor}>
         <a className={styles.upload}>
-          <input ref='fileInput' type='file' onChange={this.handleChange.bind(this)} />
+          <input ref='fileInput' id='fileInput' type='file' onChange={this.handleChange.bind(this)} />
           <span>{file ? 'Replace file' : 'Upload file'}</span>
         </a>
-        {file ? <a href='javascript:;' role='button' className={styles.delete} onClick={this.removeFile}>Delete</a> : null}
       </div>
     );
   }

src/components/Pill/Pill.react.js

@@ -7,9 +7,29 @@
  */
 import React  from 'react';
 import styles from 'components/Pill/Pill.scss';
+import Icon from "components/Icon/Icon.react";
+
 //TODO: refactor, may want to move onClick outside or need to make onClick able to handle link/button a11y
-let Pill = ({ value, onClick }) => (
-  <span className={[styles.pill, onClick ? styles.action : void(0)].join(' ')} onClick={onClick}>{value}</span>
+let Pill = ({ value, onClick, fileDownloadLink, followClick = false }) => (
+  <span
+    className={[
+      styles.pill,
+      !followClick && onClick ? styles.action : void 0
+    ].join(" ")}
+    onClick={!followClick && onClick ? onClick : null}
+  >
+    <span className={!followClick && fileDownloadLink ? styles.content : ''}>{value}</span>
+    {followClick && (
+      <a onClick={onClick}>
+        <Icon name="right-outline" width={20} height={20} fill="#1669a1" />
+      </a>
+    )}
+    {!followClick && fileDownloadLink && (
+      <a href={fileDownloadLink} target="_blank">
+        <Icon name="right-outline" width={20} height={20} fill="#1669a1" />
+      </a>
+    )}
+  </span>
 );
 
 export default Pill;

src/components/Pill/Pill.scss

@@ -9,20 +9,44 @@
 
 .pill {
   @include MonospaceFont;
-  display: inline-block;
-  background: #D5E5F2;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   color: #0E69A1;
   height: 20px;
   line-height: 20px;
   border-radius: 10px;
   font-size: 11px;
-  padding: 0 8px;
   width: 100%;
-  text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
-
-  &:hover {
-    background: #BFD4E5;
+  white-space: nowrap;
+  margin-bottom: 4px;
+  & a {
+    height: 20px;
+    width: 20px;
+    background: #d6e5f2;
+    border-radius: 50%;
+    margin-left: 5px;
+    & svg  {
+      transform: rotate(316deg);
+    }
   }
 }
+
+.content {
+  width: 80%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  text-align: left;
+  height: 100%;
+  white-space: nowrap;
+}
+
+.iconAction {
+  cursor: pointer;
+}
+
+.disableIconAction {
+  cursor: initial;
+}

src/dashboard/Data/Browser/EditRowDialog.react.js

@@ -14,6 +14,7 @@ import GeoPointEditor from 'components/GeoPointEditor/GeoPointEditor.react';
 import FileEditor from 'components/FileEditor/FileEditor.react';
 import ObjectPickerDialog from 'dashboard/Data/Browser/ObjectPickerDialog.react';
 import styles from 'dashboard/Data/Browser/Browser.scss';
+import getFileName from 'lib/getFileName';
 
 export default class EditRowDialog extends React.Component {
   constructor(props) {
@@ -23,14 +24,16 @@ export default class EditRowDialog extends React.Component {
     const { currentObject, openObjectPickers, expandedTextAreas } = this.initializeState(
       selectedObject
     );
-    this.state = { currentObject, openObjectPickers, expandedTextAreas };
+    this.state = { currentObject, openObjectPickers, expandedTextAreas, showFileEditor: false };
 
     this.updateCurrentObject = this.updateCurrentObject.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.openAcl = this.openAcl.bind(this);
     this.openPointer = this.openPointer.bind(this);
     this.toggleObjectPicker = this.toggleObjectPicker.bind(this);
     this.openRelation = this.openRelation.bind(this);
+    this.openFileEditor = this.openFileEditor.bind(this);
+    this.hideFileEditor = this.hideFileEditor.bind(this);
   }
 
   componentWillReceiveProps(props) {
@@ -217,6 +220,18 @@ export default class EditRowDialog extends React.Component {
     this.setState({ expandedTextAreas });
   }
 
+  openFileEditor() {
+    this.setState({
+      showFileEditor: true
+    });
+  }
+
+  hideFileEditor() {
+    this.setState({
+      showFileEditor: false
+    });
+  }
+
   render() {
     const { selectedObject, className, columns, onClose, schema, useMasterKey } = this.props;
     const { currentObject, openObjectPickers, expandedTextAreas } = this.state;
@@ -248,6 +263,7 @@ export default class EditRowDialog extends React.Component {
             'restricted'
           ].indexOf(name) >= 0);
 
+      let val = currentObject[name];
       switch (type) {
         case 'String':
           inputComponent = (
@@ -258,7 +274,7 @@ export default class EditRowDialog extends React.Component {
                   : false
               }
               disabled={isDisabled}
-              placeholder={name === 'password' ? '(hidden)' : ''}
+              placeholder={name === 'password' ? '(hidden)' : val === undefined ? '(undefined)' : ''}
               value={currentObject[name]}
               onChange={newValue => this.updateCurrentObject(newValue, name)}
               onBlur={newValue => this.handleChange(newValue, name)}
@@ -270,6 +286,7 @@ export default class EditRowDialog extends React.Component {
             <TextInput
               disabled={isDisabled}
               value={currentObject[name]}
+              placeholder={val === undefined ? '(undefined)' : ''}
               onChange={newValue => this.updateCurrentObject(newValue, name)}
               onBlur={newValue => this.handleChange(parseFloat(newValue), name)}
             />
@@ -287,6 +304,7 @@ export default class EditRowDialog extends React.Component {
                 expandedTextAreas[name].rows
               }
               disabled={isDisabled}
+              placeholder={val === undefined && '(undefined)'}
               value={currentObject[name]}
               onChange={newValue => this.updateCurrentObject(newValue, name)}
               onBlur={newValue =>
@@ -297,7 +315,7 @@ export default class EditRowDialog extends React.Component {
           break;
         case 'Boolean':
           inputComponent = isDisabled ? (
-            <TextInput disabled={true} value={selectedObject[name]} />
+            <TextInput disabled={true} placeholder={val === undefined && '(undefined)'} value={selectedObject[name]} />
           ) : (
             <Toggle
               type={Toggle.Types.TRUE_FALSE}
@@ -328,13 +346,24 @@ export default class EditRowDialog extends React.Component {
           );
           break;
         case 'File':
+          let file = selectedObject[name];
+          let fileName = file && file.url() ? getFileName(file) : '';
           inputComponent = (
             <div style={{ padding: '25px' }}>
-              <FileEditor
-                value={selectedObject[name]}
-                style={{ position: 'inherit' }}
-                onCommit={newValue => this.handleChange(newValue, name)}
-              />
+              {file && <Pill value={fileName} fileDownloadLink={file.url()} />}
+              <div style={{ cursor: 'pointer' }}>
+                <Pill
+                  value={file ? 'Change file' : 'Select file'}
+                  onClick={() => this.openFileEditor()}
+                />
+                {this.state.showFileEditor && (
+                  <FileEditor
+                    value={file}
+                    onCancel={this.hideFileEditor}
+                    onCommit={newValue => this.handleChange(newValue, name)}
+                  />
+                )}
+              </div>
             </div>
           );
           break;
@@ -364,6 +393,7 @@ export default class EditRowDialog extends React.Component {
                 <Pill
                   onClick={() => this.openPointer(targetClass, pointerId)}
                   value={pointerId}
+                  followClick={true}
                 />
               )}
               <Pill
@@ -403,6 +433,7 @@ export default class EditRowDialog extends React.Component {
                 <Pill
                   onClick={() => this.openRelation(relation)}
                   value={`View ${type}`}
+                  followClick={true}
                 />
                 <Pill
                   onClick={() => this.toggleObjectPicker(name, true)}