nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Enable threads by default and mark it as a beta feature (#8081)

Browse Source
This commit is contained in:
Germain
2022-04-05 17:15:31 +01:00
committed by GitHub
parent 27e48062b6
commit 694c39e72d
16 changed files with 257 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/structures/ThreadPanel.tsx
View File

@@ -31,7 +31,14 @@ import { Layout } from '../../settings/enums/Layout';
import { RoomPermalinkCreator } from '../../utils/permalinks/Permalinks';
import Measured from '../views/elements/Measured';
import PosthogTrackers from "../../PosthogTrackers";
import { ButtonEvent } from "../views/elements/AccessibleButton";
import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton";
import { BetaPill } from '../views/beta/BetaCard';
import SdkConfig from '../../SdkConfig';
import Modal from '../../Modal';
import BetaFeedbackDialog from '../views/dialogs/BetaFeedbackDialog';
import { Action } from '../../dispatcher/actions';
import { UserTab } from '../views/dialogs/UserSettingsDialog';
import dis from '../../dispatcher/dispatcher';
interface IProps {
roomId: string;
@@ -233,6 +240,12 @@ const ThreadPanel: React.FC<IProps> = ({
}
}, [timelineSet, timelinePanel]);
const openFeedback = SdkConfig.get().bug_report_endpoint_url ? () => {
Modal.createTrackedDialog("Threads Feedback", "feature_thread", BetaFeedbackDialog, {
featureId: "feature_thread",
});
} : null;
return (
<RoomContext.Provider value={{
...roomContext,
@@ -246,6 +259,22 @@ const ThreadPanel: React.FC<IProps> = ({
setFilterOption={setFilterOption}
empty={threadCount === 0}
/>}
footer={<>
<BetaPill
tooltipTitle={_t("Threads are a beta feature")}
tooltipCaption={_t("Click for more info")}
onClick={() => {
dis.dispatch({
action: Action.ViewUserSettings,
initialTabId: UserTab.Labs,
});
}}
/>
{ openFeedback && _t("<a>Give feedback</a>", {}, {
a: sub =>
<AccessibleButton kind="link_inline" onClick={openFeedback}>{ sub }</AccessibleButton>,
}) }
</>}
className="mx_ThreadPanel"
onClose={onClose}
withoutScrollContainer={true}

18
src/components/views/beta/BetaCard.tsx
View File

@@ -36,17 +36,27 @@ interface IProps {
featureId: string;
}
export const BetaPill = ({ onClick }: { onClick?: () => void }) => {
interface IBetaPillProps {
onClick?: () => void;
tooltipTitle?: string;
tooltipCaption?: string;
}
export const BetaPill = ({
onClick,
tooltipTitle = _t("This is a beta feature"),
tooltipCaption = _t("Click for more info"),
}: IBetaPillProps) => {
if (onClick) {
return <AccessibleTooltipButton
className="mx_BetaCard_betaPill"
title={_t("This is a beta feature. Click for more info")}
title={`${tooltipTitle} ${tooltipCaption}`}
tooltip={<div>
<div className="mx_Tooltip_title">
{ _t("This is a beta feature") }
{ tooltipTitle }
</div>
<div className="mx_Tooltip_sub">
{ _t("Click for more info") }
{ tooltipCaption }
</div>
</div>}
onClick={onClick}

2
src/components/views/dialogs/BetaFeedbackDialog.tsx
View File

@@ -35,7 +35,7 @@ const BetaFeedbackDialog: React.FC<IProps> = ({ featureId, onFinished }) => {
const info = SettingsStore.getBetaInfo(featureId);
return <GenericFeatureFeedbackDialog
title={_t("%(featureName)s beta feedback", { featureName: info.title })}
title={_t("%(featureName)s Beta feedback", { featureName: info.title })}
subheading={_t(info.feedbackSubheading)}
onFinished={onFinished}
rageshakeLabel={info.feedbackLabel}

53
src/components/views/messages/MessageActionBar.tsx
View File

@@ -44,6 +44,8 @@ import { showThread } from "../../../dispatcher/dispatch-actions/threads";
import { shouldDisplayReply } from '../../../utils/Reply';
import { Key } from "../../../Keyboard";
import { ALTERNATE_KEY_NAME } from "../../../accessibility/KeyboardShortcuts";
import { UserTab } from '../dialogs/UserSettingsDialog';
import { Action } from '../../../dispatcher/actions';
interface IOptionsButtonProps {
mxEvent: MatrixEvent;
@@ -223,7 +225,18 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
};
private onThreadClick = (isCard: boolean): void => {
showThread({ rootEvent: this.props.mxEvent, push: isCard });
if (localStorage.getItem("mx_seen_feature_thread") === null) {
localStorage.setItem("mx_seen_feature_thread", "true");
}
if (!SettingsStore.getValue("feature_thread")) {
dis.dispatch({
action: Action.ViewUserSettings,
initialTabId: UserTab.Labs,
});
} else {
showThread({ rootEvent: this.props.mxEvent, push: isCard });
}
};
private onEditClick = (): void => {
@@ -235,14 +248,13 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
];
private get showReplyInThreadAction(): boolean {
const isThreadEnabled = SettingsStore.getValue("feature_thread");
const inNotThreadTimeline = this.context.timelineRenderingType !== TimelineRenderingType.Thread;
const isAllowedMessageType = !this.forbiddenThreadHeadMsgType.includes(
this.props.mxEvent.getContent().msgtype as MsgType,
);
return isThreadEnabled && inNotThreadTimeline && isAllowedMessageType;
return inNotThreadTimeline && isAllowedMessageType;
}
/**
@@ -298,21 +310,42 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
key="cancel"
/>;
const hasARelation = !!this.props.mxEvent?.getRelation()?.rel_type;
const relationType = this.props.mxEvent?.getRelation()?.rel_type;
const hasARelation = !!relationType && relationType !== RelationType.Thread;
const firstTimeSeeingThreads = localStorage.getItem("mx_seen_feature_thread") === null &&
!SettingsStore.getValue("feature_thread");
const threadTooltipButton = <CardContext.Consumer key="thread">
{ context =>
<RovingAccessibleTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_threadButton"
disabled={hasARelation}
tooltip={<>
<div className="mx_Tooltip_title">
{ !hasARelation
? _t("Reply in thread")
: _t("Can't create a thread from an event with an existing relation") }
</div>
{ !hasARelation && (
<div className="mx_Tooltip_sub">
{ SettingsStore.getValue("feature_thread")
? _t("Beta feature")
: _t("Beta feature. Click to learn more.")
}
</div>
) }
</>}
title={!hasARelation
? _t("Reply in thread")
: _t("Can't create a thread from an event with an existing relation")
}
: _t("Can't create a thread from an event with an existing relation")}
onClick={this.onThreadClick.bind(null, context.isCard)}
/>
>
{ firstTimeSeeingThreads && (
<div className="mx_Indicator" />
) }
</RovingAccessibleTooltipButton>
}
</CardContext.Consumer>;
@@ -387,14 +420,14 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
'mx_MessageActionBar_expandMessageButton': !this.props.isQuoteExpanded,
'mx_MessageActionBar_collapseMessageButton': this.props.isQuoteExpanded,
});
const tooltip = <div>
const tooltip = <>
<div className="mx_Tooltip_title">
{ this.props.isQuoteExpanded ? _t("Collapse quotes") : _t("Expand quotes") }
</div>
<div className="mx_Tooltip_sub">
{ _t(ALTERNATE_KEY_NAME[Key.SHIFT]) + " + " + _t("Click") }
</div>
</div>;
</>;
toolbarOpts.push(<RovingAccessibleTooltipButton
className={expandClassName}
title={this.props.isQuoteExpanded ? _t("Collapse quotes") : _t("Expand quotes")}

1
src/components/views/right_panel/RoomHeaderButtons.tsx
View File

@@ -61,6 +61,7 @@ const UnreadIndicator = ({ color }: IUnreadIndicatorProps) => {
}
const classes = classNames({
"mx_Indicator": true,
"mx_RightPanel_headerButton_unreadIndicator": true,
"mx_Indicator_bold": color === NotificationColor.Bold,
"mx_Indicator_gray": color === NotificationColor.Grey,

2
src/components/views/rooms/EventTile.tsx
View File

@@ -612,7 +612,7 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
* when we are at the sync stage
*/
const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
const thread = room?.threads.get(this.props.mxEvent.getId());
const thread = room?.threads?.get(this.props.mxEvent.getId());
return thread || null;
}

16
src/i18n/strings/en_EN.json
View File

@@ -867,6 +867,13 @@
"Render LaTeX maths in messages": "Render LaTeX maths in messages",
"Message Pinning": "Message Pinning",
"Threaded messaging": "Threaded messaging",
"Keep discussions organised with threads.": "Keep discussions organised with threads.",
"Threads help keep conversations on-topic and easy to track. <a>Learn more</a>.": "Threads help keep conversations on-topic and easy to track. <a>Learn more</a>.",
"How can I start a thread?": "How can I start a thread?",
"Use \"Reply in thread\" when hovering over a message.": "Use \"Reply in thread\" when hovering over a message.",
"How can I leave the beta?": "How can I leave the beta?",
"To leave, return to this page and use the “Leave the beta” button.": "To leave, return to this page and use the “Leave the beta” button.",
"Thank you for trying the beta, please go into as much detail as you can so we can improve it.": "Thank you for trying the beta, please go into as much detail as you can so we can improve it.",
"Custom user status messages": "Custom user status messages",
"Video rooms (under active development)": "Video rooms (under active development)",
"Render simple counters in room header": "Render simple counters in room header",
@@ -886,9 +893,7 @@
"This feature is a work in progress, we'd love to hear your feedback.": "This feature is a work in progress, we'd love to hear your feedback.",
"How can I give feedback?": "How can I give feedback?",
"To feedback, join the beta, start a search and click on feedback.": "To feedback, join the beta, start a search and click on feedback.",
"How can I leave the beta?": "How can I leave the beta?",
"To leave, just return to this page or click on the beta badge when you search.": "To leave, just return to this page or click on the beta badge when you search.",
"Thank you for trying the beta, please go into as much detail as you can so we can improve it.": "Thank you for trying the beta, please go into as much detail as you can so we can improve it.",
"Right panel stays open (defaults to room member list)": "Right panel stays open (defaults to room member list)",
"Jump to date (adds /jumptodate and jump to date headers)": "Jump to date (adds /jumptodate and jump to date headers)",
"Don't send read receipts": "Don't send read receipts",
@@ -2075,6 +2080,8 @@
"Edit": "Edit",
"Reply in thread": "Reply in thread",
"Can't create a thread from an event with an existing relation": "Can't create a thread from an event with an existing relation",
"Beta feature": "Beta feature",
"Beta feature. Click to learn more.": "Beta feature. Click to learn more.",
"Reply": "Reply",
"Collapse quotes": "Collapse quotes",
"Expand quotes": "Expand quotes",
@@ -2371,7 +2378,7 @@
"Invite anyway and never warn me again": "Invite anyway and never warn me again",
"Invite anyway": "Invite anyway",
"Close dialog": "Close dialog",
"%(featureName)s beta feedback": "%(featureName)s beta feedback",
"%(featureName)s Beta feedback": "%(featureName)s Beta feedback",
"To leave the beta, visit your settings.": "To leave the beta, visit your settings.",
"Please tell us what went wrong or, better, create a GitHub issue that describes the problem.": "Please tell us what went wrong or, better, create a GitHub issue that describes the problem.",
"Preparing to send logs": "Preparing to send logs",
@@ -2886,7 +2893,6 @@
"Revoke permissions": "Revoke permissions",
"Move left": "Move left",
"Move right": "Move right",
"This is a beta feature. Click for more info": "This is a beta feature. Click for more info",
"This is a beta feature": "This is a beta feature",
"Click for more info": "Click for more info",
"Beta": "Beta",
@@ -3104,6 +3110,8 @@
"Threads help keep your conversations on-topic and easy to track.": "Threads help keep your conversations on-topic and easy to track.",
"<b>Tip:</b> Use \"Reply in thread\" when hovering over a message.": "<b>Tip:</b> Use \"Reply in thread\" when hovering over a message.",
"Keep discussions organised with threads": "Keep discussions organised with threads",
"Threads are a beta feature": "Threads are a beta feature",
"<a>Give feedback</a>": "<a>Give feedback</a>",
"Thread": "Thread",
"Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.": "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.",
"Tried to load a specific point in this room's timeline, but was unable to find it.": "Tried to load a specific point in this room's timeline, but was unable to find it.",

26
src/settings/Settings.tsx
View File

@@ -165,7 +165,7 @@ export interface IBaseSetting<T extends SettingValueType = SettingValueType> {
title: string; // _td
caption: () => ReactNode;
disclaimer?: (enabled: boolean) => ReactNode;
image: string; // require(...)
image?: string; // require(...)
feedbackSubheading?: string;
feedbackLabel?: string;
extraSettings?: string[];
@@ -228,6 +228,30 @@ export const SETTINGS: {[setting: string]: ISetting} = {
displayName: _td("Threaded messaging"),
supportedLevels: LEVELS_FEATURE,
default: false,
betaInfo: {
title: _td("Threads"),
caption: () => <>
<p>{ _t("Keep discussions organised with threads.") }</p>
<p>{ _t("Threads help keep conversations on-topic and easy to track. <a>Learn more</a>.", {}, {
a: (sub) => <a href="https://element.io/help#threads" rel="noreferrer noopener" target="_blank">
{ sub }
</a>,
}) }</p>
</>,
disclaimer: () =>
SdkConfig.get().bug_report_endpoint_url && <>
<h4>{ _t("How can I start a thread?") }</h4>
<p>{ _t("Use \"Reply in thread\" when hovering over a message.") }</p>
<h4>{ _t("How can I leave the beta?") }</h4>
<p>{ _t("To leave, return to this page and use the “Leave the beta” button.") }</p>
</>,
feedbackLabel: "thread-feedback",
feedbackSubheading: _td("Thank you for trying the beta, " +
"please go into as much detail as you can so we can improve it."),
image: require("../../res/img/betas/threads.png"),
requiresRefresh: true,
},
},
"feature_custom_status": {
isFeature: true,