New: Allow major version updates to be installed

(cherry picked from commit 0e95ba2021b23cc65bce0a0620dd48e355250dab)

frontend/src/App/AppRoutes.js

@@ -32,7 +32,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 UnmappedFilesTableConnector from 'UnmappedFiles/UnmappedFilesTableConnector';
 import getPathWithUrlBase from 'Utilities/getPathWithUrlBase';
 import CutoffUnmetConnector from 'Wanted/CutoffUnmet/CutoffUnmetConnector';
@@ -247,7 +247,7 @@ function AppRoutes(props) {
 
       <Route
         path="/system/updates"
-        component={UpdatesConnector}
+        component={Updates}
       />
 
       <Route

frontend/src/App/State/AppState.ts

@@ -1,6 +1,7 @@
 import AuthorsAppState from './AuthorsAppState';
 import CommandAppState from './CommandAppState';
 import SettingsAppState from './SettingsAppState';
+import SystemAppState from './SystemAppState';
 import TagsAppState from './TagsAppState';
 
 interface FilterBuilderPropOption {
@@ -35,10 +36,24 @@ export interface CustomFilter {
   filers: PropertyFilter[];
 }
 
+export interface AppSectionState {
+  isConnected: boolean;
+  isReconnecting: boolean;
+  version: string;
+  prevVersion?: string;
+  dimensions: {
+    isSmallScreen: boolean;
+    width: number;
+    height: number;
+  };
+}
+
 interface AppState {
+  app: AppSectionState;
   authors: AuthorsAppState;
   commands: CommandAppState;
   settings: SettingsAppState;
+  system: SystemAppState;
   tags: TagsAppState;
 }
 

frontend/src/App/State/SettingsAppState.ts

@@ -1,5 +1,6 @@
 import AppSectionState, {
   AppSectionDeleteState,
+  AppSectionItemState,
   AppSectionSaveState,
 } from 'App/State/AppSectionState';
 import DownloadClient from 'typings/DownloadClient';
@@ -7,13 +8,16 @@ import ImportList from 'typings/ImportList';
 import Indexer from 'typings/Indexer';
 import IndexerFlag from 'typings/IndexerFlag';
 import Notification from 'typings/Notification';
-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,
@@ -33,11 +37,12 @@ export type UiSettingsAppState = AppSectionState<UiSettings>;
 
 interface SettingsAppState {
   downloadClients: DownloadClientAppState;
+  general: GeneralAppState;
   importLists: ImportListAppState;
   indexerFlags: IndexerFlagSettingsAppState;
   indexers: IndexerAppState;
   notifications: NotificationAppState;
-  uiSettings: UiSettingsAppState;
+  ui: UiSettingsAppState;
 }
 
 export default SettingsAppState;

frontend/src/App/State/SystemAppState.ts

@@ -0,0 +1,13 @@
+import SystemStatus from 'typings/SystemStatus';
+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;
+}
+
+export default SystemAppState;

frontend/src/System/Updates/UpdateChanges.js

@@ -1,50 +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) => {
-              const checkChange = change.replace(/#\d{4,5}\b/g, (match, contents) => {
-                return `[${match}](https://github.com/Readarr/Readarr/issues/${match.substring(1)})`;
-              });
-
-              return (
-                <li key={index}>
-                  <InlineMarkdown data={checkChange} />
-                </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,43 @@
+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;
+  }
+
+  const uniqueChanges = [...new Set(changes)];
+
+  return (
+    <div>
+      <div className={styles.title}>{title}</div>
+      <ul>
+        {uniqueChanges.map((change, index) => {
+          const checkChange = change.replace(
+            /#\d{4,5}\b/g,
+            (match) =>
+              `[${match}](https://github.com/Readarr/Readarr/issues/${match.substring(
+                1
+              )})`
+          );
+
+          return (
+            <li key={index}>
+              <InlineMarkdown data={checkChange} />
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+export default UpdateChanges;

frontend/src/System/Updates/Updates.js

@@ -1,252 +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,
-      isDocker,
-      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 = 'Unable to update Readarr directly,';
-    const externalUpdaterMessages = {
-      external: 'Readarr is configured to use an external update mechanism',
-      apt: 'use apt to install the update',
-      docker: 'update the docker container to receive the update'
-    };
-
-    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') && !isDocker ?
-                    <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}>
-                        {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}>
-                  The latest version of Readarr is already installed
-                </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 === 'master' ?
-                              null :
-                              <Label
-                                className={styles.label}
-                              >
-                                {update.branch}
-                              </Label>
-                          }
-
-                          {
-                            update.version === currentVersion ?
-                              <Label
-                                className={styles.label}
-                                kind={kinds.SUCCESS}
-                                title={formatDateTime(update.installedOn, longDateFormat, timeFormat)}
-                              >
-                                Currently Installed
-                              </Label> :
-                              null
-                          }
-
-                          {
-                            update.version !== currentVersion && update.installedOn ?
-                              <Label
-                                className={styles.label}
-                                kind={kinds.INVERSE}
-                                title={formatDateTime(update.installedOn, longDateFormat, timeFormat)}
-                              >
-                                Previously Installed
-                              </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>
-                Failed to fetch updates
-              </div>
-          }
-
-          {
-            !!generalSettingsError &&
-              <div>
-                Failed to update settings
-              </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,
-  isDocker: 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,303 @@
+import React, { 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('UpdateAppDirectlyLoadError');
+  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>
+            ) : (
+              <>
+                <Icon name={icons.WARNING} kind={kinds.WARNING} size={30} />
+
+                <div className={styles.message}>
+                  {externalUpdaterPrefix}{' '}
+                  <InlineMarkdown
+                    data={
+                      packageUpdateMechanismMessage ||
+                      externalUpdaterMessages[updateMechanism] ||
+                      externalUpdaterMessages.external
+                    }
+                  />
+                </div>
+              </>
+            )}
+
+            {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) => {
+              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 === 'master' ? 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>
+
+                  {update.changes ? (
+                    <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 ? (
+          <Alert kind={kinds.WARNING}>
+            {translate('FailedToFetchUpdates')}
+          </Alert>
+        ) : null}
+
+        {generalSettingsError ? (
+          <Alert kind={kinds.DANGER}>
+            {translate('FailedToFetchSettings')}
+          </Alert>
+        ) : null}
+
+        <ConfirmModal
+          isOpen={isMajorUpdateModalOpen}
+          kind={kinds.WARNING}
+          title={translate('InstallMajorVersionUpdate')}
+          message={
+            <div>
+              <div>{translate('InstallMajorVersionUpdateMessage')}</div>
+              <div>
+                <InlineMarkdown
+                  data={translate('InstallMajorVersionUpdateMessageLink', {
+                    domain: 'readarr.com',
+                    url: 'https://readarr.com/#downloads',
+                  })}
+                />
+              </div>
+            </div>
+          }
+          confirmLabel={translate('Install')}
+          onConfirm={handleInstallLatestMajorVersionPress}
+          onCancel={handleCancelMajorVersionPress}
+        />
+      </PageContentBody>
+    </PageContent>
+  );
+}
+
+export default Updates;

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,5 @@
-export interface UiSettings {
+export default interface UiSettings {
+  theme: 'auto' | 'dark' | 'light';
   showRelativeDates: boolean;
   shortDateFormat: string;
   longDateFormat: string;

frontend/src/typings/SystemStatus.ts

@@ -0,0 +1,32 @@
+interface SystemStatus {
+  appData: string;
+  appName: string;
+  authentication: string;
+  branch: string;
+  buildTime: string;
+  instanceName: string;
+  isAdmin: boolean;
+  isDebug: boolean;
+  isDocker: boolean;
+  isLinux: boolean;
+  isNetCore: boolean;
+  isOsx: boolean;
+  isProduction: boolean;
+  isUserInteractive: boolean;
+  isWindows: boolean;
+  migrationVersion: number;
+  mode: string;
+  osName: string;
+  osVersion: string;
+  packageUpdateMechanism: string;
+  packageUpdateMechanismMessage: string;
+  runtimeName: string;
+  runtimeVersion: string;
+  sqliteVersion: string;
+  startTime: string;
+  startupPath: string;
+  urlBase: string;
+  version: string;
+}
+
+export default SystemStatus;

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 | null;
+  hash: string;
+}
+
+export default Update;