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>

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;