{explanation}
+ {explanation}
{listHeader}
{content}
diff --git a/src/components/views/dialogs/QuestionDialog.js b/src/components/views/dialogs/QuestionDialog.js
index 8cb16dd88f..07a1eae5d5 100644
--- a/src/components/views/dialogs/QuestionDialog.js
+++ b/src/components/views/dialogs/QuestionDialog.js
@@ -33,6 +33,7 @@ export default createReactClass({
onFinished: PropTypes.func.isRequired,
headerImage: PropTypes.string,
quitOnly: PropTypes.bool, // quitOnly doesn't show the cancel button just the quit [x].
+ fixedWidth: PropTypes.bool,
},
getDefaultProps: function() {
@@ -63,11 +64,14 @@ export default createReactClass({
primaryButtonClass = "danger";
}
return (
-
);
},
diff --git a/src/components/views/directory/NetworkDropdown.js b/src/components/views/directory/NetworkDropdown.js
index cb6a015d86..2fabda1a74 100644
--- a/src/components/views/directory/NetworkDropdown.js
+++ b/src/components/views/directory/NetworkDropdown.js
@@ -1,6 +1,7 @@
/*
Copyright 2016 OpenMarket Ltd
Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+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.
@@ -15,241 +16,275 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React from 'react';
+import React, {useEffect, useState} from 'react';
import PropTypes from 'prop-types';
+
import {MatrixClientPeg} from '../../../MatrixClientPeg';
import {instanceForInstanceId} from '../../../utils/DirectoryUtils';
+import {
+ ContextMenu,
+ useContextMenu,
+ ContextMenuButton,
+ MenuItemRadio,
+ MenuItem,
+ MenuGroup,
+} from "../../structures/ContextMenu";
+import {_t} from "../../../languageHandler";
+import SdkConfig from "../../../SdkConfig";
+import {useSettingValue} from "../../../hooks/useSettings";
+import * as sdk from "../../../index";
+import Modal from "../../../Modal";
+import SettingsStore from "../../../settings/SettingsStore";
+import withValidation from "../elements/Validation";
-const DEFAULT_ICON_URL = require("../../../../res/img/network-matrix.svg");
+export const ALL_ROOMS = Symbol("ALL_ROOMS");
-export default class NetworkDropdown extends React.Component {
- constructor(props) {
- super(props);
+const SETTING_NAME = "room_directory_servers";
- this.dropdownRootElement = null;
- this.ignoreEvent = null;
+const inPlaceOf = (elementRect) => ({
+ right: window.innerWidth - elementRect.right,
+ top: elementRect.top,
+ chevronOffset: 0,
+ chevronFace: "none",
+});
- this.onInputClick = this.onInputClick.bind(this);
- this.onRootClick = this.onRootClick.bind(this);
- this.onDocumentClick = this.onDocumentClick.bind(this);
- this.onMenuOptionClick = this.onMenuOptionClick.bind(this);
- this.onInputKeyUp = this.onInputKeyUp.bind(this);
- this.collectRoot = this.collectRoot.bind(this);
- this.collectInputTextBox = this.collectInputTextBox.bind(this);
+const validServer = withValidation({
+ rules: [
+ {
+ key: "required",
+ test: async ({ value }) => !!value,
+ invalid: () => _t("Enter a server name"),
+ }, {
+ key: "available",
+ final: true,
+ test: async ({ value }) => {
+ try {
+ const opts = {
+ limit: 1,
+ server: value,
+ };
+ // check if we can successfully load this server's room directory
+ await MatrixClientPeg.get().publicRooms(opts);
+ return true;
+ } catch (e) {
+ return false;
+ }
+ },
+ valid: () => _t("Looks good"),
+ invalid: () => _t("Can't find this server or its room list"),
+ },
+ ],
+});
- this.inputTextBox = null;
+// This dropdown sources homeservers from three places:
+// + your currently connected homeserver
+// + homeservers in config.json["roomDirectory"]
+// + homeservers in SettingsStore["room_directory_servers"]
+// if a server exists in multiple, only keep the top-most entry.
- const server = MatrixClientPeg.getHomeserverName();
- this.state = {
- expanded: false,
- selectedServer: server,
- selectedInstanceId: null,
- includeAllNetworks: false,
+const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, selectedInstanceId}) => {
+ const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu();
+ const _userDefinedServers = useSettingValue(SETTING_NAME);
+ const [userDefinedServers, _setUserDefinedServers] = useState(_userDefinedServers);
+
+ const handlerFactory = (server, instanceId) => {
+ return () => {
+ onOptionChange(server, instanceId);
+ closeMenu();
};
- }
+ };
- componentWillMount() {
- // Listen for all clicks on the document so we can close the
- // menu when the user clicks somewhere else
- document.addEventListener('click', this.onDocumentClick, false);
+ const setUserDefinedServers = servers => {
+ _setUserDefinedServers(servers);
+ SettingsStore.setValue(SETTING_NAME, null, "account", servers);
+ };
+ // keep local echo up to date with external changes
+ useEffect(() => {
+ _setUserDefinedServers(_userDefinedServers);
+ }, [_userDefinedServers]);
- // fire this now so the defaults can be set up
- const {selectedServer, selectedInstanceId, includeAllNetworks} = this.state;
- this.props.onOptionChange(selectedServer, selectedInstanceId, includeAllNetworks);
- }
+ // we either show the button or the dropdown in its place.
+ let content;
+ if (menuDisplayed) {
+ const config = SdkConfig.get();
+ const roomDirectory = config.roomDirectory || {};
- componentWillUnmount() {
- document.removeEventListener('click', this.onDocumentClick, false);
- }
+ const hsName = MatrixClientPeg.getHomeserverName();
+ const configServers = new Set(roomDirectory.servers);
- componentDidUpdate() {
- if (this.state.expanded && this.inputTextBox) {
- this.inputTextBox.focus();
- }
- }
-
- onDocumentClick(ev) {
- // Close the dropdown if the user clicks anywhere that isn't
- // within our root element
- if (ev !== this.ignoreEvent) {
- this.setState({
- expanded: false,
- });
- }
- }
-
- onRootClick(ev) {
- // This captures any clicks that happen within our elements,
- // such that we can then ignore them when they're seen by the
- // click listener on the document handler, ie. not close the
- // dropdown immediately after opening it.
- // NB. We can't just stopPropagation() because then the event
- // doesn't reach the React onClick().
- this.ignoreEvent = ev;
- }
-
- onInputClick(ev) {
- this.setState({
- expanded: !this.state.expanded,
- });
- ev.preventDefault();
- }
-
- onMenuOptionClick(server, instance, includeAll) {
- this.setState({
- expanded: false,
- selectedServer: server,
- selectedInstanceId: instance ? instance.instance_id : null,
- includeAllNetworks: includeAll,
- });
- this.props.onOptionChange(server, instance ? instance.instance_id : null, includeAll);
- }
-
- onInputKeyUp(e) {
- if (e.key === 'Enter') {
- this.setState({
- expanded: false,
- selectedServer: e.target.value,
- selectedNetwork: null,
- includeAllNetworks: false,
- });
- this.props.onOptionChange(e.target.value, null);
- }
- }
-
- collectRoot(e) {
- if (this.dropdownRootElement) {
- this.dropdownRootElement.removeEventListener('click', this.onRootClick, false);
- }
- if (e) {
- e.addEventListener('click', this.onRootClick, false);
- }
- this.dropdownRootElement = e;
- }
-
- collectInputTextBox(e) {
- this.inputTextBox = e;
- }
-
- _getMenuOptions() {
- const options = [];
- const roomDirectory = this.props.config.roomDirectory || {};
-
- let servers = [];
- if (roomDirectory.servers) {
- servers = servers.concat(roomDirectory.servers);
- }
-
- if (!servers.includes(MatrixClientPeg.getHomeserverName())) {
- servers.unshift(MatrixClientPeg.getHomeserverName());
- }
+ // configured servers take preference over user-defined ones, if one occurs in both ignore the latter one.
+ const removableServers = new Set(userDefinedServers.filter(s => !configServers.has(s) && s !== hsName));
+ const servers = [
+ // we always show our connected HS, this takes precedence over it being configured or user-defined
+ hsName,
+ ...Array.from(configServers).filter(s => s !== hsName).sort(),
+ ...Array.from(removableServers).sort(),
+ ];
// For our own HS, we can use the instance_ids given in the third party protocols
// response to get the server to filter the room list by network for us.
// We can't get thirdparty protocols for remote server yet though, so for those
// we can only show the default room list.
- for (const server of servers) {
- options.push(this._makeMenuOption(server, null, true));
- if (server === MatrixClientPeg.getHomeserverName()) {
- options.push(this._makeMenuOption(server, null, false));
- if (this.props.protocols) {
- for (const proto of Object.keys(this.props.protocols)) {
- if (!this.props.protocols[proto].instances) continue;
+ const options = servers.map(server => {
+ const serverSelected = server === selectedServerName;
+ const entries = [];
- const sortedInstances = this.props.protocols[proto].instances;
- sortedInstances.sort(function(x, y) {
- const a = x.desc;
- const b = y.desc;
- if (a < b) {
- return -1;
- } else if (a > b) {
- return 1;
- } else {
- return 0;
- }
- });
-
- for (const instance of sortedInstances) {
- if (!instance.instance_id) continue;
- options.push(this._makeMenuOption(server, instance, false));
- }
- }
- }
+ const protocolsList = server === hsName ? Object.values(protocols) : [];
+ if (protocolsList.length > 0) {
+ // add a fake protocol with the ALL_ROOMS symbol
+ protocolsList.push({
+ instances: [{
+ instance_id: ALL_ROOMS,
+ desc: _t("All rooms"),
+ }],
+ });
}
- }
- return options;
- }
+ protocolsList.forEach(({instances=[]}) => {
+ [...instances].sort((b, a) => {
+ return a.desc.localeCompare(b.desc);
+ }).forEach(({desc, instance_id: instanceId}) => {
+ entries.push(
+
+ { desc }
+ );
+ });
+ });
- _makeMenuOption(server, instance, includeAll, handleClicks) {
- if (handleClicks === undefined) handleClicks = true;
+ let subtitle;
+ if (server === hsName) {
+ subtitle = (
+ ![]({require("../../../../res/img/network-matrix.svg")})
;
- } else {
- key = server + '_inst_' + instance.instance_id;
- const imgUrl = instance.icon ?
- MatrixClientPeg.get().mxcUrlToHttp(instance.icon, 25, 25, 'crop', true) :
- DEFAULT_ICON_URL;
- icon = 
;
- name = instance.desc;
- }
+ const [ok] = await finished;
+ if (!ok) return;
- const clickHandler = handleClicks ? this.onMenuOptionClick.bind(this, server, instance, includeAll) : null;
+ // delete from setting
+ setUserDefinedServers(servers.filter(s => s !== server));
- return
+
+ {_t("Matrix")}
+
+ { entries }
+
);
+ });
+
+ const onClick = async () => {
+ closeMenu();
+ const TextInputDialog = sdk.getComponent("dialogs.TextInputDialog");
+ const { finished } = Modal.createTrackedDialog("Network Dropdown", "Add a new server", TextInputDialog, {
+ title: _t("Add a new server"),
+ description: _t("Enter the name of a new server you want to explore."),
+ button: _t("Add"),
+ hasCancel: false,
+ placeholder: _t("Server name"),
+ validator: validServer,
+ fixedWidth: false,
+ }, "mx_NetworkDropdown_dialog");
+
+ const [ok, newServer] = await finished;
+ if (!ok) return;
+
+ if (!userDefinedServers.includes(newServer)) {
+ setUserDefinedServers([...userDefinedServers, newServer]);
+ }
+
+ onOptionChange(newServer); // change filter to the new server
+ };
+
+ const buttonRect = handle.current.getBoundingClientRect();
+ content =
+ ;
+ } else {
+ let currentValue;
+ if (selectedInstanceId === ALL_ROOMS) {
+ currentValue = _t("All rooms");
+ } else if (selectedInstanceId) {
+ const instance = instanceForInstanceId(protocols, selectedInstanceId);
+ currentValue = _t("%(networkName)s rooms", {
+ networkName: instance.desc,
+ });
+ } else {
+ currentValue = _t("Matrix rooms");
}
- return
{ this.props.description }
diff --git a/src/components/views/dialogs/TextInputDialog.js b/src/components/views/dialogs/TextInputDialog.js
index 0ffc072cc0..b9f6f6ebce 100644
--- a/src/components/views/dialogs/TextInputDialog.js
+++ b/src/components/views/dialogs/TextInputDialog.js
@@ -18,6 +18,7 @@ import React, {createRef} from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import * as sdk from '../../../index';
+import Field from "../elements/Field";
export default createReactClass({
displayName: 'TextInputDialog',
@@ -28,9 +29,13 @@ export default createReactClass({
PropTypes.string,
]),
value: PropTypes.string,
+ placeholder: PropTypes.string,
button: PropTypes.string,
focus: PropTypes.bool,
onFinished: PropTypes.func.isRequired,
+ hasCancel: PropTypes.bool,
+ validator: PropTypes.func, // result of withValidation
+ fixedWidth: PropTypes.bool,
},
getDefaultProps: function() {
@@ -39,34 +44,70 @@ export default createReactClass({
value: "",
description: "",
focus: true,
+ hasCancel: true,
+ };
+ },
+
+ getInitialState: function() {
+ return {
+ value: this.props.value,
+ valid: false,
};
},
UNSAFE_componentWillMount: function() {
- this._textinput = createRef();
+ this._field = createRef();
},
componentDidMount: function() {
if (this.props.focus) {
// Set the cursor at the end of the text input
- this._textinput.current.value = this.props.value;
+ // this._field.current.value = this.props.value;
+ this._field.current.focus();
}
},
- onOk: function() {
- this.props.onFinished(true, this._textinput.current.value);
+ onOk: async function(ev) {
+ ev.preventDefault();
+ if (this.props.validator) {
+ await this._field.current.validate({ allowEmpty: false });
+
+ if (!this._field.current.state.valid) {
+ this._field.current.focus();
+ this._field.current.validate({ allowEmpty: false, focused: true });
+ return;
+ }
+ }
+ this.props.onFinished(true, this.state.value);
},
onCancel: function() {
this.props.onFinished(false);
},
+ onChange: function(ev) {
+ this.setState({
+ value: ev.target.value,
+ });
+ },
+
+ onValidate: async function(fieldState) {
+ const result = await this.props.validator(fieldState);
+ this.setState({
+ valid: result.valid,
+ });
+ return result;
+ },
+
render: function() {
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
return (
-
-
+ {_t("Your server")}
+
+ );
+ }
- let icon;
- let name;
- let key;
+ let removeButton;
+ if (removableServers.has(server)) {
+ const onClick = async () => {
+ closeMenu();
+ const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+ const {finished} = Modal.createTrackedDialog("Network Dropdown", "Remove server", QuestionDialog, {
+ title: _t("Are you sure?"),
+ description: _t("Are you sure you want to remove %(serverName)s", {
+ serverName: server,
+ }, {
+ b: serverName => { serverName },
+ }),
+ button: _t("Remove"),
+ fixedWidth: false,
+ }, "mx_NetworkDropdown_dialog");
- if (!instance && includeAll) {
- key = server;
- name = server;
- } else if (!instance) {
- key = server + '_all';
- name = 'Matrix';
- icon = ;
- } else {
- key = server + '_inst_' + instance.instance_id;
- const imgUrl = instance.icon ?
- MatrixClientPeg.get().mxcUrlToHttp(instance.icon, 25, 25, 'crop', true) :
- DEFAULT_ICON_URL;
- icon = ;
- name = instance.desc;
- }
+ const [ok] = await finished;
+ if (!ok) return;
- const clickHandler = handleClicks ? this.onMenuOptionClick.bind(this, server, instance, includeAll) : null;
+ // delete from setting
+ setUserDefinedServers(servers.filter(s => s !== server));
- return
- {icon}
- {name}
-
;
- }
+ // the selected server is being removed, reset to our HS
+ if (serverSelected === server) {
+ onOptionChange(hsName, undefined);
+ }
+ };
+ removeButton = ;
+ }
- render() {
- let currentValue;
+ // ARIA: in actual fact the entire menu is one large radio group but for better screen reader support
+ // we use group to notate server wrongly.
+ return (
+
+ { server }
+ { removeButton }
+
+ { subtitle }
- let menu;
- if (this.state.expanded) {
- const menuOptions = this._getMenuOptions();
- menu =
- {menuOptions}
-
;
- currentValue = ;
- } else {
- const instance = instanceForInstanceId(this.props.protocols, this.state.selectedInstanceId);
- currentValue = this._makeMenuOption(
- this.state.selectedServer, instance, this.state.includeAllNetworks, false,
+
+ {options}
+
+
+
-
;
+
+ ({selectedServerName})
+
+ ;
}
-}
+
+ return
+ content =
+
{currentValue}
-
- {menu}
-
-
+ {content}
+
;
+};
NetworkDropdown.propTypes = {
onOptionChange: PropTypes.func.isRequired,
protocols: PropTypes.object,
- // The room directory config. May have a 'servers' key that is a list of server names to include in the dropdown
- config: PropTypes.object,
};
-NetworkDropdown.defaultProps = {
- protocols: {},
- config: {},
-};
+export default NetworkDropdown;
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 5ad9ae3f78..f8c8ad0200 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1449,6 +1449,20 @@
"And %(count)s more...|other": "And %(count)s more...",
"ex. @bob:example.com": "ex. @bob:example.com",
"Add User": "Add User",
+ "Enter a server name": "Enter a server name",
+ "Looks good": "Looks good",
+ "Can't find this server or its room list": "Can't find this server or its room list",
+ "All rooms": "All rooms",
+ "Your server": "Your server",
+ "Are you sure you want to remove %(serverName)s": "Are you sure you want to remove %(serverName)s",
+ "Remove server": "Remove server",
+ "Matrix": "Matrix",
+ "Add a new server": "Add a new server",
+ "Enter the name of a new server you want to explore.": "Enter the name of a new server you want to explore.",
+ "Server name": "Server name",
+ "Add a new server...": "Add a new server...",
+ "%(networkName)s rooms": "%(networkName)s rooms",
+ "Matrix rooms": "Matrix rooms",
"Matrix ID": "Matrix ID",
"Matrix Room ID": "Matrix Room ID",
"email address": "email address",
diff --git a/src/settings/Settings.js b/src/settings/Settings.js
index abcfd21902..461761dfa2 100644
--- a/src/settings/Settings.js
+++ b/src/settings/Settings.js
@@ -330,6 +330,10 @@ export const SETTINGS = {
supportedLevels: ['account'],
default: [],
},
+ "room_directory_servers": {
+ supportedLevels: ['account'],
+ default: [],
+ },
"integrationProvisioning": {
supportedLevels: ['account'],
default: true,