mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-15 20:54:59 +08:00
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 <kerrya@element.io> * add enable live share component Signed-off-by: Kerry Archibald <kerrya@element.io> * test enabling live share labs flag Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry
GitHub
parent
45180111d0
commit
699a9aeaaf
@ -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";
|
||||
|
||||
48
res/css/components/views/location/_EnableLiveShare.scss
Normal file
48
res/css/components/views/location/_EnableLiveShare.scss
Normal file
@ -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%;
|
||||
}
|
||||
63
src/components/views/location/EnableLiveShare.tsx
Normal file
63
src/components/views/location/EnableLiveShare.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
||||
@ -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} />
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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('<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([]));
|
||||
|
||||
it('renders share type switch with all 3 options', () => {
|
||||
// Given pin and live feature flags are enabled
|
||||
// When I click Location
|
||||
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 });
|
||||
|
||||
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();
|
||||
|
||||
const liveButton = getShareTypeOption(component, LocationShareType.Live);
|
||||
expect(liveButton.length).toBe(1);
|
||||
setShareType(component, LocationShareType.Live);
|
||||
|
||||
// The live location button is enabled
|
||||
expect(liveButton.hasClass("mx_AccessibleButton_disabled")).toBeFalsy();
|
||||
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({});
|
||||
|
||||
// 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();
|
||||
|
||||
@ -0,0 +1,99 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<LocationShareMenu /> with live location disabled goes to labs flag screen after live options is clicked 1`] = `
|
||||
<div
|
||||
className="mx_EnableLiveShare"
|
||||
data-test-id="location-picker-enable-live-share"
|
||||
>
|
||||
<StyledLiveBeaconIcon
|
||||
className="mx_EnableLiveShare_icon"
|
||||
>
|
||||
<div
|
||||
className="mx_StyledLiveBeaconIcon mx_EnableLiveShare_icon"
|
||||
/>
|
||||
</StyledLiveBeaconIcon>
|
||||
<Heading
|
||||
className="mx_EnableLiveShare_heading"
|
||||
size="h3"
|
||||
>
|
||||
<h3
|
||||
className="mx_Heading_h3 mx_EnableLiveShare_heading"
|
||||
>
|
||||
Live location sharing
|
||||
</h3>
|
||||
</Heading>
|
||||
<p
|
||||
className="mx_EnableLiveShare_description"
|
||||
>
|
||||
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"
|
||||
label="Enable live location sharing"
|
||||
onChange={[Function]}
|
||||
value={false}
|
||||
>
|
||||
<div
|
||||
className="mx_SettingsFlag "
|
||||
>
|
||||
<span
|
||||
className="mx_SettingsFlag_label"
|
||||
>
|
||||
Enable live location sharing
|
||||
</span>
|
||||
<_default
|
||||
aria-label="Enable live location sharing"
|
||||
checked={false}
|
||||
onChange={[Function]}
|
||||
>
|
||||
<AccessibleButton
|
||||
aria-checked={false}
|
||||
aria-disabled={false}
|
||||
aria-label="Enable live location sharing"
|
||||
className="mx_ToggleSwitch mx_ToggleSwitch_enabled"
|
||||
element="div"
|
||||
onClick={[Function]}
|
||||
role="switch"
|
||||
tabIndex={0}
|
||||
>
|
||||
<div
|
||||
aria-checked={false}
|
||||
aria-disabled={false}
|
||||
aria-label="Enable live location sharing"
|
||||
className="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
onKeyUp={[Function]}
|
||||
role="switch"
|
||||
tabIndex={0}
|
||||
>
|
||||
<div
|
||||
className="mx_ToggleSwitch_ball"
|
||||
/>
|
||||
</div>
|
||||
</AccessibleButton>
|
||||
</_default>
|
||||
</div>
|
||||
</LabelledToggleSwitch>
|
||||
<AccessibleButton
|
||||
className="mx_EnableLiveShare_button"
|
||||
data-test-id="enable-live-share-submit"
|
||||
disabled={true}
|
||||
element="button"
|
||||
kind="primary"
|
||||
onClick={[Function]}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
<button
|
||||
aria-disabled={true}
|
||||
className="mx_AccessibleButton mx_EnableLiveShare_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary mx_AccessibleButton_disabled"
|
||||
data-test-id="enable-live-share-submit"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
OK
|
||||
</button>
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
`;
|
||||
Loading…
Reference in New Issue
Block a user