fix: raw value of read-only date field in data browser cannot be copied (#2326)

Author: mtrezza

src/components/BrowserCell/BrowserCell.react.js

@@ -14,7 +14,6 @@ import Pill                      from 'components/Pill/Pill.react';
 import React, { Component }      from 'react';
 import styles                    from 'components/BrowserCell/BrowserCell.scss';
 import baseStyles                from 'stylesheets/base.scss';
-import Tooltip                   from '../Tooltip/PopperTooltip.react';
 import * as ColumnPreferences    from 'lib/ColumnPreferences';
 
 export default class BrowserCell extends Component {
@@ -388,8 +387,7 @@ export default class BrowserCell extends Component {
   //#endregion
 
   render() {
-    let { type, value, hidden, width, current, onSelect, onEditChange, setCopyableValue, onPointerCmdClick, row, col, field, onEditSelectedRow, readonly, isRequired, markRequiredFieldRow } = this.props;
-    let isNewRow = row < 0;
+    let { type, value, hidden, width, current, onSelect, onEditChange, setCopyableValue, onPointerCmdClick, row, col, field, onEditSelectedRow, isRequired, markRequiredFieldRow } = this.props;
 
     let classes = [...this.state.classes];
 
@@ -400,68 +398,37 @@ export default class BrowserCell extends Component {
       classes.push(styles.required);
     }
 
-    return readonly ? (
-      <Tooltip placement='bottom' tooltip='Read only (CTRL+C to copy)' visible={this.state.showTooltip}>
-        <span
-          ref={this.cellRef}
-          className={classes.join(' ')}
-          style={{ width }}
-          onClick={(e) => {
-            if (e.metaKey === true && type === 'Pointer') {
-              onPointerCmdClick(value);
-            } else {
-              onSelect({ row, col });
-              setCopyableValue(hidden ? undefined : this.copyableValue);
-            }
-          }}
-          onDoubleClick={() => {
-            if (field === 'objectId' && onEditSelectedRow) {
-              onEditSelectedRow(true, value);
-            } else {
-              this.setState({ showTooltip: true });
-              setTimeout(() => {
-                this.setState({ showTooltip: false });
-              }, 2000);
-            }
-          }}
-          onContextMenu={this.onContextMenu}
-        >
-          {row < 0 || isNewRow ? '(auto)' : this.state.content}
-        </span>
-      </Tooltip>
-    ) : (
-      <span
-        ref={this.cellRef}
-        className={classes.join(' ')}
-        style={{ width }}
-        onClick={(e) => {
-          if (e.metaKey === true && type === 'Pointer') {
-            onPointerCmdClick(value);
-          }
-          else {
-            onSelect({ row, col });
-            setCopyableValue(hidden ? undefined : this.copyableValue);
-          }
-        }}
-        onDoubleClick={() => {
-          // Since objectId can't be edited, double click event opens edit row dialog
-          if (field === 'objectId' && onEditSelectedRow) {
-            onEditSelectedRow(true, value);
-          } else if (type !== 'Relation') {
-            onEditChange(true)
+    return <span
+      ref={this.cellRef}
+      className={classes.join(' ')}
+      style={{ width }}
+      onClick={(e) => {
+        if (e.metaKey === true && type === 'Pointer') {
+          onPointerCmdClick(value);
+        }
+        else {
+          onSelect({ row, col });
+          setCopyableValue(hidden ? undefined : this.copyableValue);
+        }
+      }}
+      onDoubleClick={() => {
+        // Since objectId can't be edited, double click event opens edit row dialog
+        if (field === 'objectId' && onEditSelectedRow) {
+          onEditSelectedRow(true, value);
+        } else if (type !== 'Relation') {
+          onEditChange(true)
+        }
+      }}
+      onTouchEnd={e => {
+        if (current && type !== 'Relation') {
+          // The touch event may trigger an unwanted change in the column value
+          if (['ACL', 'Boolean', 'File'].includes(type)) {
+            e.preventDefault();
           }
-        }}
-        onTouchEnd={e => {
-          if (current && type !== 'Relation') {
-            // The touch event may trigger an unwanted change in the column value
-            if (['ACL', 'Boolean', 'File'].includes(type)) {
-              e.preventDefault();
-            }
-          }}}
-        onContextMenu={this.onContextMenu.bind(this)}
-        >
-          {this.state.content}
-        </span>
-    );
+        }}}
+      onContextMenu={this.onContextMenu.bind(this)}
+      >
+        {this.state.content}
+    </span>
   }
 }

src/components/BrowserCell/BrowserCell.scss

@@ -74,3 +74,7 @@
     bottom: 0;
   }
 }
+
+.readonly {
+  color: #04263bd1;
+}

src/components/StringEditor/StringEditor.react.js

@@ -49,7 +49,12 @@ export default class StringEditor extends React.Component {
   }
 
   render() {
+    let classes = [styles.editor];
     let onChange = this.props.readonly ? () => {} : (e) => this.setState({ value: e.target.value });
+    if (this.props.readonly) {
+      classes.push(styles.readonly)
+    }
+
     if (this.props.multiline) {
       var style = { minWidth: this.props.minWidth };
       if (this.props.resizable) {
@@ -66,11 +71,12 @@ export default class StringEditor extends React.Component {
       );
     }
     return (
-      <div style={{ width: this.props.width }} className={styles.editor}>
+      <div style={{ width: this.props.width }} className={classes.join(' ')}>
         <input
           ref={this.inputRef}
           value={this.state.value}
-          onChange={onChange} />
+          onChange={onChange}
+          disabled={this.props.readonly} />
       </div>
     );
   }

src/components/StringEditor/StringEditor.scss

@@ -23,6 +23,15 @@
     font-size: 12px;
   }
 
+  &.readonly {
+    box-shadow: 0px 0px 2px 1px rgb(0 0 0 / 20%);
+  }
+
+  input:disabled {
+    background-color: #f2f2f2;
+    color: #666;
+  }
+
   textarea {
     @include MonospaceFont;
     width: 200px;