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

src/components/views/beta/BetaCard.tsx

@@ -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}

src/components/views/dialogs/BetaFeedbackDialog.tsx

@@ -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}

src/components/views/messages/MessageActionBar.tsx

@@ -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")}

src/components/views/right_panel/RoomHeaderButtons.tsx

@@ -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,

src/components/views/rooms/EventTile.tsx

@@ -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;
     }