New: Update Frontend Packages

build.sh

@@ -82,7 +82,7 @@ BuildWithXbuild()
 LintUI()
 {
     echo "ESLint"
-    CheckExitCode yarn eslint
+    CheckExitCode yarn lint
     echo "ESLint"
 
     echo "Stylelint"

frontend/browsers.js

@@ -1,6 +0,0 @@
-module.exports = [
-  '>0.25%',
-  'not ie 11',
-  'not op_mini all',
-  'not chrome < 60'
-];

frontend/gulp/webpack.js

@@ -5,7 +5,6 @@ const path = require('path');
 const webpack = require('webpack');
 const errorHandler = require('./helpers/errorHandler');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const browsers = require('../browsers');
 
 const uiFolder = 'UI';
 const frontendFolder = path.join(__dirname, '..');
@@ -100,7 +99,7 @@ const config = {
                     loose: true,
                     debug: false,
                     useBuiltIns: 'entry',
-                    targets: browsers
+                    corejs: 3
                   }
                 ]
               ]
@@ -119,8 +118,9 @@ const config = {
             loader: 'css-loader',
             options: {
               importLoaders: 1,
-              localIdentName: '[name]/[local]/[hash:base64:5]',
-              modules: true
+              modules: {
+                localIdentName: '[name]/[local]/[hash:base64:5]'
+              }
             }
           },
           {

frontend/postcss.config.js

@@ -1,5 +1,4 @@
 const reload = require('require-nocache')(module);
-const browsers = require('./browsers');
 
 module.exports = (ctx, configPath, options) => {
   const config = {
@@ -16,10 +15,7 @@ module.exports = (ctx, configPath, options) => {
           }, {})
       },
       'postcss-color-function': {},
-      'postcss-nested': {},
-      autoprefixer: {
-        browsers
-      }
+      'postcss-nested': {}
     }
   };
 

frontend/src/AddMovie/ImportMovie/Import/ImportMovieConnector.js

@@ -21,7 +21,7 @@ function createMapStateToProps() {
       rootFolders,
       addMovie,
       importMovieState,
-      qualityProfiles,
+      qualityProfiles
     ) => {
       const {
         isFetching: rootFoldersFetching,

frontend/src/Components/Error/ErrorBoundary.js

@@ -56,7 +56,7 @@ class ErrorBoundary extends Component {
 
 ErrorBoundary.propTypes = {
   children: PropTypes.node.isRequired,
-  errorComponent: PropTypes.func.isRequired
+  errorComponent: PropTypes.elementType.isRequired
 };
 
 export default ErrorBoundary;

frontend/src/Components/Form/AutoSuggestInput.js

@@ -176,7 +176,7 @@ class AutoSuggestInput extends Component {
       className: classNames(
         className,
         hasError && styles.hasError,
-        hasWarning && styles.hasWarning,
+        hasWarning && styles.hasWarning
       ),
       name,
       value,
@@ -234,7 +234,7 @@ AutoSuggestInput.propTypes = {
   minHeight: PropTypes.number.isRequired,
   maxHeight: PropTypes.number.isRequired,
   getSuggestionValue: PropTypes.func.isRequired,
-  renderInputComponent: PropTypes.func,
+  renderInputComponent: PropTypes.elementType,
   renderSuggestion: PropTypes.func.isRequired,
   onInputChange: PropTypes.func,
   onInputKeyDown: PropTypes.func,

frontend/src/Components/Form/EnhancedSelectInput.js

@@ -433,7 +433,7 @@ EnhancedSelectInput.propTypes = {
   hasWarning: PropTypes.bool,
   selectedValueOptions: PropTypes.object.isRequired,
   selectedValueComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
-  optionComponent: PropTypes.func,
+  optionComponent: PropTypes.elementType,
   onChange: PropTypes.func.isRequired
 };
 

frontend/src/Components/Form/TagInput.js

@@ -226,7 +226,7 @@ class TagInput extends Component {
         className={styles.internalInput}
         inputContainerClassName={classNames(
           inputContainerClassName,
-          isFocused && styles.isFocused,
+          isFocused && styles.isFocused
         )}
         value={value}
         suggestions={suggestions}
@@ -260,7 +260,7 @@ TagInput.propTypes = {
   minQueryLength: PropTypes.number.isRequired,
   hasError: PropTypes.bool,
   hasWarning: PropTypes.bool,
-  tagComponent: PropTypes.func.isRequired,
+  tagComponent: PropTypes.elementType.isRequired,
   onTagAdd: PropTypes.func.isRequired,
   onTagDelete: PropTypes.func.isRequired
 };

frontend/src/Components/Form/TagInputInput.js

@@ -67,7 +67,7 @@ TagInputInput.propTypes = {
   inputProps: PropTypes.object.isRequired,
   kind: PropTypes.oneOf(kinds.all).isRequired,
   isFocused: PropTypes.bool.isRequired,
-  tagComponent: PropTypes.func.isRequired,
+  tagComponent: PropTypes.elementType.isRequired,
   onTagDelete: PropTypes.func.isRequired,
   onInputContainerPress: PropTypes.func.isRequired
 };

frontend/src/Components/Menu/FilterMenu.js

@@ -95,8 +95,8 @@ FilterMenu.propTypes = {
   selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   filters: PropTypes.arrayOf(PropTypes.object).isRequired,
   customFilters: PropTypes.arrayOf(PropTypes.object).isRequired,
-  buttonComponent: PropTypes.func.isRequired,
-  filterModalConnectorComponent: PropTypes.func,
+  buttonComponent: PropTypes.elementType.isRequired,
+  filterModalConnectorComponent: PropTypes.elementType,
   filterModalConnectorComponentProps: PropTypes.object,
   onFilterSelect: PropTypes.func.isRequired
 };

frontend/src/Components/Page/PageContentBodyConnector.js

@@ -14,4 +14,4 @@ function createMapStateToProps() {
   );
 }
 
-export default connect(createMapStateToProps)(PageContentBody);
+export default connect(createMapStateToProps, null, null, { forwardRef: true })(PageContentBody);

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

@@ -94,7 +94,7 @@ PageSidebarItem.propTypes = {
   isActiveParent: PropTypes.bool,
   isParentItem: PropTypes.bool.isRequired,
   isChildItem: PropTypes.bool.isRequired,
-  statusComponent: PropTypes.func,
+  statusComponent: PropTypes.elementType,
   children: PropTypes.node,
   onPress: PropTypes.func
 };

frontend/src/Components/Table/Cells/RelativeDateCell.js

@@ -53,7 +53,7 @@ RelativeDateCell.propTypes = {
   shortDateFormat: PropTypes.string.isRequired,
   longDateFormat: PropTypes.string.isRequired,
   timeFormat: PropTypes.string.isRequired,
-  component: PropTypes.func,
+  component: PropTypes.elementType,
   dispatch: PropTypes.func
 };
 

frontend/src/Components/Table/Table.js

@@ -113,7 +113,7 @@ Table.propTypes = {
   className: PropTypes.string,
   selectAll: PropTypes.bool.isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  optionsComponent: PropTypes.func,
+  optionsComponent: PropTypes.elementType,
   pageSize: PropTypes.number,
   canModifyColumns: PropTypes.bool,
   children: PropTypes.node,

frontend/src/Components/Table/TableOptions/TableOptionsModal.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { DragDropContext } from 'react-dnd';
+import { DndProvider } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import { inputTypes } from 'Helpers/Props';
 import Button from 'Components/Link/Button';
@@ -127,116 +127,118 @@ class TableOptionsModal extends Component {
     const isDraggingDown = isDragging && dropIndex > dragIndex;
 
     return (
-      <Modal
-        isOpen={isOpen}
-        onModalClose={onModalClose}
-      >
-        {
-          isOpen ?
-            <ModalContent onModalClose={onModalClose}>
-              <ModalHeader>
+      <DndProvider backend={HTML5Backend}>
+        <Modal
+          isOpen={isOpen}
+          onModalClose={onModalClose}
+        >
+          {
+            isOpen ?
+              <ModalContent onModalClose={onModalClose}>
+                <ModalHeader>
             Table Options
-              </ModalHeader>
+                </ModalHeader>
 
-              <ModalBody>
-                <Form>
-                  {
-                    hasPageSize ?
-                      <FormGroup>
-                        <FormLabel>Page Size</FormLabel>
+                <ModalBody>
+                  <Form>
+                    {
+                      hasPageSize ?
+                        <FormGroup>
+                          <FormLabel>Page Size</FormLabel>
 
-                        <FormInputGroup
-                          type={inputTypes.NUMBER}
-                          name="pageSize"
-                          value={pageSize || 0}
-                          helpText="Number of items to show on each page"
-                          errors={pageSizeError ? [{ message: pageSizeError }] : undefined}
-                          onChange={this.onPageSizeChange}
-                        />
-                      </FormGroup> :
-                      null
-                  }
-
-                  {
-                    OptionsComponent ?
-                      <OptionsComponent
-                        onTableOptionChange={onTableOptionChange}
-                      /> : null
-                  }
-
-                  {
-                    canModifyColumns ?
-                      <FormGroup>
-                        <FormLabel>Columns</FormLabel>
-
-                        <div>
-                          <FormInputHelpText
-                            text="Choose which columns are visible and which order they appear in"
+                          <FormInputGroup
+                            type={inputTypes.NUMBER}
+                            name="pageSize"
+                            value={pageSize || 0}
+                            helpText="Number of items to show on each page"
+                            errors={pageSizeError ? [{ message: pageSizeError }] : undefined}
+                            onChange={this.onPageSizeChange}
                           />
+                        </FormGroup> :
+                        null
+                    }
 
-                          <div className={styles.columns}>
-                            {
-                              columns.map((column, index) => {
-                                const {
-                                  name,
-                                  label,
-                                  columnLabel,
-                                  isVisible,
-                                  isModifiable
-                                } = column;
+                    {
+                      OptionsComponent ?
+                        <OptionsComponent
+                          onTableOptionChange={onTableOptionChange}
+                        /> : null
+                    }
+
+                    {
+                      canModifyColumns ?
+                        <FormGroup>
+                          <FormLabel>Columns</FormLabel>
+
+                          <div>
+                            <FormInputHelpText
+                              text="Choose which columns are visible and which order they appear in"
+                            />
+
+                            <div className={styles.columns}>
+                              {
+                                columns.map((column, index) => {
+                                  const {
+                                    name,
+                                    label,
+                                    columnLabel,
+                                    isVisible,
+                                    isModifiable
+                                  } = column;
+
+                                  if (isModifiable !== false) {
+                                    return (
+                                      <TableOptionsColumnDragSource
+                                        key={name}
+                                        name={name}
+                                        label={label || columnLabel}
+                                        isVisible={isVisible}
+                                        isModifiable={true}
+                                        index={index}
+                                        isDragging={isDragging}
+                                        isDraggingUp={isDraggingUp}
+                                        isDraggingDown={isDraggingDown}
+                                        onVisibleChange={this.onVisibleChange}
+                                        onColumnDragMove={this.onColumnDragMove}
+                                        onColumnDragEnd={this.onColumnDragEnd}
+                                      />
+                                    );
+                                  }
 
-                                if (isModifiable !== false) {
                                   return (
-                                    <TableOptionsColumnDragSource
+                                    <TableOptionsColumn
                                       key={name}
                                       name={name}
                                       label={label || columnLabel}
                                       isVisible={isVisible}
-                                      isModifiable={true}
                                       index={index}
-                                      isDragging={isDragging}
-                                      isDraggingUp={isDraggingUp}
-                                      isDraggingDown={isDraggingDown}
+                                      isModifiable={false}
                                       onVisibleChange={this.onVisibleChange}
-                                      onColumnDragMove={this.onColumnDragMove}
-                                      onColumnDragEnd={this.onColumnDragEnd}
                                     />
                                   );
-                                }
+                                })
+                              }
 
-                                return (
-                                  <TableOptionsColumn
-                                    key={name}
-                                    name={name}
-                                    label={label || columnLabel}
-                                    isVisible={isVisible}
-                                    index={index}
-                                    isModifiable={false}
-                                    onVisibleChange={this.onVisibleChange}
-                                  />
-                                );
-                              })
-                            }
-
-                            <TableOptionsColumnDragPreview />
+                              <TableOptionsColumnDragPreview />
+                            </div>
                           </div>
-                        </div>
-                      </FormGroup> :
-                      null
-                  }
-                </Form>
-              </ModalBody>
-              <ModalFooter>
-                <Button
-                  onPress={onModalClose}
-                >
+                        </FormGroup> :
+                        null
+                    }
+                  </Form>
+                </ModalBody>
+                <ModalFooter>
+                  <Button
+                    onPress={onModalClose}
+                  >
               Close
-                </Button>
-              </ModalFooter>
-            </ModalContent> :
-            null
-        }
-      </Modal>
+                  </Button>
+                </ModalFooter>
+              </ModalContent> :
+              null
+          }
+        </Modal>
+      </DndProvider>
     );
   }
 }
@@ -246,7 +248,7 @@ TableOptionsModal.propTypes = {
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
   pageSize: PropTypes.number,
   canModifyColumns: PropTypes.bool.isRequired,
-  optionsComponent: PropTypes.func,
+  optionsComponent: PropTypes.elementType,
   onTableOptionChange: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired
 };
@@ -255,4 +257,4 @@ TableOptionsModal.defaultProps = {
   canModifyColumns: true
 };
 
-export default DragDropContext(HTML5Backend)(TableOptionsModal);
+export default TableOptionsModal;

frontend/src/Movie/Index/MovieIndexItemConnector.js

@@ -123,7 +123,7 @@ class MovieIndexItemConnector extends Component {
 
 MovieIndexItemConnector.propTypes = {
   id: PropTypes.number,
-  component: PropTypes.func.isRequired,
+  component: PropTypes.elementType.isRequired,
   dispatchExecuteCommand: PropTypes.func.isRequired
 };
 

frontend/src/Movie/Index/Table/MovieStatusCell.js

@@ -39,7 +39,7 @@ MovieStatusCell.propTypes = {
   className: PropTypes.string.isRequired,
   monitored: PropTypes.bool.isRequired,
   status: PropTypes.string.isRequired,
-  component: PropTypes.func
+  component: PropTypes.elementType
 };
 
 MovieStatusCell.defaultProps = {

frontend/src/Settings/CustomFormats/CustomFormatSettingsConnector.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { DragDropContext } from 'react-dnd';
+import { DndProvider } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
@@ -19,12 +19,14 @@ class CustomFormatSettingsConnector extends Component {
         />
 
         <PageContentBodyConnector>
-          <CustomFormatsConnector />
+          <DndProvider backend={HTML5Backend}>
+            <CustomFormatsConnector />
+          </DndProvider>
         </PageContentBodyConnector>
       </PageContent>
     );
   }
 }
 
-export default DragDropContext(HTML5Backend)(CustomFormatSettingsConnector);
+export default CustomFormatSettingsConnector;
 

frontend/src/Settings/DownloadClients/RemotePathMappings/RemotePathMapping.js

@@ -62,7 +62,7 @@ class RemotePathMapping extends Component {
     return (
       <div
         className={classNames(
-          styles.remotePathMapping,
+          styles.remotePathMapping
         )}
       >
         <div className={styles.host}>{host}</div>

frontend/src/Settings/NetImport/NetImportExclusions/NetImportExclusion.js

@@ -62,7 +62,7 @@ class NetImportExclusion extends Component {
     return (
       <div
         className={classNames(
-          styles.netImportExclusion,
+          styles.netImportExclusion
         )}
       >
         <div className={styles.tmdbId}>{tmdbId}</div>

frontend/src/Settings/Profiles/Delay/DelayProfile.js

@@ -96,7 +96,7 @@ class DelayProfile extends Component {
       <div
         className={classNames(
           styles.delayProfile,
-          isDragging && styles.isDragging,
+          isDragging && styles.isDragging
         )}
       >
         <div className={styles.column}>{preferred}</div>

frontend/src/Settings/Profiles/Profiles.js

@@ -1,11 +1,13 @@
 import React, { Component } from 'react';
-import { DragDropContext } from 'react-dnd';
+import { DndProvider } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
 import QualityProfilesConnector from './Quality/QualityProfilesConnector';
 import DelayProfilesConnector from './Delay/DelayProfilesConnector';
+// Only a single DragDrop Context can exist so it's done here to allow editing
+// quality profiles and reordering delay profiles to work.
 
 class Profiles extends Component {
 
@@ -20,15 +22,14 @@ class Profiles extends Component {
         />
 
         <PageContentBodyConnector>
-          <QualityProfilesConnector />
-          <DelayProfilesConnector />
+          <DndProvider backend={HTML5Backend}>
+            <QualityProfilesConnector />
+            <DelayProfilesConnector />
+          </DndProvider>
         </PageContentBodyConnector>
       </PageContent>
     );
   }
 }
 
-// Only a single DragDropContext can exist so it's done here to allow editing
-// quality profiles and reordering delay profiles to work.
-
-export default DragDropContext(HTML5Backend)(Profiles);
+export default Profiles;

frontend/src/Settings/Profiles/Quality/QualityProfileItemGroup.js

@@ -67,7 +67,7 @@ class QualityProfileItemGroup extends Component {
         className={classNames(
           styles.qualityProfileItemGroup,
           editGroups && styles.editGroups,
-          isDragging && styles.isDragging,
+          isDragging && styles.isDragging
         )}
       >
         <div className={styles.qualityProfileItemGroupInfo}>

frontend/src/index.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { render } from 'react-dom';
-import createHistory from 'history/createBrowserHistory';
+import { createBrowserHistory } from 'history';
 import createAppStore from 'Store/createAppStore';
 import App from './App/App';
 import 'Styles/globals.css';
 import './index.css';
 
-const history = createHistory();
+const history = createBrowserHistory();
 const store = createAppStore(history);
 
 render(

package.json

@@ -6,8 +6,8 @@
     "build": "gulp build",
     "start": "gulp watch",
     "watch": "gulp watch",
-    "eslint": "esprint check",
-    "eslint-fix": "eslint start --fix",
+    "lint": "esprint check",
+    "lint-fix": "eslint start --fix",
     "stylelint": "stylelint frontend/**/*.css --config frontend/.stylelintrc"
   },
   "repository": "https://github.com/Radarr/Radarr",
@@ -15,47 +15,49 @@
   "license": "GPL-3.0",
   "readmeFilename": "readme.md",
   "dependencies": {
-    "@babel/core": "7.4.3",
-    "@babel/plugin-proposal-class-properties": "7.4.0",
-    "@babel/plugin-proposal-decorators": "7.4.0",
-    "@babel/plugin-proposal-export-default-from": "7.2.0",
-    "@babel/plugin-proposal-export-namespace-from": "7.2.0",
-    "@babel/plugin-proposal-function-sent": "7.2.0",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "7.4.3",
+    "@babel/core": "7.5.4",
+    "@babel/plugin-proposal-class-properties": "7.5.0",
+    "@babel/plugin-proposal-decorators": "7.4.4",
+    "@babel/plugin-proposal-export-default-from": "7.5.2",
+    "@babel/plugin-proposal-export-namespace-from": "7.5.2",
+    "@babel/plugin-proposal-function-sent": "7.5.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.4.4",
     "@babel/plugin-proposal-numeric-separator": "7.2.0",
     "@babel/plugin-proposal-optional-chaining": "7.2.0",
     "@babel/plugin-proposal-throw-expressions": "7.2.0",
     "@babel/plugin-syntax-dynamic-import": "7.2.0",
-    "@babel/preset-env": "7.4.3",
+    "@babel/preset-env": "7.5.4",
     "@babel/preset-react": "7.0.0",
-    "@fortawesome/fontawesome-free": "5.8.1",
-    "@fortawesome/fontawesome-svg-core": "1.2.17",
-    "@fortawesome/free-regular-svg-icons": "5.8.1",
-    "@fortawesome/free-solid-svg-icons": "5.8.1",
+    "@fortawesome/fontawesome-free": "5.9.0",
+    "@fortawesome/fontawesome-svg-core": "1.2.19",
+    "@fortawesome/free-regular-svg-icons": "5.9.0",
+    "@fortawesome/free-solid-svg-icons": "5.9.0",
     "@fortawesome/react-fontawesome": "0.1.4",
-    "@sentry/browser": "4.6.4",
-    "ansi-colors": "3.2.4",
-    "autoprefixer": "9.5.1",
-    "babel-eslint": "10.0.1",
-    "babel-loader": "8.0.5",
+    "@sentry/browser": "5.5.0",
+    "@sentry/integrations": "5.5.0",
+    "ansi-colors": "4.1.1",
+    "autoprefixer": "9.6.1",
+    "babel-eslint": "10.0.2",
+    "babel-loader": "8.0.6",
     "babel-plugin-inline-classnames": "2.0.1",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "classnames": "2.2.6",
     "clipboard": "2.0.4",
-    "connected-react-router": "6.3.2",
+    "connected-react-router": "6.5.2",
+    "core-js": "3",
     "create-react-class": "15.6.3",
-    "css-loader": "2.1.1",
-    "del": "4.1.0",
+    "css-loader": "3.0.0",
+    "del": "5.0.0",
     "element-class": "0.2.2",
     "esformatter": "0.10.0",
-    "eslint": "5.16.0",
+    "eslint": "6.0.1",
     "eslint-plugin-filenames": "1.3.2",
-    "eslint-plugin-react": "7.12.4",
+    "eslint-plugin-react": "7.14.2",
     "esprint": "0.4.0",
-    "file-loader": "3.0.1",
+    "file-loader": "4.0.0",
     "filesize": "4.1.2",
-    "fuse.js": "3.4.4",
-    "gulp": "4.0.0",
+    "fuse.js": "3.4.5",
+    "gulp": "4.0.2",
     "gulp-cached": "1.1.1",
     "gulp-concat": "2.6.1",
     "gulp-declare": "0.3.0",
@@ -66,12 +68,12 @@
     "gulp-stripbom": "1.0.4",
     "gulp-watch": "5.0.1",
     "gulp-wrap": "0.15.0",
-    "history": "4.7.2",
+    "history": "4.9.0",
     "jdu": "1.0.0",
-    "jquery": "3.4.0",
+    "jquery": "3.4.1",
     "loader-utils": "^1.1.0",
-    "lodash": "4.17.11",
-    "mini-css-extract-plugin": "0.6.0",
+    "lodash": "4.17.14",
+    "mini-css-extract-plugin": "0.8.0",
     "mobile-detect": "1.4.3",
     "moment": "2.24.0",
     "mousetrap": "1.6.3",
@@ -86,24 +88,24 @@
     "qs": "6.7.0",
     "react": "16.8.6",
     "react-addons-shallow-compare": "15.6.2",
-    "react-async-script": "1.0.1",
+    "react-async-script": "1.1.1",
     "react-autosuggest": "9.4.3",
     "react-custom-scrollbars": "4.2.1",
-    "react-dnd": "7.0.2",
-    "react-dnd-html5-backend": "7.0.2",
+    "react-dnd": "9.3.2",
+    "react-dnd-html5-backend": "9.3.2",
     "react-document-title": "2.0.3",
     "react-dom": "16.8.6",
-    "react-google-recaptcha": "1.0.5",
-    "react-lazyload": "2.5.0",
+    "react-google-recaptcha": "1.1.0",
+    "react-lazyload": "2.6.2",
     "react-measure": "1.4.7",
     "react-popper": "1.3.3",
-    "react-redux": "6.0.1",
-    "react-router-dom": "4.3.1",
+    "react-redux": "7.1.0",
+    "react-router-dom": "5.0.1",
     "react-slider": "0.11.2",
     "react-tabs": "3.0.0",
     "react-text-truncate": "0.14.1",
-    "react-virtualized": "9.21.0",
-    "redux": "4.0.1",
+    "react-virtualized": "9.21.1",
+    "redux": "4.0.4",
     "redux-actions": "2.6.5",
     "redux-batched-actions": "0.4.1",
     "redux-localstorage": "0.4.1",
@@ -111,14 +113,20 @@
     "require-nocache": "1.0.0",
     "reselect": "4.0.0",
     "run-sequence": "2.2.1",
-    "signalr": "2.4.0",
+    "signalr": "2.4.1",
     "streamqueue": "1.1.2",
     "style-loader": "0.23.1",
-    "stylelint": "9.10.1",
-    "stylelint-order": "2.2.1",
-    "url-loader": "1.1.2",
-    "webpack": "4.30.0",
-    "webpack-stream": "^5.2.1"
+    "stylelint": "10.1.0",
+    "stylelint-order": "3.0.1",
+    "url-loader": "2.0.1",
+    "webpack": "4.35.3",
+    "webpack-stream": "5.2.1"
   },
-  "main": "index.js"
+  "main": "index.js",
+  "browserslist": [
+    ">0.25%",
+    "not ie 11",
+    "not op_mini all",
+    "not chrome < 60"
+  ]
 }

src/NzbDrone.Host/NzbDrone.Host.csproj

@@ -62,11 +62,11 @@
     <ApplicationIcon>Radarr.ico</ApplicationIcon>
   </PropertyGroup>
   <ItemGroup>
-    <Reference Include="Microsoft.AspNet.SignalR.Core, Version=2.4.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL">
-      <HintPath>..\packages\Microsoft.AspNet.SignalR.Core.2.4.0\lib\net45\Microsoft.AspNet.SignalR.Core.dll</HintPath>
+    <Reference Include="Microsoft.AspNet.SignalR.Core, Version=2.4.1.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL">
+      <HintPath>..\packages\Microsoft.AspNet.SignalR.Core.2.4.1\lib\net45\Microsoft.AspNet.SignalR.Core.dll</HintPath>
     </Reference>
-    <Reference Include="Microsoft.AspNet.SignalR.SystemWeb, Version=2.4.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL">
-      <HintPath>..\packages\Microsoft.AspNet.SignalR.SystemWeb.2.4.0\lib\net45\Microsoft.AspNet.SignalR.SystemWeb.dll</HintPath>
+    <Reference Include="Microsoft.AspNet.SignalR.SystemWeb, Version=2.4.1.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL">
+      <HintPath>..\packages\Microsoft.AspNet.SignalR.SystemWeb.2.4.1\lib\net45\Microsoft.AspNet.SignalR.SystemWeb.dll</HintPath>
     </Reference>
     <Reference Include="Microsoft.CSharp" />
     <Reference Include="Microsoft.Owin, Version=3.1.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL">

src/NzbDrone.Host/packages.config

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="utf-8"?>
 <packages>
-  <package id="Microsoft.AspNet.SignalR.Core" version="2.4.0" targetFramework="net461" />
-  <package id="Microsoft.AspNet.SignalR.SelfHost" version="2.4.0" targetFramework="net461" />
-  <package id="Microsoft.AspNet.SignalR.SystemWeb" version="2.4.0" targetFramework="net461" />
+  <package id="Microsoft.AspNet.SignalR.Core" version="2.4.1" targetFramework="net461" />
+  <package id="Microsoft.AspNet.SignalR.SelfHost" version="2.4.1" targetFramework="net461" />
+  <package id="Microsoft.AspNet.SignalR.SystemWeb" version="2.4.1" targetFramework="net461" />
   <package id="Microsoft.Owin" version="3.1.0" targetFramework="net461" />
   <package id="Microsoft.Owin.Diagnostics" version="3.1.0" targetFramework="net461" />
   <package id="Microsoft.Owin.Host.HttpListener" version="3.1.0" targetFramework="net461" />

src/NzbDrone.Integration.Test/NzbDrone.Integration.Test.csproj

@@ -50,8 +50,8 @@
     <Reference Include="FluentValidation, Version=6.2.1.0, Culture=neutral, processorArchitecture=MSIL">
       <HintPath>..\packages\FluentValidation.6.2.1.0\lib\Net45\FluentValidation.dll</HintPath>
     </Reference>
-    <Reference Include="Microsoft.AspNet.SignalR.Client, Version=2.2.3.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL">
-      <HintPath>..\packages\Microsoft.AspNet.SignalR.Client.2.2.3\lib\net45\Microsoft.AspNet.SignalR.Client.dll</HintPath>
+    <Reference Include="Microsoft.AspNet.SignalR.Client, Version=2.4.1.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL">
+      <HintPath>..\packages\Microsoft.AspNet.SignalR.Client.2.4.1\lib\net45\Microsoft.AspNet.SignalR.Client.dll</HintPath>
     </Reference>
     <Reference Include="Microsoft.Owin, Version=3.1.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL">
       <HintPath>..\packages\Microsoft.Owin.3.1.0\lib\net45\Microsoft.Owin.dll</HintPath>
@@ -92,6 +92,8 @@
     <Reference Include="System.Data" />
     <Reference Include="System.Data.DataSetExtensions" />
     <Reference Include="System.IO.Compression" />
+    <Reference Include="System.Net.Http" />
+    <Reference Include="System.Net.Http.WebRequest" />
     <Reference Include="System.Runtime.Serialization" />
     <Reference Include="System.ServiceModel" />
     <Reference Include="System.Transactions" />

src/NzbDrone.Integration.Test/packages.config

@@ -2,7 +2,7 @@
 <packages>
   <package id="FluentAssertions" version="4.18.0" targetFramework="net461" />
   <package id="FluentValidation" version="6.2.1.0" targetFramework="net461" />
-  <package id="Microsoft.AspNet.SignalR.Client" version="2.2.3" targetFramework="net461" />
+  <package id="Microsoft.AspNet.SignalR.Client" version="2.4.1" targetFramework="net461" />
   <package id="Microsoft.Owin" version="3.1.0" targetFramework="net461" />
   <package id="Microsoft.Owin.Host.HttpListener" version="3.1.0" targetFramework="net461" />
   <package id="Microsoft.Owin.Hosting" version="3.1.0" targetFramework="net461" />

src/NzbDrone.SignalR/NzbDrone.SignalR.csproj

@@ -41,11 +41,11 @@
     <Prefer32Bit>false</Prefer32Bit>
   </PropertyGroup>
   <ItemGroup>
-    <Reference Include="Microsoft.AspNet.SignalR.Core, Version=2.4.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL">
-      <HintPath>..\packages\Microsoft.AspNet.SignalR.Core.2.4.0\lib\net45\Microsoft.AspNet.SignalR.Core.dll</HintPath>
+    <Reference Include="Microsoft.AspNet.SignalR.Core, Version=2.4.1.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL">
+      <HintPath>..\packages\Microsoft.AspNet.SignalR.Core.2.4.1\lib\net45\Microsoft.AspNet.SignalR.Core.dll</HintPath>
     </Reference>
-    <Reference Include="Microsoft.AspNet.SignalR.SystemWeb, Version=2.4.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL">
-      <HintPath>..\packages\Microsoft.AspNet.SignalR.SystemWeb.2.4.0\lib\net45\Microsoft.AspNet.SignalR.SystemWeb.dll</HintPath>
+    <Reference Include="Microsoft.AspNet.SignalR.SystemWeb, Version=2.4.1.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL">
+      <HintPath>..\packages\Microsoft.AspNet.SignalR.SystemWeb.2.4.1\lib\net45\Microsoft.AspNet.SignalR.SystemWeb.dll</HintPath>
     </Reference>
     <Reference Include="Microsoft.Owin, Version=3.1.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL">
       <HintPath>..\packages\Microsoft.Owin.3.1.0\lib\net45\Microsoft.Owin.dll</HintPath>

src/NzbDrone.SignalR/packages.config

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="utf-8"?>
 <packages>
-  <package id="Microsoft.AspNet.SignalR.Core" version="2.4.0" targetFramework="net461" />
-  <package id="Microsoft.AspNet.SignalR.SelfHost" version="2.4.0" targetFramework="net461" />
-  <package id="Microsoft.AspNet.SignalR.SystemWeb" version="2.4.0" targetFramework="net461" />
+  <package id="Microsoft.AspNet.SignalR.Core" version="2.4.1" targetFramework="net461" />
+  <package id="Microsoft.AspNet.SignalR.SelfHost" version="2.4.1" targetFramework="net461" />
+  <package id="Microsoft.AspNet.SignalR.SystemWeb" version="2.4.1" targetFramework="net461" />
   <package id="Microsoft.Owin" version="3.1.0" targetFramework="net461" />
   <package id="Microsoft.Owin.Diagnostics" version="3.1.0" targetFramework="net461" />
   <package id="Microsoft.Owin.Host.HttpListener" version="3.1.0" targetFramework="net461" />