Location sharing > back button (#7958)

* add back/cancel buttons to share dialog

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

* test buttons

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

* improve weird indentation

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

* relint

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

* PR tweaks

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

* quotes

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

res/css/_components.scss

@@ -5,6 +5,7 @@
 @import "./_font-weights.scss";
 @import "./_spacing.scss";
 @import "./components/views/location/_LocationShareMenu.scss";
+@import "./components/views/location/_ShareDialogButtons.scss";
 @import "./components/views/location/_ShareType.scss";
 @import "./components/views/spaces/_QuickThemeSwitcher.scss";
 @import "./structures/_AutoHideScrollbar.scss";

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

@@ -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.
+*/
+
+.mx_ShareDialogButtons {
+    position: absolute;
+    width: 100%;
+    height: 0;
+    top: 0;
+}
+
+.mx_ShareDialogButtons_button {
+    @mixin ButtonResetDefault;
+    height: 24px;
+    width: 24px;
+    border-radius: 50%;
+    background-color: $quinary-content;
+    opacity: 0.8;
+    text-align: center;
+    color: $secondary-content;
+    position: absolute;
+    top: $spacing-16;
+
+    &:hover, &:focus {
+        opacity: 1;
+    }
+
+    &.left {
+        left: $spacing-16;
+    }
+
+    &.right {
+        right: $spacing-16;
+    }
+}
+
+.mx_ShareDialogButtons_button-icon {
+    height: 10px;
+    margin-top: 3px;
+}

res/css/views/location/_LocationPicker.scss

@@ -25,11 +25,15 @@ limitations under the License.
         border-radius: 8px;
 
         .maplibregl-ctrl.maplibregl-ctrl-group {
+            // place below the close button
+            // padding-16 + 24px close button + padding-10
             margin-top: 50px;
+            margin-right: $spacing-16;
         }
 
         .maplibregl-ctrl-bottom-right {
             bottom: 68px;
+            margin-right: $spacing-16;
         }
 
         .maplibregl-user-location-accuracy-circle {
@@ -91,34 +95,6 @@ limitations under the License.
                 min-width: 328px;
                 min-height: 48px;
             }
-
-            button.mx_LocationPicker_cancelButton {
-                border: none;
-                border-radius: 12px;
-                position: absolute;
-                top: -360px;
-                right: 5px;
-                background-color: $quinary-content;
-                width: 24px;
-                height: 24px;
-                padding: 0px;
-                color: rgba(0, 0, 0, 0);
-            }
-
-            button.mx_LocationPicker_cancelButton::before {
-                content: '';
-                background-color: $primary-content;
-                min-width: 8px;
-                min-height: 8px;
-                width: 8px;
-                height: 8px;
-                position: absolute;
-                margin: 4px 8px;
-                mask-repeat: no-repeat;
-                mask-size: contain;
-                mask-position: center;
-                mask-image: url('$(res)/img/cancel-small.svg');
-            }
         }
     }
 

src/components/views/location/LocationPicker.tsx

@@ -177,10 +177,9 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
                     <form onSubmit={this.onOk}>
                         <DialogButtons
                             primaryButton={_t('Share location')}
-                            cancelButtonClass="mx_LocationPicker_cancelButton"
                             primaryIsSubmit={true}
                             onPrimaryButtonClick={this.onOk}
-                            onCancel={this.props.onFinished}
+                            hasCancel={false}
                             primaryDisabled={!this.state.position}
                         />
                     </form>

src/components/views/location/LocationShareMenu.tsx

@@ -24,6 +24,7 @@ import LocationPicker, { ILocationPickerProps } from "./LocationPicker";
 import { shareLocation } from './shareLocation';
 import SettingsStore from '../../../settings/SettingsStore';
 import ShareType, { LocationShareType } from './ShareType';
+import ShareDialogButtons from './ShareDialogButtons';
 
 type Props = Omit<ILocationPickerProps, 'onChoose'> & {
     onFinished: (ev?: SyntheticEvent) => void;
@@ -55,8 +56,10 @@ const LocationShareMenu: React.FC<Props> = ({
     const matrixClient = useContext(MatrixClientContext);
     const enabledShareTypes = getEnabledShareTypes();
 
-    const [shareType, setShareType] = useState<LocationShareType>(
-        enabledShareTypes.length === 1 ? LocationShareType.Own : undefined,
+    const multipleShareTypesEnabled = enabledShareTypes.length > 1;
+
+    const [shareType, setShareType] = useState<LocationShareType | undefined>(
+        multipleShareTypesEnabled ? undefined : LocationShareType.Own,
     );
 
     return <ContextMenu
@@ -72,6 +75,7 @@ const LocationShareMenu: React.FC<Props> = ({
             />
                 :
                 <ShareType setShareType={setShareType} enabledShareTypes={enabledShareTypes} /> }
+            <ShareDialogButtons displayBack={!!shareType && multipleShareTypesEnabled} onBack={() => setShareType(undefined)} onCancel={onFinished} />
         </div>
     </ContextMenu>;
 };

src/components/views/location/ShareDialogButtons.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 from 'react';
+
+import AccessibleButton from '../elements/AccessibleButton';
+import { Icon as BackIcon } from '../../../../res/img/element-icons/caret-left.svg';
+import { Icon as CloseIcon } from '../../../../res/img/element-icons/cancel-rounded.svg';
+
+interface Props {
+    onCancel: () => void;
+    onBack: () => void;
+    displayBack?: boolean;
+}
+
+const ShareDialogButtons: React.FC<Props> = ({ onBack, onCancel, displayBack }) => {
+    return <div className='mx_ShareDialogButtons'>
+        { displayBack &&
+            <AccessibleButton
+                className='mx_ShareDialogButtons_button left'
+                data-test-id='share-dialog-buttons-back'
+                onClick={onBack}
+                element='button'
+            >
+                <BackIcon className='mx_ShareDialogButtons_button-icon' />
+            </AccessibleButton>
+        }
+        <AccessibleButton
+            className='mx_ShareDialogButtons_button right'
+            data-test-id='share-dialog-buttons-cancel'
+            onClick={onCancel}
+            element='button'
+        >
+            <CloseIcon className='mx_ShareDialogButtons_button-icon' />
+        </AccessibleButton>
+    </div>;
+};
+
+export default ShareDialogButtons;

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

@@ -52,6 +52,7 @@ describe('<LocationShareMenu />', () => {
     const userId = '@ernie:server.org';
     const mockClient = {
         on: jest.fn(),
+        off: jest.fn(),
         removeListener: jest.fn(),
         getUserId: jest.fn().mockReturnValue(userId),
         getClientWellKnown: jest.fn().mockResolvedValue({
@@ -85,33 +86,96 @@ describe('<LocationShareMenu />', () => {
 
     const getShareTypeOption = (component, shareType: LocationShareType) =>
         findByTestId(component, `share-location-option-${shareType}`);
+    const getBackButton = component => findByTestId(component, 'share-dialog-buttons-back');
+    const getCancelButton = component => findByTestId(component, 'share-dialog-buttons-cancel');
 
-    it('renders location picker when only Own share type is enabled', () => {
-        mocked(SettingsStore).getValue.mockReturnValue(false);
-        const component = getComponent();
-        expect(component.find('ShareType').length).toBeFalsy();
-        expect(component.find('LocationPicker').length).toBeTruthy();
-    });
+    describe('when only Own share type is enabled', () => {
+        beforeEach(() => {
+            mocked(SettingsStore).getValue.mockReturnValue(false);
+        });
 
-    it('renders share type switch with own and pin drop options when enabled', () => {
-        // feature_location_share_pin_drop is set to enabled by default mocking
-        const component = getComponent();
-        expect(component.find('LocationPicker').length).toBeFalsy();
+        it('renders location picker when only Own share type is enabled', () => {
+            const component = getComponent();
+            expect(component.find('ShareType').length).toBeFalsy();
+            expect(component.find('LocationPicker').length).toBeTruthy();
+        });
+
+        it('does not render back button when only Own share type is enabled', () => {
+            const component = getComponent();
+            expect(getBackButton(component).length).toBeFalsy();
+        });
+
+        it('clicking cancel button from location picker closes dialog', () => {
+            const onFinished = jest.fn();
+            const component = getComponent({ onFinished });
 
-        expect(getShareTypeOption(component, LocationShareType.Own).length).toBeTruthy();
-        expect(getShareTypeOption(component, LocationShareType.Pin).length).toBeTruthy();
+            act(() => {
+                getCancelButton(component).at(0).simulate('click');
+            });
+
+            expect(onFinished).toHaveBeenCalled();
+        });
     });
 
-    it('selecting own location share type advances to location picker', () => {
+    describe('with pin drop share type enabled', () => {
         // feature_location_share_pin_drop is set to enabled by default mocking
-        const component = getComponent();
 
-        act(() => {
-            getShareTypeOption(component, LocationShareType.Own).at(0).simulate('click');
+        it('renders share type switch with own and pin drop options', () => {
+            const component = getComponent();
+            expect(component.find('LocationPicker').length).toBeFalsy();
+
+            expect(getShareTypeOption(component, LocationShareType.Own).length).toBeTruthy();
+            expect(getShareTypeOption(component, LocationShareType.Pin).length).toBeTruthy();
         });
 
-        component.setProps({});
+        it('does not render back button on share type screen', () => {
+            const component = getComponent();
+            expect(getBackButton(component).length).toBeFalsy();
+        });
+
+        it('clicking cancel button from share type screen closes dialog', () => {
+            const onFinished = jest.fn();
+            const component = getComponent({ onFinished });
+
+            act(() => {
+                getCancelButton(component).at(0).simulate('click');
+            });
 
-        expect(component.find('LocationPicker').length).toBeTruthy();
+            expect(onFinished).toHaveBeenCalled();
+        });
+
+        it('selecting own location share type advances to location picker', () => {
+            const component = getComponent();
+
+            act(() => {
+                getShareTypeOption(component, LocationShareType.Own).at(0).simulate('click');
+            });
+
+            component.setProps({});
+
+            expect(component.find('LocationPicker').length).toBeTruthy();
+        });
+
+        it('clicking back button from location picker screen goes back to share screen', () => {
+            // feature_location_share_pin_drop is set to enabled by default mocking
+            const onFinished = jest.fn();
+            const component = getComponent({ onFinished });
+
+            // advance to location picker
+            act(() => {
+                getShareTypeOption(component, LocationShareType.Own).at(0).simulate('click');
+                component.setProps({});
+            });
+
+            expect(component.find('LocationPicker').length).toBeTruthy();
+
+            act(() => {
+                getBackButton(component).at(0).simulate('click');
+                component.setProps({});
+            });
+
+            // back to share type
+            expect(component.find('ShareType').length).toBeTruthy();
+        });
     });
 });