Prep for pin drop location sharing (#7919)

* add labs flag feature_location_share_pin_drop

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

* split LocationButton into two components

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

* rethemendex

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

* copyright

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

* one more (c)

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

* i18n

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

* empty line

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

* use same matrix client import

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

res/css/_components.scss

@@ -4,6 +4,7 @@
 @import "./_font-sizes.scss";
 @import "./_font-weights.scss";
 @import "./_spacing.scss";
+@import "./components/views/location/_LocationShareMenu.scss";
 @import "./components/views/spaces/_QuickThemeSwitcher.scss";
 @import "./structures/_AutoHideScrollbar.scss";
 @import "./structures/_BackdropPanel.scss";

res/css/components/views/location/_LocationShareMenu.scss

@@ -0,0 +1,22 @@
+/*
+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.
+*/
+
+.mx_LocationShareMenu {
+    width: 375px;
+    height: 460px;
+    display: flex;
+    flex-direction: column;
+}

res/css/views/location/_LocationPicker.scss

@@ -15,11 +15,9 @@ limitations under the License.
 */
 
 .mx_LocationPicker {
-    width: 375px;
-    height: 460px;
-
     border-radius: 8px;
 
+    height: 100%;
     position: relative;
 
     #mx_LocationPicker_map {

src/components/views/location/LocationButton.tsx

@@ -17,18 +17,12 @@ limitations under the License.
 import React, { ReactElement, SyntheticEvent, useContext } from 'react';
 import classNames from 'classnames';
 import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
-import { logger } from "matrix-js-sdk/src/logger";
-import { MatrixClient } from 'matrix-js-sdk/src/client';
-import { makeLocationContent } from "matrix-js-sdk/src/content-helpers";
 
 import { _t } from '../../../languageHandler';
-import LocationPicker from './LocationPicker';
 import { CollapsibleButton } from '../rooms/CollapsibleButton';
-import ContextMenu, { aboveLeftOf, useContextMenu, AboveLeftOf } from "../../structures/ContextMenu";
+import { aboveLeftOf, useContextMenu, AboveLeftOf } from "../../structures/ContextMenu";
-import Modal from '../../../Modal';
-import QuestionDialog from '../dialogs/QuestionDialog';
-import MatrixClientContext from '../../../contexts/MatrixClientContext';
 import { OverflowMenuContext } from "../rooms/MessageComposerButtons";
+import LocationShareMenu from './LocationShareMenu';
 
 interface IProps {
     roomId: string;
@@ -39,7 +33,6 @@ interface IProps {
 export const LocationButton: React.FC<IProps> = ({ roomId, sender, menuPosition }) => {
     const overflowMenuCloser = useContext(OverflowMenuContext);
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
-    const matrixClient = useContext(MatrixClientContext);
 
     const _onFinished = (ev?: SyntheticEvent) => {
         closeMenu(ev);
@@ -51,17 +44,12 @@ export const LocationButton: React.FC<IProps> = ({ roomId, sender, menuPosition
         const position = menuPosition ?? aboveLeftOf(
             button.current.getBoundingClientRect());
 
-        contextMenu = <ContextMenu
+        contextMenu = <LocationShareMenu
-            {...position}
+            menuPosition={position}
             onFinished={_onFinished}
-            managed={false}
+            sender={sender}
-        >
+            roomId={roomId}
-            <LocationPicker
+            openMenu={openMenu} />;
-                sender={sender}
-                onChoose={shareLocation(matrixClient, roomId, openMenu)}
-                onFinished={_onFinished}
-            />
-        </ContextMenu>;
     }
 
     const className = classNames(
@@ -83,47 +71,4 @@ export const LocationButton: React.FC<IProps> = ({ roomId, sender, menuPosition
     </React.Fragment>;
 };
 
-const shareLocation = (client: MatrixClient, roomId: string, openMenu: () => void) =>
-    (uri: string, ts: number) => {
-        if (!uri) return false;
-        try {
-            const text = textForLocation(uri, ts, null);
-            client.sendMessage(
-                roomId,
-                makeLocationContent(text, uri, ts, null),
-            );
-        } catch (e) {
-            logger.error("We couldn’t send your location", e);
-
-            const analyticsAction = 'We couldn’t send your location';
-            const params = {
-                title: _t("We couldn’t send your location"),
-                description: _t(
-                    "Element could not send your location. Please try again later."),
-                button: _t('Try again'),
-                cancelButton: _t('Cancel'),
-                onFinished: (tryAgain: boolean) => {
-                    if (tryAgain) {
-                        openMenu();
-                    }
-                },
-            };
-            Modal.createTrackedDialog(analyticsAction, '', QuestionDialog, params);
-        }
-        return true;
-    };
-
-export function textForLocation(
-    uri: string,
-    ts: number,
-    description: string | null,
-): string {
-    const date = new Date(ts).toISOString();
-    if (description) {
-        return `Location "${description}" ${uri} at ${date}`;
-    } else {
-        return `Location ${uri} at ${date}`;
-    }
-}
-
 export default LocationButton;

src/components/views/location/LocationPicker.tsx

@@ -30,7 +30,7 @@ import ErrorDialog from '../dialogs/ErrorDialog';
 import { findMapStyleUrl } from '../messages/MLocationBody';
 import { tileServerFromWellKnown } from '../../../utils/WellKnownUtils';
 
-interface IProps {
+export interface ILocationPickerProps {
     sender: RoomMember;
     onChoose(uri: string, ts: number): boolean;
     onFinished(ev?: SyntheticEvent): void;
@@ -50,14 +50,14 @@ interface IState {
  */
 
 @replaceableComponent("views.location.LocationPicker")
-class LocationPicker extends React.Component<IProps, IState> {
+class LocationPicker extends React.Component<ILocationPickerProps, IState> {
     public static contextType = MatrixClientContext;
     public context!: React.ContextType<typeof MatrixClientContext>;
     private map?: maplibregl.Map = null;
     private geolocate?: maplibregl.GeolocateControl = null;
     private marker?: maplibregl.Marker = null;
 
-    constructor(props: IProps) {
+    constructor(props: ILocationPickerProps) {
         super(props);
 
         this.state = {

src/components/views/location/LocationShareMenu.tsx

@@ -0,0 +1,52 @@
+/*
+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, { SyntheticEvent, useContext } from 'react';
+import { Room } from 'matrix-js-sdk';
+
+import MatrixClientContext from '../../../contexts/MatrixClientContext';
+import ContextMenu, { AboveLeftOf } from '../../structures/ContextMenu';
+import LocationPicker, { ILocationPickerProps } from "./LocationPicker";
+import { shareLocation } from './shareLocation';
+
+type Props = Omit<ILocationPickerProps, 'onChoose'> & {
+    onFinished: (ev?: SyntheticEvent) => void;
+    menuPosition: AboveLeftOf;
+    openMenu: () => void;
+    roomId: Room["roomId"];
+};
+
+const LocationShareMenu: React.FC<Props> = ({
+    menuPosition, onFinished, sender, roomId, openMenu,
+}) => {
+    const matrixClient = useContext(MatrixClientContext);
+
+    return <ContextMenu
+        {...menuPosition}
+        onFinished={onFinished}
+        managed={false}
+    >
+        <div className="mx_LocationShareMenu">
+            <LocationPicker
+                sender={sender}
+                onChoose={shareLocation(matrixClient, roomId, openMenu)}
+                onFinished={onFinished}
+            />
+        </div>
+    </ContextMenu>;
+};
+
+export default LocationShareMenu;

src/components/views/location/shareLocation.ts

@@ -0,0 +1,67 @@
+
+/*
+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 { MatrixClient } from "matrix-js-sdk/src/client";
+import { makeLocationContent } from "matrix-js-sdk/src/content-helpers";
+import { logger } from "matrix-js-sdk/src/logger";
+
+import { _t } from "../../../languageHandler";
+import Modal from "../../../Modal";
+import QuestionDialog from "../dialogs/QuestionDialog";
+
+export const shareLocation = (client: MatrixClient, roomId: string, openMenu: () => void) =>
+    (uri: string, ts: number) => {
+        if (!uri) return false;
+        try {
+            const text = textForLocation(uri, ts, null);
+            client.sendMessage(
+                roomId,
+                makeLocationContent(text, uri, ts, null),
+            );
+        } catch (e) {
+            logger.error("We couldn’t send your location", e);
+
+            const analyticsAction = 'We couldn’t send your location';
+            const params = {
+                title: _t("We couldn’t send your location"),
+                description: _t(
+                    "Element could not send your location. Please try again later."),
+                button: _t('Try again'),
+                cancelButton: _t('Cancel'),
+                onFinished: (tryAgain: boolean) => {
+                    if (tryAgain) {
+                        openMenu();
+                    }
+                },
+            };
+            Modal.createTrackedDialog(analyticsAction, '', QuestionDialog, params);
+        }
+        return true;
+    };
+
+export function textForLocation(
+    uri: string,
+    ts: number,
+    description: string | null,
+): string {
+    const date = new Date(ts).toISOString();
+    if (description) {
+        return `Location "${description}" ${uri} at ${date}`;
+    } else {
+        return `Location ${uri} at ${date}`;
+    }
+}

src/i18n/strings/en_EN.json

@@ -901,6 +901,7 @@
     "Right panel stays open (defaults to room member list)": "Right panel stays open (defaults to room member list)",
     "Jump to date (adds /jumptodate and jump to date headers)": "Jump to date (adds /jumptodate and jump to date headers)",
     "Don't send read receipts": "Don't send read receipts",
+    "Location sharing - pin drop (under active development)": "Location sharing - pin drop (under active development)",
     "Font size": "Font size",
     "Use custom size": "Use custom size",
     "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
@@ -2170,14 +2171,14 @@
     "Can't load this message": "Can't load this message",
     "toggle event": "toggle event",
     "Location": "Location",
-    "We couldn’t send your location": "We couldn’t send your location",
-    "Element could not send your location. Please try again later.": "Element could not send your location. Please try again later.",
     "Could not fetch location": "Could not fetch location",
     "Share location": "Share location",
     "Element was denied permission to fetch your location. Please allow location access in your browser settings.": "Element was denied permission to fetch your location. Please allow location access in your browser settings.",
     "Failed to fetch your location. Please try again later.": "Failed to fetch your location. Please try again later.",
     "Timed out trying to fetch your location. Please try again later.": "Timed out trying to fetch your location. Please try again later.",
     "Unknown error fetching location. Please try again later.": "Unknown error fetching location. Please try again later.",
+    "We couldn’t send your location": "We couldn’t send your location",
+    "Element could not send your location. Please try again later.": "Element could not send your location. Please try again later.",
     "Failed to load group members": "Failed to load group members",
     "Filter community members": "Filter community members",
     "Are you sure you want to remove '%(roomName)s' from %(groupId)s?": "Are you sure you want to remove '%(roomName)s' from %(groupId)s?",

src/settings/Settings.tsx

@@ -399,6 +399,13 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         displayName: _td("Don't send read receipts"),
         default: false,
     },
+    "feature_location_share_pin_drop": {
+        isFeature: true,
+        labsGroup: LabGroup.Messaging,
+        supportedLevels: LEVELS_FEATURE,
+        displayName: _td("Location sharing - pin drop (under active development)"),
+        default: false,
+    },
     "baseFontSize": {
         displayName: _td("Font size"),
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,

test/components/views/location/LocationButton-test.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import sdk from "../../../skinned-sdk";
-import { textForLocation } from "../../../../src/components/views/location/LocationButton";
+import { textForLocation } from "../../../../src/components/views/location/shareLocation";
 
 sdk.getComponent("LocationPicker");
 

test/components/views/location/LocationShareMenu-test.tsx

@@ -0,0 +1,51 @@
+/*
+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 { mount } from 'enzyme';
+import { RoomMember } from 'matrix-js-sdk';
+
+import '../../../skinned-sdk';
+import LocationShareMenu from '../../../../src/components/views/location/LocationShareMenu';
+import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
+import { ChevronFace } from '../../../../src/components/structures/ContextMenu';
+
+describe('<LocationShareMenu />', () => {
+    const mockClient = {
+        on: jest.fn(),
+    };
+
+    const defaultProps = {
+        menuPosition: {
+            top: 1, left: 1,
+            chevronFace: ChevronFace.Bottom,
+        },
+        onFinished: jest.fn(),
+        openMenu: jest.fn(),
+        roomId: '!room:server.org',
+        sender: { id: '@ernie:server.org' } as unknown as RoomMember,
+    };
+    const getComponent = (props = {}) =>
+        mount(<LocationShareMenu {...defaultProps} {...props} />, {
+            wrappingComponent: MatrixClientContext.Provider,
+            wrappingComponentProps: { value: mockClient },
+        });
+
+    it('renders', () => {
+        const component = getComponent();
+        expect(component).toMatchSnapshot();
+    });
+});

test/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap

@@ -0,0 +1,295 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<LocationShareMenu /> renders 1`] = `
+<LocationShareMenu
+  menuPosition={
+    Object {
+      "chevronFace": "bottom",
+      "left": 1,
+      "top": 1,
+    }
+  }
+  onFinished={[MockFunction]}
+  openMenu={[MockFunction]}
+  roomId="!room:server.org"
+  sender={
+    Object {
+      "id": "@ernie:server.org",
+    }
+  }
+>
+  <ContextMenu
+    chevronFace="bottom"
+    hasBackground={true}
+    left={1}
+    managed={false}
+    onFinished={[MockFunction]}
+    top={1}
+  >
+    <Portal
+      containerInfo={
+        <div
+          id="mx_ContextualMenu_Container"
+        >
+          <div
+            class="mx_ContextualMenu_wrapper"
+            style="top: 1px; left: 1px;"
+          >
+            <div
+              class="mx_ContextualMenu_background"
+            />
+            <div
+              class="mx_ContextualMenu mx_ContextualMenu_withChevron_bottom"
+            >
+              <div
+                class="mx_ContextualMenu_chevron_bottom"
+              />
+              <div
+                class="mx_LocationShareMenu"
+              >
+                <div
+                  class="mx_LocationPicker"
+                >
+                  <div
+                    id="mx_LocationPicker_map"
+                  />
+                  <div
+                    class="mx_LocationPicker_error"
+                  >
+                    Failed to load map
+                  </div>
+                  <div
+                    class="mx_LocationPicker_footer"
+                  >
+                    <form>
+                      <div
+                        class="mx_Dialog_buttons"
+                      >
+                        <button
+                          class="mx_LocationPicker_cancelButton"
+                          data-test-id="dialog-cancel-button"
+                          type="button"
+                        >
+                          Cancel
+                        </button>
+                        <button
+                          class="mx_Dialog_primary"
+                          data-test-id="dialog-primary-button"
+                          disabled=""
+                          type="submit"
+                        >
+                          Share location
+                        </button>
+                      </div>
+                    </form>
+                  </div>
+                  <div
+                    class="mx_MLocationBody_marker"
+                    id="mx_MLocationPicker_marker"
+                  >
+                    <div
+                      class="mx_MLocationBody_markerBorder"
+                    >
+                      <span
+                        class="mx_BaseAvatar"
+                        role="presentation"
+                      >
+                        <span
+                          aria-hidden="true"
+                          class="mx_BaseAvatar_initial"
+                          style="font-size: 17.55px; width: 27px; line-height: 27px;"
+                        />
+                        <img
+                          alt=""
+                          aria-hidden="true"
+                          class="mx_BaseAvatar_image"
+                          src=""
+                          style="width: 27px; height: 27px;"
+                        />
+                      </span>
+                    </div>
+                    <img
+                      class="mx_MLocationBody_pointer"
+                      height="5"
+                      src="image-file-stub"
+                      width="9"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      }
+    >
+      <RovingTabIndexProvider
+        handleHomeEnd={true}
+        handleUpDown={true}
+        onKeyDown={[Function]}
+      >
+        <div
+          className="mx_ContextualMenu_wrapper"
+          onClick={[Function]}
+          onContextMenu={[Function]}
+          onKeyDown={[Function]}
+          style={
+            Object {
+              "left": 1,
+              "top": 1,
+            }
+          }
+        >
+          <div
+            className="mx_ContextualMenu_background"
+            onClick={[Function]}
+            onContextMenu={[Function]}
+            style={Object {}}
+          />
+          <div
+            className="mx_ContextualMenu mx_ContextualMenu_withChevron_bottom"
+            style={Object {}}
+          >
+            <div
+              className="mx_ContextualMenu_chevron_bottom"
+              style={
+                Object {
+                  "left": undefined,
+                }
+              }
+            />
+            <div
+              className="mx_LocationShareMenu"
+            >
+              <LocationPicker
+                onChoose={[Function]}
+                onFinished={[MockFunction]}
+                sender={
+                  Object {
+                    "id": "@ernie:server.org",
+                  }
+                }
+              >
+                <div
+                  className="mx_LocationPicker"
+                >
+                  <div
+                    id="mx_LocationPicker_map"
+                  />
+                  <div
+                    className="mx_LocationPicker_error"
+                  >
+                    Failed to load map
+                  </div>
+                  <div
+                    className="mx_LocationPicker_footer"
+                  >
+                    <form
+                      onSubmit={[Function]}
+                    >
+                      <DialogButtons
+                        cancelButtonClass="mx_LocationPicker_cancelButton"
+                        disabled={false}
+                        hasCancel={true}
+                        onCancel={[MockFunction]}
+                        onPrimaryButtonClick={[Function]}
+                        primaryButton="Share location"
+                        primaryDisabled={true}
+                        primaryIsSubmit={true}
+                      >
+                        <div
+                          className="mx_Dialog_buttons"
+                        >
+                          <button
+                            className="mx_LocationPicker_cancelButton"
+                            data-test-id="dialog-cancel-button"
+                            disabled={false}
+                            onClick={[Function]}
+                            type="button"
+                          >
+                            Cancel
+                          </button>
+                          <button
+                            className="mx_Dialog_primary"
+                            data-test-id="dialog-primary-button"
+                            disabled={true}
+                            onClick={[Function]}
+                            type="submit"
+                          >
+                            Share location
+                          </button>
+                        </div>
+                      </DialogButtons>
+                    </form>
+                  </div>
+                  <div
+                    className="mx_MLocationBody_marker"
+                    id="mx_MLocationPicker_marker"
+                  >
+                    <div
+                      className="mx_MLocationBody_markerBorder"
+                    >
+                      <MemberAvatar
+                        height={27}
+                        member={
+                          Object {
+                            "id": "@ernie:server.org",
+                          }
+                        }
+                        resizeMethod="crop"
+                        viewUserOnClick={false}
+                        width={27}
+                      >
+                        <BaseAvatar
+                          height={27}
+                          resizeMethod="crop"
+                          width={27}
+                        >
+                          <span
+                            className="mx_BaseAvatar"
+                            role="presentation"
+                          >
+                            <span
+                              aria-hidden="true"
+                              className="mx_BaseAvatar_initial"
+                              style={
+                                Object {
+                                  "fontSize": "17.55px",
+                                  "lineHeight": "27px",
+                                  "width": "27px",
+                                }
+                              }
+                            />
+                            <img
+                              alt=""
+                              aria-hidden="true"
+                              className="mx_BaseAvatar_image"
+                              onError={[Function]}
+                              src=""
+                              style={
+                                Object {
+                                  "height": "27px",
+                                  "width": "27px",
+                                }
+                              }
+                            />
+                          </span>
+                        </BaseAvatar>
+                      </MemberAvatar>
+                    </div>
+                    <img
+                      className="mx_MLocationBody_pointer"
+                      height="5"
+                      src="image-file-stub"
+                      width="9"
+                    />
+                  </div>
+                </div>
+              </LocationPicker>
+            </div>
+          </div>
+        </div>
+      </RovingTabIndexProvider>
+    </Portal>
+  </ContextMenu>
+</LocationShareMenu>
+`;