Remove feature_state_counters

Relates to: element-hq/element-web#25884

src/components/views/rooms/AuxPanel.tsx

@@ -16,10 +16,8 @@ limitations under the License.
 
 import React, { ReactNode } from "react";
 import { lexicographicCompare } from "matrix-js-sdk/src/utils";
-import { Room, RoomStateEvent, MatrixEvent } from "matrix-js-sdk/src/matrix";
-import { throttle } from "lodash";
+import { Room } from "matrix-js-sdk/src/matrix";
 
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import AppsDrawer from "./AppsDrawer";
 import SettingsStore from "../../../settings/SettingsStore";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
@@ -37,93 +35,17 @@ interface IProps {
     children?: ReactNode;
 }
 
-interface Counter {
-    title: string;
-    value: number;
-    link: string;
-    severity: string;
-    stateKey: string;
-}
-
-interface IState {
-    counters: Counter[];
-}
+interface IState {}
 
 export default class AuxPanel extends React.Component<IProps, IState> {
     public static defaultProps = {
         showApps: true,
     };
 
-    public constructor(props: IProps) {
-        super(props);
-
-        this.state = {
-            counters: this.computeCounters(),
-        };
-    }
-
-    public componentDidMount(): void {
-        const cli = MatrixClientPeg.safeGet();
-        if (SettingsStore.getValue("feature_state_counters")) {
-            cli.on(RoomStateEvent.Events, this.onRoomStateEvents);
-        }
-    }
-
-    public componentWillUnmount(): void {
-        if (SettingsStore.getValue("feature_state_counters")) {
-            MatrixClientPeg.get()?.removeListener(RoomStateEvent.Events, this.onRoomStateEvents);
-        }
-    }
-
     public shouldComponentUpdate(nextProps: IProps, nextState: IState): boolean {
         return objectHasDiff(this.props, nextProps) || objectHasDiff(this.state, nextState);
     }
 
-    private onRoomStateEvents = (ev: MatrixEvent): void => {
-        if (ev.getType() === "re.jki.counter") {
-            this.updateCounters();
-        }
-    };
-
-    private updateCounters = throttle(
-        () => {
-            this.setState({ counters: this.computeCounters() });
-        },
-        500,
-        { leading: true, trailing: true },
-    );
-
-    private computeCounters(): Counter[] {
-        const counters: Counter[] = [];
-
-        if (this.props.room && SettingsStore.getValue("feature_state_counters")) {
-            const stateEvs = this.props.room.currentState.getStateEvents("re.jki.counter");
-            stateEvs.sort((a, b) => lexicographicCompare(a.getStateKey()!, b.getStateKey()!));
-
-            for (const ev of stateEvs) {
-                const title = ev.getContent().title;
-                const value = ev.getContent().value;
-                const link = ev.getContent().link;
-                const severity = ev.getContent().severity || "normal";
-                const stateKey = ev.getStateKey()!;
-
-                // We want a non-empty title but can accept falsy values (e.g.
-                // zero)
-                if (title && value !== undefined) {
-                    counters.push({
-                        title,
-                        value,
-                        link,
-                        severity,
-                        stateKey,
-                    });
-                }
-            }
-        }
-
-        return counters;
-    }
-
     public render(): React.ReactNode {
         const callView = (
             <LegacyCallViewForRoom
@@ -145,55 +67,8 @@ export default class AuxPanel extends React.Component<IProps, IState> {
             );
         }
 
-        let stateViews: JSX.Element | null = null;
-        if (this.state.counters && SettingsStore.getValue("feature_state_counters")) {
-            const counters: JSX.Element[] = [];
-
-            this.state.counters.forEach((counter, idx) => {
-                const title = counter.title;
-                const value = counter.value;
-                const link = counter.link;
-                const severity = counter.severity;
-                const stateKey = counter.stateKey;
-
-                let span = (
-                    <span>
-                        {title}: {value}
-                    </span>
-                );
-
-                if (link) {
-                    span = (
-                        <a href={link} target="_blank" rel="noreferrer noopener">
-                            {span}
-                        </a>
-                    );
-                }
-
-                span = (
-                    <span className="mx_AuxPanel_stateViews_span" data-severity={severity} key={"x-" + stateKey}>
-                        {span}
-                    </span>
-                );
-
-                counters.push(span);
-                counters.push(
-                    <span className="mx_AuxPanel_stateViews_delim" key={"delim" + idx}>
-                        {" "}
-                        ─{" "}
-                    </span>,
-                );
-            });
-
-            if (counters.length > 0) {
-                counters.pop(); // remove last deliminator
-                stateViews = <div className="mx_AuxPanel_stateViews">{counters}</div>;
-            }
-        }
-
         return (
             <AutoHideScrollbar className="mx_AuxPanel">
-                {stateViews}
                 {this.props.children}
                 {appsDrawer}
                 {callView}

src/settings/Settings.tsx

@@ -286,13 +286,6 @@ export const SETTINGS: { [setting: string]: ISetting } = {
         supportedLevels: LEVELS_FEATURE,
         default: false,
     },
-    "feature_state_counters": {
-        isFeature: true,
-        labsGroup: LabGroup.Rooms,
-        displayName: _td("labs|state_counters"),
-        supportedLevels: LEVELS_FEATURE,
-        default: false,
-    },
     "feature_mjolnir": {
         isFeature: true,
         labsGroup: LabGroup.Moderation,