New: Release Profiles, Frontend updates (#580)

* New: Release Profiles - UI Updates

* New: Release Profiles - API Changes

* New: Release Profiles - Test Updates

* New: Release Profiles - Backend Updates

* New: Interactive Artist Search

* New: Change Montiored on Album Details Page

* New: Show Duration on Album Details Page

* Fixed: Manual Import not working if no albums are Missing

* Fixed: Sort search input by sortTitle

* Fixed: Queue columnLabel throwing JS error

frontend/src/Components/Tooltip/Popover.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import TetherComponent from 'react-tether';
 import classNames from 'classnames';
+import isMobileUtil from 'Utilities/isMobile';
 import { tooltipPositions } from 'Helpers/Props';
 import styles from './Popover.css';
 
@@ -67,7 +68,9 @@ class Popover extends Component {
   // Listeners
 
   onClick = () => {
-    this.setState({ isOpen: !this.state.isOpen });
+    if (isMobileUtil()) {
+      this.setState({ isOpen: !this.state.isOpen });
+    }
   }
 
   onMouseEnter = () => {
@@ -105,7 +108,7 @@ class Popover extends Component {
       >
         <span
           className={className}
-          // onClick={this.onClick}
+          onClick={this.onClick}
           onMouseEnter={this.onMouseEnter}
           onMouseLeave={this.onMouseLeave}
         >
@@ -114,28 +117,28 @@ class Popover extends Component {
 
         {
           this.state.isOpen &&
-          <div
-            className={styles.popoverContainer}
-            onMouseEnter={this.onMouseEnter}
-            onMouseLeave={this.onMouseLeave}
-          >
-            <div className={styles.popover}>
-              <div
-                className={classNames(
-                  styles.arrow,
-                  styles[position]
-                )}
-              />
+            <div
+              className={styles.popoverContainer}
+              onMouseEnter={this.onMouseEnter}
+              onMouseLeave={this.onMouseLeave}
+            >
+              <div className={styles.popover}>
+                <div
+                  className={classNames(
+                    styles.arrow,
+                    styles[position]
+                  )}
+                />
 
-              <div className={styles.title}>
-                {title}
-              </div>
+                <div className={styles.title}>
+                  {title}
+                </div>
 
-              <div className={styles.body}>
-                {body}
+                <div className={styles.body}>
+                  {body}
+                </div>
               </div>
             </div>
-          </div>
         }
       </TetherComponent>
     );