Merge pull request #5214 from matrix-org/t3chguy/fix/15178

UI Feature Flag: Hide flair

src/components/structures/MessagePanel.js

@@ -135,6 +135,9 @@ export default class MessagePanel extends React.Component {
 
         // whether to use the irc layout
         useIRCLayout: PropTypes.bool,
+
+        // whether or not to show flair at all
+        enableFlair: PropTypes.bool,
     };
 
     // Force props to be loaded for useIRCLayout
@@ -579,7 +582,8 @@ export default class MessagePanel extends React.Component {
                 data-scroll-tokens={scrollToken}
             >
                 <TileErrorBoundary mxEvent={mxEv}>
-                    <EventTile mxEvent={mxEv}
+                    <EventTile
+                        mxEvent={mxEv}
                         continuation={continuation}
                         isRedacted={mxEv.isRedacted()}
                         replacingEventId={mxEv.replacingEventId()}
@@ -598,6 +602,7 @@ export default class MessagePanel extends React.Component {
                         getRelationsForEvent={this.props.getRelationsForEvent}
                         showReactions={this.props.showReactions}
                         useIRCLayout={this.props.useIRCLayout}
+                        enableFlair={this.props.enableFlair}
                     />
                 </TileErrorBoundary>
             </li>,

src/components/structures/TimelinePanel.js

@@ -35,6 +35,7 @@ import Timer from '../../utils/Timer';
 import shouldHideEvent from '../../shouldHideEvent';
 import EditorStateTransfer from '../../utils/EditorStateTransfer';
 import {haveTileForEvent} from "../views/rooms/EventTile";
+import {UIFeature} from "../../settings/UIFeature";
 
 const PAGINATE_SIZE = 20;
 const INITIAL_SIZE = 20;
@@ -1446,6 +1447,7 @@ class TimelinePanel extends React.Component {
                 editState={this.state.editState}
                 showReactions={this.props.showReactions}
                 useIRCLayout={this.props.useIRCLayout}
+                enableFlair={SettingsStore.getValue(UIFeature.Flair)}
             />
         );
     }

src/components/views/dialogs/UserSettingsDialog.js

@@ -87,12 +87,14 @@ export default class UserSettingsDialog extends React.Component {
             "mx_UserSettingsDialog_appearanceIcon",
             <AppearanceUserSettingsTab />,
         ));
-        tabs.push(new Tab(
-            USER_FLAIR_TAB,
-            _td("Flair"),
-            "mx_UserSettingsDialog_flairIcon",
-            <FlairUserSettingsTab />,
-        ));
+        if (SettingsStore.getValue(UIFeature.Flair)) {
+            tabs.push(new Tab(
+                USER_FLAIR_TAB,
+                _td("Flair"),
+                "mx_UserSettingsDialog_flairIcon",
+                <FlairUserSettingsTab />,
+            ));
+        }
         tabs.push(new Tab(
             USER_NOTIFICATIONS_TAB,
             _td("Notifications"),

src/components/views/elements/EventTilePreview.tsx

@@ -21,6 +21,8 @@ import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
 import * as Avatar from '../../../Avatar';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import EventTile from '../rooms/EventTile';
+import SettingsStore from "../../../settings/SettingsStore";
+import {UIFeature} from "../../../settings/UIFeature";
 
 interface IProps {
     /**
@@ -121,7 +123,11 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
         });
 
         return <div className={className}>
-            <EventTile mxEvent={event} useIRCLayout={this.props.useIRCLayout} />
+            <EventTile
+                mxEvent={event}
+                useIRCLayout={this.props.useIRCLayout}
+                enableFlair={SettingsStore.getValue(UIFeature.Flair)}
+            />
         </div>;
     }
 }

src/components/views/elements/ReplyThread.js

@@ -28,6 +28,7 @@ import escapeHtml from "escape-html";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {Action} from "../../../dispatcher/actions";
 import sanitizeHtml from "sanitize-html";
+import {UIFeature} from "../../../settings/UIFeature";
 
 // This component does no cycle detection, simply because the only way to make such a cycle would be to
 // craft event_id's, using a homeserver that generates predictable event IDs; even then the impact would
@@ -366,6 +367,7 @@ export default class ReplyThread extends React.Component {
                     isRedacted={ev.isRedacted()}
                     isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")}
                     useIRCLayout={this.props.useIRCLayout}
+                    enableFlair={SettingsStore.getValue(UIFeature.Flair)}
                 />
             </blockquote>;
         });

src/components/views/rooms/EventTile.js

@@ -206,6 +206,9 @@ export default class EventTile extends React.Component {
 
         // whether to use the irc layout
         useIRCLayout: PropTypes.bool,
+
+        // whether or not to show flair at all
+        enableFlair: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -736,10 +739,10 @@ export default class EventTile extends React.Component {
                 else if (msgtype === 'm.file') text = _td('%(senderName)s uploaded a file');
                 sender = <SenderProfile onClick={this.onSenderProfileClick}
                                         mxEvent={this.props.mxEvent}
-                                        enableFlair={!text}
+                                        enableFlair={this.props.enableFlair && !text}
                                         text={text} />;
             } else {
-                sender = <SenderProfile mxEvent={this.props.mxEvent} enableFlair={true} />;
+                sender = <SenderProfile mxEvent={this.props.mxEvent} enableFlair={this.props.enableFlair} />;
             }
         }
 

src/components/views/rooms/ReplyPreview.js

@@ -22,6 +22,7 @@ import RoomViewStore from '../../../stores/RoomViewStore';
 import SettingsStore from "../../../settings/SettingsStore";
 import PropTypes from "prop-types";
 import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
+import {UIFeature} from "../../../settings/UIFeature";
 
 function cancelQuoting() {
     dis.dispatch({
@@ -80,11 +81,14 @@ export default class ReplyPreview extends React.Component {
                          onClick={cancelQuoting} />
                 </div>
                 <div className="mx_ReplyPreview_clear" />
-                <EventTile last={true}
-                           tileShape="reply_preview"
-                           mxEvent={this.state.event}
-                           permalinkCreator={this.props.permalinkCreator}
-                           isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")} />
+                <EventTile
+                    last={true}
+                    tileShape="reply_preview"
+                    mxEvent={this.state.event}
+                    permalinkCreator={this.props.permalinkCreator}
+                    isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")}
+                    enableFlair={SettingsStore.getValue(UIFeature.Flair)}
+                />
             </div>
         </div>;
     }

src/components/views/rooms/SearchResultTile.js

@@ -19,6 +19,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import {haveTileForEvent} from "./EventTile";
+import SettingsStore from "../../../settings/SettingsStore";
+import {UIFeature} from "../../../settings/UIFeature";
 
 export default class SearchResultTile extends React.Component {
     static propTypes = {
@@ -45,18 +47,27 @@ export default class SearchResultTile extends React.Component {
         const ret = [<DateSeparator key={ts1 + "-search"} ts={ts1} />];
 
         const timeline = result.context.getTimeline();
-        for (var j = 0; j < timeline.length; j++) {
+        for (let j = 0; j < timeline.length; j++) {
             const ev = timeline[j];
-            var highlights;
+            let highlights;
             const contextual = (j != result.context.getOurEventIndex());
             if (!contextual) {
                 highlights = this.props.searchHighlights;
             }
             if (haveTileForEvent(ev)) {
-                ret.push(<EventTile key={eventId+"+"+j} mxEvent={ev} contextual={contextual} highlights={highlights}
-                          permalinkCreator={this.props.permalinkCreator}
-                          highlightLink={this.props.resultLink}
-                          onHeightChanged={this.props.onHeightChanged} />);
+                ret.push((
+                    <EventTile
+                        key={`${eventId}+${j}`}
+                        mxEvent={ev}
+                        contextual={contextual}
+                        highlights={highlights}
+                        permalinkCreator={this.props.permalinkCreator}
+                        highlightLink={this.props.resultLink}
+                        onHeightChanged={this.props.onHeightChanged}
+                        isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")}
+                        enableFlair={SettingsStore.getValue(UIFeature.Flair)}
+                    />
+                ));
             }
         }
         return (

src/components/views/settings/tabs/room/GeneralRoomSettingsTab.js

@@ -73,6 +73,18 @@ export default class GeneralRoomSettingsTab extends React.Component {
             urlPreviewSettings = null;
         }
 
+        let flairSection;
+        if (SettingsStore.getValue(UIFeature.Flair)) {
+            flairSection = <>
+                <span className='mx_SettingsTab_subheading'>{_t("Flair")}</span>
+                <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
+                    <RelatedGroupSettings roomId={room.roomId}
+                                          canSetRelatedGroups={canChangeGroups}
+                                          relatedGroupsEvent={groupsEvent} />
+                </div>
+            </>;
+        }
+
         return (
             <div className="mx_SettingsTab mx_GeneralRoomSettingsTab">
                 <div className="mx_SettingsTab_heading">{_t("General")}</div>
@@ -87,14 +99,8 @@ export default class GeneralRoomSettingsTab extends React.Component {
                                    canonicalAliasEvent={canonicalAliasEv} aliasEvents={aliasEvents} />
                 </div>
                 <div className="mx_SettingsTab_heading">{_t("Other")}</div>
-                <span className='mx_SettingsTab_subheading'>{_t("Flair")}</span>
-                <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
-                    <RelatedGroupSettings roomId={room.roomId}
-                                          canSetRelatedGroups={canChangeGroups}
-                                          relatedGroupsEvent={groupsEvent} />
-                </div>
-
-                {urlPreviewSettings}
+                { flairSection }
+                { urlPreviewSettings }
 
                 <span className='mx_SettingsTab_subheading'>{_t("Leave room")}</span>
                 <div className='mx_SettingsTab_section'>

src/settings/Settings.ts

@@ -655,4 +655,8 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         supportedLevels: LEVELS_UI_FEATURE,
         default: true,
     },
+    [UIFeature.Flair]: {
+        supportedLevels: LEVELS_UI_FEATURE,
+        default: true,
+    },
 };

src/settings/UIFeature.ts

@@ -26,4 +26,5 @@ export enum UIFeature {
     ShareQRCode = "UIFeature.shareQrCode",
     ShareSocial = "UIFeature.shareSocial",
     IdentityServer = "UIFeature.identityServer",
+    Flair = "UIFeature.flair",
 }