Turn RoomAliasField into properly controlled and use in RoomSettings

src/components/views/dialogs/CreateRoomDialog.js

@@ -173,7 +173,7 @@ export default createReactClass({
  const domain = MatrixClientPeg.get().getDomain();
  aliasField = (
  <div className="mx_CreateRoomDialog_aliasContainer">
- <RoomAliasField id="alias" ref={ref => this._aliasFieldRef = ref} onChange={this.onAliasChange} domain={domain} />
+ <RoomAliasField id="alias" ref={ref => this._aliasFieldRef = ref} onChange={this.onAliasChange} domain={domain} value={this.state.alias} />
  </div>
  );
  } else {

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

src/components/views/room_settings/AliasSettings.js

@@ -15,15 +15,42 @@ 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');
 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 (
+ <form
+ onSubmit={this._onItemAdded}
+ autoComplete="off"
+ noValidate={true}
+ className="mx_EditableItemList_newItem"
+ >
+ <RoomAliasField
+ id={`mx_EditableItemList_new_${this.props.id}`}
+ onChange={onChange}
+ value={this.props.newItem || ""}
+ domain={this.props.domain} />
+ <AccessibleButton onClick={this._onItemAdded} kind="primary">
+ { _t("Add") }
+ </AccessibleButton>
+ </form>
+ );
+ }
+}
+
 export default class AliasSettings extends React.Component {
  static propTypes = {
  roomId: PropTypes.string.isRequired,
@@ -47,7 +74,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 +207,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 +258,7 @@ export default class AliasSettings extends React.Component {
  return (
  <div className='mx_AliasSettings'>
  {canonicalAliasSection}
- <EditableItemList
+ <EditableAliasesList
  id="roomAliases"
  className={"mx_RoomSettings_localAliases"}
  items={this.state.domainToAliases[localDomain] || []}
@@ -248,6 +273,7 @@ export default class AliasSettings extends React.Component {
  placeholder={_t(
  'New address (e.g. #foo:%(localDomain)s)', {localDomain: localDomain},
  )}
+ domain={localDomain}
  />
  {remoteAliasesSection}
  </div>

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