Add ability to manage room history visibility

Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2022-01-01 16:27:36 +05:30
parent c23acf9e9e
commit 0ddeb02d23
4 changed files with 156 additions and 8 deletions

View file

@ -12,8 +12,8 @@ import Button from '../../atoms/button/Button';
import Input from '../../atoms/input/Input'; import Input from '../../atoms/input/Input';
import Checkbox from '../../atoms/button/Checkbox'; import Checkbox from '../../atoms/button/Checkbox';
import Toggle from '../../atoms/button/Toggle'; import Toggle from '../../atoms/button/Toggle';
import { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu'; import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
import SettingTile from '../../molecules/setting-tile/SettingTile'; import SettingTile from '../setting-tile/SettingTile';
import { useStore } from '../../hooks/useStore'; import { useStore } from '../../hooks/useStore';

View file

@ -0,0 +1,99 @@
import React, { useState, useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';
import './RoomHistoryVisibility.scss';
import initMatrix from '../../../client/initMatrix';
import Text from '../../atoms/text/Text';
import RadioButton from '../../atoms/button/RadioButton';
import { MenuItem } from '../../atoms/context-menu/ContextMenu';
const visibility = {
WORLD_READABLE: 'world_readable',
SHARED: 'shared',
INVITED: 'invited',
JOINED: 'joined',
};
const items = [{
iconSrc: null,
text: 'World readable (anyone can read)',
type: visibility.WORLD_READABLE,
}, {
iconSrc: null,
text: 'Member shared (since the point in time of selecting this option)',
type: visibility.SHARED,
}, {
iconSrc: null,
text: 'Member invited (since they were invited)',
type: visibility.INVITED,
}, {
iconSrc: null,
text: 'Member joined (since they joined)',
type: visibility.JOINED,
}];
function setHistoryVisibility(roomId, type) {
const mx = initMatrix.matrixClient;
return mx.sendStateEvent(
roomId, 'm.room.history_visibility',
{
history_visibility: type,
},
);
}
function useVisibility(roomId) {
const mx = initMatrix.matrixClient;
const room = mx.getRoom(roomId);
const [activeType, setActiveType] = useState(room.getHistoryVisibility());
useEffect(() => setActiveType(room.getHistoryVisibility()), [roomId]);
const setVisibility = useCallback((item) => {
if (item.type === activeType.type) return;
setActiveType(item.type);
setHistoryVisibility(roomId, item.type);
}, [activeType, roomId]);
return [activeType, setVisibility];
}
function RoomHistoryVisibility({ roomId }) {
const [activeType, setVisibility] = useVisibility(roomId);
const mx = initMatrix.matrixClient;
const userId = mx.getUserId();
const room = mx.getRoom(roomId);
const { currentState } = room;
const canChange = currentState.maySendStateEvent('m.room.history_visibility', userId);
return (
<div className="room-history-visibility">
{
items.map((item) => (
<MenuItem
variant={activeType === item.type ? 'positive' : 'surface'}
key={item.type}
iconSrc={item.iconSrc}
onClick={() => setVisibility(item)}
disabled={(!canChange)}
>
<Text varient="b1">
<span>{item.text}</span>
<RadioButton isActive={activeType === item.type} />
</Text>
</MenuItem>
))
}
<Text variant="b3">Changes to who can read history will only apply to future messages in this room. The visibility of existing history will be unchanged.</Text>
</div>
);
}
RoomHistoryVisibility.propTypes = {
roomId: PropTypes.string.isRequired,
};
export default RoomHistoryVisibility;

View file

@ -0,0 +1,25 @@
@use '../../partials/flex';
@use '../../partials/dir';
@use '../../partials/text';
.room-history-visibility {
& .context-menu__item .text {
margin: 0 !important;
@extend .cp-fx__item-one;
@extend .cp-fx__row--s-c;
& span:first-child {
@extend .cp-fx__item-one;
@extend .cp-txt__ellipsis;
}
& .radio-btn {
@include dir.side(margin, var(--sp-tight), 0);
}
}
& > .text {
margin: var(--sp-normal);
margin-top: var(--sp-ultra-tight);
}
}

View file

@ -17,6 +17,7 @@ import RoomProfile from '../../molecules/room-profile/RoomProfile';
import RoomNotification from '../../molecules/room-notification/RoomNotification'; import RoomNotification from '../../molecules/room-notification/RoomNotification';
import RoomVisibility from '../../molecules/room-visibility/RoomVisibility'; import RoomVisibility from '../../molecules/room-visibility/RoomVisibility';
import RoomAliases from '../../molecules/room-aliases/RoomAliases'; import RoomAliases from '../../molecules/room-aliases/RoomAliases';
import RoomHistoryVisibility from '../../molecules/room-history-visibility/RoomHistoryVisibility';
import SettingsIC from '../../../../public/res/ic/outlined/settings.svg'; import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
import SearchIC from '../../../../public/res/ic/outlined/search.svg'; import SearchIC from '../../../../public/res/ic/outlined/search.svg';
@ -28,25 +29,33 @@ import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
import { useForceUpdate } from '../../hooks/useForceUpdate'; import { useForceUpdate } from '../../hooks/useForceUpdate';
const tabText = {
GENERAL: 'General',
SEARCH: 'Search',
PERMISSIONS: 'Permissions',
SECURITY: 'Security',
ADVANCED: 'Advanced',
};
const tabItems = [{ const tabItems = [{
iconSrc: SettingsIC, iconSrc: SettingsIC,
text: 'General', text: tabText.GENERAL,
disabled: false, disabled: false,
}, { }, {
iconSrc: SearchIC, iconSrc: SearchIC,
text: 'Search', text: tabText.SEARCH,
disabled: false, disabled: false,
}, { }, {
iconSrc: ShieldUserIC, iconSrc: ShieldUserIC,
text: 'Permissions', text: tabText.PERMISSIONS,
disabled: false, disabled: false,
}, { }, {
iconSrc: LockIC, iconSrc: LockIC,
text: 'Security', text: tabText.SECURITY,
disabled: false, disabled: false,
}, { }, {
iconSrc: InfoIC, iconSrc: InfoIC,
text: 'Advanced', text: tabText.ADVANCED,
disabled: false, disabled: false,
}]; }];
@ -87,6 +96,20 @@ GeneralSettings.propTypes = {
roomId: PropTypes.string.isRequired, roomId: PropTypes.string.isRequired,
}; };
function SecuritySettings({ roomId }) {
return (
<>
<div className="room-settings__card">
<MenuHeader>Message history visibility (Who can read history)</MenuHeader>
<RoomHistoryVisibility roomId={roomId} />
</div>
</>
);
}
SecuritySettings.propTypes = {
roomId: PropTypes.string.isRequired,
};
function RoomSettings({ roomId }) { function RoomSettings({ roomId }) {
const [, forceUpdate] = useForceUpdate(); const [, forceUpdate] = useForceUpdate();
const [selectedTab, setSelectedTab] = useState(tabItems[0]); const [selectedTab, setSelectedTab] = useState(tabItems[0]);
@ -127,7 +150,8 @@ function RoomSettings({ roomId }) {
onSelect={handleTabChange} onSelect={handleTabChange}
/> />
<div className="room-settings__cards-wrapper"> <div className="room-settings__cards-wrapper">
{selectedTab.text === tabItems[0].text && <GeneralSettings roomId={roomId} />} {selectedTab.text === tabText.GENERAL && <GeneralSettings roomId={roomId} />}
{selectedTab.text === tabText.SECURITY && <SecuritySettings roomId={roomId} />}
</div> </div>
</div> </div>
</ScrollView> </ScrollView>