New: Cleanup UI tooling, Update to Webpack 4, Gulp 4 (#655)

* New: Webpack 4

* New: Gulp 4

* New: Transpile UI for old browsers

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>

frontend/src/Components/FileBrowser/FileBrowserModal.css

@@ -1,5 +1,5 @@
 .modal {
-  composes: modal from 'Components/Modal/Modal.css';
+  composes: modal from '~Components/Modal/Modal.css';
 
   height: 600px;
 }

frontend/src/Components/FileBrowser/FileBrowserModalContent.css

@@ -1,12 +1,12 @@
 .modalBody {
-  composes: modalBody from 'Components/Modal/ModalBody.css';
+  composes: modalBody from '~Components/Modal/ModalBody.css';
 
   display: flex;
   flex-direction: column;
 }
 
 .mappedDrivesWarning {
-  composes: alert from 'Components/Alert.css';
+  composes: alert from '~Components/Alert.css';
 
   margin: 0;
   margin-bottom: 20px;
@@ -18,7 +18,7 @@
 }
 
 .pathInput {
-  composes: pathInputWrapper from 'Components/Form/PathInput.css';
+  composes: pathInputWrapper from '~Components/Form/PathInput.css';
 
   flex: 0 0 auto;
 }

frontend/src/Components/FileBrowser/FileBrowserRow.css

@@ -1,5 +1,5 @@
 .type {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 32px;
 }

frontend/src/Components/Filter/Builder/DateFilterBuilderRowValue.css

@@ -3,13 +3,13 @@
 }
 
 .numberInput {
-  composes: input from 'Components/Form/TextInput.css';
+  composes: input from '~Components/Form/TextInput.css';
 
   margin-right: 3px;
 }
 
 .selectInput {
-  composes: select from 'Components/Form/SelectInput.css';
+  composes: select from '~Components/Form/SelectInput.css';
 
   margin-left: 3px;
 }

frontend/src/Components/Filter/Builder/FilterBuilderRowValue.js

@@ -3,7 +3,8 @@ import React, { Component } from 'react';
 import convertToBytes from 'Utilities/Number/convertToBytes';
 import formatBytes from 'Utilities/Number/formatBytes';
 import { kinds, filterBuilderTypes, filterBuilderValueTypes } from 'Helpers/Props';
-import TagInput, { tagShape } from 'Components/Form/TagInput';
+import tagShape from 'Helpers/Props/Shapes/tagShape';
+import TagInput from 'Components/Form/TagInput';
 import FilterBuilderRowValueTag from './FilterBuilderRowValueTag';
 
 export const NAME = 'value';

frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css

@@ -7,7 +7,7 @@
 }
 
 .label {
-  composes: label from 'Components/Label.css';
+  composes: label from '~Components/Label.css';
 
   border-style: none;
   font-size: 13px;

frontend/src/Components/Filter/Builder/IndexerFilterBuilderRowValueConnector.js

@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import tagShape from 'Helpers/Props/Shapes/tagShape';
 import { fetchIndexers } from 'Store/Actions/settingsActions';
-import { tagShape } from 'Components/Form/TagInput';
 import FilterBuilderRowValue from './FilterBuilderRowValue';
 
 function createMapStateToProps() {

frontend/src/Components/Filter/Builder/QualityFilterBuilderRowValueConnector.js

@@ -3,8 +3,8 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import getQualities from 'Utilities/Quality/getQualities';
+import tagShape from 'Helpers/Props/Shapes/tagShape';
 import { fetchQualityProfileSchema } from 'Store/Actions/settingsActions';
-import { tagShape } from 'Components/Form/TagInput';
 import FilterBuilderRowValue from './FilterBuilderRowValue';
 
 function createMapStateToProps() {

frontend/src/Components/Form/AutoCompleteInput.css

@@ -1,13 +1,13 @@
 .input {
-  composes: input from 'Components/Form/Input.css';
+  composes: input from '~Components/Form/Input.css';
 }
 
 .hasError {
-  composes: hasError from 'Components/Form/Input.css';
+  composes: hasError from '~Components/Form/Input.css';
 }
 
 .hasWarning {
-  composes: hasWarning from 'Components/Form/Input.css';
+  composes: hasWarning from '~Components/Form/Input.css';
 }
 
 .inputWrapper {

frontend/src/Components/Form/CaptchaInput.css

@@ -3,19 +3,19 @@
 }
 
 .input {
-  composes: input from 'Components/Form/Input.css';
+  composes: input from '~Components/Form/Input.css';
 }
 
 .hasError {
-  composes: hasError from 'Components/Form/Input.css';
+  composes: hasError from '~Components/Form/Input.css';
 }
 
 .hasWarning {
-  composes: hasWarning from 'Components/Form/Input.css';
+  composes: hasWarning from '~Components/Form/Input.css';
 }
 
 .hasButton {
-  composes: hasButton from 'Components/Form/Input.css';
+  composes: hasButton from '~Components/Form/Input.css';
 }
 
 .recaptchaWrapper {

frontend/src/Components/Form/CheckInput.css

@@ -94,7 +94,7 @@
 }
 
 .helpText {
-  composes: helpText from 'Components/Form/FormInputHelpText.css';
+  composes: helpText from '~Components/Form/FormInputHelpText.css';
 
   margin-top: 8px;
   margin-left: 5px;

frontend/src/Components/Form/DeviceInput.css

@@ -3,6 +3,6 @@
 }
 
 .inputContainer {
-  composes: inputContainer from './TagInput.css';
-  composes: hasButton from 'Components/Form/Input.css';
+  composes: inputContainer from '~./TagInput.css';
+  composes: hasButton from '~Components/Form/Input.css';
 }

frontend/src/Components/Form/DeviceInput.js

@@ -1,9 +1,10 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { icons } from 'Helpers/Props';
+import tagShape from 'Helpers/Props/Shapes/tagShape';
 import Icon from 'Components/Icon';
 import FormInputButton from './FormInputButton';
-import TagInput, { tagShape } from './TagInput';
+import TagInput from './TagInput';
 import styles from './DeviceInput.css';
 
 class DeviceInput extends Component {

frontend/src/Components/Form/EnhancedSelectInput.css

@@ -3,8 +3,8 @@
 }
 
 .enhancedSelect {
-  composes: input from 'Components/Form/Input.css';
-  composes: link from 'Components/Link/Link.css';
+  composes: input from '~Components/Form/Input.css';
+  composes: link from '~Components/Link/Link.css';
 
   position: relative;
   display: flex;
@@ -21,11 +21,11 @@
 }
 
 .hasError {
-  composes: hasError from 'Components/Form/Input.css';
+  composes: hasError from '~Components/Form/Input.css';
 }
 
 .hasWarning {
-  composes: hasWarning from 'Components/Form/Input.css';
+  composes: hasWarning from '~Components/Form/Input.css';
 }
 
 .isDisabled {
@@ -62,7 +62,7 @@
 }
 
 .optionsModalBody {
-  composes: modalBody from 'Components/Modal/ModalBody.css';
+  composes: modalBody from '~Components/Modal/ModalBody.css';
 
   display: flex;
   justify-content: center;
@@ -71,7 +71,7 @@
 }
 
 .optionsModalScroller {
-  composes: scroller from 'Components/Scroller/Scroller.css';
+  composes: scroller from '~Components/Scroller/Scroller.css';
 
   border: 1px solid $inputBorderColor;
   border-radius: 4px;

frontend/src/Components/Form/FormInputButton.css

@@ -1,5 +1,5 @@
 .button {
-  composes: button from 'Components/Link/Button.css';
+  composes: button from '~Components/Link/Button.css';
 
   border-left: none;
   border-top-left-radius: 0;

frontend/src/Components/Form/FormInputHelpText.css

@@ -33,7 +33,7 @@
 }
 
 .link {
-  composes: link from 'Components/Link/Link.css';
+  composes: link from '~Components/Link/Link.css';
 
   margin-left: 5px;
 }

frontend/src/Components/Form/KeyValueListInput.css

@@ -1,5 +1,5 @@
 .inputContainer {
-  composes: input from 'Components/Form/Input.css';
+  composes: input from '~Components/Form/Input.css';
 
   position: relative;
   min-height: 35px;
@@ -13,9 +13,9 @@
 }
 
 .hasError {
-  composes: hasError from 'Components/Form/Input.css';
+  composes: hasError from '~Components/Form/Input.css';
 }
 
 .hasWarning {
-  composes: hasWarning from 'Components/Form/Input.css';
+  composes: hasWarning from '~Components/Form/Input.css';
 }

frontend/src/Components/Form/PasswordInput.css

@@ -1,5 +1,5 @@
 .input {
-  composes: input from 'Components/Form/TextInput.css';
+  composes: input from '~Components/Form/TextInput.css';
 
   font-family: $passwordFamily;
 }

frontend/src/Components/Form/PathInput.css

@@ -1,17 +1,17 @@
 .path {
-  composes: input from 'Components/Form/Input.css';
+  composes: input from '~Components/Form/Input.css';
 }
 
 .hasError {
-  composes: hasError from 'Components/Form/Input.css';
+  composes: hasError from '~Components/Form/Input.css';
 }
 
 .hasWarning {
-  composes: hasWarning from 'Components/Form/Input.css';
+  composes: hasWarning from '~Components/Form/Input.css';
 }
 
 .hasFileBrowser {
-  composes: hasButton from 'Components/Form/Input.css';
+  composes: hasButton from '~Components/Form/Input.css';
 }
 
 .pathInputWrapper {
@@ -62,7 +62,7 @@
 }
 
 .fileBrowserButton {
-  composes: button from './FormInputButton.css';
+  composes: button from '~./FormInputButton.css';
 
   height: 35px;
 }

frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css

@@ -1,5 +1,5 @@
 .selectedValue {
-  composes: selectedValue from './EnhancedSelectInputSelectedValue.css';
+  composes: selectedValue from '~./EnhancedSelectInputSelectedValue.css';
 
   display: flex;
   align-items: center;

frontend/src/Components/Form/SelectInput.css

@@ -1,15 +1,15 @@
 .select {
-  composes: input from 'Components/Form/Input.css';
+  composes: input from '~Components/Form/Input.css';
 
   padding: 0 11px;
 }
 
 .hasError {
-  composes: hasError from 'Components/Form/Input.css';
+  composes: hasError from '~Components/Form/Input.css';
 }
 
 .hasWarning {
-  composes: hasWarning from 'Components/Form/Input.css';
+  composes: hasWarning from '~Components/Form/Input.css';
 }
 
 .isDisabled {

frontend/src/Components/Form/TagInput.css

@@ -1,5 +1,5 @@
 .inputContainer {
-  composes: input from 'Components/Form/Input.css';
+  composes: input from '~Components/Form/Input.css';
 
   position: relative;
   padding: 0;
@@ -14,11 +14,11 @@
 }
 
 .hasError {
-  composes: hasError from 'Components/Form/Input.css';
+  composes: hasError from '~Components/Form/Input.css';
 }
 
 .hasWarning {
-  composes: hasWarning from 'Components/Form/Input.css';
+  composes: hasWarning from '~Components/Form/Input.css';
 }
 
 .tags {

frontend/src/Components/Form/TagInput.js

@@ -4,6 +4,7 @@ import React, { Component } from 'react';
 import Autosuggest from 'react-autosuggest';
 import classNames from 'classnames';
 import { kinds } from 'Helpers/Props';
+import tagShape from 'Helpers/Props/Shapes/tagShape';
 import TagInputInput from './TagInputInput';
 import TagInputTag from './TagInputTag';
 import styles from './TagInput.css';
@@ -266,11 +267,6 @@ class TagInput extends Component {
   }
 }
 
-export const tagShape = {
-  id: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]).isRequired,
-  name: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
-};
-
 TagInput.propTypes = {
   className: PropTypes.string.isRequired,
   inputClassName: PropTypes.string.isRequired,

frontend/src/Components/Form/TagInputInput.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { kinds } from 'Helpers/Props';
-import { tagShape } from './TagInput';
+import tagShape from 'Helpers/Props/Shapes/tagShape';
 import styles from './TagInputInput.css';
 
 class TagInputInput extends Component {

frontend/src/Components/Form/TagInputTag.js

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { kinds } from 'Helpers/Props';
+import tagShape from 'Helpers/Props/Shapes/tagShape';
 import Label from 'Components/Label';
 import Link from 'Components/Link/Link';
-import { tagShape } from './TagInput';
 
 class TagInputTag extends Component {
 

frontend/src/Components/Form/TextInput.css

@@ -1,5 +1,5 @@
 .input {
-  composes: input from 'Components/Form/Input.css';
+  composes: input from '~Components/Form/Input.css';
 }
 
 .readOnly {
@@ -7,13 +7,13 @@
 }
 
 .hasError {
-  composes: hasError from 'Components/Form/Input.css';
+  composes: hasError from '~Components/Form/Input.css';
 }
 
 .hasWarning {
-  composes: hasWarning from 'Components/Form/Input.css';
+  composes: hasWarning from '~Components/Form/Input.css';
 }
 
 .hasButton {
-  composes: hasButton from 'Components/Form/Input.css';
+  composes: hasButton from '~Components/Form/Input.css';
 }

frontend/src/Components/Link/Button.css

@@ -1,5 +1,5 @@
 .button {
-  composes: link from './Link.css';
+  composes: link from '~./Link.css';
 
   overflow: hidden;
   border: 1px solid;

frontend/src/Components/Link/ClipboardButton.css

@@ -1,5 +1,5 @@
 .button {
-  composes: button from 'Components/Form/FormInputButton.css';
+  composes: button from '~Components/Form/FormInputButton.css';
 
   position: relative;
 }

frontend/src/Components/Link/IconButton.css

@@ -1,5 +1,5 @@
 .button {
-  composes: link from 'Components/Link/Link.css';
+  composes: link from '~Components/Link/Link.css';
 
   display: inline-block;
   margin: 0 2px;

frontend/src/Components/Link/SpinnerButton.css

@@ -1,5 +1,5 @@
 .button {
-  composes: button from 'Components/Link/Button.css';
+  composes: button from '~Components/Link/Button.css';
 
   position: relative;
 }

frontend/src/Components/Link/SpinnerErrorButton.css

@@ -1,5 +1,5 @@
 .iconContainer {
-  composes: spinnerContainer from 'Components/Link/SpinnerButton.css';
+  composes: spinnerContainer from '~Components/Link/SpinnerButton.css';
 }
 
 .icon {
@@ -7,7 +7,7 @@
 }
 
 .label {
-  composes: label from 'Components/Link/SpinnerButton.css';
+  composes: label from '~Components/Link/SpinnerButton.css';
 }
 
 .showIcon {

frontend/src/Components/Menu/FilterMenu.css

@@ -1,5 +1,5 @@
 .filterMenu {
-  composes: menu from './Menu.css';
+  composes: menu from '~./Menu.css';
 }
 
 @media only screen and (max-width: $breakpointSmall) {

frontend/src/Components/Menu/PageMenuButton.css

@@ -1,5 +1,5 @@
 .menuButton {
-  composes: menuButton from './MenuButton.css';
+  composes: menuButton from '~./MenuButton.css';
 
   &:hover {
     color: #666;

frontend/src/Components/Menu/ToolbarMenuButton.css

@@ -1,5 +1,5 @@
 .menuButton {
-  composes: menuButton from './MenuButton.css';
+  composes: menuButton from '~./MenuButton.css';
 
   width: $toolbarButtonWidth;
   height: $toolbarHeight;
@@ -7,5 +7,5 @@
 }
 
 .label {
-  composes: label from 'Components/Page/Toolbar/PageToolbarButton.css';
+  composes: label from '~Components/Page/Toolbar/PageToolbarButton.css';
 }

frontend/src/Components/Modal/ModalError.css

@@ -1,5 +1,5 @@
 .message {
-  composes: message from 'Components/Error/ErrorBoundaryError.css';
+  composes: message from '~Components/Error/ErrorBoundaryError.css';
 
   margin: 0;
   margin-bottom: 30px;
@@ -8,7 +8,7 @@
 }
 
 .details {
-  composes: details from 'Components/Error/ErrorBoundaryError.css';
+  composes: details from '~Components/Error/ErrorBoundaryError.css';
 
   margin: 0;
   margin-top: 20px;

frontend/src/Components/MonitorToggleButton.css

@@ -1,5 +1,5 @@
 .toggleButton {
-  composes: button from 'Components/Link/IconButton.css';
+  composes: button from '~Components/Link/IconButton.css';
 
   padding: 0;
   font-size: inherit;

frontend/src/Components/Page/ErrorPage.css

@@ -1,5 +1,5 @@
 .page {
-  composes: page from './Page.css';
+  composes: page from '~./Page.css';
 
   margin-top: 20px;
   text-align: center;

frontend/src/Components/Page/Header/PageHeader.css

@@ -38,7 +38,7 @@
 }
 
 .donate {
-  composes: link from 'Components/Link/Link.css';
+  composes: link from '~Components/Link/Link.css';
 
   width: 30px;
   color: $themeRed;

frontend/src/Components/Page/LoadingPage.css

@@ -1,3 +1,3 @@
 .page {
-  composes: page from './Page.css';
+  composes: page from '~./Page.css';
 }

frontend/src/Components/Page/PageContentError.css

@@ -1,3 +1,3 @@
 .content {
-  composes: content from './PageContent.css';
+  composes: content from '~./PageContent.css';
 }

frontend/src/Components/Page/Sidebar/PageSidebarStatus.css

@@ -1,3 +1,3 @@
 .status {
-  composes: label from 'Components/Label.css';
+  composes: label from '~Components/Label.css';
 }

frontend/src/Components/Page/Toolbar/PageToolbarButton.css

@@ -1,5 +1,5 @@
 .toolbarButton {
-  composes: link from 'Components/Link/Link.css';
+  composes: link from '~Components/Link/Link.css';
 
   width: $toolbarButtonWidth;
   text-align: center;

frontend/src/Components/Page/Toolbar/PageToolbarSection.css

@@ -23,7 +23,7 @@
 }
 
 .overflowMenuButton {
-  composes: menuButton from 'Components/Menu/ToolbarMenuButton.css';
+  composes: menuButton from '~Components/Menu/ToolbarMenuButton.css';
 }
 
 .overflowMenuItemIcon {

frontend/src/Components/SignalRConnector.js

@@ -94,7 +94,9 @@ class SignalRConnector extends Component {
   componentDidMount() {
     console.log('Starting signalR');
 
-    this.signalRconnection = $.connection('/signalr', { apiKey: window.Lidarr.apiKey });
+    const url = `${window.Lidarr.urlBase}/signalr`;
+
+    this.signalRconnection = $.connection(url, { apiKey: window.Lidarr.apiKey });
 
     this.signalRconnection.stateChanged(this.onStateChanged);
     this.signalRconnection.received(this.onReceived);

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

@@ -1,5 +1,5 @@
 .cell {
-  composes: cell from './TableRowCell.css';
+  composes: cell from '~./TableRowCell.css';
 
   width: 180px;
 }

frontend/src/Components/Table/Cells/TableRowCellButton.css

@@ -1,4 +1,4 @@
 .cell {
-  composes: cell from './TableRowCell.css';
-  composes: link from 'Components/Link/Link.css';
+  composes: cell from '~./TableRowCell.css';
+  composes: link from '~Components/Link/Link.css';
 }

frontend/src/Components/Table/Cells/TableSelectCell.css

@@ -1,11 +1,11 @@
 .selectCell {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 30px;
 }
 
 .input {
-  composes: input from 'Components/Form/CheckInput.css';
+  composes: input from '~Components/Form/CheckInput.css';
 
   margin: 0;
 }

frontend/src/Components/Table/Cells/VirtualTableRowCell.css

@@ -1,6 +1,6 @@
 .cell {
   @add-mixin truncate;
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   flex-grow: 0;
   flex-shrink: 1;

frontend/src/Components/Table/Cells/VirtualTableSelectCell.css

@@ -1,11 +1,11 @@
 .cell {
-  composes: cell from 'Components/Table/Cells/VirtualTableRowCell.css';
+  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
 
   flex: 0 0 36px;
 }
 
 .input {
-  composes: input from 'Components/Form/CheckInput.css';
+  composes: input from '~Components/Form/CheckInput.css';
 
   margin: 0;
 }

frontend/src/Components/Table/TablePager.css

@@ -21,7 +21,7 @@
 }
 
 .loading {
-  composes: loading from 'Components/Loading/LoadingIndicator.css';
+  composes: loading from '~Components/Loading/LoadingIndicator.css';
 
   margin: 0;
   margin-left: 5px;
@@ -54,7 +54,7 @@
 }
 
 .pageSelect {
-  composes: select from 'Components/Form/SelectInput.css';
+  composes: select from '~Components/Form/SelectInput.css';
 
   padding: 0 2px;
   height: 25px;

frontend/src/Components/Table/TableRowButton.css

@@ -1,4 +1,4 @@
 .row {
-  composes: link from 'Components/Link/Link.css';
-  composes: row from './TableRow.css';
+  composes: link from '~Components/Link/Link.css';
+  composes: row from '~./TableRow.css';
 }

frontend/src/Components/Table/TableSelectAllHeaderCell.css

@@ -1,11 +1,11 @@
 .selectAllHeaderCell {
-  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   width: 30px;
 }
 
 .input {
-  composes: input from 'Components/Form/CheckInput.css';
+  composes: input from '~Components/Form/CheckInput.css';
 
   margin: 0;
 }

frontend/src/Components/Table/VirtualTableSelectAllHeaderCell.css

@@ -1,11 +1,11 @@
 .selectAllHeaderCell {
-  composes: headerCell from 'Components/Table/TableHeaderCell.css';
+  composes: headerCell from '~Components/Table/TableHeaderCell.css';
 
   flex: 0 0 36px;
 }
 
 .input {
-  composes: input from 'Components/Form/CheckInput.css';
+  composes: input from '~Components/Form/CheckInput.css';
 
   margin: 0;
 }