fallback to event text in location body when map unavailable (#7982)

* center icon better

Signed-off-by: Kerry Archibald <kerrya@element.io>

* remove debug

Signed-off-by: Kerry Archibald <kerrya@element.io>

* retrigger all builds

Signed-off-by: Kerry Archibald <kerrya@element.io>

* set assetType on share event

Signed-off-by: Kerry Archibald <kerrya@element.io>

* use pin marker on map for pin drop share

Signed-off-by: Kerry Archibald <kerrya@element.io>

* lint

Signed-off-by: Kerry Archibald <kerrya@element.io>

* test events

Signed-off-by: Kerry Archibald <kerrya@element.io>

* pin drop helper text

Signed-off-by: Kerry Archibald <kerrya@element.io>

* use generic location type

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add navigationcontrol when in pin mode

Signed-off-by: Kerry Archibald <kerrya@element.io>

* allow pin drop without location permissions

Signed-off-by: Kerry Archibald <kerrya@element.io>

* remove geolocate control when pin dropping without geo perms

Signed-off-by: Kerry Archibald <kerrya@element.io>

* test locationpicker

Signed-off-by: Kerry Archibald <kerrya@element.io>

* test marker type, tidy

Signed-off-by: Kerry Archibald <kerrya@element.io>

* move findMapStyleUrl

Signed-off-by: Kerry Archibald <kerrya@element.io>

* fallback to event content when cant render map

Signed-off-by: Kerry Archibald <kerrya@element.io>

* update mocks in location picker, show same messages as timeline

Signed-off-by: Kerry Archibald <kerrya@element.io>

* style error message in location share menu

Signed-off-by: Kerry Archibald <kerrya@element.io>

* i18n

Signed-off-by: Kerry Archibald <kerrya@element.io>

* forgotten copyright

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add copyright

Signed-off-by: Kerry Archibald <kerrya@element.io>

* update style

Signed-off-by: Kerry Archibald <kerrya@element.io>

* icon bigger

Signed-off-by: Kerry Archibald <kerrya@element.io>

src/components/views/location/LocationPicker.tsx

@@ -26,12 +26,13 @@ import MemberAvatar from '../avatars/MemberAvatar';
 import MatrixClientContext from '../../../contexts/MatrixClientContext';
 import Modal from '../../../Modal';
 import ErrorDialog from '../dialogs/ErrorDialog';
-import { findMapStyleUrl } from '../messages/MLocationBody';
 import { tileServerFromWellKnown } from '../../../utils/WellKnownUtils';
+import { findMapStyleUrl } from './findMapStyleUrl';
 import { LocationShareType } from './shareLocation';
 import { Icon as LocationIcon } from '../../../../res/img/element-icons/location.svg';
+import { LocationShareError } from './LocationShareErrors';
 import AccessibleButton from '../elements/AccessibleButton';
-
+import { MapError } from './MapError';
 export interface ILocationPickerProps {
     sender: RoomMember;
     shareType: LocationShareType;
@@ -48,7 +49,7 @@ interface IPosition {
 }
 interface IState {
     position?: IPosition;
-    error: Error;
+    error?: LocationShareError;
 }
 
 /*
@@ -104,10 +105,10 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
             this.map.on('error', (e) => {
                 logger.error(
                     "Failed to load map: check map_style_url in config.json "
-                        + "has a valid URL and API key",
+                    + "has a valid URL and API key",
                     e.error,
                 );
-                this.setState({ error: e.error });
+                this.setState({ error: LocationShareError.MapStyleUrlNotReachable });
             });
 
             this.map.on('load', () => {
@@ -129,7 +130,10 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
             }
         } catch (e) {
             logger.error("Failed to render map", e);
-            this.setState({ error: e });
+            const errorType = e?.message === LocationShareError.MapStyleUrlNotConfigured ?
+                LocationShareError.MapStyleUrlNotConfigured :
+                LocationShareError.Default;
+            this.setState({ error: errorType });
         }
     }
 
@@ -213,10 +217,13 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
     };
 
     render() {
-        const error = this.state.error ?
-            <div data-test-id='location-picker-error' className="mx_LocationPicker_error">
-                { _t("Failed to load map") }
-            </div> : null;
+        if (this.state.error) {
+            return <div className="mx_LocationPicker mx_LocationPicker_hasError">
+                <MapError
+                    error={this.state.error}
+                    onFinished={this.props.onFinished} />
+            </div>;
+        }
 
         return (
             <div className="mx_LocationPicker">
@@ -227,7 +234,6 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
                     </span>
                 </div>
                 }
-                { error }
                 <div className="mx_LocationPicker_footer">
                     <form onSubmit={this.onOk}>
 

src/components/views/location/LocationShareErrors.ts

@@ -0,0 +1,34 @@
+/*
+Copyright 2022 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 { _t } from "../../../languageHandler";
+
+export enum LocationShareError {
+    MapStyleUrlNotConfigured = 'MapStyleUrlNotConfigured',
+    MapStyleUrlNotReachable = 'MapStyleUrlNotReachable',
+    Default = 'Default'
+}
+
+export const getLocationShareErrorMessage = (errorType?: LocationShareError): string => {
+    switch (errorType) {
+        case LocationShareError.MapStyleUrlNotConfigured:
+            return _t('This homeserver is not configured to display maps.');
+        case LocationShareError.MapStyleUrlNotReachable:
+        default:
+            return _t(`This homeserver is not configured correctly to display maps, `
+                + `or the configured map server may be unreachable.`);
+    }
+};

src/components/views/location/MapError.tsx

@@ -0,0 +1,39 @@
+/*
+Copyright 2022 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 from 'react';
+
+import { Icon as WarningBadge } from '../../../../res/img/element-icons/warning-badge.svg';
+import { _t } from '../../../languageHandler';
+import AccessibleButton from '../elements/AccessibleButton';
+import Heading from '../typography/Heading';
+import { getLocationShareErrorMessage, LocationShareError } from './LocationShareErrors';
+
+interface Props {
+    onFinished: () => void;
+    error: LocationShareError;
+}
+
+export const MapError: React.FC<Props> = ({
+    onFinished, error,
+}) => (<div data-test-id='location-picker-error' className="mx_MapError">
+    <WarningBadge className="mx_MapError_icon" />
+    <Heading className="mx_MapError_heading" size='h3'>{ _t("Unable to load map") }</Heading>
+    <p>
+        { getLocationShareErrorMessage(error) }
+    </p>
+    <AccessibleButton element='button' kind="primary" onClick={onFinished}>{ _t("OK") }</AccessibleButton>
+</div>);

src/components/views/location/findMapStyleUrl.ts

@@ -0,0 +1,41 @@
+/*
+Copyright 2022 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 { logger } from "matrix-js-sdk/src/logger";
+
+import SdkConfig from "../../../SdkConfig";
+import { getTileServerWellKnown } from "../../../utils/WellKnownUtils";
+import { LocationShareError } from "./LocationShareErrors";
+
+/**
+ * Look up what map tile server style URL was provided in the homeserver's
+ * .well-known location, or, failing that, in our local config, or, failing
+ * that, defaults to the same tile server listed by matrix.org.
+ */
+export function findMapStyleUrl(): string {
+    const mapStyleUrl = (
+        getTileServerWellKnown()?.map_style_url ??
+        SdkConfig.get().map_style_url
+    );
+
+    if (!mapStyleUrl) {
+        logger.error("'map_style_url' missing from homeserver .well-known area, and " +
+            "missing from from config.json.");
+        throw new Error(LocationShareError.MapStyleUrlNotConfigured);
+    }
+
+    return mapStyleUrl;
+}