New: Many UI Updates and Performance Tweaks

frontend/src/Activity/Blacklist/BlacklistRow.css

@@ -1,18 +1,18 @@
 .language,
 .quality {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 100px;
 }
 
 .indexer {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 80px;
 }
 
 .actions {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 70px;
 }

frontend/src/Activity/History/Details/HistoryDetails.css

@@ -1,5 +1,5 @@
 .description {
-  composes: title from 'Components/DescriptionList/DescriptionListItemDescription.css';
+  composes: title from '~Components/DescriptionList/DescriptionListItemDescription.css';
 
   overflow-wrap: break-word;
 }

frontend/src/Activity/History/Details/HistoryDetails.js

@@ -231,6 +231,16 @@ function HistoryDetails(props) {
       </DescriptionList>
     );
   }
+
+  return (
+    <DescriptionList>
+      <DescriptionListItem
+        descriptionClassName={styles.description}
+        title="Name"
+        data={sourceTitle}
+      />
+    </DescriptionList>
+  );
 }
 
 HistoryDetails.propTypes = {

frontend/src/Activity/History/Details/HistoryDetailsModal.css

@@ -1,5 +1,5 @@
 .markAsFailedButton {
-  composes: button from 'Components/Link/Button.css';
+  composes: button from '~Components/Link/Button.css';
 
   margin-right: auto;
 }

frontend/src/Activity/History/HistoryEventTypeCell.css

@@ -1,5 +1,5 @@
 .cell {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 35px;
   text-align: center;

frontend/src/Activity/History/HistoryRow.css

@@ -1,23 +1,23 @@
 .downloadClient {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 120px;
 }
 
 .indexer {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 80px;
 }
 
 .releaseGroup {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 110px;
 }
 
 .details {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 30px;
 }

frontend/src/Activity/Queue/ProtocolLabel.css

@@ -1,12 +1,12 @@
 .torrent {
-  composes: label from 'Components/Label.css';
+  composes: label from '~Components/Label.css';
 
   border-color: $torrentColor;
   background-color: $torrentColor;
 }
 
 .usenet {
-  composes: label from 'Components/Label.css';
+  composes: label from '~Components/Label.css';
 
   border-color: $usenetColor;
   background-color: $usenetColor;

frontend/src/Activity/Queue/QueueConnector.js

@@ -144,6 +144,8 @@ class QueueConnector extends Component {
 }
 
 QueueConnector.propTypes = {
+  includeUnknownMovieItems: PropTypes.bool.isRequired,
+  useCurrentPage: PropTypes.bool.isRequired,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   fetchQueue: PropTypes.func.isRequired,
   gotoQueueFirstPage: PropTypes.func.isRequired,

frontend/src/Activity/Queue/QueueRow.css

@@ -1,23 +1,23 @@
 .quality {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 150px;
 }
 
 .protocol {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 100px;
 }
 
 .progress {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 150px;
 }
 
 .actions {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 70px;
 }

frontend/src/Activity/Queue/QueueRow.js

@@ -197,6 +197,14 @@ class QueueRow extends Component {
               );
             }
 
+            if (name === 'title') {
+              return (
+                <TableRowCell key={name}>
+                  {title}
+                </TableRowCell>
+              );
+            }
+
             if (name === 'estimatedCompletionTime') {
               return (
                 <TimeleftCell

frontend/src/Activity/Queue/QueueStatusCell.css

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

frontend/src/Activity/Queue/TimeleftCell.css

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

frontend/src/AddMovie/AddNewMovie/AddNewMovie.css

@@ -17,7 +17,7 @@
 }
 
 .searchInput {
-  composes: input from 'Components/Form/TextInput.css';
+  composes: input from '~Components/Form/TextInput.css';
 
   height: 46px;
   border-radius: 0;

frontend/src/AddMovie/AddNewMovie/AddNewMovie.js

@@ -99,7 +99,7 @@ class AddNewMovie extends Component {
               className={styles.searchInput}
               name="movieLookup"
               value={term}
-              placeholder="eg. Some Movie, tmdb:####, imdb:####"
+              placeholder="eg. The Dark Knight, tmdb:155, imdb:tt0468569"
               onChange={this.onSearchInputChange}
             />
 

frontend/src/AddMovie/AddNewMovie/AddNewMovieConnector.js

@@ -10,7 +10,7 @@ import AddNewMovie from './AddNewMovie';
 function createMapStateToProps() {
   return createSelector(
     (state) => state.addMovie,
-    (state) => state.routing.location,
+    (state) => state.router.location,
     (addMovie, location) => {
       const { params } = parseUrl(location.search);
 

frontend/src/AddMovie/AddNewMovie/AddNewMovieModalContent.css

@@ -36,24 +36,24 @@
 }
 
 .searchForMissingEpisodesContainer {
-  composes: container from 'Components/Form/CheckInput.css';
+  composes: container from '~Components/Form/CheckInput.css';
 
   flex: 0 1 0;
 }
 
 .searchForMissingEpisodesInput {
-  composes: input from 'Components/Form/CheckInput.css';
+  composes: input from '~Components/Form/CheckInput.css';
 
   margin-top: 0;
 }
 
 .modalFooter {
-  composes: modalFooter from 'Components/Modal/ModalFooter.css';
+  composes: modalFooter from '~Components/Modal/ModalFooter.css';
 }
 
 .addButton {
   @add-mixin truncate;
-  composes: button from 'Components/Link/SpinnerButton.css';
+  composes: button from '~Components/Link/SpinnerButton.css';
 }
 
 @media only screen and (max-width: $breakpointSmall) {

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

@@ -97,7 +97,7 @@ class ImportMovie extends Component {
     } = this.state;
 
     return (
-      <PageContent title="Import Series">
+      <PageContent title="Import Movies">
         <PageContentBodyConnector
           ref={this.setContentBodyRef}
           onScroll={this.onScroll}
@@ -115,7 +115,7 @@ class ImportMovie extends Component {
           {
             !rootFoldersError && rootFoldersPopulated && !unmappedFolders.length &&
               <div>
-                All series in {path} have been imported
+                All movies in {path} have been imported
               </div>
           }
 

frontend/src/AddMovie/ImportMovie/Import/ImportMovieFooter.css

@@ -14,7 +14,7 @@
 }
 
 .importButton {
-  composes: button from 'Components/Link/SpinnerButton.css';
+  composes: button from '~Components/Link/SpinnerButton.css';
 
   height: 35px;
 }
@@ -26,7 +26,7 @@
 }
 
 .loading {
-  composes: loading from 'Components/Loading/LoadingIndicator.css';
+  composes: loading from '~Components/Loading/LoadingIndicator.css';
 
   margin: 0 10px 0 12px;
   text-align: left;

frontend/src/AddMovie/ImportMovie/Import/ImportMovieHeader.css

@@ -1,25 +1,25 @@
 .folder {
-  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 1 0 200px;
 }
 
 .monitor {
-  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 0 1 200px;
   min-width: 185px;
 }
 
 .qualityProfile {
-  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 0 1 250px;
   min-width: 170px;
 }
 
 .movie {
-  composes: headerCell from 'Components/Table/VirtualTableHeaderCell.css';
+  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
 
   flex: 0 1 400px;
   min-width: 300px;

frontend/src/AddMovie/ImportMovie/Import/ImportMovieRow.css

@@ -1,30 +1,30 @@
 .selectInput {
-  composes: input from 'Components/Form/CheckInput.css';
+  composes: input from '~Components/Form/CheckInput.css';
 }
 
 .folder {
-  composes: cell from 'Components/Table/Cells/VirtualTableRowCell.css';
+  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
 
   flex: 1 0 200px;
   line-height: 36px;
 }
 
 .monitor {
-  composes: cell from 'Components/Table/Cells/VirtualTableRowCell.css';
+  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
 
   flex: 0 1 200px;
   min-width: 185px;
 }
 
 .qualityProfile {
-  composes: cell from 'Components/Table/Cells/VirtualTableRowCell.css';
+  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
 
   flex: 0 1 250px;
   min-width: 170px;
 }
 
 .series {
-  composes: cell from 'Components/Table/Cells/VirtualTableRowCell.css';
+  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
 
   flex: 0 1 400px;
   min-width: 300px;

frontend/src/AddMovie/ImportMovie/Import/ImportMovieSelected.css

@@ -1,3 +1,3 @@
 .input {
-  composes: input from 'Components/Form/CheckInput.css';
+  composes: input from '~Components/Form/CheckInput.css';
 }

frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSelectMovie.css

@@ -3,7 +3,7 @@
 }
 
 .button {
-  composes: link from 'Components/Link/Link.css';
+  composes: link from '~Components/Link/Link.css';
 
   position: relative;
   display: flex;
@@ -64,7 +64,7 @@
 }
 
 .searchInput {
-  composes: input from 'Components/Form/TextInput.css';
+  composes: input from '~Components/Form/TextInput.css';
 
   border-radius: 0;
 }

frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSelectMovie.js

@@ -34,6 +34,8 @@ class ImportMovieSelectMovie extends Component {
     super(props, context);
 
     this._movieLookupTimeout = null;
+    this._buttonRef = {};
+    this._contentRef = {};
 
     this.state = {
       term: props.id,
@@ -44,14 +46,6 @@ class ImportMovieSelectMovie extends Component {
   //
   // Control
 
-  _setButtonRef = (ref) => {
-    this._buttonRef = ref;
-  }
-
-  _setContentRef = (ref) => {
-    this._contentRef = ref;
-  }
-
   _addListener() {
     window.addEventListener('click', this.onWindowClick);
   }
@@ -64,14 +58,18 @@ class ImportMovieSelectMovie extends Component {
   // Listeners
 
   onWindowClick = (event) => {
-    const button = ReactDOM.findDOMNode(this._buttonRef);
-    const content = ReactDOM.findDOMNode(this._contentRef);
+    const button = ReactDOM.findDOMNode(this._buttonRef.current);
+    const content = ReactDOM.findDOMNode(this._contentRef.current);
 
-    if (!button) {
+    if (!button || !content) {
       return;
     }
 
-    if (!button.contains(event.target) && content && !content.contains(event.target) && this.state.isOpen) {
+    if (
+      !button.contains(event.target) &&
+      !content.contains(event.target) &&
+      this.state.isOpen
+    ) {
       this.setState({ isOpen: false });
       this._removeListener();
     }
@@ -120,7 +118,7 @@ class ImportMovieSelectMovie extends Component {
       isPopulated,
       error,
       items,
-      queued,
+      isQueued,
       isLookingUpMovie
     } = this.props;
 
@@ -134,124 +132,145 @@ class ImportMovieSelectMovie extends Component {
           element: styles.tether
         }}
         {...tetherOptions}
-      >
-        <Link
-          ref={this._setButtonRef}
-          className={styles.button}
-          component="div"
-          onPress={this.onPress}
-        >
-          {
-            isLookingUpMovie && queued && !isPopulated &&
-              <LoadingIndicator
-                className={styles.loading}
-                size={20}
-              />
-          }
+        renderTarget={
+          (ref) => {
+            this._buttonRef = ref;
 
-          {
-            isPopulated && selectedMovie && isExistingMovie &&
-              <Icon
-                className={styles.warningIcon}
-                name={icons.WARNING}
-                kind={kinds.WARNING}
-              />
-          }
+            return (
+              <div ref={ref}>
+                <Link
+                  className={styles.button}
+                  component="div"
+                  onPress={this.onPress}
+                >
+                  {
+                    isLookingUpMovie && isQueued && !isPopulated ?
+                      <LoadingIndicator
+                        className={styles.loading}
+                        size={20}
+                      /> :
+                      null
+                  }
 
-          {
-            isPopulated && selectedMovie &&
-              <ImportMovieTitle
-                title={selectedMovie.title}
-                year={selectedMovie.year}
-                network={selectedMovie.network}
-                isExistingMovie={isExistingMovie}
-              />
-          }
+                  {
+                    isPopulated && selectedMovie && isExistingMovie ?
+                      <Icon
+                        className={styles.warningIcon}
+                        name={icons.WARNING}
+                        kind={kinds.WARNING}
+                      /> :
+                      null
+                  }
 
-          {
-            isPopulated && !selectedMovie &&
-              <div>
-                <Icon
-                  className={styles.warningIcon}
-                  name={icons.WARNING}
-                  kind={kinds.WARNING}
-                />
+                  {
+                    isPopulated && selectedMovie ?
+                      <ImportMovieTitle
+                        title={selectedMovie.title}
+                        year={selectedMovie.year}
+                        network={selectedMovie.network}
+                        isExistingMovie={isExistingMovie}
+                      /> :
+                      null
+                  }
+
+                  {
+                    isPopulated && !selectedMovie ?
+                      <div>
+                        <Icon
+                          className={styles.warningIcon}
+                          name={icons.WARNING}
+                          kind={kinds.WARNING}
+                        />
 
                 No match found!
-              </div>
-          }
+                      </div> :
+                      null
+                  }
 
-          {
-            !isFetching && !!error &&
-              <div>
-                <Icon
-                  className={styles.warningIcon}
-                  title={errorMessage}
-                  name={icons.WARNING}
-                  kind={kinds.WARNING}
-                />
+                  {
+                    !isFetching && !!error ?
+                      <div>
+                        <Icon
+                          className={styles.warningIcon}
+                          title={errorMessage}
+                          name={icons.WARNING}
+                          kind={kinds.WARNING}
+                        />
 
                 Search failed, please try again later.
+                      </div> :
+                      null
+                  }
+
+                  <div className={styles.dropdownArrowContainer}>
+                    <Icon
+                      name={icons.CARET_DOWN}
+                    />
+                  </div>
+                </Link>
               </div>
+            );
           }
+        }
+        renderElement={
+          (ref) => {
+            this._contentRef = ref;
 
-          <div className={styles.dropdownArrowContainer}>
-            <Icon
-              name={icons.CARET_DOWN}
-            />
-          </div>
-        </Link>
+            if (!this.state.isOpen) {
+              return;
+            }
 
-        {
-          this.state.isOpen &&
-            <div
-              ref={this._setContentRef}
-              className={styles.contentContainer}
-            >
-              <div className={styles.content}>
-                <div className={styles.searchContainer}>
-                  <div className={styles.searchIconContainer}>
-                    <Icon name={icons.SEARCH} />
+            return (
+              <div
+                ref={ref}
+                className={styles.contentContainer}
+              >
+                <div className={styles.content}>
+                  <div className={styles.searchContainer}>
+                    <div className={styles.searchIconContainer}>
+                      <Icon name={icons.SEARCH} />
+                    </div>
+
+                    <TextInput
+                      className={styles.searchInput}
+                      name={`${name}_textInput`}
+                      value={this.state.term}
+                      onChange={this.onSearchInputChange}
+                    />
+
+                    <FormInputButton
+                      kind={kinds.DEFAULT}
+                      spinnerIcon={icons.REFRESH}
+                      canSpin={true}
+                      isSpinning={isFetching}
+                      onPress={this.onRefreshPress}
+                    >
+                      <Icon name={icons.REFRESH} />
+                    </FormInputButton>
                   </div>
 
-                  <TextInput
-                    className={styles.searchInput}
-                    name={`${name}_textInput`}
-                    value={this.state.term}
-                    onChange={this.onSearchInputChange}
-                  />
-
-                  <FormInputButton
-                    kind={kinds.DEFAULT}
-                    spinnerIcon={icons.REFRESH}
-                    canSpin={true}
-                    isSpinning={isFetching}
-                    onPress={this.onRefreshPress}
-                  >
-                    <Icon name={icons.REFRESH} />
-                  </FormInputButton>
-                </div>
-
-                <div className={styles.results}>
-                  {
-                    items.map((item) => {
-                      return (
-                        <ImportMovieSearchResultConnector
-                          key={item.tmdbId}
-                          tmdbId={item.tmdbId}
-                          title={item.title}
-                          year={item.year}
-                          studio={item.studio}
-                          onPress={this.onMovieSelect}
-                        />
-                      );
-                    })
-                  }
+                  <div className={styles.results}>
+                    {
+                      items.map((item) => {
+                        return (
+                          <ImportMovieSearchResultConnector
+                            key={item.tmdbId}
+                            tmdbId={item.tmdbId}
+                            title={item.title}
+                            year={item.year}
+                            studio={item.studio}
+                            onPress={this.onMovieSelect}
+                          />
+                        );
+                      })
+                    }
+                  </div>
                 </div>
               </div>
-            </div>
+            );
+          }
         }
-      </TetherComponent>
+      />
     );
   }
 }
@@ -264,7 +283,7 @@ ImportMovieSelectMovie.propTypes = {
   isPopulated: PropTypes.bool.isRequired,
   error: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
-  queued: PropTypes.bool.isRequired,
+  isQueued: PropTypes.bool.isRequired,
   isLookingUpMovie: PropTypes.bool.isRequired,
   onSearchInputChange: PropTypes.func.isRequired,
   onMovieSelect: PropTypes.func.isRequired
@@ -274,7 +293,7 @@ ImportMovieSelectMovie.defaultProps = {
   isFetching: true,
   isPopulated: false,
   items: [],
-  queued: true
+  isQueued: true
 };
 
 export default ImportMovieSelectMovie;

frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieRootFolderRow.css

@@ -1,18 +1,18 @@
 .link {
-  composes: link from 'Components/Link/Link.css';
+  composes: link from '~Components/Link/Link.css';
 
   display: block;
 }
 
 .freeSpace,
 .unmappedFolders {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 150px;
 }
 
 .actions {
-  composes: cell from 'Components/Table/Cells/TableRowCell.css';
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 45px;
 }

frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolder.js

@@ -76,7 +76,7 @@ class ImportMovieSelectFolder extends Component {
     } = this.props;
 
     return (
-      <PageContent title="Import Series">
+      <PageContent title="Import Movies">
         <PageContentBodyConnector>
           {
             isFetching && !isPopulated &&
@@ -99,7 +99,7 @@ class ImportMovieSelectFolder extends Component {
                   Some tips to ensure the import goes smoothly:
                   <ul>
                     <li className={styles.tip}>
-                      Make sure your files include the quality in the name. eg. <span className={styles.code}>episode.s02e15.bluray.mkv</span>
+                      Make sure your files include the quality in the name. eg. <span className={styles.code}>movie.2008.bluray.mkv</span>
                     </li>
                     <li className={styles.tip}>
                       Point Radarr to the folder containing all of your movies not a specific one. eg. <span className={styles.code}>"{isWindows ? 'C:\\movies' : '/movies'}"</span> and not <span className={styles.code}>"{isWindows ? 'C:\\movies\\the matrix' : '/movies/the matrix'}"</span>

frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolderConnector.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { push } from 'react-router-redux';
+import { push } from 'connected-react-router';
 import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
 import { fetchRootFolders, addRootFolder, deleteRootFolder } from 'Store/Actions/rootFolderActions';
 import ImportMovieSelectFolder from './ImportMovieSelectFolder';

frontend/src/App/App.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import DocumentTitle from 'react-document-title';
 import { Provider } from 'react-redux';
-import { ConnectedRouter } from 'react-router-redux';
+import { ConnectedRouter } from 'connected-react-router';
 import PageConnector from 'Components/Page/PageConnector';
 import AppRoutes from './AppRoutes';
 

frontend/src/App/AppRoutes.js

@@ -17,6 +17,7 @@ import Settings from 'Settings/Settings';
 import MediaManagementConnector from 'Settings/MediaManagement/MediaManagementConnector';
 import Profiles from 'Settings/Profiles/Profiles';
 import Quality from 'Settings/Quality/Quality';
+import CustomFormatsConnector from 'Settings/CustomFormats/CustomFormatsConnector';
 import IndexerSettingsConnector from 'Settings/Indexers/IndexerSettingsConnector';
 import DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
 import NetImportSettingsConnector from 'Settings/NetImport/NetImportSettingsConnector';
@@ -139,6 +140,11 @@ function AppRoutes(props) {
         component={Quality}
       />
 
+      <Route
+        path="/settings/customformats"
+        component={CustomFormatsConnector}
+      />
+
       <Route
         path="/settings/indexers"
         component={IndexerSettingsConnector}

frontend/src/Calendar/Agenda/AgendaEvent.css

@@ -3,7 +3,7 @@
   overflow-x: hidden;
   padding: 5px;
   border-bottom: 1px solid $borderColor;
-  font-size: 14px;
+  font-size: $defaultFontSize;
 
   &:hover {
     background-color: $tableRowHoverBackgroundColor;
@@ -63,27 +63,27 @@
  */
 
 .downloaded {
-  composes: downloaded from 'Calendar/Events/CalendarEvent.css';
+  composes: downloaded from '~Calendar/Events/CalendarEvent.css';
 }
 
 .downloading {
-  composes: downloading from 'Calendar/Events/CalendarEvent.css';
+  composes: downloading from '~Calendar/Events/CalendarEvent.css';
 }
 
 .unmonitored {
-  composes: unmonitored from 'Calendar/Events/CalendarEvent.css';
+  composes: unmonitored from '~Calendar/Events/CalendarEvent.css';
 }
 
 .onAir {
-  composes: onAir from 'Calendar/Events/CalendarEvent.css';
+  composes: onAir from '~Calendar/Events/CalendarEvent.css';
 }
 
 .missing {
-  composes: missing from 'Calendar/Events/CalendarEvent.css';
+  composes: missing from '~Calendar/Events/CalendarEvent.css';
 }
 
 .premiere {
-  composes: premiere from 'Calendar/Events/CalendarEvent.css';
+  composes: premiere from '~Calendar/Events/CalendarEvent.css';
 }
 
 @media only screen and (max-width: $breakpointSmall) {

frontend/src/Calendar/Agenda/AgendaEvent.js

@@ -123,7 +123,7 @@ class AgendaEvent extends Component {
 
 AgendaEvent.propTypes = {
   id: PropTypes.number.isRequired,
-  episodeFile: PropTypes.object,
+  movieFile: PropTypes.object,
   title: PropTypes.string.isRequired,
   titleSlug: PropTypes.string.isRequired,
   inCinemas: PropTypes.string.isRequired,

frontend/src/Calendar/CalendarConnector.js

@@ -49,8 +49,20 @@ class CalendarConnector extends Component {
   }
 
   componentDidMount() {
+    const {
+      useCurrentPage,
+      fetchCalendar,
+      gotoCalendarToday
+    } = this.props;
+
     registerPagePopulator(this.repopulate);
-    this.props.gotoCalendarToday();
+
+    if (useCurrentPage) {
+      fetchCalendar();
+    } else {
+      gotoCalendarToday();
+    }
+
     this.scheduleUpdate();
   }
 
@@ -163,6 +175,7 @@ class CalendarConnector extends Component {
 }
 
 CalendarConnector.propTypes = {
+  useCurrentPage: PropTypes.bool.isRequired,
   time: PropTypes.string,
   view: PropTypes.string.isRequired,
   firstDayOfWeek: PropTypes.number.isRequired,

frontend/src/Calendar/CalendarPage.css

@@ -1,11 +1,11 @@
 .calendarPageBody {
-  composes: contentBody from 'Components/Page/PageContentBody.css';
+  composes: contentBody from '~Components/Page/PageContentBody.css';
 
   display: flex;
 }
 
 .calendarInnerPageBody {
-  composes: innerContentBody from 'Components/Page/PageContentBody.css';
+  composes: innerContentBody from '~Components/Page/PageContentBody.css';
 
   display: flex;
   flex-direction: column;

frontend/src/Calendar/CalendarPage.js

@@ -58,6 +58,15 @@ class CalendarPage extends Component {
     this.setState({ isOptionsModalOpen: false });
   }
 
+  onSearchMissingPress = () => {
+    const {
+      missingEpisodeIds,
+      onSearchMissingPress
+    } = this.props;
+
+    onSearchMissingPress(missingEpisodeIds);
+  }
+
   //
   // Render
 
@@ -65,7 +74,10 @@ class CalendarPage extends Component {
     const {
       selectedFilterKey,
       filters,
-      hasSeries,
+      hasMovie,
+      missingEpisodeIds,
+      isSearchingForMissing,
+      useCurrentPage,
       onFilterSelect
     } = this.props;
 
@@ -75,11 +87,7 @@ class CalendarPage extends Component {
     } = this.state;
 
     const isMeasured = this.state.width > 0;
-    let PageComponent = 'div';
-
-    if (isMeasured) {
-      PageComponent = hasSeries ? CalendarConnector : NoMovie;
-    }
+    const PageComponent = hasMovie ? CalendarConnector : NoMovie;
 
     return (
       <PageContent title="Calendar">
@@ -90,6 +98,14 @@ class CalendarPage extends Component {
               iconName={icons.CALENDAR}
               onPress={this.onGetCalendarLinkPress}
             />
+
+            <PageToolbarButton
+              label="Search for Missing"
+              iconName={icons.SEARCH}
+              isDisabled={!missingEpisodeIds.length}
+              isSpinning={isSearchingForMissing}
+              onPress={this.onSearchMissingPress}
+            />
           </PageToolbarSection>
 
           <PageToolbarSection alignContent={align.RIGHT}>
@@ -101,7 +117,7 @@ class CalendarPage extends Component {
 
             <FilterMenu
               alignMenu={align.RIGHT}
-              isDisabled={!hasSeries}
+              isDisabled={!hasMovie}
               selectedFilterKey={selectedFilterKey}
               filters={filters}
               customFilters={[]}
@@ -118,11 +134,17 @@ class CalendarPage extends Component {
             whitelist={['width']}
             onMeasure={this.onMeasure}
           >
-            <PageComponent />
+            {
+              isMeasured ?
+                <PageComponent
+                  useCurrentPage={useCurrentPage}
+                /> :
+                <div />
+            }
           </Measure>
 
           {
-            hasSeries &&
+            hasMovie &&
               <LegendConnector />
           }
         </PageContentBodyConnector>
@@ -144,7 +166,11 @@ class CalendarPage extends Component {
 CalendarPage.propTypes = {
   selectedFilterKey: PropTypes.string.isRequired,
   filters: PropTypes.arrayOf(PropTypes.object).isRequired,
-  hasSeries: PropTypes.bool.isRequired,
+  hasMovie: PropTypes.bool.isRequired,
+  missingEpisodeIds: PropTypes.arrayOf(PropTypes.number).isRequired,
+  isSearchingForMissing: PropTypes.bool.isRequired,
+  useCurrentPage: PropTypes.bool.isRequired,
+  onSearchMissingPress: PropTypes.func.isRequired,
   onDaysCountChange: PropTypes.func.isRequired,
   onFilterSelect: PropTypes.func.isRequired
 };

frontend/src/Calendar/CalendarPageConnector.js

@@ -1,21 +1,80 @@
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { setCalendarDaysCount, setCalendarFilter } from 'Store/Actions/calendarActions';
+import moment from 'moment';
+import { isCommandExecuting } from 'Utilities/Command';
+import isBefore from 'Utilities/Date/isBefore';
+import withCurrentPage from 'Components/withCurrentPage';
+import { searchMissing, setCalendarDaysCount, setCalendarFilter } from 'Store/Actions/calendarActions';
 import createMovieCountSelector from 'Store/Selectors/createMovieCountSelector';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
 import CalendarPage from './CalendarPage';
 
+function createMissingEpisodeIdsSelector() {
+  return createSelector(
+    (state) => state.calendar.start,
+    (state) => state.calendar.end,
+    (state) => state.calendar.items,
+    (state) => state.queue.details.items,
+    (start, end, episodes, queueDetails) => {
+      return episodes.reduce((acc, episode) => {
+        const airDateUtc = episode.airDateUtc;
+
+        if (
+          !episode.episodeFileId &&
+          moment(airDateUtc).isAfter(start) &&
+          moment(airDateUtc).isBefore(end) &&
+          isBefore(episode.airDateUtc) &&
+          !queueDetails.some((details) => !!details.episode && details.episode.id === episode.id)
+        ) {
+          acc.push(episode.id);
+        }
+
+        return acc;
+      }, []);
+    }
+  );
+}
+
+function createIsSearchingSelector() {
+  return createSelector(
+    (state) => state.calendar.searchMissingCommandId,
+    createCommandsSelector(),
+    (searchMissingCommandId, commands) => {
+      if (searchMissingCommandId == null) {
+        return false;
+      }
+
+      return isCommandExecuting(commands.find((command) => {
+        return command.id === searchMissingCommandId;
+      }));
+    }
+  );
+}
+
 function createMapStateToProps() {
   return createSelector(
-    (state) => state.calendar,
+    (state) => state.calendar.selectedFilterKey,
+    (state) => state.calendar.filters,
     createMovieCountSelector(),
     createUISettingsSelector(),
-    (calendar, seriesCount, uiSettings) => {
+    createMissingEpisodeIdsSelector(),
+    createIsSearchingSelector(),
+    (
+      selectedFilterKey,
+      filters,
+      movieCount,
+      uiSettings,
+      missingEpisodeIds,
+      isSearchingForMissing
+    ) => {
       return {
-        selectedFilterKey: calendar.selectedFilterKey,
-        filters: calendar.filters,
+        selectedFilterKey,
+        filters,
         colorImpairedMode: uiSettings.enableColorImpairedMode,
-        hasSeries: !!seriesCount
+        hasMovie: !!movieCount,
+        missingEpisodeIds,
+        isSearchingForMissing
       };
     }
   );
@@ -23,6 +82,10 @@ function createMapStateToProps() {
 
 function createMapDispatchToProps(dispatch, props) {
   return {
+    onSearchMissingPress(episodeIds) {
+      dispatch(searchMissing({ episodeIds }));
+    },
+
     onDaysCountChange(dayCount) {
       dispatch(setCalendarDaysCount({ dayCount }));
     },
@@ -33,4 +96,6 @@ function createMapDispatchToProps(dispatch, props) {
   };
 }
 
-export default connect(createMapStateToProps, createMapDispatchToProps)(CalendarPage);
+export default withCurrentPage(
+  connect(createMapStateToProps, createMapDispatchToProps)(CalendarPage)
+);

frontend/src/Calendar/Events/CalendarEvent.css

@@ -5,6 +5,10 @@
   border-bottom: 1px solid $borderColor;
   border-left: 4px solid $borderColor;
   font-size: 12px;
+
+  &:global(.colorImpaired) {
+    border-left-width: 5px;
+  }
 }
 
 .info,
@@ -22,7 +26,7 @@
 
 .seriesTitle {
   color: #3a3f51;
-  font-size: 14px;
+  font-size: $defaultFontSize;
 }
 
 .absoluteEpisodeNumber {
@@ -39,6 +43,10 @@
 
 .downloaded {
   border-left-color: $successColor !important;
+
+  &:global(.colorImpaired) {
+    border-left-color: color($successColor, saturation(+15%)) !important;
+  }
 }
 
 .downloading {
@@ -49,7 +57,7 @@
   border-left-color: $gray !important;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(45deg, transparent, transparent 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
+    background: repeating-linear-gradient(45deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
   }
 }
 
@@ -57,7 +65,7 @@
   border-left-color: $warningColor !important;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, transparent, transparent 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
+    background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
   }
 }
 
@@ -65,7 +73,8 @@
   border-left-color: $dangerColor !important;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, transparent, transparent 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
+    border-left-color: color($dangerColor saturation(+15%)) !important;
+    background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
   }
 }
 
@@ -73,6 +82,6 @@
   border-left-color: $primaryColor !important;
 
   &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, transparent, transparent 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
+    background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
   }
 }

frontend/src/Calendar/Events/CalendarEventGroup.css

@@ -18,7 +18,7 @@
   flex: 1 0 1px;
   margin-right: 10px;
   color: #3a3f51;
-  font-size: 14px;
+  font-size: $defaultFontSize;
 }
 
 .airTime {
@@ -58,25 +58,25 @@
  */
 
 .downloaded {
-  composes: downloaded from 'Calendar/Events/CalendarEvent.css';
+  composes: downloaded from '~Calendar/Events/CalendarEvent.css';
 }
 
 .downloading {
-  composes: downloading from 'Calendar/Events/CalendarEvent.css';
+  composes: downloading from '~Calendar/Events/CalendarEvent.css';
 }
 
 .unmonitored {
-  composes: unmonitored from 'Calendar/Events/CalendarEvent.css';
+  composes: unmonitored from '~Calendar/Events/CalendarEvent.css';
 }
 
 .onAir {
-  composes: onAir from 'Calendar/Events/CalendarEvent.css';
+  composes: onAir from '~Calendar/Events/CalendarEvent.css';
 }
 
 .missing {
-  composes: missing from 'Calendar/Events/CalendarEvent.css';
+  composes: missing from '~Calendar/Events/CalendarEvent.css';
 }
 
 .premiere {
-  composes: premiere from 'Calendar/Events/CalendarEvent.css';
+  composes: premiere from '~Calendar/Events/CalendarEvent.css';
 }

frontend/src/Calendar/Header/CalendarHeader.css

@@ -8,7 +8,7 @@
 }
 
 .todayButton {
-  composes: button from 'Components/Link/Button.css';
+  composes: button from '~Components/Link/Button.css';
 
   margin-left: 5px;
 }
@@ -30,13 +30,13 @@
 }
 
 .viewMenu {
-  composes: menu from 'Components/Menu/Menu.css';
+  composes: menu from '~Components/Menu/Menu.css';
 
   line-height: 31px;
 }
 
 .loading {
-  composes: loading from 'Components/Loading/LoadingIndicator.css';
+  composes: loading from '~Components/Loading/LoadingIndicator.css';
 
   margin-top: 5px;
   margin-right: 10px;

frontend/src/Calendar/Header/CalendarHeader.js

@@ -158,6 +158,14 @@ class CalendarHeader extends Component {
                   </MenuButton>
 
                   <MenuContent>
+                    <ViewMenuItem
+                      name={calendarViews.WEEK}
+                      selectedView={view}
+                      onPress={this.onViewChange}
+                    >
+                      Week
+                    </ViewMenuItem>
+
                     <ViewMenuItem
                       name={calendarViews.FORECAST}
                       selectedView={view}
@@ -192,6 +200,27 @@ class CalendarHeader extends Component {
                     onPress={this.onViewChange}
                   />
 
+                  <CalendarHeaderViewButton
+                    view={calendarViews.WEEK}
+                    selectedView={view}
+                    buttonGroupPosition={align.CENTER}
+                    onPress={this.onViewChange}
+                  />
+
+                  <CalendarHeaderViewButton
+                    view={calendarViews.FORECAST}
+                    selectedView={view}
+                    buttonGroupPosition={align.CENTER}
+                    onPress={this.onViewChange}
+                  />
+
+                  <CalendarHeaderViewButton
+                    view={calendarViews.DAY}
+                    selectedView={view}
+                    buttonGroupPosition={align.CENTER}
+                    onPress={this.onViewChange}
+                  />
+
                   <CalendarHeaderViewButton
                     view={calendarViews.AGENDA}
                     selectedView={view}

frontend/src/Calendar/Legend/LegendItem.css

@@ -13,29 +13,29 @@
  */
 
 .downloaded {
-  composes: downloaded from 'Calendar/Events/CalendarEvent.css';
+  composes: downloaded from '~Calendar/Events/CalendarEvent.css';
 }
 
 .downloading {
-  composes: downloading from 'Calendar/Events/CalendarEvent.css';
+  composes: downloading from '~Calendar/Events/CalendarEvent.css';
 }
 
 .unmonitored {
-  composes: unmonitored from 'Calendar/Events/CalendarEvent.css';
+  composes: unmonitored from '~Calendar/Events/CalendarEvent.css';
 }
 
 .onAir {
-  composes: onAir from 'Calendar/Events/CalendarEvent.css';
+  composes: onAir from '~Calendar/Events/CalendarEvent.css';
 }
 
 .missing {
-  composes: missing from 'Calendar/Events/CalendarEvent.css';
+  composes: missing from '~Calendar/Events/CalendarEvent.css';
 }
 
 .premiere {
-  composes: premiere from 'Calendar/Events/CalendarEvent.css';
+  composes: premiere from '~Calendar/Events/CalendarEvent.css';
 }
 
 .unaired {
-  composes: unaired from 'Calendar/Events/CalendarEvent.css';
+  composes: unaired from '~Calendar/Events/CalendarEvent.css';
 }

frontend/src/Calendar/calendarViews.js

@@ -1,4 +1,7 @@
+export const DAY = 'day';
+export const WEEK = 'week';
 export const MONTH = 'month';
+export const FORECAST = 'forecast';
 export const AGENDA = 'agenda';
 
-export const all = [MONTH, AGENDA];
+export const all = [DAY, WEEK, MONTH, FORECAST, AGENDA];

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: inputWrapper from '~Components/Form/PathInput.css';
 
   flex: 0 0 auto;
 }

frontend/src/Components/FileBrowser/FileBrowserModalContentConnector.js

@@ -42,8 +42,8 @@ function createMapStateToProps() {
 }
 
 const mapDispatchToProps = {
-  fetchPaths,
-  clearPaths
+  dispatchFetchPaths: fetchPaths,
+  dispatchClearPaths: clearPaths
 };
 
 class FileBrowserModalContentConnector extends Component {
@@ -51,9 +51,16 @@ class FileBrowserModalContentConnector extends Component {
   // Lifecycle
 
   componentDidMount() {
-    this.props.fetchPaths({
-      path: this.props.value,
-      allowFoldersWithoutTrailingSlashes: true
+    const {
+      value,
+      includeFiles,
+      dispatchFetchPaths
+    } = this.props;
+
+    dispatchFetchPaths({
+      path: value,
+      allowFoldersWithoutTrailingSlashes: true,
+      includeFiles
     });
   }
 
@@ -61,18 +68,24 @@ class FileBrowserModalContentConnector extends Component {
   // Listeners
 
   onFetchPaths = (path) => {
-    this.props.fetchPaths({
+    const {
+      includeFiles,
+      dispatchFetchPaths
+    } = this.props;
+
+    dispatchFetchPaths({
       path,
-      allowFoldersWithoutTrailingSlashes: true
+      allowFoldersWithoutTrailingSlashes: true,
+      includeFiles
     });
   }
 
   onClearPaths = () => {
-    // this.props.clearPaths();
+    // this.props.dispatchClearPaths();
   }
 
   onModalClose = () => {
-    this.props.clearPaths();
+    this.props.dispatchClearPaths();
     this.props.onModalClose();
   }
 
@@ -93,9 +106,14 @@ class FileBrowserModalContentConnector extends Component {
 
 FileBrowserModalContentConnector.propTypes = {
   value: PropTypes.string,
-  fetchPaths: PropTypes.func.isRequired,
-  clearPaths: PropTypes.func.isRequired,
+  includeFiles: PropTypes.bool.isRequired,
+  dispatchFetchPaths: PropTypes.func.isRequired,
+  dispatchClearPaths: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired
 };
 
+FileBrowserModalContentConnector.defaultProps = {
+  includeFiles: false
+};
+
 export default connect(createMapStateToProps, mapDispatchToProps)(FileBrowserModalContentConnector);

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/EnhancedSelectInput.js

@@ -87,6 +87,9 @@ class EnhancedSelectInput extends Component {
   constructor(props, context) {
     super(props, context);
 
+    this._buttonRef = {};
+    this._optionsRef = {};
+
     this.state = {
       isOpen: false,
       selectedIndex: getSelectedIndex(props),
@@ -106,14 +109,6 @@ class EnhancedSelectInput extends Component {
   //
   // Control
 
-  _setButtonRef = (ref) => {
-    this._buttonRef = ref;
-  }
-
-  _setOptionsRef = (ref) => {
-    this._optionsRef = ref;
-  }
-
   _addListener() {
     window.addEventListener('click', this.onWindowClick);
   }
@@ -126,8 +121,8 @@ class EnhancedSelectInput extends Component {
   // Listeners
 
   onWindowClick = (event) => {
-    const button = ReactDOM.findDOMNode(this._buttonRef);
-    const options = ReactDOM.findDOMNode(this._optionsRef);
+    const button = ReactDOM.findDOMNode(this._buttonRef.current);
+    const options = ReactDOM.findDOMNode(this._optionsRef.current);
 
     if (!button || this.state.isMobile) {
       return;
@@ -276,75 +271,91 @@ class EnhancedSelectInput extends Component {
             element: styles.tether
           }}
           {...tetherOptions}
-        >
-          <Measure
-            whitelist={['width']}
-            onMeasure={this.onMeasure}
-          >
-            <Link
-              ref={this._setButtonRef}
-              className={classNames(
-                className,
-                hasError && styles.hasError,
-                hasWarning && styles.hasWarning,
-                isDisabled && disabledClassName
-              )}
-              isDisabled={isDisabled}
-              onBlur={this.onBlur}
-              onKeyDown={this.onKeyDown}
-              onPress={this.onPress}
-            >
-              <SelectedValueComponent
-                {...selectedValueOptions}
-                {...selectedOption}
-                isDisabled={isDisabled}
-              >
-                {selectedOption ? selectedOption.value : null}
-              </SelectedValueComponent>
+          renderTarget={
+            (ref) => {
+              this._buttonRef = ref;
 
-              <div
-                className={isDisabled ?
-                  styles.dropdownArrowContainerDisabled :
-                  styles.dropdownArrowContainer
-                }
-              >
-                <Icon
-                  name={icons.CARET_DOWN}
-                />
-              </div>
-            </Link>
-          </Measure>
+              return (
+                <Measure
+                  whitelist={['width']}
+                  onMeasure={this.onMeasure}
+                >
+                  <div ref={ref}>
+                    <Link
+                      className={classNames(
+                        className,
+                        hasError && styles.hasError,
+                        hasWarning && styles.hasWarning,
+                        isDisabled && disabledClassName
+                      )}
+                      isDisabled={isDisabled}
+                      onBlur={this.onBlur}
+                      onKeyDown={this.onKeyDown}
+                      onPress={this.onPress}
+                    >
+                      <SelectedValueComponent
+                        {...selectedValueOptions}
+                        {...selectedOption}
+                        isDisabled={isDisabled}
+                      >
+                        {selectedOption ? selectedOption.value : null}
+                      </SelectedValueComponent>
 
-          {
-            isOpen && !isMobile &&
-              <div
-                ref={this._setOptionsRef}
-                className={styles.optionsContainer}
-                style={{
-                  minWidth: width
-                }}
-              >
-                <div className={styles.options}>
-                  {
-                    values.map((v, index) => {
-                      return (
-                        <OptionComponent
-                          key={v.key}
-                          id={v.key}
-                          isSelected={index === selectedIndex}
-                          {...v}
-                          isMobile={false}
-                          onSelect={this.onSelect}
-                        >
-                          {v.value}
-                        </OptionComponent>
-                      );
-                    })
-                  }
-                </div>
-              </div>
+                      <div
+                        className={isDisabled ?
+                          styles.dropdownArrowContainerDisabled :
+                          styles.dropdownArrowContainer
+                        }
+                      >
+                        <Icon
+                          name={icons.CARET_DOWN}
+                        />
+                      </div>
+                    </Link>
+                  </div>
+                </Measure>
+              );
+            }
           }
-        </TetherComponent>
+          renderElement={
+            (ref) => {
+              this._optionsRef = ref;
+
+              if (!isOpen || isMobile) {
+                return;
+              }
+
+              return (
+                <div
+                  ref={ref}
+                  className={styles.optionsContainer}
+                  style={{
+                    minWidth: width
+                  }}
+                >
+                  <div className={styles.options}>
+                    {
+                      values.map((v, index) => {
+                        return (
+                          <OptionComponent
+                            key={v.key}
+                            id={v.key}
+                            isSelected={index === selectedIndex}
+                            {...v}
+                            isMobile={false}
+                            onSelect={this.onSelect}
+                          >
+                            {v.value}
+                          </OptionComponent>
+                        );
+                      })
+                    }
+                  </div>
+                </div>
+              );
+            }
+          }
+        />
 
         {
           isMobile &&

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/FormInputGroup.js

@@ -6,6 +6,7 @@ import AutoCompleteInput from './AutoCompleteInput';
 import CaptchaInputConnector from './CaptchaInputConnector';
 import CheckInput from './CheckInput';
 import DeviceInputConnector from './DeviceInputConnector';
+import KeyValueListInput from './KeyValueListInput';
 import NumberInput from './NumberInput';
 import OAuthInputConnector from './OAuthInputConnector';
 import PasswordInput from './PasswordInput';
@@ -34,6 +35,9 @@ function getComponent(type) {
     case inputTypes.DEVICE:
       return DeviceInputConnector;
 
+    case inputTypes.KEY_VALUE_LIST:
+      return KeyValueListInput;
+
     case inputTypes.NUMBER:
       return NumberInput;
 

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

@@ -0,0 +1,21 @@
+.inputContainer {
+  composes: input from '~Components/Form/Input.css';
+
+  position: relative;
+  min-height: 35px;
+  height: auto;
+
+  &.isFocused {
+    outline: 0;
+    border-color: $inputFocusBorderColor;
+    box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor;
+  }
+}
+
+.hasError {
+  composes: hasError from '~Components/Form/Input.css';
+}
+
+.hasWarning {
+  composes: hasWarning from '~Components/Form/Input.css';
+}

frontend/src/Components/Form/KeyValueListInput.js

@@ -0,0 +1,152 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import classNames from 'classnames';
+import KeyValueListInputItem from './KeyValueListInputItem';
+import styles from './KeyValueListInput.css';
+
+class KeyValueListInput extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isFocused: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onItemChange = (index, itemValue) => {
+    const {
+      name,
+      value,
+      onChange
+    } = this.props;
+
+    const newValue = [...value];
+
+    if (index == null) {
+      newValue.push(itemValue);
+    } else {
+      newValue.splice(index, 1, itemValue);
+    }
+
+    onChange({
+      name,
+      value: newValue
+    });
+  }
+
+  onRemoveItem = (index) => {
+    const {
+      name,
+      value,
+      onChange
+    } = this.props;
+
+    const newValue = [...value];
+    newValue.splice(index, 1);
+
+    onChange({
+      name,
+      value: newValue
+    });
+  }
+
+  onFocus = () => {
+    this.setState({
+      isFocused: true
+    });
+  }
+
+  onBlur = () => {
+    this.setState({
+      isFocused: false
+    });
+
+    const {
+      name,
+      value,
+      onChange
+    } = this.props;
+
+    const newValue = value.reduce((acc, v) => {
+      if (v.key || v.value) {
+        acc.push(v);
+      }
+
+      return acc;
+    }, []);
+
+    if (newValue.length !== value.length) {
+      onChange({
+        name,
+        value: newValue
+      });
+    }
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      className,
+      value,
+      keyPlaceholder,
+      valuePlaceholder
+    } = this.props;
+
+    const { isFocused } = this.state;
+
+    return (
+      <div className={classNames(
+        className,
+        isFocused && styles.isFocused
+      )}
+      >
+        {
+          [...value, { key: '', value: '' }].map((v, index) => {
+            return (
+              <KeyValueListInputItem
+                key={index}
+                index={index}
+                keyValue={v.key}
+                value={v.value}
+                keyPlaceholder={keyPlaceholder}
+                valuePlaceholder={valuePlaceholder}
+                isNew={index === value.length}
+                onChange={this.onItemChange}
+                onRemove={this.onRemoveItem}
+                onFocus={this.onFocus}
+                onBlur={this.onBlur}
+              />
+            );
+          })
+        }
+      </div>
+    );
+  }
+}
+
+KeyValueListInput.propTypes = {
+  className: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.arrayOf(PropTypes.object).isRequired,
+  hasError: PropTypes.bool,
+  hasWarning: PropTypes.bool,
+  keyPlaceholder: PropTypes.string,
+  valuePlaceholder: PropTypes.string,
+  onChange: PropTypes.func.isRequired
+};
+
+KeyValueListInput.defaultProps = {
+  className: styles.inputContainer,
+  value: []
+};
+
+export default KeyValueListInput;

frontend/src/Components/Form/KeyValueListInputItem.css

@@ -0,0 +1,14 @@
+.itemContainer {
+  display: flex;
+  margin-bottom: 3px;
+  border-bottom: 1px solid $inputBorderColor;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.keyInput,
+.valueInput {
+  border: none;
+}

frontend/src/Components/Form/KeyValueListInputItem.js

@@ -0,0 +1,117 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { icons } from 'Helpers/Props';
+import IconButton from 'Components/Link/IconButton';
+import TextInput from './TextInput';
+import styles from './KeyValueListInputItem.css';
+
+class KeyValueListInputItem extends Component {
+
+  //
+  // Listeners
+
+  onKeyChange = ({ value: keyValue }) => {
+    const {
+      index,
+      value,
+      onChange
+    } = this.props;
+
+    onChange(index, { key: keyValue, value });
+  }
+
+  onValueChange = ({ value }) => {
+    // TODO: Validate here or validate at a lower level component
+
+    const {
+      index,
+      keyValue,
+      onChange
+    } = this.props;
+
+    onChange(index, { key: keyValue, value });
+  }
+
+  onRemovePress = () => {
+    const {
+      index,
+      onRemove
+    } = this.props;
+
+    onRemove(index);
+  }
+
+  onFocus = () => {
+    this.props.onFocus();
+  }
+
+  onBlur = () => {
+    this.props.onBlur();
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      keyValue,
+      value,
+      keyPlaceholder,
+      valuePlaceholder,
+      isNew
+    } = this.props;
+
+    return (
+      <div className={styles.itemContainer}>
+        <TextInput
+          className={styles.keyInput}
+          name="key"
+          value={keyValue}
+          placeholder={keyPlaceholder}
+          onChange={this.onKeyChange}
+          onFocus={this.onFocus}
+          onBlur={this.onBlur}
+        />
+
+        <TextInput
+          className={styles.valueInput}
+          name="value"
+          value={value}
+          placeholder={valuePlaceholder}
+          onChange={this.onValueChange}
+          onFocus={this.onFocus}
+          onBlur={this.onBlur}
+        />
+
+        {
+          !isNew &&
+            <IconButton
+              name={icons.REMOVE}
+              tabIndex={-1}
+              onPress={this.onRemovePress}
+            />
+        }
+      </div>
+    );
+  }
+}
+
+KeyValueListInputItem.propTypes = {
+  index: PropTypes.number,
+  keyValue: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  keyPlaceholder: PropTypes.string.isRequired,
+  valuePlaceholder: PropTypes.string.isRequired,
+  isNew: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onRemove: PropTypes.func.isRequired,
+  onFocus: PropTypes.func.isRequired,
+  onBlur: PropTypes.func.isRequired
+};
+
+KeyValueListInputItem.defaultProps = {
+  keyPlaceholder: 'Key',
+  valuePlaceholder: 'Value'
+};
+
+export default KeyValueListInputItem;

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/PathInput.js

@@ -111,6 +111,7 @@ class PathInput extends Component {
       value,
       placeholder,
       paths,
+      includeFiles,
       hasError,
       hasWarning,
       hasFileBrowser,
@@ -171,6 +172,7 @@ class PathInput extends Component {
                 isOpen={this.state.isFileBrowserModalOpen}
                 name={name}
                 value={value}
+                includeFiles={includeFiles}
                 onChange={onChange}
                 onModalClose={this.onFileBrowserModalClose}
               />
@@ -188,6 +190,7 @@ PathInput.propTypes = {
   value: PropTypes.string,
   placeholder: PropTypes.string,
   paths: PropTypes.array.isRequired,
+  includeFiles: PropTypes.bool.isRequired,
   hasError: PropTypes.bool,
   hasWarning: PropTypes.bool,
   hasFileBrowser: PropTypes.bool,

frontend/src/Components/Form/PathInputConnector.js

@@ -28,8 +28,8 @@ function createMapStateToProps() {
 }
 
 const mapDispatchToProps = {
-  fetchPaths,
-  clearPaths
+  dispatchFetchPaths: fetchPaths,
+  dispatchClearPaths: clearPaths
 };
 
 class PathInputConnector extends Component {
@@ -38,11 +38,19 @@ class PathInputConnector extends Component {
   // Listeners
 
   onFetchPaths = (path) => {
-    this.props.fetchPaths({ path });
+    const {
+      includeFiles,
+      dispatchFetchPaths
+    } = this.props;
+
+    dispatchFetchPaths({
+      path,
+      includeFiles
+    });
   }
 
   onClearPaths = () => {
-    this.props.clearPaths();
+    this.props.dispatchClearPaths();
   }
 
   //
@@ -60,8 +68,13 @@ class PathInputConnector extends Component {
 }
 
 PathInputConnector.propTypes = {
-  fetchPaths: PropTypes.func.isRequired,
-  clearPaths: PropTypes.func.isRequired
+  includeFiles: PropTypes.bool.isRequired,
+  dispatchFetchPaths: PropTypes.func.isRequired,
+  dispatchClearPaths: PropTypes.func.isRequired
+};
+
+PathInputConnector.defaultProps = {
+  includeFiles: false
 };
 
 export default connect(createMapStateToProps, mapDispatchToProps)(PathInputConnector);

frontend/src/Components/Form/ProviderFieldFormGroup.js

@@ -20,6 +20,8 @@ function getType(type) {
       return inputTypes.NUMBER;
     case 'path':
       return inputTypes.PATH;
+    case 'filepath':
+      return inputTypes.PATH;
     case 'select':
       return inputTypes.SELECT;
     case 'tag':
@@ -84,7 +86,7 @@ function ProviderFieldFormGroup(props) {
         errors={errors}
         warnings={warnings}
         pending={pending}
-        hasFileBrowser={false}
+        includeFiles={type === 'filepath' ? true : undefined}
         onChange={onChange}
         {...otherProps}
       />

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/Icon.js

@@ -1,11 +1,15 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { PureComponent } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { kinds } from 'Helpers/Props';
 import classNames from 'classnames';
 import styles from './Icon.css';
 
-class Icon extends React.PureComponent {
+class Icon extends PureComponent {
+
+  //
+  // Render
+
   render() {
     const {
       containerClassName,

frontend/src/Components/InfoLabel.css

@@ -0,0 +1,40 @@
+.label {
+  display: inline-block;
+  margin: 2px;
+  color: $white;
+  /** text-align: center; **/
+  white-space: nowrap;
+  line-height: 1;
+  cursor: default;
+}
+
+.title {
+  margin-bottom: 2px;
+  color: $helpTextColor;
+  font-size: 10px;
+}
+
+/** Kinds **/
+
+/** Sizes **/
+
+.small {
+  padding: 1px 3px;
+  font-size: 11px;
+}
+
+.medium {
+  padding: 2px 5px;
+  font-size: 12px;
+}
+
+.large {
+  padding: 3px 7px;
+  font-size: 14px;
+}
+
+/** Outline **/
+
+.outline {
+  background-color: $white;
+}

frontend/src/Components/InfoLabel.js

@@ -0,0 +1,54 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import { kinds, sizes } from 'Helpers/Props';
+import styles from './InfoLabel.css';
+
+function InfoLabel(props) {
+  const {
+    className,
+    title,
+    kind,
+    size,
+    outline,
+    children,
+    ...otherProps
+  } = props;
+
+  return (
+    <span
+      className={classNames(
+        className,
+        styles[kind],
+        styles[size],
+        outline && styles.outline
+      )}
+      {...otherProps}
+    >
+      <div className={styles.title}>
+        {title}
+      </div>
+      <div>
+        {children}
+      </div>
+    </span>
+  );
+}
+
+InfoLabel.propTypes = {
+  className: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  kind: PropTypes.oneOf(kinds.all).isRequired,
+  size: PropTypes.oneOf(sizes.all).isRequired,
+  outline: PropTypes.bool.isRequired,
+  children: PropTypes.node.isRequired
+};
+
+InfoLabel.defaultProps = {
+  className: styles.label,
+  kind: kinds.DEFAULT,
+  size: sizes.SMALL,
+  outline: false
+};
+
+export default InfoLabel;

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/Loading/LoadingMessage.js

@@ -6,9 +6,13 @@ const messages = [
   // TODO Add some messages here
 ];
 
+let message = null;
+
 function LoadingMessage() {
-  const index = Math.floor(Math.random() * messages.length);
-  const message = messages[index];
+  if (!message) {
+    const index = Math.floor(Math.random() * messages.length);
+    message = messages[index];
+  }
 
   return (
     <div className={styles.loadingMessage}>

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/Menu.js

@@ -38,6 +38,9 @@ class Menu extends Component {
   constructor(props, context) {
     super(props, context);
 
+    this._menuRef = {};
+    this._menuContentRef = {};
+
     this.state = {
       isMenuOpen: false,
       maxHeight: 0
@@ -60,7 +63,7 @@ class Menu extends Component {
       return;
     }
 
-    const menu = ReactDOM.findDOMNode(this.refs.menu);
+    const menu = ReactDOM.findDOMNode(this._menuRef.current);
 
     if (!menu) {
       return;
@@ -73,9 +76,13 @@ class Menu extends Component {
   }
 
   setMaxHeight() {
-    this.setState({
-      maxHeight: this.getMaxHeight()
-    });
+    const maxHeight = this.getMaxHeight();
+
+    if (maxHeight !== this.state.maxHeight) {
+      this.setState({
+        maxHeight
+      });
+    }
   }
 
   _addListener() {
@@ -99,10 +106,10 @@ class Menu extends Component {
   // Listeners
 
   onWindowClick = (event) => {
-    const menu = ReactDOM.findDOMNode(this.refs.menu);
-    const menuContent = ReactDOM.findDOMNode(this.refs.menuContent);
+    const menu = ReactDOM.findDOMNode(this._menuRef.current);
+    const menuContent = ReactDOM.findDOMNode(this._menuContentRef.current);
 
-    if (!menu) {
+    if (!menu || !menuContent) {
       return;
     }
 
@@ -116,7 +123,17 @@ class Menu extends Component {
     this.setMaxHeight();
   }
 
-  onWindowScroll = () => {
+  onWindowScroll = (event) => {
+    if (!this._menuContentRef.current) {
+      return;
+    }
+
+    const menuContent = ReactDOM.findDOMNode(this._menuContentRef.current);
+
+    if (menuContent && menuContent.contains(event.target)) {
+      return;
+    }
+
     this.setMaxHeight();
   }
 
@@ -158,35 +175,46 @@ class Menu extends Component {
       }
     );
 
-    const content = React.cloneElement(
-      childrenArray[1],
-      {
-        ref: 'menuContent',
-        alignMenu,
-        maxHeight,
-        isOpen: isMenuOpen
-      }
-    );
-
     return (
       <TetherComponent
         classes={{
           element: styles.tether
         }}
         {...tetherOptions[alignMenu]}
-      >
-        <div
-          ref="menu"
-          className={className}
-        >
-          {button}
-        </div>
+        renderTarget={
+          (ref) => {
+            this._menuRef = ref;
 
-        {
-          isMenuOpen &&
-            content
+            return (
+              <div
+                ref={ref}
+                className={className}
+              >
+                {button}
+              </div>
+            );
+          }
         }
-      </TetherComponent>
+        renderElement={
+          (ref) => {
+            this._menuContentRef = ref;
+
+            if (!isMenuOpen) {
+              return null;
+            }
+
+            return React.cloneElement(
+              childrenArray[1],
+              {
+                ref,
+                alignMenu,
+                maxHeight,
+                isOpen: isMenuOpen
+              }
+            );
+          }
+        }
+      />
     );
   }
 }

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,11 +1,16 @@
 .menuButton {
-  composes: menuButton from './MenuButton.css';
+  composes: menuButton from '~./MenuButton.css';
 
+  padding-top: 4px;
   width: $toolbarButtonWidth;
   height: $toolbarHeight;
   text-align: center;
 }
 
-.label {
-  composes: label from 'Components/Page/Toolbar/PageToolbarButton.css';
+.labelContainer {
+  composes: labelContainer from '~Components/Page/Toolbar/PageToolbarButton.css';
+}
+
+.label {
+  composes: label from '~Components/Page/Toolbar/PageToolbarButton.css';
 }

frontend/src/Components/Menu/ToolbarMenuButton.js

@@ -22,8 +22,10 @@ function ToolbarMenuButton(props) {
           size={21}
         />
 
-        <div className={styles.label}>
-          {text}
+        <div className={styles.labelContainer}>
+          <div className={styles.label}>
+            {text}
+          </div>
         </div>
       </div>
     </MenuButton>

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/ErrorPage.js

@@ -11,7 +11,8 @@ function ErrorPage(props) {
     customFiltersError,
     tagsError,
     qualityProfilesError,
-    uiSettingsError
+    uiSettingsError,
+    systemStatusError
   } = props;
 
   let errorMessage = 'Failed to load Radarr';
@@ -28,6 +29,8 @@ function ErrorPage(props) {
     errorMessage = getErrorMessage(qualityProfilesError, 'Failed to load quality profiles from API');
   } else if (uiSettingsError) {
     errorMessage = getErrorMessage(uiSettingsError, 'Failed to load UI settings from API');
+  } else if (systemStatusError) {
+    errorMessage = getErrorMessage(uiSettingsError, 'Failed to load system status from API');
   }
 
   return (
@@ -50,7 +53,8 @@ ErrorPage.propTypes = {
   customFiltersError: PropTypes.object,
   tagsError: PropTypes.object,
   qualityProfilesError: PropTypes.object,
-  uiSettingsError: PropTypes.object
+  uiSettingsError: PropTypes.object,
+  systemStatusError: PropTypes.object
 };
 
 export default ErrorPage;

frontend/src/Components/Page/Header/MovieSearchInput.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Autosuggest from 'react-autosuggest';
-import jdu from 'jdu';
+import Fuse from 'fuse.js';
 import { icons } from 'Helpers/Props';
 import Icon from 'Components/Icon';
 import keyboardShortcuts, { shortcuts } from 'Components/keyboardShortcuts';
@@ -10,6 +10,21 @@ import styles from './MovieSearchInput.css';
 
 const ADD_NEW_TYPE = 'addNew';
 
+const fuseOptions = {
+  shouldSort: true,
+  includeMatches: true,
+  threshold: 0.3,
+  location: 0,
+  distance: 100,
+  maxPatternLength: 32,
+  minMatchCharLength: 1,
+  keys: [
+    'title',
+    'alternateTitles.title',
+    'tags.label'
+  ]
+};
+
 class MovieSearchInput extends Component {
 
   //
@@ -69,16 +84,15 @@ class MovieSearchInput extends Component {
 
     return (
       <MovieSearchResult
-        query={query}
-        cleanQuery={jdu.replace(query).toLowerCase()}
-        {...item}
+        {...item.item}
+        match={item.matches[0]}
       />
     );
   }
 
-  goToMovie(movie) {
+  goToMovie(item) {
     this.setState({ value: '' });
-    this.props.onGoToMovie(movie.titleSlug);
+    this.props.onGoToMovie(item.item.titleSlug);
   }
 
   reset() {
@@ -140,26 +154,8 @@ class MovieSearchInput extends Component {
   }
 
   onSuggestionsFetchRequested = ({ value }) => {
-    const lowerCaseValue = jdu.replace(value).toLowerCase();
-
-    const suggestions = this.props.movie.filter((movie) => {
-      // Check the title first and if there isn't a match fallback to
-      // the alternate titles and finally the tags.
-
-      if (value.length === 1) {
-        return (
-          movie.cleanTitle.startsWith(lowerCaseValue) ||
-          movie.alternateTitles.some((alternateTitle) => alternateTitle.cleanTitle.startsWith(lowerCaseValue)) ||
-          movie.tags.some((tag) => tag.cleanLabel.startsWith(lowerCaseValue))
-        );
-      }
-
-      return (
-        movie.cleanTitle.contains(lowerCaseValue) ||
-        movie.alternateTitles.some((alternateTitle) => alternateTitle.cleanTitle.contains(lowerCaseValue)) ||
-        movie.tags.some((tag) => tag.cleanLabel.contains(lowerCaseValue))
-      );
-    });
+    const fuse = new Fuse(this.props.movies, fuseOptions);
+    const suggestions = fuse.search(value);
 
     this.setState({ suggestions });
   }
@@ -209,7 +205,7 @@ class MovieSearchInput extends Component {
     const inputProps = {
       ref: this.setInputRef,
       className: styles.input,
-      name: 'seriesSearch',
+      name: 'movieSearch',
       value,
       placeholder: 'Search',
       autoComplete: 'off',
@@ -255,7 +251,7 @@ class MovieSearchInput extends Component {
 }
 
 MovieSearchInput.propTypes = {
-  movie: PropTypes.arrayOf(PropTypes.object).isRequired,
+  movies: PropTypes.arrayOf(PropTypes.object).isRequired,
   onGoToMovie: PropTypes.func.isRequired,
   onGoToAddNewMovie: PropTypes.func.isRequired,
   bindShortcut: PropTypes.func.isRequired

frontend/src/Components/Page/Header/MovieSearchInputConnector.js

@@ -1,35 +1,14 @@
 import { connect } from 'react-redux';
-import { push } from 'react-router-redux';
+import { push } from 'connected-react-router';
 import { createSelector } from 'reselect';
-import jdu from 'jdu';
 import createAllMoviesSelector from 'Store/Selectors/createAllMoviesSelector';
 import createTagsSelector from 'Store/Selectors/createTagsSelector';
 import MovieSearchInput from './MovieSearchInput';
 
-function createCleanTagsSelector() {
-  return createSelector(
-    createTagsSelector(),
-    (tags) => {
-      return tags.map((tag) => {
-        const {
-          id,
-          label
-        } = tag;
-
-        return {
-          id,
-          label,
-          cleanLabel: jdu.replace(label).toLowerCase()
-        };
-      });
-    }
-  );
-}
-
 function createCleanMovieSelector() {
   return createSelector(
     createAllMoviesSelector(),
-    createCleanTagsSelector(),
+    createTagsSelector(),
     (allMovies, allTags) => {
       return allMovies.map((movie) => {
         const {
@@ -46,27 +25,11 @@ function createCleanMovieSelector() {
           titleSlug,
           sortTitle,
           images,
-          cleanTitle: jdu.replace(title).toLowerCase(),
-          alternateTitles: alternateTitles.map((alternateTitle) => {
-            return {
-              title: alternateTitle.title,
-              sortTitle: alternateTitle.sortTitle,
-              cleanTitle: jdu.replace(alternateTitle.title).toLowerCase()
-            };
-          }),
+          alternateTitles,
           tags: tags.map((id) => {
             return allTags.find((tag) => tag.id === id);
           })
         };
-      }).sort((a, b) => {
-        if (a.sortTitle < b.sortTitle) {
-          return -1;
-        }
-        if (a.sortTitle > b.sortTitle) {
-          return 1;
-        }
-
-        return 0;
       });
     }
   );
@@ -75,9 +38,9 @@ function createCleanMovieSelector() {
 function createMapStateToProps() {
   return createSelector(
     createCleanMovieSelector(),
-    (movie) => {
+    (movies) => {
       return {
-        movie
+        movies
       };
     }
   );

frontend/src/Components/Page/Header/MovieSearchResult.js

@@ -5,38 +5,22 @@ import Label from 'Components/Label';
 import MoviePoster from 'Movie/MoviePoster';
 import styles from './MovieSearchResult.css';
 
-function findMatchingAlternateTitle(alternateTitles, cleanQuery) {
-  return alternateTitles.find((alternateTitle) => {
-    return alternateTitle.cleanTitle.contains(cleanQuery);
-  });
-}
-
-function getMatchingTag(tags, cleanQuery) {
-  return tags.find((tag) => {
-    return tag.cleanLabel.contains(cleanQuery);
-  });
-}
-
 function MovieSearchResult(props) {
   const {
-    cleanQuery,
+    match,
     title,
-    cleanTitle,
     images,
     alternateTitles,
     tags
   } = props;
 
-  const titleContains = cleanTitle.contains(cleanQuery);
   let alternateTitle = null;
   let tag = null;
 
-  if (!titleContains) {
-    alternateTitle = findMatchingAlternateTitle(alternateTitles, cleanQuery);
-  }
-
-  if (!titleContains && !alternateTitle) {
-    tag = getMatchingTag(tags, cleanQuery);
+  if (match.key === 'alternateTitles.cleanTitle') {
+    alternateTitle = alternateTitles[match.arrayIndex];
+  } else if (match.key === 'tags.label') {
+    tag = tags[match.arrayIndex];
   }
 
   return (
@@ -55,14 +39,15 @@ function MovieSearchResult(props) {
         </div>
 
         {
-          !!alternateTitle &&
+          alternateTitle ?
             <div className={styles.alternateTitle}>
               {alternateTitle.title}
-            </div>
+            </div> :
+            null
         }
 
         {
-          !!tag &&
+          tag ?
             <div className={styles.tagContainer}>
               <Label
                 key={tag.id}
@@ -70,7 +55,8 @@ function MovieSearchResult(props) {
               >
                 {tag.label}
               </Label>
-            </div>
+            </div> :
+            null
         }
       </div>
     </div>
@@ -78,12 +64,11 @@ function MovieSearchResult(props) {
 }
 
 MovieSearchResult.propTypes = {
-  cleanQuery: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
-  cleanTitle: PropTypes.string.isRequired,
   images: PropTypes.arrayOf(PropTypes.object).isRequired,
   alternateTitles: PropTypes.arrayOf(PropTypes.object).isRequired,
-  tags: PropTypes.arrayOf(PropTypes.object).isRequired
+  tags: PropTypes.arrayOf(PropTypes.object).isRequired,
+  match: PropTypes.object.isRequired
 };
 
 export default MovieSearchResult;

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/PageConnector.js

@@ -27,54 +27,103 @@ function testLocalStorage() {
   }
 }
 
+const selectAppProps = createSelector(
+  (state) => state.app.isSidebarVisible,
+  (state) => state.app.version,
+  (state) => state.app.isUpdated,
+  (state) => state.app.isDisconnected,
+  (isSidebarVisible, version, isUpdated, isDisconnected) => {
+    return {
+      isSidebarVisible,
+      version,
+      isUpdated,
+      isDisconnected
+    };
+  }
+);
+
+const selectIsPopulated = createSelector(
+  (state) => state.movies.isPopulated,
+  (state) => state.customFilters.isPopulated,
+  (state) => state.tags.isPopulated,
+  (state) => state.settings.ui.isPopulated,
+  (state) => state.settings.qualityProfiles.isPopulated,
+  (state) => state.system.status.isPopulated,
+  (
+    moviesIsPopulated,
+    customFiltersIsPopulated,
+    tagsIsPopulated,
+    uiSettingsIsPopulated,
+    qualityProfilesIsPopulated,
+    systemStatusIsPopulated
+  ) => {
+    return (
+      moviesIsPopulated &&
+      customFiltersIsPopulated &&
+      tagsIsPopulated &&
+      uiSettingsIsPopulated &&
+      qualityProfilesIsPopulated &&
+      systemStatusIsPopulated
+    );
+  }
+);
+
+const selectErrors = createSelector(
+  (state) => state.movies.error,
+  (state) => state.customFilters.error,
+  (state) => state.tags.error,
+  (state) => state.settings.ui.error,
+  (state) => state.settings.qualityProfiles.error,
+  (state) => state.system.status.error,
+  (
+    moviesError,
+    customFiltersError,
+    tagsError,
+    uiSettingsError,
+    qualityProfilesError,
+    systemStatusError
+  ) => {
+    const hasError = !!(
+      moviesError ||
+      customFiltersError ||
+      tagsError ||
+      uiSettingsError ||
+      qualityProfilesError ||
+      systemStatusError
+    );
+
+    return {
+      hasError,
+      moviesError,
+      customFiltersError,
+      tagsError,
+      uiSettingsError,
+      qualityProfilesError,
+      systemStatusError
+    };
+  }
+);
+
 function createMapStateToProps() {
   return createSelector(
-    (state) => state.movies,
-    (state) => state.customFilters,
-    (state) => state.tags,
-    (state) => state.settings.ui,
-    (state) => state.settings.qualityProfiles,
-    (state) => state.app,
+    (state) => state.settings.ui.item.enableColorImpairedMode,
+    selectIsPopulated,
+    selectErrors,
+    selectAppProps,
     createDimensionsSelector(),
     (
-      movies,
-      customFilters,
-      tags,
-      uiSettings,
-      qualityProfiles,
+      enableColorImpairedMode,
+      isPopulated,
+      errors,
       app,
       dimensions
     ) => {
-      const isPopulated = (
-        movies.isPopulated &&
-        customFilters.isPopulated &&
-        tags.isPopulated &&
-        qualityProfiles.isPopulated &&
-        uiSettings.isPopulated
-      );
-
-      const hasError = !!(
-        movies.error ||
-        customFilters.error ||
-        tags.error ||
-        qualityProfiles.error ||
-        uiSettings.error
-      );
-
       return {
+        ...app,
+        ...errors,
         isPopulated,
-        hasError,
-        moviesError: movies.error,
-        customFiltersError: tags.error,
-        tagsError: tags.error,
-        qualityProfilesError: qualityProfiles.error,
-        uiSettingsError: uiSettings.error,
         isSmallScreen: dimensions.isSmallScreen,
-        isSidebarVisible: app.isSidebarVisible,
-        enableColorImpairedMode: uiSettings.item.enableColorImpairedMode,
-        version: app.version,
-        isUpdated: app.isUpdated,
-        isDisconnected: app.isDisconnected
+        enableColorImpairedMode
       };
     }
   );

frontend/src/Components/Page/PageContentError.css

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