diff --git a/res/css/_components.scss b/res/css/_components.scss index 8757449604d..3f371478d12 100644 --- a/res/css/_components.scss +++ b/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"; diff --git a/res/css/components/views/location/_EnableLiveShare.scss b/res/css/components/views/location/_EnableLiveShare.scss new file mode 100644 index 00000000000..7c10cc1923f --- /dev/null +++ b/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%; +} diff --git a/src/components/views/location/EnableLiveShare.tsx b/src/components/views/location/EnableLiveShare.tsx new file mode 100644 index 00000000000..30a48746867 --- /dev/null +++ b/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 = ({ + onSubmit, +}) => { + const [isEnabled, setEnabled] = useState(false); + return ( +
+ + { _t('Live location sharing') } +

+ { _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.', + ) } +

+ + + { _t('OK') } + +
+ ); +}; diff --git a/src/components/views/location/LocationShareMenu.tsx b/src/components/views/location/LocationShareMenu.tsx index 7b102f4b0f0..8be6c070db2 100644 --- a/src/components/views/location/LocationShareMenu.tsx +++ b/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 & { onFinished: (ev?: SyntheticEvent) => void; @@ -37,11 +40,7 @@ type Props = Omit & { }; 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 = ({ }) => { 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 = ({ 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
- { shareType ? + { shouldAdvertiseLiveLabsFlag && + + } + { !shouldAdvertiseLiveLabsFlag && !!shareType && : + /> + } + { !shareType && } setShareType(undefined)} onCancel={onFinished} /> diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 7223ad37922..7f6b8a1f00d 100644 --- a/src/i18n/strings/en_EN.json +++ b/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", diff --git a/test/components/views/location/LocationShareMenu-test.tsx b/test/components/views/location/LocationShareMenu-test.tsx index ce52125f86f..eca076d705d 100644 --- a/test/components/views/location/LocationShareMenu-test.tsx +++ b/test/components/views/location/LocationShareMenu-test.tsx @@ -31,13 +31,17 @@ 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'), @@ -45,7 +49,10 @@ jest.mock('../../../../src/utils/location/findMapStyleUrl', () => ({ 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('', () => { jest.spyOn(MatrixClientPeg, 'get').mockReturnValue(mockClient as unknown as MatrixClient); mocked(Modal).createTrackedDialog.mockClear(); + jest.clearAllMocks(); + await makeOwnBeaconStore(); }); @@ -150,15 +159,17 @@ describe('', () => { 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('', () => { const onFinished = jest.fn(); const component = getComponent({ onFinished }); + setShareType(component, LocationShareType.Own); + setLocation(component); act(() => { @@ -274,34 +287,88 @@ describe('', () => { }); }); - 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('', () => { 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(); diff --git a/test/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap b/test/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap new file mode 100644 index 00000000000..758a026368c --- /dev/null +++ b/test/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap @@ -0,0 +1,99 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` with live location disabled goes to labs flag screen after live options is clicked 1`] = ` +
+ +
+ + +

+ 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. +

+ +
+ + Enable live location sharing + + <_default + aria-label="Enable live location sharing" + checked={false} + onChange={[Function]} + > + +
+
+
+ + +
+ + + + +
+`;