LLS: expose way to enable live sharing labs flag from location dialog (#8416)

* add state for waiting for labs flag

Signed-off-by: Kerry Archibald <[email protected]>

* add enable live share component

Signed-off-by: Kerry Archibald <[email protected]>

* test enabling live share labs flag

Signed-off-by: Kerry Archibald <[email protected]>

Author: Kerry

res/css/_components.scss

@@ -14,6 +14,7 @@
 @import "./components/views/beacon/_OwnBeaconStatus.scss";
 @import "./components/views/beacon/_RoomLiveShareWarning.scss";
 @import "./components/views/beacon/_StyledLiveBeaconIcon.scss";
+@import "./components/views/location/_EnableLiveShare.scss";
 @import "./components/views/location/_LiveDurationDropdown.scss";
 @import "./components/views/location/_LocationShareMenu.scss";
 @import "./components/views/location/_MapError.scss";

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

@@ -0,0 +1,48 @@
+/*
+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_EnableLiveShare {
+    flex: 1 1 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+
+    padding: $spacing-32 $spacing-16;
+    text-align: center;
+    box-sizing: border-box;
+}
+
+.mx_EnableLiveShare_heading {
+    padding-top: $spacing-24;
+}
+
+.mx_EnableLiveShare_icon {
+    height: 58px;
+    width: 58px;
+}
+
+.mx_EnableLiveShare_description {
+    padding: 0 $spacing-24;
+    margin-bottom: $spacing-32;
+    line-height: $font-20px;
+}
+
+.mx_EnableLiveShare_button {
+    margin-top: $spacing-32;
+    height: 48px;
+    width: 100%;
+}

src/components/views/location/EnableLiveShare.tsx

@@ -0,0 +1,63 @@
+/*
+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, { useState } from 'react';
+
+import { _t } from '../../../languageHandler';
+import StyledLiveBeaconIcon from '../beacon/StyledLiveBeaconIcon';
+import AccessibleButton from '../elements/AccessibleButton';
+import LabelledToggleSwitch from '../elements/LabelledToggleSwitch';
+import Heading from '../typography/Heading';
+
+interface Props {
+    onSubmit: () => void;
+}
+
+export const EnableLiveShare: React.FC<Props> = ({
+    onSubmit,
+}) => {
+    const [isEnabled, setEnabled] = useState(false);
+    return (
+        <div data-test-id='location-picker-enable-live-share' className='mx_EnableLiveShare'>
+            <StyledLiveBeaconIcon className='mx_EnableLiveShare_icon' />
+            <Heading className='mx_EnableLiveShare_heading' size='h3'>{ _t('Live location sharing') }</Heading>
+            <p className='mx_EnableLiveShare_description'>
+                { _t(
+                    'Please note: this is a labs feature using a temporary implementation. ' +
+                    'This means you will not be able to delete your location history, ' +
+                    'and advanced users will be able to see your location history ' +
+                    'even after you stop sharing your live location with this room.',
+                ) }
+            </p>
+            <LabelledToggleSwitch
+                data-test-id='enable-live-share-toggle'
+                value={isEnabled}
+                onChange={setEnabled}
+                label={_t('Enable live location sharing')}
+            />
+            <AccessibleButton
+                data-test-id='enable-live-share-submit'
+                className='mx_EnableLiveShare_button'
+                element='button'
+                kind='primary'
+                onClick={onSubmit}
+                disabled={!isEnabled}
+            >
+                { _t('OK') }
+            </AccessibleButton>
+        </div>
+    );
+};

src/components/views/location/LocationShareMenu.tsx

@@ -27,6 +27,9 @@ import ShareDialogButtons from './ShareDialogButtons';
 import ShareType from './ShareType';
 import { LocationShareType } from './shareLocation';
 import { OwnProfileStore } from '../../../stores/OwnProfileStore';
+import { EnableLiveShare } from './EnableLiveShare';
+import { useFeatureEnabled } from '../../../hooks/useSettings';
+import { SettingLevel } from '../../../settings/SettingLevel';
 
 type Props = Omit<ILocationPickerProps, 'onChoose' | 'shareType'> & {
     onFinished: (ev?: SyntheticEvent) => void;
@@ -37,11 +40,7 @@ type Props = Omit<ILocationPickerProps, 'onChoose' | 'shareType'> & {
 };
 
 const getEnabledShareTypes = (): LocationShareType[] => {
-    const enabledShareTypes = [LocationShareType.Own];
-
-    if (SettingsStore.getValue("feature_location_share_live")) {
-        enabledShareTypes.push(LocationShareType.Live);
-    }
+    const enabledShareTypes = [LocationShareType.Own, LocationShareType.Live];
 
     if (SettingsStore.getValue("feature_location_share_pin_drop")) {
         enabledShareTypes.push(LocationShareType.Pin);
@@ -60,6 +59,7 @@ const LocationShareMenu: React.FC<Props> = ({
 }) => {
     const matrixClient = useContext(MatrixClientContext);
     const enabledShareTypes = getEnabledShareTypes();
+    const isLiveShareEnabled = useFeatureEnabled("feature_location_share_live");
 
     const multipleShareTypesEnabled = enabledShareTypes.length > 1;
 
@@ -73,19 +73,32 @@ const LocationShareMenu: React.FC<Props> = ({
         shareLiveLocation(matrixClient, roomId, displayName, openMenu) :
         shareLocation(matrixClient, roomId, shareType, relation, openMenu);
 
+    const onLiveShareEnableSubmit = () => {
+        SettingsStore.setValue("feature_location_share_live", undefined, SettingLevel.DEVICE, true);
+    };
+
+    const shouldAdvertiseLiveLabsFlag = shareType === LocationShareType.Live && !isLiveShareEnabled;
+
     return <ContextMenu
         {...menuPosition}
         onFinished={onFinished}
         managed={false}
     >
         <div className="mx_LocationShareMenu">
-            { shareType ?
+            { shouldAdvertiseLiveLabsFlag &&
+                <EnableLiveShare
+                    onSubmit={onLiveShareEnableSubmit}
+                />
+            }
+            { !shouldAdvertiseLiveLabsFlag && !!shareType &&
                 <LocationPicker
                     sender={sender}
                     shareType={shareType}
                     onChoose={onLocationSubmit}
                     onFinished={onFinished}
-                /> :
+                />
+            }
+            { !shareType &&
                 <ShareType setShareType={setShareType} enabledShareTypes={enabledShareTypes} />
             }
             <ShareDialogButtons displayBack={!!shareType && multipleShareTypesEnabled} onBack={() => setShareType(undefined)} onCancel={onFinished} />

src/i18n/strings/en_EN.json

@@ -2187,6 +2187,9 @@
     "Submit logs": "Submit logs",
     "Can't load this message": "Can't load this message",
     "toggle event": "toggle event",
+    "Live location sharing": "Live location sharing",
+    "Please note: this is a labs feature using a temporary implementation. This means you will not be able to delete your location history, and advanced users will be able to see your location history even after you stop sharing your live location with this room.": "Please note: this is a labs feature using a temporary implementation. This means you will not be able to delete your location history, and advanced users will be able to see your location history even after you stop sharing your live location with this room.",
+    "Enable live location sharing": "Enable live location sharing",
     "Share for %(duration)s": "Share for %(duration)s",
     "Location": "Location",
     "Could not fetch location": "Could not fetch location",

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

@@ -31,21 +31,28 @@ import { MatrixClientPeg } from '../../../../src/MatrixClientPeg';
 import { LocationShareType } from '../../../../src/components/views/location/shareLocation';
 import {
     findByTagAndTestId,
-    flushPromises,
+    findByTestId,
+    flushPromisesWithFakeTimers,
     getMockClientWithEventEmitter,
     setupAsyncStoreWithClient,
 } from '../../../test-utils';
 import Modal from '../../../../src/Modal';
 import { DEFAULT_DURATION_MS } from '../../../../src/components/views/location/LiveDurationDropdown';
 import { OwnBeaconStore } from '../../../../src/stores/OwnBeaconStore';
+import { SettingLevel } from '../../../../src/settings/SettingLevel';
+
+jest.useFakeTimers();
 
 jest.mock('../../../../src/utils/location/findMapStyleUrl', () => ({
     findMapStyleUrl: jest.fn().mockReturnValue('test'),
 }));
 
 jest.mock('../../../../src/settings/SettingsStore', () => ({
     getValue: jest.fn(),
+    setValue: jest.fn(),
     monitorSetting: jest.fn(),
+    watchSetting: jest.fn(),
+    unwatchSetting: jest.fn(),
 }));
 
 jest.mock('../../../../src/stores/OwnProfileStore', () => ({
@@ -115,6 +122,8 @@ describe('<LocationShareMenu />', () => {
         jest.spyOn(MatrixClientPeg, 'get').mockReturnValue(mockClient as unknown as MatrixClient);
         mocked(Modal).createTrackedDialog.mockClear();
 
+        jest.clearAllMocks();
+
         await makeOwnBeaconStore();
     });
 
@@ -150,15 +159,17 @@ describe('<LocationShareMenu />', () => {
     describe('when only Own share type is enabled', () => {
         beforeEach(() => enableSettings([]));
 
-        it('renders location picker when only Own share type is enabled', () => {
+        it('renders own and live location options', () => {
             const component = getComponent();
-            expect(component.find('ShareType').length).toBe(0);
-            expect(component.find('LocationPicker').length).toBe(1);
+            expect(getShareTypeOption(component, LocationShareType.Own).length).toBe(1);
+            expect(getShareTypeOption(component, LocationShareType.Live).length).toBe(1);
         });
 
-        it('does not render back button when only Own share type is enabled', () => {
+        it('renders back button from location picker screen', () => {
             const component = getComponent();
-            expect(getBackButton(component).length).toBe(0);
+            setShareType(component, LocationShareType.Own);
+
+            expect(getBackButton(component).length).toBe(1);
         });
 
         it('clicking cancel button from location picker closes dialog', () => {
@@ -176,6 +187,8 @@ describe('<LocationShareMenu />', () => {
             const onFinished = jest.fn();
             const component = getComponent({ onFinished });
 
+            setShareType(component, LocationShareType.Own);
+
             setLocation(component);
 
             act(() => {
@@ -274,34 +287,88 @@ describe('<LocationShareMenu />', () => {
         });
     });
 
-    describe('with live location and pin drop enabled', () => {
-        beforeEach(() => enableSettings([
-            "feature_location_share_pin_drop",
-            "feature_location_share_live",
-        ]));
+    describe('with live location disabled', () => {
+        beforeEach(() => enableSettings([]));
+
+        const getToggle = (component: ReactWrapper) =>
+            findByTestId(component, 'enable-live-share-toggle').find('[role="switch"]').at(0);
+        const getSubmitEnableButton = (component: ReactWrapper) =>
+            findByTestId(component, 'enable-live-share-submit').at(0);
+
+        it('goes to labs flag screen after live options is clicked', () => {
+            const onFinished = jest.fn();
+            const component = getComponent({ onFinished });
 
-        it('renders share type switch with all 3 options', () => {
-            // Given pin and live feature flags are enabled
-            // When I click Location
+            setShareType(component, LocationShareType.Live);
+
+            expect(findByTestId(component, 'location-picker-enable-live-share')).toMatchSnapshot();
+        });
+
+        it('disables OK button when labs flag is not enabled', () => {
             const component = getComponent();
 
-            // The the Location picker is not visible yet
-            expect(component.find('LocationPicker').length).toBe(0);
+            setShareType(component, LocationShareType.Live);
 
-            // And all 3 buttons are visible on the LocationShare dialog
-            expect(
-                getShareTypeOption(component, LocationShareType.Own).length,
-            ).toBe(1);
+            expect(getSubmitEnableButton(component).props()['disabled']).toBeTruthy();
+        });
 
-            expect(
-                getShareTypeOption(component, LocationShareType.Pin).length,
-            ).toBe(1);
+        it('enables OK button when labs flag is toggled to enabled', () => {
+            const component = getComponent();
+
+            setShareType(component, LocationShareType.Live);
 
-            const liveButton = getShareTypeOption(component, LocationShareType.Live);
-            expect(liveButton.length).toBe(1);
+            act(() => {
+                getToggle(component).simulate('click');
+                component.setProps({});
+            });
+            expect(getSubmitEnableButton(component).props()['disabled']).toBeFalsy();
+        });
+
+        it('enables live share setting on ok button submit', () => {
+            const component = getComponent();
+
+            setShareType(component, LocationShareType.Live);
+
+            act(() => {
+                getToggle(component).simulate('click');
+                component.setProps({});
+            });
+
+            act(() => {
+                getSubmitEnableButton(component).simulate('click');
+            });
+
+            expect(SettingsStore.setValue).toHaveBeenCalledWith(
+                'feature_location_share_live', undefined, SettingLevel.DEVICE, true,
+            );
+        });
+
+        it('navigates to location picker when live share is enabled in settings store', () => {
+            // @ts-ignore
+            mocked(SettingsStore.watchSetting).mockImplementation((featureName, roomId, callback) => {
+                callback(featureName, roomId, SettingLevel.DEVICE, '', '');
+                setTimeout(() => {
+                    callback(featureName, roomId, SettingLevel.DEVICE, '', '');
+                }, 1000);
+            });
+            mocked(SettingsStore.getValue).mockReturnValue(false);
+            const component = getComponent();
+
+            setShareType(component, LocationShareType.Live);
+
+            // we're on enable live share screen
+            expect(findByTestId(component, 'location-picker-enable-live-share').length).toBeTruthy();
+
+            act(() => {
+                mocked(SettingsStore.getValue).mockReturnValue(true);
+                // advance so watchSetting will update the value
+                jest.runAllTimers();
+            });
+
+            component.setProps({});
 
-            // The live location button is enabled
-            expect(liveButton.hasClass("mx_AccessibleButton_disabled")).toBeFalsy();
+            // advanced to location picker
+            expect(component.find('LocationPicker').length).toBeTruthy();
         });
     });
 
@@ -351,7 +418,8 @@ describe('<LocationShareMenu />', () => {
                 component.setProps({});
             });
 
-            await flushPromises();
+            await flushPromisesWithFakeTimers();
+            await flushPromisesWithFakeTimers();
 
             expect(logSpy).toHaveBeenCalledWith("We couldn't start sharing your live location", error);
             expect(mocked(Modal).createTrackedDialog).toHaveBeenCalled();