fix: context menu in data browser not opening for cell of type number (#1913)

Author: 404-html

src/components/BrowserCell/BrowserCell.react.js

@@ -285,10 +285,17 @@ export default class BrowserCell extends Component {
       return {
         text: 'Set filter...', items: constraints.map(constraint => {
           const definition = Filters.Constraints[constraint];
+          const copyableValue = String(this.copyableValue);
           // Smart ellipsis for value - if it's long trim it in the middle: Lorem ipsum dolor si... aliqua
-          const value = this.copyableValue.length < 30 ? this.copyableValue :
-            `${this.copyableValue.substr(0, 20)}...${this.copyableValue.substr(this.copyableValue.length - 7)}`;
-          const text = `${this.props.field} ${definition.name}${definition.comparable ? (' ' + value) : ''}`;
+          const value =
+            copyableValue.length < 30
+              ? copyableValue
+              : `${copyableValue.substr(0, 20)}...${copyableValue.substr(
+                  copyableValue.length - 7
+                )}`;
+          const text = `${this.props.field} ${definition.name}${
+            definition.comparable ? ' ' + value : ''
+          }`;
           return {
             text,
             callback: this.pickFilter.bind(this, constraint)

src/components/ContextMenu/ContextMenu.react.js

@@ -51,16 +51,32 @@ const MenuSection = ({ level, items, path, setPath, hide }) => {
   return (<ul ref={sectionRef} className={styles.category} style={style}>
     {items.map((item, index) => {
       if (item.items) {
-        return (<li className={styles.item} onMouseEnter={() => {
-          const newPath = path.slice(0, level + 1);
-          newPath.push(index);
-          setPath(newPath);
-        }}>{item.text}</li>);
+        return (
+            <li
+              key={`menu-section-${level}-${index}`}
+              className={styles.item}
+              onMouseEnter={() => {
+                const newPath = path.slice(0, level + 1);
+                newPath.push(index);
+                setPath(newPath);
+              }}
+            >
+              {item.text}
+            </li>
+          );
       }
-      return (<li className={styles.option} onClick={() => {
-        item.callback && item.callback();
-        hide();
-      }}>{item.text}</li>);
+      return (
+          <li
+            key={`menu-section-${level}-${index}`}
+            className={styles.option}
+            onClick={() => {
+              item.callback && item.callback();
+              hide();
+            }}
+          >
+            {item.text}
+          </li>
+        );
     })}
   </ul>);
 }