Archive-Team
/
sonarr-repo-only
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update UI 

Squash into v3 UI
This commit is contained in:
Mark McDowall 2018-11-25 14:40:25 -08:00 committed by Taloth Saldono
parent dbdb8e4436
commit aafa9cb6be
6 changed files with 122 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/Settings/General/GeneralSettings.js
View File

@ -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

1
frontend/src/Settings/General/GeneralSettingsConnector.js
View File

@ -27,6 +27,7 @@ function createMapStateToProps() {
isMono: systemStatus.isMono,
isWindows: systemStatus.isWindows,
mode: systemStatus.mode,
packageUpdateMechanism: systemStatus.packageUpdateMechanism,
...sectionSettings
};
}

10
frontend/src/Settings/General/UpdateSettings.js
View File

@ -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
@ -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
};

8
frontend/src/System/Updates/Updates.css
View File

@ -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;

50
frontend/src/System/Updates/Updates.js
View File

@ -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,7 +51,9 @@ class Updates extends Component {
{
hasUpdateToInstall &&
<div className={styles.updateAvailable}>
<div className={styles.messageContainer}>
{
updateMechanism === 'builtIn' || updateMechanism === 'script' ?
<SpinnerButton
className={styles.updateAvailable}
kind={kinds.PRIMARY}
@ -56,7 +61,20 @@ class Updates extends Component {
onPress={onInstallLatestPress}
>
Install Latest
</SpinnerButton>
</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
};

30
frontend/src/System/Updates/UpdatesConnector.js
View File

@ -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);