UI Updates (Cancel Import, Move Artist, Manual Import from Artist)

Ability to cancel an import lookup/search at any point.
Ability to move artist path from Artist Edit or bulk move from Mass Editor.
Trigger manual import for Artist path from Artist Detail page.
Pulled from Sonarr

frontend/src/Components/Form/EnhancedSelectInput.css

@@ -31,12 +31,19 @@
 .isDisabled {
   opacity: 0.7;
   cursor: not-allowed;
+  pointer-events: all !important;
 }
 
 .dropdownArrowContainer {
   margin-left: 12px;
 }
 
+.dropdownArrowContainerDisabled {
+  composes: dropdownArrowContainer;
+
+  color: $disabledInputColor;
+}
+
 .optionsContainer {
   width: auto;
 }

frontend/src/Components/Form/EnhancedSelectInput.js

@@ -289,6 +289,7 @@ class EnhancedSelectInput extends Component {
                 hasWarning && styles.hasWarning,
                 isDisabled && disabledClassName
               )}
+              isDisabled={isDisabled}
               onBlur={this.onBlur}
               onKeyDown={this.onKeyDown}
               onPress={this.onPress}
@@ -296,11 +297,17 @@ class EnhancedSelectInput extends Component {
               <SelectedValueComponent
                 {...selectedValueOptions}
                 {...selectedOption}
+                isDisabled={isDisabled}
               >
                 {selectedOption ? selectedOption.value : null}
               </SelectedValueComponent>
 
-              <div className={styles.dropdownArrowContainer}>
+              <div
+                className={isDisabled ?
+                  styles.dropdownArrowContainerDisabled :
+                  styles.dropdownArrowContainer
+                }
+              >
                 <Icon
                   name={icons.CARET_DOWN}
                 />

frontend/src/Components/Form/EnhancedSelectInputSelectedValue.css

@@ -1,3 +1,7 @@
 .selectedValue {
   flex: 1 1 auto;
 }
+
+.isDisabled {
+  color: $disabledInputColor;
+}

frontend/src/Components/Form/EnhancedSelectInputSelectedValue.js

@@ -1,15 +1,21 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
 import styles from './EnhancedSelectInputSelectedValue.css';
 
 function EnhancedSelectInputSelectedValue(props) {
   const {
     className,
-    children
+    children,
+    isDisabled
   } = props;
 
   return (
-    <div className={className}>
+    <div className={classNames(
+      className,
+      isDisabled && styles.isDisabled
+    )}
+    >
       {children}
     </div>
   );
@@ -17,11 +23,13 @@ function EnhancedSelectInputSelectedValue(props) {
 
 EnhancedSelectInputSelectedValue.propTypes = {
   className: PropTypes.string.isRequired,
-  children: PropTypes.node
+  children: PropTypes.node,
+  isDisabled: PropTypes.bool.isRequired
 };
 
 EnhancedSelectInputSelectedValue.defaultProps = {
-  className: styles.selectedValue
+  className: styles.selectedValue,
+  isDisabled: false
 };
 
 export default EnhancedSelectInputSelectedValue;

frontend/src/Components/Modal/Modal.js

@@ -109,8 +109,17 @@ class Modal extends Component {
   }
 
   onBackdropEndPress = (event) => {
-    if (this._isBackdropPressed && this._isBackdropTarget(event)) {
-      this.props.onModalClose();
+    const {
+      closeOnBackgroundClick,
+      onModalClose
+    } = this.props;
+
+    if (
+      this._isBackdropPressed &&
+      this._isBackdropTarget(event) &&
+      closeOnBackgroundClick
+    ) {
+      onModalClose();
     }
 
     this._isBackdropPressed = false;
@@ -187,13 +196,15 @@ Modal.propTypes = {
   size: PropTypes.oneOf(sizes.all),
   children: PropTypes.node,
   isOpen: PropTypes.bool.isRequired,
+  closeOnBackgroundClick: PropTypes.bool.isRequired,
   onModalClose: PropTypes.func.isRequired
 };
 
 Modal.defaultProps = {
   className: styles.modal,
   backdropClassName: styles.modalBackdrop,
-  size: sizes.LARGE
+  size: sizes.LARGE,
+  closeOnBackgroundClick: true
 };
 
 export default Modal;

frontend/src/Components/Modal/ModalContent.js

@@ -9,6 +9,7 @@ function ModalContent(props) {
   const {
     className,
     children,
+    showCloseButton,
     onModalClose,
     ...otherProps
   } = props;
@@ -18,15 +19,18 @@ function ModalContent(props) {
       className={className}
       {...otherProps}
     >
-      <Link
-        className={styles.closeButton}
-        onPress={onModalClose}
-      >
-        <Icon
-          name={icons.CLOSE}
-          size={18}
-        />
-      </Link>
+      {
+        showCloseButton &&
+          <Link
+            className={styles.closeButton}
+            onPress={onModalClose}
+          >
+            <Icon
+              name={icons.CLOSE}
+              size={18}
+            />
+          </Link>
+      }
 
       {children}
     </div>
@@ -36,11 +40,13 @@ function ModalContent(props) {
 ModalContent.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node,
+  showCloseButton: PropTypes.bool.isRequired,
   onModalClose: PropTypes.func.isRequired
 };
 
 ModalContent.defaultProps = {
-  className: styles.modalContent
+  className: styles.modalContent,
+  showCloseButton: true
 };
 
 export default ModalContent;

frontend/src/Components/Page/Sidebar/PageSidebar.js

@@ -482,7 +482,7 @@ class PageSidebar extends Component {
                               key={child.to}
                               title={child.title}
                               to={child.to}
-                              isActive={pathname === child.to}
+                              isActive={pathname.startsWith(child.to)}
                               isParentItem={false}
                               isChildItem={true}
                               statusComponent={child.statusComponent}

frontend/src/Components/Table/VirtualTable.js

@@ -44,7 +44,6 @@ class VirtualTable extends Component {
     };
 
     this._isInitialized = false;
-    this._table = null;
   }
 
   componentDidMount() {
@@ -58,18 +57,9 @@ class VirtualTable extends Component {
     return this.props.items[index];
   }
 
-  setTableRef = (ref) => {
-    this._table = ref;
-  }
-
-  forceUpdateGrid = () => {
-    this._table.recomputeGridSize();
-  }
-
   scrollToRow = (rowIndex) => {
     const scrollTop = (rowIndex + 1) * ROW_HEIGHT + 20;
 
-    // this._table.scrollToCell({ columnIndex: 0, rowIndex });
     this.props.onScroll({ scrollTop });
   }
 
@@ -124,7 +114,6 @@ class VirtualTable extends Component {
                 {header}
 
                 <VirtualTableBody
-                  ref={this.setTableRef}
                   autoContainerWidth={true}
                   width={width}
                   height={height}