Change loading errors in room directory to inline instead of modal

This changes errors that may occur when loading the room directory so that the
message appears inline with the overall directory UI instead of in a new modal.
This is important so that the new room button remains on screen even if the
directory is down.

Fixes https://github.com/vector-im/riot-web/issues/9046

src/components/structures/RoomDirectory.js

@@ -26,14 +26,17 @@ const dis = require('../../dispatcher');
 
 import { linkifyAndSanitizeHtml } from '../../HtmlUtils';
 import Promise from 'bluebird';
-
 import { _t } from '../../languageHandler';
-
+import { instanceForInstanceId, protocolNameForInstanceId } from '../../utils/DirectoryUtils';
-import {instanceForInstanceId, protocolNameForInstanceId} from '../../utils/DirectoryUtils';
+import Analytics from '../../Analytics';
 
 const MAX_NAME_LENGTH = 80;
 const MAX_TOPIC_LENGTH = 160;
 
+function track(action) {
+    Analytics.trackEvent('RoomDirectory', action);
+}
+
 module.exports = React.createClass({
     displayName: 'RoomDirectory',
 
@@ -53,6 +56,7 @@ module.exports = React.createClass({
             publicRooms: [],
             loading: true,
             protocolsLoading: true,
+            error: null,
             instanceId: null,
             includeAll: false,
             roomServer: null,
@@ -95,10 +99,12 @@ module.exports = React.createClass({
                 // thing you see when loading the client!
                 return;
             }
-            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            track('Failed to get protocol list from homeserver');
-            Modal.createTrackedDialog('Failed to get protocol list from homeserver', '', ErrorDialog, {
+            this.setState({
-                title: _t('Failed to get protocol list from homeserver'),
+                error: _t(
-                description: _t('The homeserver may be too old to support third party networks'),
+                    'Riot failed to get the protocol list from the homeserver. ' +
+                    'The homeserver may be too old to support third party networks.',
+                ),
             });
         });
 
@@ -187,12 +193,14 @@ module.exports = React.createClass({
                 return;
             }
 
-            this.setState({ loading: false });
             console.error("Failed to get publicRooms: %s", JSON.stringify(err));
-            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            track('Failed to get public room list');
-            Modal.createTrackedDialog('Failed to get public room list', '', ErrorDialog, {
+            this.setState({
-                title: _t('Failed to get public room list'),
+                loading: false,
-                description: ((err && err.message) ? err.message : _t('The server may be unavailable or overloaded')),
+                error:
+                    `${_t('Riot failed to get the public room list.')} ` +
+                    `${(err && err.message) ? err.message : _t('The homeserver may be unavailable or overloaded.')}`
+                ,
             });
         });
     },
@@ -516,7 +524,9 @@ module.exports = React.createClass({
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
         let content;
-        if (this.state.protocolsLoading || this.state.loading) {
+        if (this.state.error) {
+            content = this.state.error;
+        } else if (this.state.protocolsLoading || this.state.loading) {
             content = <Loader />;
         } else {
             const rows = this.getRows();

src/i18n/strings/en_EN.json

@@ -1379,15 +1379,15 @@
     "Create a new community": "Create a new community",
     "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.": "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.",
     "You have no visible notifications": "You have no visible notifications",
-    "Failed to get protocol list from homeserver": "Failed to get protocol list from homeserver",
+    "Riot failed to get the protocol list from the homeserver. The homeserver may be too old to support third party networks.": "Riot failed to get the protocol list from the homeserver. The homeserver may be too old to support third party networks.",
-    "The homeserver may be too old to support third party networks": "The homeserver may be too old to support third party networks",
+    "Riot failed to get the public room list.": "Riot failed to get the public room list.",
-    "Failed to get public room list": "Failed to get public room list",
+    "The homeserver may be unavailable or overloaded.": "The homeserver may be unavailable or overloaded.",
-    "The server may be unavailable or overloaded": "The server may be unavailable or overloaded",
     "Delete the room alias %(alias)s and remove %(name)s from the directory?": "Delete the room alias %(alias)s and remove %(name)s from the directory?",
     "Remove %(name)s from the directory?": "Remove %(name)s from the directory?",
     "Remove from Directory": "Remove from Directory",
     "remove %(name)s from the directory.": "remove %(name)s from the directory.",
     "delete the alias.": "delete the alias.",
+    "The server may be unavailable or overloaded": "The server may be unavailable or overloaded",
     "Unable to join network": "Unable to join network",
     "Riot does not know how to join a room on this network": "Riot does not know how to join a room on this network",
     "Room not found": "Room not found",