Update UI

Squash into v3 UI
6 years ago · aafa9cb6be
parent dbdb8e4436
commit aafa9cb6be
6 changed files with 122 additions and 76 deletions
--- a/frontend/src/Settings/General/GeneralSettings.js
+++ b/frontend/src/Settings/General/GeneralSettings.js
@ -99,6 +99,7 @@ class GeneralSettings extends Component {
      isMono,
      isWindows,
      mode,
+      packageUpdateMechanism,
      onInputChange,
      onConfirmResetApiKey,
      ...otherProps
@ -161,6 +162,7 @@ class GeneralSettings extends Component {
                  advancedSettings={advancedSettings}
                  settings={settings}
                  isMono={isMono}
+                  packageUpdateMechanism={packageUpdateMechanism}
                  onInputChange={onInputChange}
                />

@ -202,6 +204,7 @@ GeneralSettings.propTypes = {
  isMono: PropTypes.bool.isRequired,
  isWindows: PropTypes.bool.isRequired,
  mode: PropTypes.string.isRequired,
+  packageUpdateMechanism: PropTypes.string.isRequired,
  onInputChange: PropTypes.func.isRequired,
  onConfirmResetApiKey: PropTypes.func.isRequired,
  onConfirmRestart: PropTypes.func.isRequired
--- a/frontend/src/Settings/General/GeneralSettingsConnector.js
+++ b/frontend/src/Settings/General/GeneralSettingsConnector.js
@ -27,6 +27,7 @@ function createMapStateToProps() {
        isMono: systemStatus.isMono,
        isWindows: systemStatus.isWindows,
        mode: systemStatus.mode,
+        packageUpdateMechanism: systemStatus.packageUpdateMechanism,
        ...sectionSettings
      };
    }
--- a/frontend/src/Settings/General/UpdateSettings.js
+++ b/frontend/src/Settings/General/UpdateSettings.js
@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import titleCase from 'Utilities/String/titleCase';
 import { inputTypes, sizes } from 'Helpers/Props';
 import FieldSet from 'Components/FieldSet';
 import FormGroup from 'Components/Form/FormGroup';
@ -11,6 +12,7 @@ function UpdateSettings(props) {
    advancedSettings,
    settings,
    isMono,
+    packageUpdateMechanism,
    onInputChange
  } = props;

@ -30,6 +32,13 @@ function UpdateSettings(props) {
    { key: 'script', value: 'Script' }
  ];

+  if (packageUpdateMechanism !== 'builtIn') {
+    updateOptions.push({
+      key: packageUpdateMechanism,
+      value: titleCase(packageUpdateMechanism)
+    });
+  }
+
  return (
    <FieldSet legend="Updates">
      <FormGroup
@ -50,58 +59,58 @@ function UpdateSettings(props) {

      {
        isMono &&
-        <div>
-          <FormGroup
-            advancedSettings={advancedSettings}
-            isAdvanced={true}
-            size={sizes.MEDIUM}
-          >
-            <FormLabel>Automatic</FormLabel>
-
-            <FormInputGroup
-              type={inputTypes.CHECK}
-              name="updateAutomatically"
-              helpText="Automatically download and install updates. You will still be able to install from System: Updates"
-              onChange={onInputChange}
-              {...updateAutomatically}
-            />
-          </FormGroup>
-
-          <FormGroup
-            advancedSettings={advancedSettings}
-            isAdvanced={true}
-          >
-            <FormLabel>Mechanism</FormLabel>
+          <div>
+            <FormGroup
+              advancedSettings={advancedSettings}
+              isAdvanced={true}
+              size={sizes.MEDIUM}
+            >
+              <FormLabel>Automatic</FormLabel>

-            <FormInputGroup
-              type={inputTypes.SELECT}
-              name="updateMechanism"
-              values={updateOptions}
-              helpText="Use Sonarr's built-in updater or a script"
-              helpLink="https://github.com/Sonarr/Sonarr/wiki/Updating"
-              onChange={onInputChange}
-              {...updateMechanism}
-            />
-          </FormGroup>
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="updateAutomatically"
+                helpText="Automatically download and install updates. You will still be able to install from System: Updates"
+                onChange={onInputChange}
+                {...updateAutomatically}
+              />
+            </FormGroup>

-          {
-            updateMechanism.value === 'script' &&
            <FormGroup
              advancedSettings={advancedSettings}
              isAdvanced={true}
            >
-              <FormLabel>Script Path</FormLabel>
+              <FormLabel>Mechanism</FormLabel>

              <FormInputGroup
-                type={inputTypes.TEXT}
-                name="updateScriptPath"
-                helpText="Path to a custom script that takes an extracted update package and handle the remainder of the update process"
+                type={inputTypes.SELECT}
+                name="updateMechanism"
+                values={updateOptions}
+                helpText="Use Sonarr's built-in updater or a script"
+                helpLink="https://github.com/Sonarr/Sonarr/wiki/Updating"
                onChange={onInputChange}
-                {...updateScriptPath}
+                {...updateMechanism}
              />
            </FormGroup>
-          }
-        </div>
+
+            {
+              updateMechanism.value === 'script' &&
+              <FormGroup
+                advancedSettings={advancedSettings}
+                isAdvanced={true}
+              >
+                <FormLabel>Script Path</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.TEXT}
+                  name="updateScriptPath"
+                  helpText="Path to a custom script that takes an extracted update package and handle the remainder of the update process"
+                  onChange={onInputChange}
+                  {...updateScriptPath}
+                />
+              </FormGroup>
+            }
+          </div>
      }
    </FieldSet>
  );
@ -111,6 +120,7 @@ UpdateSettings.propTypes = {
  advancedSettings: PropTypes.bool.isRequired,
  settings: PropTypes.object.isRequired,
  isMono: PropTypes.bool.isRequired,
+  packageUpdateMechanism: PropTypes.string.isRequired,
  onInputChange: PropTypes.func.isRequired
 };

--- a/frontend/src/System/Updates/Updates.css
+++ b/frontend/src/System/Updates/Updates.css
@ -1,8 +1,4 @@
-.updateAvailable {
-  display: flex;
-}
-
-.upToDate {
+.messageContainer {
  display: flex;
  margin-bottom: 20px;
 }
@ -12,7 +8,7 @@
  font-size: 30px;
 }

-.upToDateMessage {
+.message {
  padding-left: 5px;
  font-size: 18px;
  line-height: 30px;
--- a/frontend/src/System/Updates/Updates.js
+++ b/frontend/src/System/Updates/Updates.js
@ -1,6 +1,6 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { icons, kinds } from 'Helpers/Props';
 import formatDate from 'Utilities/Date/formatDate';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
@ -21,15 +21,18 @@ class Updates extends Component {
    const {
      isFetching,
      isPopulated,
-      error,
+      updatesError,
+      generalSettingsError,
      items,
      isInstallingUpdate,
+      updateMechanism,
      shortDateFormat,
      onInstallLatestPress
    } = this.props;

-    const hasUpdates = isPopulated && !error && items.length > 0;
-    const noUpdates = isPopulated && !error && !items.length;
+    const hasError = !!(updatesError || generalSettingsError);
+    const hasUpdates = isPopulated && !hasError && items.length > 0;
+    const noUpdates = isPopulated && !hasError && !items.length;
    const hasUpdateToInstall = hasUpdates && _.some(items, { installable: true, latest: true });
    const noUpdateToInstall = hasUpdates && !hasUpdateToInstall;

@ -37,7 +40,7 @@ class Updates extends Component {
      <PageContent title="Updates">
        <PageContentBodyConnector>
          {
-            !isPopulated && !error &&
+            !isPopulated && !hasError &&
              <LoadingIndicator />
          }

@ -48,15 +51,30 @@ class Updates extends Component {

          {
            hasUpdateToInstall &&
-              <div className={styles.updateAvailable}>
-                <SpinnerButton
-                  className={styles.updateAvailable}
-                  kind={kinds.PRIMARY}
-                  isSpinning={isInstallingUpdate}
-                  onPress={onInstallLatestPress}
-                >
-                  Install Latest
-                </SpinnerButton>
+              <div className={styles.messageContainer}>
+                {
+                  updateMechanism === 'builtIn' || updateMechanism === 'script' ?
+                    <SpinnerButton
+                      className={styles.updateAvailable}
+                      kind={kinds.PRIMARY}
+                      isSpinning={isInstallingUpdate}
+                      onPress={onInstallLatestPress}
+                    >
+                      Install Latest
+                    </SpinnerButton> :
+
+                    <Fragment>
+                      <Icon
+                        name={icons.WARNING}
+                        kind={kinds.WARNING}
+                        size={30}
+                      />
+
+                      <div className={styles.message}>
+                        Unable to update Sonarr. Sonarr is configured to use an external update mechanism
+                      </div>
+                    </Fragment>
+                }

                {
                  isFetching &&
@ -70,13 +88,14 @@ class Updates extends Component {

          {
            noUpdateToInstall &&
-              <div className={styles.upToDate}>
+              <div className={styles.messageContainer}>
                <Icon
                  className={styles.upToDateIcon}
                  name={icons.CHECK_CIRCLE}
                  size={30}
                />
-                <div className={styles.upToDateMessage}>
+
+                <div className={styles.message}>
                  The latest version of Sonarr is already installed
                </div>

@ -144,11 +163,18 @@ class Updates extends Component {
          }

          {
-            !!error &&
+            !!updatesError &&
              <div>
                Failed to fetch updates
              </div>
          }
+
+          {
+            !!generalSettingsError &&
+              <div>
+                Failed to update settings
+              </div>
+          }
        </PageContentBodyConnector>
      </PageContent>
    );
@ -159,9 +185,11 @@ class Updates extends Component {
 Updates.propTypes = {
  isFetching: PropTypes.bool.isRequired,
  isPopulated: PropTypes.bool.isRequired,
-  error: PropTypes.object,
+  updatesError: PropTypes.object,
+  generalSettingsError: PropTypes.object,
  items: PropTypes.array.isRequired,
  isInstallingUpdate: PropTypes.bool.isRequired,
+  updateMechanism: PropTypes.string.isRequired,
  shortDateFormat: PropTypes.string.isRequired,
  onInstallLatestPress: PropTypes.func.isRequired
 };
--- a/frontend/src/System/Updates/UpdatesConnector.js
+++ b/frontend/src/System/Updates/UpdatesConnector.js
@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import { fetchGeneralSettings } from 'Store/Actions/settingsActions';
 import { fetchUpdates } from 'Store/Actions/systemActions';
 import { executeCommand } from 'Store/Actions/commandActions';
 import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
@ -12,22 +13,26 @@ import Updates from './Updates';
 function createMapStateToProps() {
  return createSelector(
    (state) => state.system.updates,
+    (state) => state.settings.general,
    createUISettingsSelector(),
    createCommandExecutingSelector(commandNames.APPLICATION_UPDATE),
-    (updates, uiSettings, isInstallingUpdate) => {
+    (updates, generalSettings, uiSettings, isInstallingUpdate) => {
      const {
-        isFetching,
-        isPopulated,
-        error,
+        error: updatesError,
        items
      } = updates;

+      const isFetching = updates.isFetching || generalSettings.isFetching;
+      const isPopulated = updates.isPopulated && generalSettings.isPopulated;
+
      return {
        isFetching,
        isPopulated,
-        error,
+        updatesError,
+        generalSettingsError: generalSettings.error,
        items,
        isInstallingUpdate,
+        updateMechanism: generalSettings.item.updateMechanism,
        shortDateFormat: uiSettings.shortDateFormat
      };
    }
@ -35,8 +40,9 @@ function createMapStateToProps() {
 }

 const mapDispatchToProps = {
-  fetchUpdates,
-  executeCommand
+  dispatchFetchUpdates: fetchUpdates,
+  dispatchFetchGeneralSettings: fetchGeneralSettings,
+  dispatchExecuteCommand: executeCommand
 };

 class UpdatesConnector extends Component {
@ -45,14 +51,15 @@ class UpdatesConnector extends Component {
  // Lifecycle

  componentDidMount() {
-    this.props.fetchUpdates();
+    this.props.dispatchFetchUpdates();
+    this.props.dispatchFetchGeneralSettings();
  }

  //
  // Listeners

  onInstallLatestPress = () => {
-    this.props.executeCommand({ name: commandNames.APPLICATION_UPDATE });
+    this.props.dispatchExecuteCommand({ name: commandNames.APPLICATION_UPDATE });
  }

  //
@ -69,8 +76,9 @@ class UpdatesConnector extends Component {
 }

 UpdatesConnector.propTypes = {
-  fetchUpdates: PropTypes.func.isRequired,
-  executeCommand: PropTypes.func.isRequired
+  dispatchFetchUpdates: PropTypes.func.isRequired,
+  dispatchFetchGeneralSettings: PropTypes.func.isRequired,
+  dispatchExecuteCommand: PropTypes.func.isRequired
 };

 export default connect(createMapStateToProps, mapDispatchToProps)(UpdatesConnector);