Open pointer in new browser tab with [Cmd] click (#1757)

* cmd+click and context menu

* removed console.log

* fixed pill icon click

* Pill click cleanup

* Delete index.html

* Reverting config.json

Co-authored-by: Faisal Nadeem <mfaisalnadeem@hotmail.com>
Co-authored-by: Manuel <5673677+mtrezza@users.noreply.github.com>

Author: 3 people

src/components/BrowserCell/BrowserCell.react.js

@@ -117,6 +117,16 @@ export default class BrowserCell extends Component {
       }
     });
 
+    if ( this.props.type === 'Pointer' ) {
+      onEditSelectedRow && contextMenuOptions.push({
+        text: 'Open pointer in new tab',
+        callback: () => {
+          let { value, onPointerCmdClick } = this.props;
+          onPointerCmdClick(value);
+        }
+      });
+    }
+
     return contextMenuOptions;
   }
 
@@ -214,7 +224,7 @@ export default class BrowserCell extends Component {
   //#endregion
 
   render() {
-    let { type, value, hidden, width, current, onSelect, onEditChange, setCopyableValue, setRelation, onPointerClick, row, col, field, onEditSelectedRow, readonly, isRequired, markRequiredFieldRow } = this.props;
+    let { type, value, hidden, width, current, onSelect, onEditChange, setCopyableValue, setRelation, onPointerClick, onPointerCmdClick, row, col, field, onEditSelectedRow, readonly, isRequired, markRequiredFieldRow } = this.props;
     let content = value;
     let isNewRow = row < 0;
     this.copyableValue = content;
@@ -343,9 +353,13 @@ export default class BrowserCell extends Component {
           ref={this.cellRef}
           className={classes.join(' ')}
           style={{ width }}
-          onClick={() => {
-            onSelect({ row, col });
-            setCopyableValue(hidden ? undefined : this.copyableValue);
+          onClick={(e) => {
+            if ( e.metaKey === true && type === 'Pointer') {
+              onPointerCmdClick(value);
+            } else {
+              onSelect({ row, col });
+              setCopyableValue(hidden ? undefined : this.copyableValue);
+            }
           }}
           onDoubleClick={() => {
             if (field === 'objectId' && onEditSelectedRow) {
@@ -366,9 +380,14 @@ export default class BrowserCell extends Component {
         ref={this.cellRef}
         className={classes.join(' ')}
         style={{ width }}
-        onClick={() => {
-          onSelect({ row, col });
-          setCopyableValue(hidden ? undefined : this.copyableValue);
+        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

src/components/BrowserRow/BrowserRow.react.js

@@ -19,7 +19,7 @@ export default class BrowserRow extends Component {
   }
 
   render() {
-    const { className, columns, currentCol, isUnique, obj, onPointerClick, order, readOnlyFields, row, rowWidth, selection, selectRow, setCopyableValue, setCurrent, setEditing, setRelation, onEditSelectedRow, setContextMenu, onFilterChange, markRequiredFieldRow } = this.props;
+    const { className, columns, currentCol, isUnique, obj, onPointerClick, onPointerCmdClick, order, readOnlyFields, row, rowWidth, selection, selectRow, setCopyableValue, setCurrent, setEditing, setRelation, onEditSelectedRow, setContextMenu, onFilterChange, markRequiredFieldRow } = this.props;
     let attributes = obj.attributes;
     let requiredCols = [];
     Object.entries(columns).reduce((acc, cur) => {
@@ -89,6 +89,7 @@ export default class BrowserRow extends Component {
               onSelect={setCurrent}
               onEditChange={setEditing}
               onPointerClick={onPointerClick}
+              onPointerCmdClick={onPointerCmdClick}
               onFilterChange={onFilterChange}
               setRelation={setRelation}
               objectId={obj.id}
@@ -104,4 +105,4 @@ export default class BrowserRow extends Component {
       </div>
     );
   }
-}
+}

src/components/Pill/Pill.react.js

@@ -20,7 +20,7 @@ let Pill = ({ value, onClick, fileDownloadLink, followClick = false }) => (
   >
     <span className={!followClick && fileDownloadLink ? styles.content : ''}>{value}</span>
     {followClick && (
-      <a onClick={onClick}>
+      <a onClick={e => !e.metaKey && onClick()}>
         <Icon name="right-outline" width={20} height={20} fill="#1669a1" />
       </a>
     )}

src/components/Toolbar/Toolbar.react.js

@@ -15,7 +15,7 @@ const goBack = () => history.goBack();
 
 let Toolbar = (props) => {
   let backButton;
-  if (props.relation || (props.filters && props.filters.size)) {
+  if ((props.relation || (props.filters && props.filters.size)) &&  history.action !== 'POP') {
     backButton = (
       <a
         className={styles.iconButton}

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

@@ -122,6 +122,7 @@ class Browser extends DashboardView {
     this.updateRow = this.updateRow.bind(this);
     this.updateOrdering = this.updateOrdering.bind(this);
     this.handlePointerClick = this.handlePointerClick.bind(this);
+    this.handlePointerCmdClick = this.handlePointerCmdClick.bind(this);
     this.handleCLPChange = this.handleCLPChange.bind(this);
     this.setRelation = this.setRelation.bind(this);
     this.showAddColumn = this.showAddColumn.bind(this);
@@ -835,6 +836,15 @@ class Browser extends DashboardView {
     history.push(this.context.generatePath(`browser/${className}?filters=${encodeURIComponent(filters)}`));
   }
 
+  handlePointerCmdClick({ className, id, field = 'objectId' }) {
+    let filters = JSON.stringify([{
+      field,
+      constraint: 'eq',
+      compareTo: id
+    }]);
+    window.open(this.context.generatePath(`browser/${className}?filters=${encodeURIComponent(filters)}`),'_blank');
+  }
+
   handleCLPChange(clp) {
     let p = this.props.schema.dispatch(ActionTypes.SET_CLP, {
       className: this.props.params.className,
@@ -1530,6 +1540,7 @@ class Browser extends DashboardView {
             updateRow={this.updateRow}
             updateOrdering={this.updateOrdering}
             onPointerClick={this.handlePointerClick}
+            onPointerCmdClick={this.handlePointerCmdClick}
             setRelation={this.setRelation}
             onAddColumn={this.showAddColumn}
             onAddRow={this.addRow}

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

@@ -139,6 +139,7 @@ export default class BrowserTable extends React.Component {
                     isUnique={this.props.isUnique}
                     obj={cloneRow}
                     onPointerClick={this.props.onPointerClick}
+                    onPointerCmdClick={this.props.onPointerCmdClick}
                     onFilterChange={this.props.onFilterChange}
                     order={this.props.order}
                     readOnlyFields={READ_ONLY}
@@ -189,6 +190,7 @@ export default class BrowserTable extends React.Component {
               isUnique={this.props.isUnique}
               obj={this.props.newObject}
               onPointerClick={this.props.onPointerClick}
+              onPointerCmdClick={this.props.onPointerCmdClick}
               onFilterChange={this.props.onFilterChange}
               order={this.props.order}
               readOnlyFields={READ_ONLY}
@@ -246,6 +248,7 @@ export default class BrowserTable extends React.Component {
           isUnique={this.props.isUnique}
           obj={obj}
           onPointerClick={this.props.onPointerClick}
+          onPointerCmdClick={this.props.onPointerCmdClick}
           onFilterChange={this.props.onFilterChange}
           order={this.props.order}
           readOnlyFields={READ_ONLY}
@@ -319,7 +322,7 @@ export default class BrowserTable extends React.Component {
           if (this.props.current.row >= -1 && this.props.editCloneRows) {
             //for data rows & new row when there are edit clone rows
             wrapTop += (2 * ROW_HEIGHT) * (this.props.editCloneRows.length);
-          }  
+          }
           let wrapLeft = 30;
           for (let i = 0; i < this.props.current.col; i++) {
             const column = this.props.order[i];