From ebf7eb698dd548766ec8dfb3f76438dbb13b1f64 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 26 Dec 2019 18:52:57 +0000 Subject: [PATCH 1/3] Turn RoomAliasField into properly controlled and use in RoomSettings --- .../views/dialogs/CreateRoomDialog.js | 2 +- .../views/elements/RoomAliasField.js | 5 +++- .../views/room_settings/AliasSettings.js | 28 +++++++++++++++++-- 3 files changed, 30 insertions(+), 5 deletions(-) diff --git a/src/components/views/dialogs/CreateRoomDialog.js b/src/components/views/dialogs/CreateRoomDialog.js index 6a73d22708..5ddebb1119 100644 --- a/src/components/views/dialogs/CreateRoomDialog.js +++ b/src/components/views/dialogs/CreateRoomDialog.js @@ -173,7 +173,7 @@ export default createReactClass({ const domain = MatrixClientPeg.get().getDomain(); aliasField = (
- this._aliasFieldRef = ref} onChange={this.onAliasChange} domain={domain} /> + this._aliasFieldRef = ref} onChange={this.onAliasChange} domain={domain} value={this.state.alias} />
); } else { diff --git a/src/components/views/elements/RoomAliasField.js b/src/components/views/elements/RoomAliasField.js index 03f4000e59..7054dfcce2 100644 --- a/src/components/views/elements/RoomAliasField.js +++ b/src/components/views/elements/RoomAliasField.js @@ -20,11 +20,13 @@ import sdk from '../../../index'; import withValidation from './Validation'; import MatrixClientPeg from '../../../MatrixClientPeg'; +// Controlled form component wrapping Field for inputting a room alias scoped to a given domain export default class RoomAliasField extends React.PureComponent { static propTypes = { id: PropTypes.string.isRequired, domain: PropTypes.string.isRequired, onChange: PropTypes.func, + value: PropTypes.string.isRequired, }; constructor(props) { @@ -53,6 +55,7 @@ export default class RoomAliasField extends React.PureComponent { onValidate={this._onValidate} placeholder={_t("e.g. my-room")} onChange={this._onChange} + value={this.props.value.substring(1, this.props.value.length - this.props.domain.length - 1)} maxLength={maxlength} /> ); } @@ -61,7 +64,7 @@ export default class RoomAliasField extends React.PureComponent { if (this.props.onChange) { this.props.onChange(this._asFullAlias(ev.target.value)); } - } + }; _onValidate = async (fieldState) => { const result = await this._validationRules(fieldState); diff --git a/src/components/views/room_settings/AliasSettings.js b/src/components/views/room_settings/AliasSettings.js index daf5c6edc2..946bf0d791 100644 --- a/src/components/views/room_settings/AliasSettings.js +++ b/src/components/views/room_settings/AliasSettings.js @@ -15,6 +15,8 @@ See the License for the specific language governing permissions and limitations under the License. */ +import EditableItemList from "../elements/EditableItemList"; + const React = require('react'); import PropTypes from 'prop-types'; const MatrixClientPeg = require('../../../MatrixClientPeg'); @@ -22,8 +24,29 @@ const sdk = require("../../../index"); import { _t } from '../../../languageHandler'; import Field from "../elements/Field"; import ErrorDialog from "../dialogs/ErrorDialog"; +import AccessibleButton from "../elements/AccessibleButton"; const Modal = require("../../../Modal"); +class EditableAliasesList extends EditableItemList { + _renderNewItemField() { + const RoomAliasField = sdk.getComponent('views.elements.RoomAliasField'); + const onChange = (alias) => this._onNewItemChanged({target: {value: alias}}); + return ( +
+ + + {_t("Add")} + + + ); + } +} + export default class AliasSettings extends React.Component { static propTypes = { roomId: PropTypes.string.isRequired, @@ -47,7 +70,6 @@ export default class AliasSettings extends React.Component { remoteDomains: [], // [ domain.com, foobar.com ] canonicalAlias: null, // #canonical:domain.com updatingCanonicalAlias: false, - newItem: "", }; const localDomain = MatrixClientPeg.get().getDomain(); @@ -181,7 +203,6 @@ export default class AliasSettings extends React.Component { }; render() { - const EditableItemList = sdk.getComponent("elements.EditableItemList"); const localDomain = MatrixClientPeg.get().getDomain(); let found = false; @@ -233,7 +254,7 @@ export default class AliasSettings extends React.Component { return (
{canonicalAliasSection} - {remoteAliasesSection}
From 06230e01e3805cdcb418d4cc452628f4f73a8317 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 26 Dec 2019 19:36:16 +0000 Subject: [PATCH 2/3] Fix End-to-End tests for RoomSettings interactivity --- test/end-to-end-tests/src/usecases/room-settings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/end-to-end-tests/src/usecases/room-settings.js b/test/end-to-end-tests/src/usecases/room-settings.js index 7655d2d066..5b425f14b7 100644 --- a/test/end-to-end-tests/src/usecases/room-settings.js +++ b/test/end-to-end-tests/src/usecases/room-settings.js @@ -52,7 +52,7 @@ module.exports = async function changeRoomSettings(session, settings) { if (settings.alias) { session.log.step(`sets alias to ${settings.alias}`); const aliasField = await session.query(".mx_RoomSettingsDialog .mx_AliasSettings input[type=text]"); - await session.replaceInputText(aliasField, settings.alias); + await session.replaceInputText(aliasField, settings.alias.substring(1, settings.alias.lastIndexOf(":"))); const addButton = await session.query(".mx_RoomSettingsDialog .mx_AliasSettings .mx_AccessibleButton"); await addButton.click(); session.log.done(); From aa990462cec34b47349d3ef6ba542aed17470c33 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 27 Dec 2019 17:05:51 +0000 Subject: [PATCH 3/3] delint --- src/components/views/room_settings/AliasSettings.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/views/room_settings/AliasSettings.js b/src/components/views/room_settings/AliasSettings.js index 946bf0d791..aa9d46c9d5 100644 --- a/src/components/views/room_settings/AliasSettings.js +++ b/src/components/views/room_settings/AliasSettings.js @@ -32,15 +32,19 @@ class EditableAliasesList extends EditableItemList { const RoomAliasField = sdk.getComponent('views.elements.RoomAliasField'); const onChange = (alias) => this._onNewItemChanged({target: {value: alias}}); return ( -
+ - {_t("Add")} + { _t("Add") } );