Merge pull request #4668 from matrix-org/t3chguy/toasts6
Give contextual feedback for manual update check instead of banner
This commit is contained in:
Michael Telatynski
GitHub
commit
097f27c822
17 changed files with 225 additions and 212 deletions
|
|
@ -81,7 +81,6 @@ interface IProps {
|
|||
currentRoomId: string;
|
||||
ConferenceHandler?: object;
|
||||
collapseLhs: boolean;
|
||||
checkingForUpdate: boolean;
|
||||
config: {
|
||||
piwik: {
|
||||
policyUrl: string;
|
||||
|
|
@ -177,15 +176,6 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
|
|||
this._loadResizerPreferences();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
// attempt to guess when a banner was opened or closed
|
||||
if (
|
||||
(prevProps.checkingForUpdate !== this.props.checkingForUpdate)
|
||||
) {
|
||||
this.props.resizeNotifier.notifyBannersChanged();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener('keydown', this._onNativeKeyDown, false);
|
||||
this._matrixClient.removeListener("accountData", this.onAccountData);
|
||||
|
|
@ -617,7 +607,6 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
|
|||
const GroupView = sdk.getComponent('structures.GroupView');
|
||||
const MyGroups = sdk.getComponent('structures.MyGroups');
|
||||
const ToastContainer = sdk.getComponent('structures.ToastContainer');
|
||||
const UpdateCheckBar = sdk.getComponent('globals.UpdateCheckBar');
|
||||
|
||||
let pageElement;
|
||||
|
||||
|
|
@ -661,15 +650,7 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
|
|||
break;
|
||||
}
|
||||
|
||||
let topBar;
|
||||
if (this.props.checkingForUpdate) {
|
||||
topBar = <UpdateCheckBar {...this.props.checkingForUpdate} />;
|
||||
}
|
||||
|
||||
let bodyClasses = 'mx_MatrixChat';
|
||||
if (topBar) {
|
||||
bodyClasses += ' mx_MatrixChat_toolbarShowing';
|
||||
}
|
||||
if (this.state.useCompactLayout) {
|
||||
bodyClasses += ' mx_MatrixChat_useCompactLayout';
|
||||
}
|
||||
|
|
@ -684,7 +665,6 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
|
|||
onMouseDown={this._onMouseDown}
|
||||
onMouseUp={this._onMouseUp}
|
||||
>
|
||||
{ topBar }
|
||||
<ToastContainer />
|
||||
<DragDropContext onDragEnd={this._onDragEnd}>
|
||||
<div ref={this._resizeContainer} className={bodyClasses}>
|
||||
|
|
|
|||
|
|
@ -173,7 +173,6 @@ interface IState {
|
|||
leftDisabled: boolean;
|
||||
middleDisabled: boolean;
|
||||
// the right panel's disabled state is tracked in its store.
|
||||
checkingForUpdate?: string; // updateCheckStatusEnum
|
||||
// Parameters used in the registration dance with the IS
|
||||
register_client_secret?: string;
|
||||
register_session_id?: string;
|
||||
|
|
@ -226,8 +225,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
|
|||
leftDisabled: false,
|
||||
middleDisabled: false,
|
||||
|
||||
checkingForUpdate: null,
|
||||
|
||||
hideToSRUsers: false,
|
||||
|
||||
syncError: null, // If the current syncing status is ERROR, the error object, otherwise null.
|
||||
|
|
@ -720,9 +717,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
|
|||
case 'client_started':
|
||||
this.onClientStarted();
|
||||
break;
|
||||
case 'check_updates':
|
||||
this.setState({ checkingForUpdate: payload.value });
|
||||
break;
|
||||
case 'send_event':
|
||||
this.onSendEvent(payload.room_id, payload.event);
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -1,91 +0,0 @@
|
|||
/*
|
||||
Copyright 2017, 2019 Michael Telatynski <7t3chguy@gmail.com>
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import createReactClass from 'create-react-class';
|
||||
import { _t } from '../../../languageHandler';
|
||||
import PlatformPeg from '../../../PlatformPeg';
|
||||
import AccessibleButton from '../../../components/views/elements/AccessibleButton';
|
||||
|
||||
export default createReactClass({
|
||||
propTypes: {
|
||||
status: PropTypes.string.isRequired,
|
||||
// Currently for error detail but will be usable for download progress
|
||||
// once that is a thing that squirrel passes through electron.
|
||||
detail: PropTypes.string,
|
||||
},
|
||||
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
detail: '',
|
||||
};
|
||||
},
|
||||
|
||||
getStatusText: function() {
|
||||
// we can't import the enum from riot-web as we don't want matrix-react-sdk
|
||||
// to depend on riot-web. so we grab it as a normal object via API instead.
|
||||
const updateCheckStatusEnum = PlatformPeg.get().getUpdateCheckStatusEnum();
|
||||
switch (this.props.status) {
|
||||
case updateCheckStatusEnum.ERROR:
|
||||
return _t('Error encountered (%(errorDetail)s).', { errorDetail: this.props.detail });
|
||||
case updateCheckStatusEnum.CHECKING:
|
||||
return _t('Checking for an update...');
|
||||
case updateCheckStatusEnum.NOTAVAILABLE:
|
||||
return _t('No update available.');
|
||||
case updateCheckStatusEnum.DOWNLOADING:
|
||||
return _t('Downloading update...');
|
||||
}
|
||||
},
|
||||
|
||||
hideToolbar: function() {
|
||||
PlatformPeg.get().stopUpdateCheck();
|
||||
},
|
||||
|
||||
render: function() {
|
||||
const message = this.getStatusText();
|
||||
const warning = _t('Warning');
|
||||
|
||||
if (!('getUpdateCheckStatusEnum' in PlatformPeg.get())) {
|
||||
return <div></div>;
|
||||
}
|
||||
|
||||
const updateCheckStatusEnum = PlatformPeg.get().getUpdateCheckStatusEnum();
|
||||
const doneStatuses = [
|
||||
updateCheckStatusEnum.ERROR,
|
||||
updateCheckStatusEnum.NOTAVAILABLE,
|
||||
];
|
||||
|
||||
let image;
|
||||
if (doneStatuses.includes(this.props.status)) {
|
||||
image = <img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/warning.svg")} width="24" height="23" alt="" />;
|
||||
} else {
|
||||
image = <img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/spinner.gif")} width="24" height="23" alt="" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx_MatrixToolbar">
|
||||
{image}
|
||||
<div className="mx_MatrixToolbar_content">
|
||||
{message}
|
||||
</div>
|
||||
<AccessibleButton className="mx_MatrixToolbar_close" onClick={this.hideToolbar}>
|
||||
<img src={require("../../../../res/img/cancel.svg")} width="18" height="18" alt={_t('Close')} />
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
90
src/components/views/settings/UpdateCheckButton.tsx
Normal file
90
src/components/views/settings/UpdateCheckButton.tsx
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
/*
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, {useState} from "react";
|
||||
|
||||
import {UpdateCheckStatus} from "../../../BasePlatform";
|
||||
import PlatformPeg from "../../../PlatformPeg";
|
||||
import {hideToast as hideUpdateToast} from "../../../toasts/UpdateToast";
|
||||
import {useDispatcher} from "../../../hooks/useDispatcher";
|
||||
import dis from "../../../dispatcher/dispatcher";
|
||||
import {Action} from "../../../dispatcher/actions";
|
||||
import {_t} from "../../../languageHandler";
|
||||
import InlineSpinner from "../../../components/views/elements/InlineSpinner";
|
||||
import AccessibleButton from "../../../components/views/elements/AccessibleButton";
|
||||
import {CheckUpdatesPayload} from "../../../dispatcher/payloads/CheckUpdatesPayload";
|
||||
|
||||
function installUpdate() {
|
||||
PlatformPeg.get().installUpdate();
|
||||
}
|
||||
|
||||
function getStatusText(status: UpdateCheckStatus, errorDetail?: string) {
|
||||
switch (status) {
|
||||
case UpdateCheckStatus.Error:
|
||||
return _t('Error encountered (%(errorDetail)s).', { errorDetail });
|
||||
case UpdateCheckStatus.Checking:
|
||||
return _t('Checking for an update...');
|
||||
case UpdateCheckStatus.NotAvailable:
|
||||
return _t('No update available.');
|
||||
case UpdateCheckStatus.Downloading:
|
||||
return _t('Downloading update...');
|
||||
case UpdateCheckStatus.Ready:
|
||||
return _t("New version available. <a>Update now.</a>", {}, {
|
||||
a: sub => <AccessibleButton kind="link" onClick={installUpdate}>{sub}</AccessibleButton>
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const doneStatuses = [
|
||||
UpdateCheckStatus.Ready,
|
||||
UpdateCheckStatus.Error,
|
||||
UpdateCheckStatus.NotAvailable,
|
||||
];
|
||||
|
||||
const UpdateCheckButton = () => {
|
||||
const [state, setState] = useState<CheckUpdatesPayload>(null);
|
||||
|
||||
const onCheckForUpdateClick = () => {
|
||||
setState(null);
|
||||
PlatformPeg.get().startUpdateCheck();
|
||||
hideUpdateToast();
|
||||
};
|
||||
|
||||
useDispatcher(dis, ({action, ...params}) => {
|
||||
if (action === Action.CheckUpdates) {
|
||||
setState(params as CheckUpdatesPayload);
|
||||
}
|
||||
});
|
||||
|
||||
const busy = state && !doneStatuses.includes(state.status);
|
||||
|
||||
let suffix;
|
||||
if (state) {
|
||||
suffix = <span className="mx_UpdateCheckButton_summary">
|
||||
{getStatusText(state.status, state.detail)}
|
||||
{busy && <InlineSpinner />}
|
||||
</span>;
|
||||
}
|
||||
|
||||
return <React.Fragment>
|
||||
<AccessibleButton onClick={onCheckForUpdateClick} kind="primary" disabled={busy}>
|
||||
{_t("Check for update")}
|
||||
</AccessibleButton>
|
||||
{ suffix }
|
||||
</React.Fragment>;
|
||||
};
|
||||
|
||||
export default UpdateCheckButton;
|
||||
|
|
@ -25,6 +25,7 @@ import Modal from "../../../../../Modal";
|
|||
import * as sdk from "../../../../../";
|
||||
import PlatformPeg from "../../../../../PlatformPeg";
|
||||
import * as KeyboardShortcuts from "../../../../../accessibility/KeyboardShortcuts";
|
||||
import UpdateCheckButton from "../../UpdateCheckButton";
|
||||
|
||||
export default class HelpUserSettingsTab extends React.Component {
|
||||
static propTypes = {
|
||||
|
|
@ -177,12 +178,7 @@ export default class HelpUserSettingsTab extends React.Component {
|
|||
|
||||
let updateButton = null;
|
||||
if (this.state.canUpdate) {
|
||||
const platform = PlatformPeg.get();
|
||||
updateButton = (
|
||||
<AccessibleButton onClick={platform.startUpdateCheck} kind='primary'>
|
||||
{_t('Check for update')}
|
||||
</AccessibleButton>
|
||||
);
|
||||
updateButton = <UpdateCheckButton />;
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue