From d340c1b566f4c8faaccaa545029ddd2404cdcda6 Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Sat, 15 May 2021 21:21:43 +0530
Subject: [PATCH 01/22] showing tooltip on mouse enter & leave

---
 src/components/BrowserCell/BrowserCell.react.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js
index f640ea058e..2571b589c4 100644
--- a/src/components/BrowserCell/BrowserCell.react.js
+++ b/src/components/BrowserCell/BrowserCell.react.js
@@ -313,6 +313,16 @@ export default class BrowserCell extends Component {
             onSelect({ row, col });
             setCopyableValue(hidden ? undefined : this.copyableValue);
           }}
+          onMouseEnter={() => {
+            if (field === 'objectId') {
+              this.setState({ showTooltip: true });
+            }
+          }}
+          onMouseLeave={() => {
+            if (field === 'objectId') {
+              this.setState({ showTooltip: false });
+            }
+          }}
           onDoubleClick={() => {
             if (field === 'objectId' && onEditSelectedRow) {
               onEditSelectedRow(true, value);

From 22a56bf8a9dbb9a0153790c4be39087d3f9ae52f Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Mon, 31 May 2021 18:26:12 +0530
Subject: [PATCH 02/22] added new arrow svg

---
 src/icons/arrow.svg | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 src/icons/arrow.svg

diff --git a/src/icons/arrow.svg b/src/icons/arrow.svg
new file mode 100644
index 0000000000..b194547968
--- /dev/null
+++ b/src/icons/arrow.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" />
+</svg>
\ No newline at end of file

From ec3950d7b5d5ebcc43ad93e100f6d964a1da7f31 Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Mon, 31 May 2021 18:27:33 +0530
Subject: [PATCH 03/22] showing arrow icon if cell has follow link value

---
 src/components/Pill/Pill.react.js | 22 ++++++++++++++++++++--
 src/components/Pill/Pill.scss     | 27 ++++++++++++++++++++++++---
 2 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/src/components/Pill/Pill.react.js b/src/components/Pill/Pill.react.js
index d186bb4772..1915bdad38 100644
--- a/src/components/Pill/Pill.react.js
+++ b/src/components/Pill/Pill.react.js
@@ -7,9 +7,27 @@
  */
 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, followClick = false }) => (
+  <span
+    className={[
+      styles.pill,
+      !followClick && onClick ? styles.action : void 0
+    ].join(" ")}
+    onClick={!followClick && onClick ? onClick : null}
+  >
+    {value}
+    {followClick && (
+      <a
+        onClick={onClick}
+        className={!onClick ? styles.disableIconAction : styles.iconAction}
+      >
+        <Icon name="arrow" width={20} height={20} fill="#1669a1" />
+      </a>
+    )}
+  </span>
 );
 
 export default Pill;
diff --git a/src/components/Pill/Pill.scss b/src/components/Pill/Pill.scss
index 156a633dc5..74d3435ca6 100644
--- a/src/components/Pill/Pill.scss
+++ b/src/components/Pill/Pill.scss
@@ -9,8 +9,9 @@
 
 .pill {
   @include MonospaceFont;
-  display: inline-block;
-  background: #D5E5F2;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
   color: #0E69A1;
   height: 20px;
   line-height: 20px;
@@ -21,8 +22,28 @@
   text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
+  & a {
+    height: 20px;
+    width: 20px;
+    background: #d6e5f2;
+    border-radius: 50%;
+    & svg  {
+      transform: rotate(316deg);
+    }
+  }
+}
+
+.iconAction {
+  cursor: pointer;
+}
 
+.disableIconAction {
+  cursor: initial;
+}
+
+.action {
+  background: #D5E5F2;
   &:hover {
     background: #BFD4E5;
   }
-}
+}
\ No newline at end of file

From d792e34fb587778b73f799aaaeb370f49c3747c9 Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Mon, 31 May 2021 18:28:55 +0530
Subject: [PATCH 04/22] Pill pointer, relation to follow link if selected

---
 .../BrowserCell/BrowserCell.react.js          | 26 +++++++------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js
index 2571b589c4..e15c0262b4 100644
--- a/src/components/BrowserCell/BrowserCell.react.js
+++ b/src/components/BrowserCell/BrowserCell.react.js
@@ -241,12 +241,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={current ? onPointerClick.bind(undefined, value) : null}
+          followClick={true}
+        />
       ) : (
-          value.id
-        );
+        value.id
+      );
       this.copyableValue = value.id;
     } else if (type === 'Date') {
       if (typeof value === 'object' && value.__type) {
@@ -290,8 +292,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={current ? () => setRelation(value) : null} value='View relation' followClick={true} />
         </div>
       ) : (
           'Relation'
@@ -313,16 +315,6 @@ export default class BrowserCell extends Component {
             onSelect({ row, col });
             setCopyableValue(hidden ? undefined : this.copyableValue);
           }}
-          onMouseEnter={() => {
-            if (field === 'objectId') {
-              this.setState({ showTooltip: true });
-            }
-          }}
-          onMouseLeave={() => {
-            if (field === 'objectId') {
-              this.setState({ showTooltip: false });
-            }
-          }}
           onDoubleClick={() => {
             if (field === 'objectId' && onEditSelectedRow) {
               onEditSelectedRow(true, value);

From e981e5536811cd431ba5c171f9e698d950d8df5a Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Mon, 31 May 2021 18:47:57 +0530
Subject: [PATCH 05/22] added bottom margin for Pill

---
 src/components/Pill/Pill.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Pill/Pill.scss b/src/components/Pill/Pill.scss
index 74d3435ca6..759a19266d 100644
--- a/src/components/Pill/Pill.scss
+++ b/src/components/Pill/Pill.scss
@@ -22,6 +22,7 @@
   text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
+  margin-bottom: 4px;
   & a {
     height: 20px;
     width: 20px;

From 1c405615210c0bc4aed97804b98930e64224b9a7 Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Mon, 31 May 2021 19:38:26 +0530
Subject: [PATCH 06/22] following link even if cell is not selected on icon
 click

---
 src/components/BrowserCell/BrowserCell.react.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js
index e15c0262b4..1451c4b04f 100644
--- a/src/components/BrowserCell/BrowserCell.react.js
+++ b/src/components/BrowserCell/BrowserCell.react.js
@@ -243,7 +243,7 @@ export default class BrowserCell extends Component {
       content = onPointerClick ? (
         <Pill
           value={value.id}
-          onClick={current ? onPointerClick.bind(undefined, value) : null}
+          onClick={onPointerClick.bind(undefined, value)}
           followClick={true}
         />
       ) : (
@@ -293,7 +293,7 @@ export default class BrowserCell extends Component {
     } else if (type === 'Relation') {
       content = setRelation ? (
         <div style={{ textAlign: 'center' }}>
-          <Pill onClick={current ? () => setRelation(value) : null} value='View relation' followClick={true} />
+          <Pill onClick={() => setRelation(value)} value='View relation' followClick={true} />
         </div>
       ) : (
           'Relation'

From f6c68f427abdaffafe715b0bfb98a8a1e05b67f5 Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Mon, 31 May 2021 19:43:16 +0530
Subject: [PATCH 07/22] using existing arrow icon

---
 src/components/Pill/Pill.react.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Pill/Pill.react.js b/src/components/Pill/Pill.react.js
index 1915bdad38..0ee2087e20 100644
--- a/src/components/Pill/Pill.react.js
+++ b/src/components/Pill/Pill.react.js
@@ -24,7 +24,7 @@ let Pill = ({ value, onClick, followClick = false }) => (
         onClick={onClick}
         className={!onClick ? styles.disableIconAction : styles.iconAction}
       >
-        <Icon name="arrow" width={20} height={20} fill="#1669a1" />
+        <Icon name="right-outline" width={20} height={20} fill="#1669a1" />
       </a>
     )}
   </span>

From 5bce427ae12e0dacbc92fb9c7d8e261065eaab9c Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Mon, 31 May 2021 19:43:28 +0530
Subject: [PATCH 08/22] removed arrow.svg file

---
 src/icons/arrow.svg | 3 ---
 1 file changed, 3 deletions(-)
 delete mode 100644 src/icons/arrow.svg

diff --git a/src/icons/arrow.svg b/src/icons/arrow.svg
deleted file mode 100644
index b194547968..0000000000
--- a/src/icons/arrow.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" />
-</svg>
\ No newline at end of file

From 6edfa69018e4f2802dc263cc9f7d3be71230831f Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Mon, 31 May 2021 23:17:15 +0530
Subject: [PATCH 09/22] remove arrow outline

---
 src/icons/right-outline.svg | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/icons/right-outline.svg b/src/icons/right-outline.svg
index 28d82c5965..aad9e17e84 100644
--- a/src/icons/right-outline.svg
+++ b/src/icons/right-outline.svg
@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 100C22.43 100 0 77.57 0 50S22.43 0 50 0s50 22.43 50 50-22.43 50-50 50zm0-91.903C26.894 8.097 8.097 26.894 8.097 50S26.894 91.903 50 91.903 91.903 73.106 91.903 50 73.106 8.097 50 8.097z"/><path d="M50.854 37.92L57.267 44H25v11h32.266l-6.412 7.08 8.016 8.015L78.965 50 58.87 29.905"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <path d="M50.854 37.92L57.267 44H25v11h32.266l-6.412 7.08 8.016 8.015L78.965 50 58.87 29.905"/>
+</svg>
\ No newline at end of file

From 5a60b839030283dafc4e01c7ef7202faf7fac504 Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Tue, 1 Jun 2021 19:37:12 +0530
Subject: [PATCH 10/22] removed Download & delete option from file Editor

---
 src/components/FileEditor/FileEditor.react.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/FileEditor/FileEditor.react.js b/src/components/FileEditor/FileEditor.react.js
index dbd839ceb6..60132d7334 100644
--- a/src/components/FileEditor/FileEditor.react.js
+++ b/src/components/FileEditor/FileEditor.react.js
@@ -73,12 +73,10 @@ export default class FileEditor extends React.Component {
     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}
         <a className={styles.upload}>
           <input ref='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>
     );
   }

From 34c7b93c01b239a81d8923184311229a4306299d Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Tue, 1 Jun 2021 19:37:57 +0530
Subject: [PATCH 11/22] update Pill to download image on icon click

---
 src/components/Pill/Pill.react.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/Pill/Pill.react.js b/src/components/Pill/Pill.react.js
index 0ee2087e20..c7729cdf38 100644
--- a/src/components/Pill/Pill.react.js
+++ b/src/components/Pill/Pill.react.js
@@ -10,7 +10,7 @@ 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, followClick = false }) => (
+let Pill = ({ value, onClick, fileDownloadLink, followClick = false }) => (
   <span
     className={[
       styles.pill,
@@ -22,7 +22,14 @@ let Pill = ({ value, onClick, followClick = false }) => (
     {followClick && (
       <a
         onClick={onClick}
-        className={!onClick ? styles.disableIconAction : styles.iconAction}
+      >
+        <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>

From d8b855cf2c7277e86e21896b245f7410f02ed537 Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Tue, 1 Jun 2021 19:38:18 +0530
Subject: [PATCH 12/22] update Browser cell file value

---
 src/components/BrowserCell/BrowserCell.react.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js
index 1451c4b04f..a69bc77554 100644
--- a/src/components/BrowserCell/BrowserCell.react.js
+++ b/src/components/BrowserCell/BrowserCell.react.js
@@ -263,7 +263,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 = [];

From ad6eba690e356453ddf8a2f9b0f96ac991a8afbb Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Thu, 3 Jun 2021 18:33:56 +0530
Subject: [PATCH 13/22] opening upload dialog on double click

---
 src/components/FileEditor/FileEditor.react.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/FileEditor/FileEditor.react.js b/src/components/FileEditor/FileEditor.react.js
index 60132d7334..457d06778b 100644
--- a/src/components/FileEditor/FileEditor.react.js
+++ b/src/components/FileEditor/FileEditor.react.js
@@ -26,6 +26,8 @@ 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');
+    fileInputElement.click();
   }
 
   componentWillUnmount() {
@@ -72,9 +74,9 @@ 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}>
+      <div ref='input' style={{ minWidth: this.props.width, visibility: 'hidden' }} 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>
       </div>

From 68b4462e6416ec863afed972802abb184a681660 Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Fri, 4 Jun 2021 07:06:34 +0530
Subject: [PATCH 14/22] File Editor on Edit Row dialog

---
 src/components/FileEditor/FileEditor.react.js | 10 +++--
 .../Data/Browser/EditRowDialog.react.js       | 38 ++++++++++++++++---
 2 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/src/components/FileEditor/FileEditor.react.js b/src/components/FileEditor/FileEditor.react.js
index 457d06778b..7e438a995a 100644
--- a/src/components/FileEditor/FileEditor.react.js
+++ b/src/components/FileEditor/FileEditor.react.js
@@ -27,9 +27,11 @@ export default class FileEditor extends React.Component {
     document.body.addEventListener('click', this.checkExternalClick);
     document.body.addEventListener('keypress', this.handleKey);
     let fileInputElement = document.getElementById('fileInput');
-    fileInputElement.click();
+    if (fileInputElement) {
+      fileInputElement.click();
+    }
   }
-
+  
   componentWillUnmount() {
     document.body.removeEventListener('click', this.checkExternalClick);
     document.body.removeEventListener('keypress', this.handleKey);
@@ -74,9 +76,9 @@ export default class FileEditor extends React.Component {
   render() {
     const file = this.props.value;
     return (
-      <div ref='input' style={{ minWidth: this.props.width, visibility: 'hidden' }} className={styles.editor}>
+      <div ref='input' style={{ minWidth: this.props.width, display: 'none' }} className={styles.editor}>
         <a className={styles.upload}>
-          <input ref='fileInput' id="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>
       </div>
diff --git a/src/dashboard/Data/Browser/EditRowDialog.react.js b/src/dashboard/Data/Browser/EditRowDialog.react.js
index e5dbcbd348..964c397656 100644
--- a/src/dashboard/Data/Browser/EditRowDialog.react.js
+++ b/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,7 +24,7 @@ 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);
@@ -31,6 +32,8 @@ export default class EditRowDialog extends React.Component {
     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) {
@@ -216,6 +219,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 } = this.props;
     const { currentObject, openObjectPickers, expandedTextAreas } = this.state;
@@ -327,13 +342,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='Select file'
+                  onClick={() => this.openFileEditor()}
+                />
+                {this.state.showFileEditor && (
+                  <FileEditor
+                    value={file}
+                    onCancel={this.hideFileEditor}
+                    onCommit={newValue => this.handleChange(newValue, name)}
+                  />
+                )}
+              </div>
             </div>
           );
           break;

From 53bffcf1018c48afa7b59fb550958942cdfff509 Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Fri, 4 Jun 2021 10:01:06 +0530
Subject: [PATCH 15/22] pill design update

---
 src/components/Pill/Pill.react.js                 | 11 +++--------
 src/components/Pill/Pill.scss                     | 14 ++++++++++++--
 src/dashboard/Data/Browser/EditRowDialog.react.js |  2 +-
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/Pill/Pill.react.js b/src/components/Pill/Pill.react.js
index c7729cdf38..32b7cb1b43 100644
--- a/src/components/Pill/Pill.react.js
+++ b/src/components/Pill/Pill.react.js
@@ -18,19 +18,14 @@ let Pill = ({ value, onClick, fileDownloadLink, followClick = false }) => (
     ].join(" ")}
     onClick={!followClick && onClick ? onClick : null}
   >
-    {value}
+    <span className={!followClick && fileDownloadLink ? styles.content : ''}>{value}</span>
     {followClick && (
-      <a
-        onClick={onClick}
-      >
+      <a onClick={onClick}>
         <Icon name="right-outline" width={20} height={20} fill="#1669a1" />
       </a>
     )}
     {!followClick && fileDownloadLink && (
-      <a
-        href={fileDownloadLink}
-        target="_blank"
-      >
+      <a href={fileDownloadLink} target="_blank">
         <Icon name="right-outline" width={20} height={20} fill="#1669a1" />
       </a>
     )}
diff --git a/src/components/Pill/Pill.scss b/src/components/Pill/Pill.scss
index 759a19266d..811a8fed95 100644
--- a/src/components/Pill/Pill.scss
+++ b/src/components/Pill/Pill.scss
@@ -10,7 +10,7 @@
 .pill {
   @include MonospaceFont;
   display: flex;
-  justify-content: space-evenly;
+  justify-content: space-between;
   align-items: center;
   color: #0E69A1;
   height: 20px;
@@ -19,9 +19,9 @@
   font-size: 11px;
   padding: 0 8px;
   width: 100%;
-  text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
   margin-bottom: 4px;
   & a {
     height: 20px;
@@ -34,6 +34,15 @@
   }
 }
 
+.content {
+  width: 80%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  text-align: left;
+  height: 100%;
+  white-space: nowrap;
+}
+
 .iconAction {
   cursor: pointer;
 }
@@ -44,6 +53,7 @@
 
 .action {
   background: #D5E5F2;
+  justify-content: center;
   &:hover {
     background: #BFD4E5;
   }
diff --git a/src/dashboard/Data/Browser/EditRowDialog.react.js b/src/dashboard/Data/Browser/EditRowDialog.react.js
index 964c397656..1043987ab1 100644
--- a/src/dashboard/Data/Browser/EditRowDialog.react.js
+++ b/src/dashboard/Data/Browser/EditRowDialog.react.js
@@ -349,7 +349,7 @@ export default class EditRowDialog extends React.Component {
               {file && <Pill value={fileName} fileDownloadLink={file.url()} />}
               <div style={{ cursor: 'pointer' }}>
                 <Pill
-                  value='Select file'
+                  value={file ? 'Change file' : 'Select file'}
                   onClick={() => this.openFileEditor()}
                 />
                 {this.state.showFileEditor && (

From 3b5d190617aef48b6592e22da296a3143f339c86 Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Mon, 7 Jun 2021 11:13:43 +0530
Subject: [PATCH 16/22] removing extra padding from pill

---
 src/components/Pill/Pill.scss | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/components/Pill/Pill.scss b/src/components/Pill/Pill.scss
index 811a8fed95..25528ba0bb 100644
--- a/src/components/Pill/Pill.scss
+++ b/src/components/Pill/Pill.scss
@@ -17,7 +17,6 @@
   line-height: 20px;
   border-radius: 10px;
   font-size: 11px;
-  padding: 0 8px;
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -49,12 +48,4 @@
 
 .disableIconAction {
   cursor: initial;
-}
-
-.action {
-  background: #D5E5F2;
-  justify-content: center;
-  &:hover {
-    background: #BFD4E5;
-  }
 }
\ No newline at end of file

From 6dd4df77d83a4ee7b59e18bc9e38d2d1ba60505d Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Mon, 7 Jun 2021 11:14:18 +0530
Subject: [PATCH 17/22] showing new pointer layout on Edit row dialog

---
 src/dashboard/Data/Browser/EditRowDialog.react.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/dashboard/Data/Browser/EditRowDialog.react.js b/src/dashboard/Data/Browser/EditRowDialog.react.js
index 1043987ab1..4da1227231 100644
--- a/src/dashboard/Data/Browser/EditRowDialog.react.js
+++ b/src/dashboard/Data/Browser/EditRowDialog.react.js
@@ -388,6 +388,7 @@ export default class EditRowDialog extends React.Component {
                 <Pill
                   onClick={() => this.openPointer(targetClass, pointerId)}
                   value={pointerId}
+                  followClick={true}
                 />
               )}
               <Pill

From 4e363e70165797a79a58688c8b0a4c9c4bc3d1c6 Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Tue, 27 Jul 2021 21:02:10 +0530
Subject: [PATCH 18/22] making input fields light blue

---
 src/components/Field/Field.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/Field/Field.scss b/src/components/Field/Field.scss
index 1153c1770c..d161c123e1 100644
--- a/src/components/Field/Field.scss
+++ b/src/components/Field/Field.scss
@@ -42,6 +42,10 @@
   min-height: 80px;
   text-align: right;
   padding: 0;
+  background: #f6fafb;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .input {

From b24aea3bebbc29d7488f28add717f9263d79decc Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Tue, 27 Jul 2021 21:02:29 +0530
Subject: [PATCH 19/22] added margin in new pill design

---
 src/components/Pill/Pill.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Pill/Pill.scss b/src/components/Pill/Pill.scss
index 25528ba0bb..c24ca6240e 100644
--- a/src/components/Pill/Pill.scss
+++ b/src/components/Pill/Pill.scss
@@ -27,6 +27,7 @@
     width: 20px;
     background: #d6e5f2;
     border-radius: 50%;
+    margin-left: 5px;
     & svg  {
       transform: rotate(316deg);
     }

From 7115f418596613fbeaf078197d72128630dd9467 Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Tue, 27 Jul 2021 21:02:58 +0530
Subject: [PATCH 20/22] added undefined placeholder for edit row modal

---
 src/dashboard/Data/Browser/EditRowDialog.react.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/dashboard/Data/Browser/EditRowDialog.react.js b/src/dashboard/Data/Browser/EditRowDialog.react.js
index 4da1227231..6e31031b83 100644
--- a/src/dashboard/Data/Browser/EditRowDialog.react.js
+++ b/src/dashboard/Data/Browser/EditRowDialog.react.js
@@ -262,6 +262,7 @@ export default class EditRowDialog extends React.Component {
             'restricted'
           ].indexOf(name) >= 0);
 
+      let val = currentObject[name];
       switch (type) {
         case 'String':
           inputComponent = (
@@ -272,7 +273,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)}
@@ -284,6 +285,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)}
             />
@@ -301,6 +303,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 =>
@@ -311,7 +314,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}
@@ -427,6 +430,7 @@ export default class EditRowDialog extends React.Component {
                 <Pill
                   onClick={() => this.openRelation(relation)}
                   value={`View ${type}`}
+                  followClick={true}
                 />
                 <Pill
                   onClick={() => this.toggleObjectPicker(name, true)}

From 79eee26f8a2805d8a83be50210f591aa634ef4c8 Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Tue, 27 Jul 2021 21:12:21 +0530
Subject: [PATCH 21/22] center toggle Input

---
 src/components/Field/Field.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Field/Field.scss b/src/components/Field/Field.scss
index d161c123e1..0513b0f45a 100644
--- a/src/components/Field/Field.scss
+++ b/src/components/Field/Field.scss
@@ -49,7 +49,7 @@
 }
 
 .input {
-  margin: 25px 20px 0 0;
+  // margin: 25px 20px 0 0;
 }
 
 .header {
@@ -61,7 +61,7 @@
   }
 
   .input {
-    margin: 13px 20px 0 0;
+    // margin: 13px 20px 0 0;
   }
 
   & ~ .field {

From 16010c7db70c04f249edafd95bf313fe8a195461 Mon Sep 17 00:00:00 2001
From: sadakchap <aliceprerna@gmail.com>
Date: Wed, 28 Jul 2021 10:42:17 +0530
Subject: [PATCH 22/22] removed ccss comment

---
 src/components/Field/Field.scss | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/components/Field/Field.scss b/src/components/Field/Field.scss
index 0513b0f45a..116a490828 100644
--- a/src/components/Field/Field.scss
+++ b/src/components/Field/Field.scss
@@ -48,9 +48,6 @@
   align-items: center;
 }
 
-.input {
-  // margin: 25px 20px 0 0;
-}
 
 .header {
   min-height: 56px;
@@ -60,10 +57,6 @@
     min-height: 56px;
   }
 
-  .input {
-    // margin: 13px 20px 0 0;
-  }
-
   & ~ .field {
     background: #f5f5f7;
   }