New: Update Frontend Packages

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(