-
+
\\^$.|?*+()[{ have special meanings and need escaping with a \\
' }} />
+ {'More details'} {'Here'}
-
-
-
-
+ {'Regular expressions can be tested '}
+ Here
}
diff --git a/frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalContent.tsx b/frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalContent.tsx
index b2c1208cb..734f5efab 100644
--- a/frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalContent.tsx
+++ b/frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalContent.tsx
@@ -10,11 +10,11 @@ import ModalBody from 'Components/Modal/ModalBody';
import ModalContent from 'Components/Modal/ModalContent';
import ModalFooter from 'Components/Modal/ModalFooter';
import ModalHeader from 'Components/Modal/ModalHeader';
-import Column from 'Components/Table/Column';
import Table from 'Components/Table/Table';
import TableBody from 'Components/Table/TableBody';
import useSelectState from 'Helpers/Hooks/useSelectState';
import { kinds } from 'Helpers/Props';
+import SortDirection from 'Helpers/Props/SortDirection';
import {
bulkDeleteDownloadClients,
bulkEditDownloadClients,
@@ -35,7 +35,7 @@ type OnSelectedChangeCallback = React.ComponentProps<
typeof ManageDownloadClientsModalRow
>['onSelectedChange'];
-const COLUMNS: Column[] = [
+const COLUMNS = [
{
name: 'name',
label: () => translate('Name'),
@@ -82,6 +82,8 @@ const COLUMNS: Column[] = [
interface ManageDownloadClientsModalContentProps {
onModalClose(): void;
+ sortKey?: string;
+ sortDirection?: SortDirection;
}
function ManageDownloadClientsModalContent(
diff --git a/frontend/src/Settings/ImportLists/ImportLists/EditImportListModalContent.js b/frontend/src/Settings/ImportLists/ImportLists/EditImportListModalContent.js
index d50fb2385..2799af7d8 100644
--- a/frontend/src/Settings/ImportLists/ImportLists/EditImportListModalContent.js
+++ b/frontend/src/Settings/ImportLists/ImportLists/EditImportListModalContent.js
@@ -292,7 +292,7 @@ function EditImportListModalContent(props) {
diff --git a/frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalContent.tsx b/frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalContent.tsx
index 997d1b566..dbb394959 100644
--- a/frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalContent.tsx
+++ b/frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalContent.tsx
@@ -10,11 +10,11 @@ import ModalBody from 'Components/Modal/ModalBody';
import ModalContent from 'Components/Modal/ModalContent';
import ModalFooter from 'Components/Modal/ModalFooter';
import ModalHeader from 'Components/Modal/ModalHeader';
-import Column from 'Components/Table/Column';
import Table from 'Components/Table/Table';
import TableBody from 'Components/Table/TableBody';
import useSelectState from 'Helpers/Hooks/useSelectState';
import { kinds } from 'Helpers/Props';
+import SortDirection from 'Helpers/Props/SortDirection';
import {
bulkDeleteIndexers,
bulkEditIndexers,
@@ -35,7 +35,7 @@ type OnSelectedChangeCallback = React.ComponentProps<
typeof ManageIndexersModalRow
>['onSelectedChange'];
-const COLUMNS: Column[] = [
+const COLUMNS = [
{
name: 'name',
label: () => translate('Name'),
@@ -82,6 +82,8 @@ const COLUMNS: Column[] = [
interface ManageIndexersModalContentProps {
onModalClose(): void;
+ sortKey?: string;
+ sortDirection?: SortDirection;
}
function ManageIndexersModalContent(props: ManageIndexersModalContentProps) {
diff --git a/frontend/src/Settings/MediaManagement/RootFolder/RootFolder.js b/frontend/src/Settings/MediaManagement/RootFolder/RootFolder.js
index dc91e4622..47e5dfcf1 100644
--- a/frontend/src/Settings/MediaManagement/RootFolder/RootFolder.js
+++ b/frontend/src/Settings/MediaManagement/RootFolder/RootFolder.js
@@ -94,9 +94,9 @@ class RootFolder extends Component {
diff --git a/frontend/src/Settings/Notifications/Notifications/EditNotificationModalContent.js b/frontend/src/Settings/Notifications/Notifications/EditNotificationModalContent.js
index ee51799f2..383cf057b 100644
--- a/frontend/src/Settings/Notifications/Notifications/EditNotificationModalContent.js
+++ b/frontend/src/Settings/Notifications/Notifications/EditNotificationModalContent.js
@@ -105,7 +105,7 @@ function EditNotificationModalContent(props) {
diff --git a/frontend/src/Settings/Profiles/Delay/EditDelayProfileModalContent.js b/frontend/src/Settings/Profiles/Delay/EditDelayProfileModalContent.js
index 0d1225a93..da1bf7f44 100644
--- a/frontend/src/Settings/Profiles/Delay/EditDelayProfileModalContent.js
+++ b/frontend/src/Settings/Profiles/Delay/EditDelayProfileModalContent.js
@@ -87,9 +87,9 @@ function EditDelayProfileModalContent(props) {
{
!isFetching && !!error ?
-
- {translate('AddDelayProfileError')}
- :
+
+ {translate('UnableToAddANewQualityProfilePleaseTryAgain')}
+
:
null
}
@@ -186,7 +186,7 @@ function EditDelayProfileModalContent(props) {
{
id === 1 ?
- {translate('DefaultDelayProfileArtist')}
+ {translate('DefaultDelayProfileHelpText')}
:
@@ -196,7 +196,7 @@ function EditDelayProfileModalContent(props) {
type={inputTypes.TAG}
name="tags"
{...tags}
- helpText={translate('DelayProfileArtistTagsHelpText')}
+ helpText={translate('TagsHelpText')}
onChange={onInputChange}
/>
diff --git a/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.js b/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.js
index e1c695c42..c6c297c81 100644
--- a/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.js
+++ b/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.js
@@ -119,7 +119,7 @@ function EditReleaseProfileModalContent(props) {
diff --git a/frontend/src/Settings/Quality/Definition/QualityDefinition.css b/frontend/src/Settings/Quality/Definition/QualityDefinition.css
index 860333725..e090428a1 100644
--- a/frontend/src/Settings/Quality/Definition/QualityDefinition.css
+++ b/frontend/src/Settings/Quality/Definition/QualityDefinition.css
@@ -24,19 +24,19 @@
height: 20px;
}
-.track {
+.bar {
top: 9px;
margin: 0 5px;
height: 3px;
background-color: var(--sliderAccentColor);
box-shadow: 0 0 0 #000;
- &:nth-child(3n + 1) {
+ &:nth-child(3n+1) {
background-color: #ddd;
}
}
-.thumb {
+.handle {
top: 1px;
z-index: 0 !important;
width: 18px;
diff --git a/frontend/src/Settings/Quality/Definition/QualityDefinition.css.d.ts b/frontend/src/Settings/Quality/Definition/QualityDefinition.css.d.ts
index 9c9e8393a..2b92fb212 100644
--- a/frontend/src/Settings/Quality/Definition/QualityDefinition.css.d.ts
+++ b/frontend/src/Settings/Quality/Definition/QualityDefinition.css.d.ts
@@ -1,6 +1,8 @@
// This file is automatically generated.
// Please do not change this file!
interface CssExports {
+ 'bar': string;
+ 'handle': string;
'kilobitsPerSecond': string;
'quality': string;
'qualityDefinition': string;
@@ -8,9 +10,7 @@ interface CssExports {
'sizeLimit': string;
'sizes': string;
'slider': string;
- 'thumb': string;
'title': string;
- 'track': string;
}
export const cssExports: CssExports;
export default cssExports;
diff --git a/frontend/src/Settings/Quality/Definition/QualityDefinition.js b/frontend/src/Settings/Quality/Definition/QualityDefinition.js
index 48251abfb..7d8a78737 100644
--- a/frontend/src/Settings/Quality/Definition/QualityDefinition.js
+++ b/frontend/src/Settings/Quality/Definition/QualityDefinition.js
@@ -55,27 +55,6 @@ class QualityDefinition extends Component {
};
}
- //
- // Control
-
- trackRenderer(props, state) {
- return (
-
- );
- }
-
- thumbRenderer(props, state) {
- return (
-
- );
- }
-
//
// Listeners
@@ -195,7 +174,6 @@ class QualityDefinition extends Component {
diff --git a/frontend/src/Settings/Tags/AutoTagging/Specifications/EditSpecificationModalContent.js b/frontend/src/Settings/Tags/AutoTagging/Specifications/EditSpecificationModalContent.js
index 04302729b..2ab1e4a1c 100644
--- a/frontend/src/Settings/Tags/AutoTagging/Specifications/EditSpecificationModalContent.js
+++ b/frontend/src/Settings/Tags/AutoTagging/Specifications/EditSpecificationModalContent.js
@@ -86,10 +86,10 @@ function EditSpecificationModalContent(props) {
-
+
-
+
}
diff --git a/frontend/src/Settings/Tags/TagsConnector.js b/frontend/src/Settings/Tags/TagsConnector.js
index 15f31d3c5..9f8bdee5b 100644
--- a/frontend/src/Settings/Tags/TagsConnector.js
+++ b/frontend/src/Settings/Tags/TagsConnector.js
@@ -4,13 +4,11 @@ import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { fetchDelayProfiles, fetchDownloadClients, fetchImportLists, fetchIndexers, fetchNotifications, fetchReleaseProfiles } from 'Store/Actions/settingsActions';
import { fetchTagDetails, fetchTags } from 'Store/Actions/tagActions';
-import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import sortByProp from 'Utilities/Array/sortByProp';
import Tags from './Tags';
function createMapStateToProps() {
return createSelector(
- createSortedSectionSelector('tags', sortByProp('label')),
+ (state) => state.tags,
(tags) => {
const isFetching = tags.isFetching || tags.details.isFetching;
const error = tags.error || tags.details.error;
diff --git a/frontend/src/Store/Actions/artistIndexActions.js b/frontend/src/Store/Actions/artistIndexActions.js
index 736502460..055e92662 100644
--- a/frontend/src/Store/Actions/artistIndexActions.js
+++ b/frontend/src/Store/Actions/artistIndexActions.js
@@ -151,7 +151,7 @@ export const defaultState = {
{
name: 'genres',
label: () => translate('Genres'),
- isSortable: true,
+ isSortable: false,
isVisible: false
},
{
diff --git a/frontend/src/Store/Actions/historyActions.js b/frontend/src/Store/Actions/historyActions.js
index 9d16d29c4..225698229 100644
--- a/frontend/src/Store/Actions/historyActions.js
+++ b/frontend/src/Store/Actions/historyActions.js
@@ -150,7 +150,7 @@ export const defaultState = {
},
{
key: 'importFailed',
- label: () => translate('ImportCompleteFailed'),
+ label: () => translate('ImportFailed'),
filters: [
{
key: 'eventType',
diff --git a/frontend/src/Store/Selectors/createArtistAlbumsSelector.ts b/frontend/src/Store/Selectors/createArtistAlbumsSelector.ts
index 414a451f5..baffd87ec 100644
--- a/frontend/src/Store/Selectors/createArtistAlbumsSelector.ts
+++ b/frontend/src/Store/Selectors/createArtistAlbumsSelector.ts
@@ -1,5 +1,4 @@
import { createSelector } from 'reselect';
-import AlbumAppState from 'App/State/AlbumAppState';
import AppState from 'App/State/AppState';
import Artist from 'Artist/Artist';
import { createArtistSelectorForHook } from './createArtistSelector';
@@ -8,7 +7,7 @@ function createArtistAlbumsSelector(artistId: number) {
return createSelector(
(state: AppState) => state.albums,
createArtistSelectorForHook(artistId),
- (albums: AlbumAppState, artist = {} as Artist) => {
+ (albums, artist = {} as Artist) => {
const { isFetching, isPopulated, error, items } = albums;
const filteredAlbums = items.filter(
diff --git a/frontend/src/Store/Selectors/createArtistMetadataProfileSelector.ts b/frontend/src/Store/Selectors/createArtistMetadataProfileSelector.ts
index fa60d936d..0acbd3997 100644
--- a/frontend/src/Store/Selectors/createArtistMetadataProfileSelector.ts
+++ b/frontend/src/Store/Selectors/createArtistMetadataProfileSelector.ts
@@ -1,14 +1,13 @@
import { createSelector } from 'reselect';
import AppState from 'App/State/AppState';
import Artist from 'Artist/Artist';
-import MetadataProfile from 'typings/MetadataProfile';
import { createArtistSelectorForHook } from './createArtistSelector';
function createArtistMetadataProfileSelector(artistId: number) {
return createSelector(
(state: AppState) => state.settings.metadataProfiles.items,
createArtistSelectorForHook(artistId),
- (metadataProfiles: MetadataProfile[], artist = {} as Artist) => {
+ (metadataProfiles, artist = {} as Artist) => {
return metadataProfiles.find((profile) => {
return profile.id === artist.metadataProfileId;
});
diff --git a/frontend/src/Store/Selectors/createArtistQualityProfileSelector.ts b/frontend/src/Store/Selectors/createArtistQualityProfileSelector.ts
index 67639919b..99325276f 100644
--- a/frontend/src/Store/Selectors/createArtistQualityProfileSelector.ts
+++ b/frontend/src/Store/Selectors/createArtistQualityProfileSelector.ts
@@ -1,14 +1,13 @@
import { createSelector } from 'reselect';
import AppState from 'App/State/AppState';
import Artist from 'Artist/Artist';
-import QualityProfile from 'typings/QualityProfile';
import { createArtistSelectorForHook } from './createArtistSelector';
function createArtistQualityProfileSelector(artistId: number) {
return createSelector(
(state: AppState) => state.settings.qualityProfiles.items,
createArtistSelectorForHook(artistId),
- (qualityProfiles: QualityProfile[], artist = {} as Artist) => {
+ (qualityProfiles, artist = {} as Artist) => {
return qualityProfiles.find(
(profile) => profile.id === artist.qualityProfileId
);
diff --git a/frontend/src/System/Logs/Files/LogFiles.js b/frontend/src/System/Logs/Files/LogFiles.js
index 5339a8590..83736c617 100644
--- a/frontend/src/System/Logs/Files/LogFiles.js
+++ b/frontend/src/System/Logs/Files/LogFiles.js
@@ -1,8 +1,8 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Alert from 'Components/Alert';
+import Link from 'Components/Link/Link';
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 PageToolbar from 'Components/Page/Toolbar/PageToolbar';
@@ -77,16 +77,15 @@ class LogFiles extends Component {
- {translate('LogFilesLocation', {
- location
- })}
+ Log files are located in: {location}
- {currentLogView === 'Log Files' ? (
-
-
-
- ) : null}
+ {
+ currentLogView === 'Log Files' &&
+
+ The log level defaults to 'Info' and can be changed in General Settings
+
+ }
{
diff --git a/frontend/src/System/Updates/UpdateChanges.js b/frontend/src/System/Updates/UpdateChanges.js
new file mode 100644
index 000000000..6d672682d
--- /dev/null
+++ b/frontend/src/System/Updates/UpdateChanges.js
@@ -0,0 +1,48 @@
+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;
+ }
+
+ const uniqueChanges = [...new Set(changes)];
+
+ return (
+
+
{title}
+
+ {
+ uniqueChanges.map((change, index) => {
+ return (
+ -
+
+
+ );
+ })
+ }
+
+
+ );
+ }
+
+}
+
+UpdateChanges.propTypes = {
+ title: PropTypes.string.isRequired,
+ changes: PropTypes.arrayOf(PropTypes.string)
+};
+
+export default UpdateChanges;
diff --git a/frontend/src/System/Updates/UpdateChanges.tsx b/frontend/src/System/Updates/UpdateChanges.tsx
deleted file mode 100644
index 3e5ba1c9b..000000000
--- a/frontend/src/System/Updates/UpdateChanges.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-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 (
-
-
{title}
-
- {uniqueChanges.map((change, index) => {
- const checkChange = change.replace(
- /#\d{4,5}\b/g,
- (match) =>
- `[${match}](https://github.com/Lidarr/Lidarr/issues/${match.substring(
- 1
- )})`
- );
-
- return (
- -
-
-
- );
- })}
-
-
- );
-}
-
-export default UpdateChanges;
diff --git a/frontend/src/System/Updates/Updates.js b/frontend/src/System/Updates/Updates.js
new file mode 100644
index 000000000..528441cbe
--- /dev/null
+++ b/frontend/src/System/Updates/Updates.js
@@ -0,0 +1,249 @@
+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 = 'Unable to update Lidarr directly,';
+ const externalUpdaterMessages = {
+ external: 'Lidarr 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 (
+
+
+ {
+ !isPopulated && !hasError &&
+
+ }
+
+ {
+ noUpdates &&
+
+ {translate('NoUpdatesAreAvailable')}
+
+ }
+
+ {
+ hasUpdateToInstall &&
+
+ {
+ updateMechanism === 'builtIn' || updateMechanism === 'script' ?
+
+ Install Latest
+ :
+
+
+
+
+
+ {externalUpdaterPrefix}
+
+
+ }
+
+ {
+ isFetching &&
+
+ }
+
+ }
+
+ {
+ noUpdateToInstall &&
+
+
+
+ The latest version of Lidarr is already installed
+
+
+ {
+ isFetching &&
+
+ }
+
+ }
+
+ {
+ hasUpdates &&
+
+ {
+ items.map((update) => {
+ const hasChanges = !!update.changes;
+
+ return (
+
+
+
{update.version}
+
—
+
+ {formatDate(update.releaseDate, shortDateFormat)}
+
+
+ {
+ update.branch === 'master' ?
+ null :
+
+ }
+
+ {
+ update.version === currentVersion ?
+
:
+ null
+ }
+
+ {
+ update.version !== currentVersion && update.installedOn ?
+
:
+ null
+ }
+
+
+ {
+ !hasChanges &&
+
+ {translate('MaintenanceRelease')}
+
+ }
+
+ {
+ hasChanges &&
+
+
+
+
+
+ }
+
+ );
+ })
+ }
+
+ }
+
+ {
+ !!updatesError &&
+
+ Failed to fetch updates
+
+ }
+
+ {
+ !!generalSettingsError &&
+
+ Failed to update settings
+
+ }
+
+
+ );
+ }
+
+}
+
+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;
diff --git a/frontend/src/System/Updates/Updates.tsx b/frontend/src/System/Updates/Updates.tsx
deleted file mode 100644
index 300ab1f99..000000000
--- a/frontend/src/System/Updates/Updates.tsx
+++ /dev/null
@@ -1,303 +0,0 @@
-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> = {
- 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 (
-
-
- {isPopulated || hasError ? null : }
-
- {noUpdates ? (
- {translate('NoUpdatesAreAvailable')}
- ) : null}
-
- {hasUpdateToInstall ? (
-
- {updateMechanism === 'builtIn' || updateMechanism === 'script' ? (
-
- {translate('InstallLatest')}
-
- ) : (
- <>
-
-
-
- {externalUpdaterPrefix}{' '}
-
-
- >
- )}
-
- {isFetching ? (
-
- ) : null}
-
- ) : null}
-
- {noUpdateToInstall && (
-
-
-
{translate('OnLatestVersion')}
-
- {isFetching && (
-
- )}
-
- )}
-
- {hasUpdates && (
-
- {items.map((update) => {
- return (
-
-
-
{update.version}
-
—
-
- {formatDate(update.releaseDate, shortDateFormat)}
-
-
- {update.branch === 'master' ? null : (
-
- )}
-
- {update.version === currentVersion ? (
-
- ) : null}
-
- {update.version !== currentVersion && update.installedOn ? (
-
- ) : null}
-
-
- {update.changes ? (
-
-
-
-
-
- ) : (
-
{translate('MaintenanceRelease')}
- )}
-
- );
- })}
-
- )}
-
- {updatesError ? (
-
- {translate('FailedToFetchUpdates')}
-
- ) : null}
-
- {generalSettingsError ? (
-
- {translate('FailedToFetchSettings')}
-
- ) : null}
-
-
- {translate('InstallMajorVersionUpdateMessage')}
-
-
-
-
- }
- confirmLabel={translate('Install')}
- onConfirm={handleInstallLatestMajorVersionPress}
- onCancel={handleCancelMajorVersionPress}
- />
-
-
- );
-}
-
-export default Updates;
diff --git a/frontend/src/System/Updates/UpdatesConnector.js b/frontend/src/System/Updates/UpdatesConnector.js
new file mode 100644
index 000000000..77d75dbda
--- /dev/null
+++ b/frontend/src/System/Updates/UpdatesConnector.js
@@ -0,0 +1,98 @@
+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 (
+