New: Allow major version updates to be installed

frontend/src/App/AppRoutes.js

@@ -30,7 +30,7 @@ import LogsTableConnector from 'System/Events/LogsTableConnector';
 import Logs from 'System/Logs/Logs';
 import Status from 'System/Status/Status';
 import Tasks from 'System/Tasks/Tasks';
-import UpdatesConnector from 'System/Updates/UpdatesConnector';
+import Updates from 'System/Updates/Updates';
 import getPathWithUrlBase from 'Utilities/getPathWithUrlBase';
 import CutoffUnmetConnector from 'Wanted/CutoffUnmet/CutoffUnmetConnector';
 import MissingConnector from 'Wanted/Missing/MissingConnector';
@@ -248,7 +248,7 @@ function AppRoutes(props) {
 
       <Route
         path="/system/updates"
-        component={UpdatesConnector}
+        component={Updates}
       />
 
       <Route

frontend/src/App/State/AppState.ts

@@ -46,6 +46,7 @@ export interface CustomFilter {
 }
 
 export interface AppSectionState {
+  version: string;
   dimensions: {
     isSmallScreen: boolean;
     width: number;

frontend/src/App/State/SettingsAppState.ts

@@ -14,13 +14,16 @@ import Indexer from 'typings/Indexer';
 import IndexerFlag from 'typings/IndexerFlag';
 import Notification from 'typings/Notification';
 import QualityProfile from 'typings/QualityProfile';
-import { UiSettings } from 'typings/UiSettings';
+import General from 'typings/Settings/General';
+import UiSettings from 'typings/Settings/UiSettings';
 
 export interface DownloadClientAppState
   extends AppSectionState<DownloadClient>,
     AppSectionDeleteState,
     AppSectionSaveState {}
 
+export type GeneralAppState = AppSectionItemState<General>;
+
 export interface ImportListAppState
   extends AppSectionState<ImportList>,
     AppSectionDeleteState,
@@ -58,6 +61,7 @@ export type UiSettingsAppState = AppSectionItemState<UiSettings>;
 interface SettingsAppState {
   advancedSettings: boolean;
   downloadClients: DownloadClientAppState;
+  general: GeneralAppState;
   importListExclusions: ImportListExclusionsSettingsAppState;
   importListOptions: ImportListOptionsSettingsAppState;
   importLists: ImportListAppState;

frontend/src/App/State/SystemAppState.ts

@@ -1,9 +1,12 @@
 import SystemStatus from 'typings/SystemStatus';
-import { AppSectionItemState } from './AppSectionState';
+import Update from 'typings/Update';
+import AppSectionState, { AppSectionItemState } from './AppSectionState';
 
 export type SystemStatusAppState = AppSectionItemState<SystemStatus>;
+export type UpdateAppState = AppSectionState<Update>;
 
 interface SystemAppState {
+  updates: UpdateAppState;
   status: SystemStatusAppState;
 }
 

frontend/src/Series/Index/Overview/SeriesIndexOverviewInfo.tsx

@@ -5,7 +5,7 @@ import { icons } from 'Helpers/Props';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import dimensions from 'Styles/Variables/dimensions';
 import QualityProfile from 'typings/QualityProfile';
-import { UiSettings } from 'typings/UiSettings';
+import UiSettings from 'typings/Settings/UiSettings';
 import formatDateTime from 'Utilities/Date/formatDateTime';
 import getRelativeDate from 'Utilities/Date/getRelativeDate';
 import formatBytes from 'Utilities/Number/formatBytes';

frontend/src/System/Updates/UpdateChanges.js

@@ -1,46 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
-import styles from './UpdateChanges.css';
-
-class UpdateChanges extends Component {
-
-  //
-  // Render
-
-  render() {
-    const {
-      title,
-      changes
-    } = this.props;
-
-    if (changes.length === 0) {
-      return null;
-    }
-
-    return (
-      <div>
-        <div className={styles.title}>{title}</div>
-        <ul>
-          {
-            changes.map((change, index) => {
-              return (
-                <li key={index}>
-                  <InlineMarkdown data={change} />
-                </li>
-              );
-            })
-          }
-        </ul>
-      </div>
-    );
-  }
-
-}
-
-UpdateChanges.propTypes = {
-  title: PropTypes.string.isRequired,
-  changes: PropTypes.arrayOf(PropTypes.string)
-};
-
-export default UpdateChanges;

frontend/src/System/Updates/UpdateChanges.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
+import styles from './UpdateChanges.css';
+
+interface UpdateChangesProps {
+  title: string;
+  changes: string[];
+}
+
+function UpdateChanges(props: UpdateChangesProps) {
+  const { title, changes } = props;
+
+  if (changes.length === 0) {
+    return null;
+  }
+
+  return (
+    <div>
+      <div className={styles.title}>{title}</div>
+      <ul>
+        {changes.map((change, index) => {
+          return (
+            <li key={index}>
+              <InlineMarkdown data={change} />
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+export default UpdateChanges;

frontend/src/System/Updates/Updates.js

@@ -1,249 +0,0 @@
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React, { Component, Fragment } from 'react';
-import Alert from 'Components/Alert';
-import Icon from 'Components/Icon';
-import Label from 'Components/Label';
-import SpinnerButton from 'Components/Link/SpinnerButton';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
-import PageContent from 'Components/Page/PageContent';
-import PageContentBody from 'Components/Page/PageContentBody';
-import { icons, kinds } from 'Helpers/Props';
-import formatDate from 'Utilities/Date/formatDate';
-import formatDateTime from 'Utilities/Date/formatDateTime';
-import translate from 'Utilities/String/translate';
-import UpdateChanges from './UpdateChanges';
-import styles from './Updates.css';
-
-class Updates extends Component {
-
-  //
-  // Render
-
-  render() {
-    const {
-      currentVersion,
-      isFetching,
-      isPopulated,
-      updatesError,
-      generalSettingsError,
-      items,
-      isInstallingUpdate,
-      updateMechanism,
-      updateMechanismMessage,
-      shortDateFormat,
-      longDateFormat,
-      timeFormat,
-      onInstallLatestPress
-    } = this.props;
-
-    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;
-
-    const externalUpdaterPrefix = translate('UpdateSonarrDirectlyLoadError');
-    const externalUpdaterMessages = {
-      external: translate('ExternalUpdater'),
-      apt: translate('AptUpdater'),
-      docker: translate('DockerUpdater')
-    };
-
-    return (
-      <PageContent title={translate('Updates')}>
-        <PageContentBody>
-          {
-            !isPopulated && !hasError &&
-              <LoadingIndicator />
-          }
-
-          {
-            noUpdates &&
-              <Alert kind={kinds.INFO}>
-                {translate('NoUpdatesAreAvailable')}
-              </Alert>
-          }
-
-          {
-            hasUpdateToInstall &&
-              <div className={styles.messageContainer}>
-                {
-                  updateMechanism === 'builtIn' || updateMechanism === 'script' ?
-                    <SpinnerButton
-                      className={styles.updateAvailable}
-                      kind={kinds.PRIMARY}
-                      isSpinning={isInstallingUpdate}
-                      onPress={onInstallLatestPress}
-                    >
-                      {translate('InstallLatest')}
-                    </SpinnerButton> :
-
-                    <Fragment>
-                      <Icon
-                        name={icons.WARNING}
-                        kind={kinds.WARNING}
-                        size={30}
-                      />
-
-                      <div className={styles.message}>
-                        {externalUpdaterPrefix} <InlineMarkdown data={updateMechanismMessage || externalUpdaterMessages[updateMechanism] || externalUpdaterMessages.external} />
-                      </div>
-                    </Fragment>
-                }
-
-                {
-                  isFetching &&
-                    <LoadingIndicator
-                      className={styles.loading}
-                      size={20}
-                    />
-                }
-              </div>
-          }
-
-          {
-            noUpdateToInstall &&
-              <div className={styles.messageContainer}>
-                <Icon
-                  className={styles.upToDateIcon}
-                  name={icons.CHECK_CIRCLE}
-                  size={30}
-                />
-                <div className={styles.message}>
-                  {translate('OnLatestVersion')}
-                </div>
-
-                {
-                  isFetching &&
-                    <LoadingIndicator
-                      className={styles.loading}
-                      size={20}
-                    />
-                }
-              </div>
-          }
-
-          {
-            hasUpdates &&
-              <div>
-                {
-                  items.map((update) => {
-                    const hasChanges = !!update.changes;
-
-                    return (
-                      <div
-                        key={update.version}
-                        className={styles.update}
-                      >
-                        <div className={styles.info}>
-                          <div className={styles.version}>{update.version}</div>
-                          <div className={styles.space}>&mdash;</div>
-                          <div
-                            className={styles.date}
-                            title={formatDateTime(update.releaseDate, longDateFormat, timeFormat)}
-                          >
-                            {formatDate(update.releaseDate, shortDateFormat)}
-                          </div>
-
-                          {
-                            update.branch === 'main' ?
-                              null :
-                              <Label
-                                className={styles.label}
-                              >
-                                {update.branch}
-                              </Label>
-                          }
-
-                          {
-                            update.version === currentVersion ?
-                              <Label
-                                className={styles.label}
-                                kind={kinds.SUCCESS}
-                                title={formatDateTime(update.installedOn, longDateFormat, timeFormat)}
-                              >
-                                {translate('CurrentlyInstalled')}
-                              </Label> :
-                              null
-                          }
-
-                          {
-                            update.version !== currentVersion && update.installedOn ?
-                              <Label
-                                className={styles.label}
-                                kind={kinds.INVERSE}
-                                title={formatDateTime(update.installedOn, longDateFormat, timeFormat)}
-                              >
-                                {translate('PreviouslyInstalled')}
-                              </Label> :
-                              null
-                          }
-                        </div>
-
-                        {
-                          !hasChanges &&
-                            <div>
-                              {translate('MaintenanceRelease')}
-                            </div>
-                        }
-
-                        {
-                          hasChanges &&
-                            <div className={styles.changes}>
-                              <UpdateChanges
-                                title={translate('New')}
-                                changes={update.changes.new}
-                              />
-
-                              <UpdateChanges
-                                title={translate('Fixed')}
-                                changes={update.changes.fixed}
-                              />
-                            </div>
-                        }
-                      </div>
-                    );
-                  })
-                }
-              </div>
-          }
-
-          {
-            !!updatesError &&
-              <div>
-                {translate('FailedToFetchUpdates')}
-              </div>
-          }
-
-          {
-            !!generalSettingsError &&
-              <div>
-                {translate('FailedToUpdateSettings')}
-              </div>
-          }
-        </PageContentBody>
-      </PageContent>
-    );
-  }
-
-}
-
-Updates.propTypes = {
-  currentVersion: PropTypes.string.isRequired,
-  isFetching: PropTypes.bool.isRequired,
-  isPopulated: PropTypes.bool.isRequired,
-  updatesError: PropTypes.object,
-  generalSettingsError: PropTypes.object,
-  items: PropTypes.array.isRequired,
-  isInstallingUpdate: PropTypes.bool.isRequired,
-  updateMechanism: PropTypes.string,
-  updateMechanismMessage: PropTypes.string,
-  shortDateFormat: PropTypes.string.isRequired,
-  longDateFormat: PropTypes.string.isRequired,
-  timeFormat: PropTypes.string.isRequired,
-  onInstallLatestPress: PropTypes.func.isRequired
-};
-
-export default Updates;

frontend/src/System/Updates/Updates.tsx

@@ -0,0 +1,305 @@
+import React, {
+  Fragment,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import * as commandNames from 'Commands/commandNames';
+import Alert from 'Components/Alert';
+import Icon from 'Components/Icon';
+import Label from 'Components/Label';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import { icons, kinds } from 'Helpers/Props';
+import { executeCommand } from 'Store/Actions/commandActions';
+import { fetchGeneralSettings } from 'Store/Actions/settingsActions';
+import { fetchUpdates } from 'Store/Actions/systemActions';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import { UpdateMechanism } from 'typings/Settings/General';
+import formatDate from 'Utilities/Date/formatDate';
+import formatDateTime from 'Utilities/Date/formatDateTime';
+import translate from 'Utilities/String/translate';
+import UpdateChanges from './UpdateChanges';
+import styles from './Updates.css';
+
+const VERSION_REGEX = /\d+\.\d+\.\d+\.\d+/i;
+
+function createUpdatesSelector() {
+  return createSelector(
+    (state: AppState) => state.system.updates,
+    (state: AppState) => state.settings.general,
+    (updates, generalSettings) => {
+      const { error: updatesError, items } = updates;
+
+      const isFetching = updates.isFetching || generalSettings.isFetching;
+      const isPopulated = updates.isPopulated && generalSettings.isPopulated;
+
+      return {
+        isFetching,
+        isPopulated,
+        updatesError,
+        generalSettingsError: generalSettings.error,
+        items,
+        updateMechanism: generalSettings.item.updateMechanism,
+      };
+    }
+  );
+}
+
+function Updates() {
+  const currentVersion = useSelector((state: AppState) => state.app.version);
+  const { packageUpdateMechanismMessage } = useSelector(
+    createSystemStatusSelector()
+  );
+  const { shortDateFormat, longDateFormat, timeFormat } = useSelector(
+    createUISettingsSelector()
+  );
+  const isInstallingUpdate = useSelector(
+    createCommandExecutingSelector(commandNames.APPLICATION_UPDATE)
+  );
+
+  const {
+    isFetching,
+    isPopulated,
+    updatesError,
+    generalSettingsError,
+    items,
+    updateMechanism,
+  } = useSelector(createUpdatesSelector());
+
+  const dispatch = useDispatch();
+  const [isMajorUpdateModalOpen, setIsMajorUpdateModalOpen] = useState(false);
+  const hasError = !!(updatesError || generalSettingsError);
+  const hasUpdates = isPopulated && !hasError && items.length > 0;
+  const noUpdates = isPopulated && !hasError && !items.length;
+
+  const externalUpdaterPrefix = translate('UpdateSonarrDirectlyLoadError');
+  const externalUpdaterMessages: Partial<Record<UpdateMechanism, string>> = {
+    external: translate('ExternalUpdater'),
+    apt: translate('AptUpdater'),
+    docker: translate('DockerUpdater'),
+  };
+
+  const { isMajorUpdate, hasUpdateToInstall } = useMemo(() => {
+    const majorVersion = parseInt(
+      currentVersion.match(VERSION_REGEX)?.[0] ?? '0'
+    );
+
+    const latestVersion = items[0]?.version;
+    const latestMajorVersion = parseInt(
+      latestVersion?.match(VERSION_REGEX)?.[0] ?? '0'
+    );
+
+    return {
+      isMajorUpdate: latestMajorVersion > majorVersion,
+      hasUpdateToInstall: items.some(
+        (update) => update.installable && update.latest
+      ),
+    };
+  }, [currentVersion, items]);
+
+  const noUpdateToInstall = hasUpdates && !hasUpdateToInstall;
+
+  const handleInstallLatestPress = useCallback(() => {
+    if (isMajorUpdate) {
+      setIsMajorUpdateModalOpen(true);
+    } else {
+      dispatch(executeCommand({ name: commandNames.APPLICATION_UPDATE }));
+    }
+  }, [isMajorUpdate, setIsMajorUpdateModalOpen, dispatch]);
+
+  const handleInstallLatestMajorVersionPress = useCallback(() => {
+    setIsMajorUpdateModalOpen(false);
+
+    dispatch(
+      executeCommand({
+        name: commandNames.APPLICATION_UPDATE,
+        installMajorUpdate: true,
+      })
+    );
+  }, [setIsMajorUpdateModalOpen, dispatch]);
+
+  const handleCancelMajorVersionPress = useCallback(() => {
+    setIsMajorUpdateModalOpen(false);
+  }, [setIsMajorUpdateModalOpen]);
+
+  useEffect(() => {
+    dispatch(fetchUpdates());
+    dispatch(fetchGeneralSettings());
+  }, [dispatch]);
+
+  return (
+    <PageContent title={translate('Updates')}>
+      <PageContentBody>
+        {isPopulated || hasError ? null : <LoadingIndicator />}
+
+        {noUpdates ? (
+          <Alert kind={kinds.INFO}>{translate('NoUpdatesAreAvailable')}</Alert>
+        ) : null}
+
+        {hasUpdateToInstall ? (
+          <div className={styles.messageContainer}>
+            {updateMechanism === 'builtIn' || updateMechanism === 'script' ? (
+              <SpinnerButton
+                kind={kinds.PRIMARY}
+                isSpinning={isInstallingUpdate}
+                onPress={handleInstallLatestPress}
+              >
+                {translate('InstallLatest')}
+              </SpinnerButton>
+            ) : (
+              <Fragment>
+                <Icon name={icons.WARNING} kind={kinds.WARNING} size={30} />
+
+                <div className={styles.message}>
+                  {externalUpdaterPrefix}{' '}
+                  <InlineMarkdown
+                    data={
+                      packageUpdateMechanismMessage ||
+                      externalUpdaterMessages[updateMechanism] ||
+                      externalUpdaterMessages.external
+                    }
+                  />
+                </div>
+              </Fragment>
+            )}
+
+            {isFetching ? (
+              <LoadingIndicator className={styles.loading} size={20} />
+            ) : null}
+          </div>
+        ) : null}
+
+        {noUpdateToInstall && (
+          <div className={styles.messageContainer}>
+            <Icon
+              className={styles.upToDateIcon}
+              name={icons.CHECK_CIRCLE}
+              size={30}
+            />
+            <div className={styles.message}>{translate('OnLatestVersion')}</div>
+
+            {isFetching && (
+              <LoadingIndicator className={styles.loading} size={20} />
+            )}
+          </div>
+        )}
+
+        {hasUpdates && (
+          <div>
+            {items.map((update) => {
+              const hasChanges = !!update.changes;
+
+              return (
+                <div key={update.version} className={styles.update}>
+                  <div className={styles.info}>
+                    <div className={styles.version}>{update.version}</div>
+                    <div className={styles.space}>&mdash;</div>
+                    <div
+                      className={styles.date}
+                      title={formatDateTime(
+                        update.releaseDate,
+                        longDateFormat,
+                        timeFormat
+                      )}
+                    >
+                      {formatDate(update.releaseDate, shortDateFormat)}
+                    </div>
+
+                    {update.branch === 'main' ? null : (
+                      <Label className={styles.label}>{update.branch}</Label>
+                    )}
+
+                    {update.version === currentVersion ? (
+                      <Label
+                        className={styles.label}
+                        kind={kinds.SUCCESS}
+                        title={formatDateTime(
+                          update.installedOn,
+                          longDateFormat,
+                          timeFormat
+                        )}
+                      >
+                        {translate('CurrentlyInstalled')}
+                      </Label>
+                    ) : null}
+
+                    {update.version !== currentVersion && update.installedOn ? (
+                      <Label
+                        className={styles.label}
+                        kind={kinds.INVERSE}
+                        title={formatDateTime(
+                          update.installedOn,
+                          longDateFormat,
+                          timeFormat
+                        )}
+                      >
+                        {translate('PreviouslyInstalled')}
+                      </Label>
+                    ) : null}
+                  </div>
+
+                  {hasChanges ? (
+                    <div>
+                      <UpdateChanges
+                        title={translate('New')}
+                        changes={update.changes.new}
+                      />
+
+                      <UpdateChanges
+                        title={translate('Fixed')}
+                        changes={update.changes.fixed}
+                      />
+                    </div>
+                  ) : (
+                    <div>{translate('MaintenanceRelease')}</div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        {updatesError ? <div>{translate('FailedToFetchUpdates')}</div> : null}
+
+        {generalSettingsError ? (
+          <div>{translate('FailedToUpdateSettings')}</div>
+        ) : null}
+
+        <ConfirmModal
+          isOpen={isMajorUpdateModalOpen}
+          kind={kinds.WARNING}
+          title={translate('InstallMajorVersionUpdate')}
+          message={
+            <div>
+              <div>{translate('InstallMajorVersionUpdateMessage')}</div>
+              <div>
+                <InlineMarkdown
+                  data={translate('InstallMajorVersionUpdateMessageLink', {
+                    domain: 'sonarr.tv',
+                    url: 'https://sonarr.tv/#downloads',
+                  })}
+                />
+              </div>
+            </div>
+          }
+          confirmLabel={translate('Install')}
+          onConfirm={handleInstallLatestMajorVersionPress}
+          onCancel={handleCancelMajorVersionPress}
+        />
+      </PageContentBody>
+    </PageContent>
+  );
+}
+
+export default Updates;

frontend/src/System/Updates/UpdatesConnector.js

@@ -1,98 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import * as commandNames from 'Commands/commandNames';
-import { executeCommand } from 'Store/Actions/commandActions';
-import { fetchGeneralSettings } from 'Store/Actions/settingsActions';
-import { fetchUpdates } from 'Store/Actions/systemActions';
-import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
-import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
-import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
-import Updates from './Updates';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.app.version,
-    createSystemStatusSelector(),
-    (state) => state.system.updates,
-    (state) => state.settings.general,
-    createUISettingsSelector(),
-    createCommandExecutingSelector(commandNames.APPLICATION_UPDATE),
-    (
-      currentVersion,
-      status,
-      updates,
-      generalSettings,
-      uiSettings,
-      isInstallingUpdate
-    ) => {
-      const {
-        error: updatesError,
-        items
-      } = updates;
-
-      const isFetching = updates.isFetching || generalSettings.isFetching;
-      const isPopulated = updates.isPopulated && generalSettings.isPopulated;
-
-      return {
-        currentVersion,
-        isFetching,
-        isPopulated,
-        updatesError,
-        generalSettingsError: generalSettings.error,
-        items,
-        isInstallingUpdate,
-        updateMechanism: generalSettings.item.updateMechanism,
-        updateMechanismMessage: status.packageUpdateMechanismMessage,
-        shortDateFormat: uiSettings.shortDateFormat,
-        longDateFormat: uiSettings.longDateFormat,
-        timeFormat: uiSettings.timeFormat
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  dispatchFetchUpdates: fetchUpdates,
-  dispatchFetchGeneralSettings: fetchGeneralSettings,
-  dispatchExecuteCommand: executeCommand
-};
-
-class UpdatesConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidMount() {
-    this.props.dispatchFetchUpdates();
-    this.props.dispatchFetchGeneralSettings();
-  }
-
-  //
-  // Listeners
-
-  onInstallLatestPress = () => {
-    this.props.dispatchExecuteCommand({ name: commandNames.APPLICATION_UPDATE });
-  };
-
-  //
-  // Render
-
-  render() {
-    return (
-      <Updates
-        onInstallLatestPress={this.onInstallLatestPress}
-        {...this.props}
-      />
-    );
-  }
-}
-
-UpdatesConnector.propTypes = {
-  dispatchFetchUpdates: PropTypes.func.isRequired,
-  dispatchFetchGeneralSettings: PropTypes.func.isRequired,
-  dispatchExecuteCommand: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(UpdatesConnector);

frontend/src/typings/Settings/General.ts

@@ -0,0 +1,45 @@
+export type UpdateMechanism =
+  | 'builtIn'
+  | 'script'
+  | 'external'
+  | 'apt'
+  | 'docker';
+
+export default interface General {
+  bindAddress: string;
+  port: number;
+  sslPort: number;
+  enableSsl: boolean;
+  launchBrowser: boolean;
+  authenticationMethod: string;
+  authenticationRequired: string;
+  analyticsEnabled: boolean;
+  username: string;
+  password: string;
+  passwordConfirmation: string;
+  logLevel: string;
+  consoleLogLevel: string;
+  branch: string;
+  apiKey: string;
+  sslCertPath: string;
+  sslCertPassword: string;
+  urlBase: string;
+  instanceName: string;
+  applicationUrl: string;
+  updateAutomatically: boolean;
+  updateMechanism: UpdateMechanism;
+  updateScriptPath: string;
+  proxyEnabled: boolean;
+  proxyType: string;
+  proxyHostname: string;
+  proxyPort: number;
+  proxyUsername: string;
+  proxyPassword: string;
+  proxyBypassFilter: string;
+  proxyBypassLocalAddresses: boolean;
+  certificateValidation: string;
+  backupFolder: string;
+  backupInterval: number;
+  backupRetention: number;
+  id: number;
+}

frontend/src/typings/Settings/UiSettings.ts

@@ -1,4 +1,4 @@
-export interface UiSettings {
+export default interface UiSettings {
   theme: 'auto' | 'dark' | 'light';
   showRelativeDates: boolean;
   shortDateFormat: string;

frontend/src/typings/SystemStatus.ts

@@ -19,6 +19,7 @@ interface SystemStatus {
   osName: string;
   osVersion: string;
   packageUpdateMechanism: string;
+  packageUpdateMechanismMessage: string;
   runtimeName: string;
   runtimeVersion: string;
   sqliteVersion: string;

frontend/src/typings/Update.ts

@@ -0,0 +1,20 @@
+export interface Changes {
+  new: string[];
+  fixed: string[];
+}
+
+interface Update {
+  version: string;
+  branch: string;
+  releaseDate: string;
+  fileName: string;
+  url: string;
+  installed: boolean;
+  installedOn: string;
+  installable: boolean;
+  latest: boolean;
+  changes: Changes;
+  hash: string;
+}
+
+export default Update;

src/NzbDrone.Core/Localization/Core/en.json

@@ -1023,7 +1023,11 @@
   "IndexersSettingsSummary": "Indexers and indexer options",
   "Info": "Info",
   "InfoUrl": "Info URL",
+  "Install": "Install",
   "InstallLatest": "Install Latest",
+  "InstallMajorVersionUpdate": "Install Update",
+  "InstallMajorVersionUpdateMessage": "This update will install a new major version and may not be compatible with your system. Are you sure you want to install this update?",
+  "InstallMajorVersionUpdateMessageLink": "Please check [{domain}]({url}) for more information.",
   "InstanceName": "Instance Name",
   "InstanceNameHelpText": "Instance name in tab and for Syslog app name",
   "InteractiveImport": "Interactive Import",

src/NzbDrone.Core/Update/Commands/ApplicationUpdateCheckCommand.cs

@@ -7,5 +7,7 @@ namespace NzbDrone.Core.Update.Commands
         public override bool SendUpdatesToClient => true;
 
         public override string CompletionMessage => null;
+
+        public bool InstallMajorUpdate { get; set; }
     }
 }

src/NzbDrone.Core/Update/Commands/ApplicationUpdateCommand.cs

@@ -4,6 +4,7 @@ namespace NzbDrone.Core.Update.Commands
 {
     public class ApplicationUpdateCommand : Command
     {
+        public bool InstallMajorUpdate { get; set; }
         public override bool SendUpdatesToClient => true;
         public override bool IsExclusive => true;
     }

src/NzbDrone.Core/Update/InstallUpdateService.cs

@@ -231,7 +231,7 @@ namespace NzbDrone.Core.Update
             }
         }
 
-        private UpdatePackage GetUpdatePackage(CommandTrigger updateTrigger)
+        private UpdatePackage GetUpdatePackage(CommandTrigger updateTrigger, bool installMajorUpdate)
         {
             _logger.ProgressDebug("Checking for updates");
 
@@ -243,7 +243,13 @@ namespace NzbDrone.Core.Update
                 return null;
             }
 
-            if (OsInfo.IsNotWindows && !_configFileProvider.UpdateAutomatically && updateTrigger != CommandTrigger.Manual)
+            if (latestAvailable.Version.Major > BuildInfo.Version.Major && !installMajorUpdate)
+            {
+                _logger.ProgressInfo("Unable to install major update, please update update manually from System: Updates");
+                return null;
+            }
+
+            if (!_configFileProvider.UpdateAutomatically && updateTrigger != CommandTrigger.Manual)
             {
                 _logger.ProgressDebug("Auto-update not enabled, not installing available update.");
                 return null;
@@ -272,7 +278,7 @@ namespace NzbDrone.Core.Update
 
         public void Execute(ApplicationUpdateCheckCommand message)
         {
-            if (GetUpdatePackage(message.Trigger) != null)
+            if (GetUpdatePackage(message.Trigger, true) != null)
             {
                 _commandQueueManager.Push(new ApplicationUpdateCommand(), trigger: message.Trigger);
             }
@@ -280,7 +286,7 @@ namespace NzbDrone.Core.Update
 
         public void Execute(ApplicationUpdateCommand message)
         {
-            var latestAvailable = GetUpdatePackage(message.Trigger);
+            var latestAvailable = GetUpdatePackage(message.Trigger, message.InstallMajorUpdate);
 
             if (latestAvailable != null)
             {

src/NzbDrone.Core/Update/UpdateCheckService.cs

@@ -1,4 +1,4 @@
-using NzbDrone.Common.EnvironmentInfo;
+using NzbDrone.Common.EnvironmentInfo;
 using NzbDrone.Core.Configuration;
 
 namespace NzbDrone.Core.Update

src/NzbDrone.Core/Update/UpdatePackageProvider.cs

@@ -42,6 +42,7 @@ namespace NzbDrone.Core.Update
                                          .AddQueryParam("runtime", "netcore")
                                          .AddQueryParam("runtimeVer", _platformInfo.Version)
                                          .AddQueryParam("dbType", _mainDatabase.DatabaseType)
+                                         .AddQueryParam("includeMajorVersion", true)
                                          .SetSegment("branch", branch);
 
             if (_analyticsService.IsEnabled)