Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/fix/12740

 Conflicts:

	src/components/structures/TimelinePanel.js

	src/components/views/context_menus/MessageContextMenu.js

	src/components/views/right_panel/UserInfo.tsx

	src/dispatcher/actions.ts

src/components/views/right_panel/GroupHeaderButtons.tsx

@@ -21,12 +21,12 @@ limitations under the License.
 import React from 'react';
 import { _t } from '../../../languageHandler';
 import HeaderButton from './HeaderButton';
-import HeaderButtons, {HeaderKind} from './HeaderButtons';
-import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
-import {Action} from "../../../dispatcher/actions";
-import {ActionPayload} from "../../../dispatcher/payloads";
-import {ViewUserPayload} from "../../../dispatcher/payloads/ViewUserPayload";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import HeaderButtons, { HeaderKind } from './HeaderButtons';
+import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
+import { Action } from "../../../dispatcher/actions";
+import { ActionPayload } from "../../../dispatcher/payloads";
+import { ViewUserPayload } from "../../../dispatcher/payloads/ViewUserPayload";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 const GROUP_PHASES = [
     RightPanelPhases.GroupMemberInfo,
@@ -84,19 +84,21 @@ export default class GroupHeaderButtons extends HeaderButtons {
     };
 
     renderButtons() {
-        return [
-            <HeaderButton key="groupMembersButton" name="groupMembersButton"
+        return <>
+            <HeaderButton
+                name="groupMembersButton"
                 title={_t('Members')}
                 isHighlighted={this.isPhase(GROUP_PHASES)}
                 onClick={this.onMembersClicked}
                 analytics={['Right Panel', 'Group Member List Button', 'click']}
-            />,
-            <HeaderButton key="roomsButton" name="roomsButton"
+            />
+            <HeaderButton
+                name="roomsButton"
                 title={_t('Rooms')}
                 isHighlighted={this.isPhase(ROOM_PHASES)}
                 onClick={this.onRoomsClicked}
                 analytics={['Right Panel', 'Group Room List Button', 'click']}
-            />,
-        ];
+            />
+        </>;
     }
 }

src/components/views/right_panel/HeaderButton.tsx

@@ -22,15 +22,13 @@ import React from 'react';
 import classNames from 'classnames';
 import Analytics from '../../../Analytics';
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
     // Whether this button is highlighted
     isHighlighted: boolean;
     // click handler
     onClick: () => void;
-    // The badge to display above the icon
-    badge?: React.ReactNode;
     // The parameters to track the click event
     analytics: Parameters<typeof Analytics.trackEvent>;
 
@@ -40,31 +38,29 @@ interface IProps {
     title: string;
 }
 
-// TODO: replace this, the composer buttons and the right panel buttons with a unified
-// representation
+// TODO: replace this, the composer buttons and the right panel buttons with a unified representation
 @replaceableComponent("views.right_panel.HeaderButton")
 export default class HeaderButton extends React.Component<IProps> {
-    constructor(props: IProps) {
-        super(props);
-        this.onClick = this.onClick.bind(this);
-    }
-
-    private onClick() {
+    private onClick = () => {
         Analytics.trackEvent(...this.props.analytics);
         this.props.onClick();
-    }
+    };
 
     public render() {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const {isHighlighted, onClick, analytics, name, title, ...props} = this.props;
+
         const classes = classNames({
             mx_RightPanel_headerButton: true,
-            mx_RightPanel_headerButton_highlight: this.props.isHighlighted,
-            [`mx_RightPanel_${this.props.name}`]: true,
+            mx_RightPanel_headerButton_highlight: isHighlighted,
+            [`mx_RightPanel_${name}`]: true,
         });
 
         return <AccessibleTooltipButton
-            aria-selected={this.props.isHighlighted}
+            {...props}
+            aria-selected={isHighlighted}
             role="tab"
-            title={this.props.title}
+            title={title}
             className={classes}
             onClick={this.onClick}
         />;

src/components/views/right_panel/HeaderButtons.tsx

@@ -21,14 +21,14 @@ limitations under the License.
 import React from 'react';
 import dis from '../../../dispatcher/dispatcher';
 import RightPanelStore from "../../../stores/RightPanelStore";
-import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
-import {Action} from '../../../dispatcher/actions';
+import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
+import { Action } from '../../../dispatcher/actions';
 import {
     SetRightPanelPhasePayload,
     SetRightPanelPhaseRefireParams,
 } from '../../../dispatcher/payloads/SetRightPanelPhasePayload';
-import {EventSubscription} from "fbemitter";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import type { EventSubscription } from "fbemitter";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 export enum HeaderKind {
   Room = "room",
@@ -43,11 +43,11 @@ interface IState {
 interface IProps {}
 
 @replaceableComponent("views.right_panel.HeaderButtons")
-export default abstract class HeaderButtons extends React.Component<IProps, IState> {
+export default abstract class HeaderButtons<P = {}> extends React.Component<IProps & P, IState> {
     private storeToken: EventSubscription;
     private dispatcherRef: string;
 
-    constructor(props: IProps, kind: HeaderKind) {
+    constructor(props: IProps & P, kind: HeaderKind) {
         super(props);
 
         const rps = RightPanelStore.getSharedInstance();
@@ -95,7 +95,7 @@ export default abstract class HeaderButtons extends React.Component<IProps, ISta
     }
 
     // XXX: Make renderButtons a prop
-    public abstract renderButtons(): JSX.Element[];
+    public abstract renderButtons(): JSX.Element;
 
     public render() {
         return <div className="mx_HeaderButtons">

src/components/views/right_panel/PinnedMessagesCard.tsx

@@ -0,0 +1,188 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, {useCallback, useContext, useEffect, useState} from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { RoomState } from "matrix-js-sdk/src/models/room-state";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { EventType } from 'matrix-js-sdk/src/@types/event';
+
+import { _t } from "../../../languageHandler";
+import BaseCard from "./BaseCard";
+import Spinner from "../elements/Spinner";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { useEventEmitter } from "../../../hooks/useEventEmitter";
+import PinningUtils from "../../../utils/PinningUtils";
+import { useAsyncMemo } from "../../../hooks/useAsyncMemo";
+import PinnedEventTile from "../rooms/PinnedEventTile";
+
+interface IProps {
+    room: Room;
+    onClose(): void;
+}
+
+export const usePinnedEvents = (room: Room): string[] => {
+    const [pinnedEvents, setPinnedEvents] = useState<string[]>([]);
+
+    const update = useCallback((ev?: MatrixEvent) => {
+        if (!room) return;
+        if (ev && ev.getType() !== EventType.RoomPinnedEvents) return;
+        setPinnedEvents(room.currentState.getStateEvents(EventType.RoomPinnedEvents, "")?.getContent()?.pinned || []);
+    }, [room]);
+
+    useEventEmitter(room?.currentState, "RoomState.events", update);
+    useEffect(() => {
+        update();
+        return () => {
+            setPinnedEvents([]);
+        };
+    }, [update]);
+    return pinnedEvents;
+};
+
+export const ReadPinsEventId = "im.vector.room.read_pins";
+
+export const useReadPinnedEvents = (room: Room): Set<string> => {
+    const [readPinnedEvents, setReadPinnedEvents] = useState<Set<string>>(new Set());
+
+    const update = useCallback((ev?: MatrixEvent) => {
+        if (!room) return;
+        if (ev && ev.getType() !== ReadPinsEventId) return;
+        const readPins = room.getAccountData(ReadPinsEventId)?.getContent()?.event_ids;
+        setReadPinnedEvents(new Set(readPins || []));
+    }, [room]);
+
+    useEventEmitter(room, "Room.accountData", update);
+    useEffect(() => {
+        update();
+        return () => {
+            setReadPinnedEvents(new Set());
+        };
+    }, [update]);
+    return readPinnedEvents;
+};
+
+const useRoomState = <T extends any>(room: Room, mapper: (state: RoomState) => T): T => {
+    const [value, setValue] = useState<T>(room ? mapper(room.currentState) : undefined);
+
+    const update = useCallback(() => {
+        if (!room) return;
+        setValue(mapper(room.currentState));
+    }, [room, mapper]);
+
+    useEventEmitter(room?.currentState, "RoomState.events", update);
+    useEffect(() => {
+        update();
+        return () => {
+            setValue(undefined);
+        };
+    }, [update]);
+    return value;
+};
+
+const PinnedMessagesCard = ({ room, onClose }: IProps) => {
+    const cli = useContext(MatrixClientContext);
+    const canUnpin = useRoomState(room, state => state.mayClientSendStateEvent(EventType.RoomPinnedEvents, cli));
+    const pinnedEventIds = usePinnedEvents(room);
+    const readPinnedEvents = useReadPinnedEvents(room);
+
+    useEffect(() => {
+        const newlyRead = pinnedEventIds.filter(id => !readPinnedEvents.has(id));
+        if (newlyRead.length > 0) {
+            // clear out any read pinned events which no longer are pinned
+            cli.setRoomAccountData(room.roomId, ReadPinsEventId, {
+                event_ids: pinnedEventIds,
+            });
+        }
+    }, [cli, room.roomId, pinnedEventIds, readPinnedEvents]);
+
+    const pinnedEvents = useAsyncMemo(() => {
+        const promises = pinnedEventIds.map(async eventId => {
+            const timelineSet = room.getUnfilteredTimelineSet();
+            const localEvent = timelineSet?.getTimelineForEvent(eventId)?.getEvents().find(e => e.getId() === eventId);
+            if (localEvent) return localEvent;
+
+            try {
+                const evJson = await cli.fetchRoomEvent(room.roomId, eventId);
+                const event = new MatrixEvent(evJson);
+                if (event.isEncrypted()) {
+                    await cli.decryptEventIfNeeded(event); // TODO await?
+                }
+                if (event && PinningUtils.isPinnable(event)) {
+                    return event;
+                }
+            } catch (err) {
+                console.error("Error looking up pinned event " + eventId + " in room " + room.roomId);
+                console.error(err);
+            }
+            return null;
+        });
+
+        return Promise.all(promises);
+    }, [cli, room, pinnedEventIds], null);
+
+    let content;
+    if (!pinnedEvents) {
+        content = <Spinner />;
+    } else if (pinnedEvents.length > 0) {
+        let onUnpinClicked;
+        if (canUnpin) {
+            onUnpinClicked = async (event: MatrixEvent) => {
+                const pinnedEvents = room.currentState.getStateEvents(EventType.RoomPinnedEvents, "");
+                if (pinnedEvents?.getContent()?.pinned) {
+                    const pinned = pinnedEvents.getContent().pinned;
+                    const index = pinned.indexOf(event.getId());
+                    if (index !== -1) {
+                        pinned.splice(index, 1);
+                        await cli.sendStateEvent(room.roomId, EventType.RoomPinnedEvents, { pinned }, "");
+                    }
+                }
+            };
+        }
+
+        // show them in reverse, with latest pinned at the top
+        content = pinnedEvents.filter(Boolean).reverse().map(ev => (
+            <PinnedEventTile key={ev.getId()} room={room} event={ev} onUnpinClicked={() => onUnpinClicked(ev)} />
+        ));
+    } else {
+        content = <div className="mx_PinnedMessagesCard_empty">
+            <div>
+                { /* XXX: We reuse the classes for simplicity, but deliberately not the components for non-interactivity. */ }
+                <div className="mx_PinnedMessagesCard_MessageActionBar">
+                    <div className="mx_MessageActionBar_maskButton mx_MessageActionBar_reactButton" />
+                    <div className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton" />
+                    <div className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton" />
+                </div>
+
+                <h2>{ _t("Nothing pinned, yet") }</h2>
+                { _t("If you have permissions, open the menu on any message and select " +
+                    "<b>Pin</b> to stick them here.", {}, {
+                        b: sub => <b>{ sub }</b>,
+                }) }
+            </div>
+        </div>;
+    }
+
+    return <BaseCard
+        header={<h2>{ _t("Pinned messages") }</h2>}
+        className="mx_PinnedMessagesCard"
+        onClose={onClose}
+    >
+        { content }
+    </BaseCard>;
+};
+
+export default PinnedMessagesCard;

src/components/views/right_panel/RoomHeaderButtons.tsx

@@ -18,15 +18,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import {_t} from '../../../languageHandler';
+import React from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+
+import { _t } from '../../../languageHandler';
 import HeaderButton from './HeaderButton';
-import HeaderButtons, {HeaderKind} from './HeaderButtons';
-import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
-import {Action} from "../../../dispatcher/actions";
-import {ActionPayload} from "../../../dispatcher/payloads";
+import HeaderButtons, { HeaderKind } from './HeaderButtons';
+import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
+import { Action } from "../../../dispatcher/actions";
+import { ActionPayload } from "../../../dispatcher/payloads";
 import RightPanelStore from "../../../stores/RightPanelStore";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { useSettingValue } from "../../../hooks/useSettings";
+import { useReadPinnedEvents, usePinnedEvents } from './PinnedMessagesCard';
 
 const ROOM_INFO_PHASES = [
     RightPanelPhases.RoomSummary,
@@ -38,9 +42,35 @@ const ROOM_INFO_PHASES = [
     RightPanelPhases.Room3pidMemberInfo,
 ];
 
+const PinnedMessagesHeaderButton = ({ room, isHighlighted, onClick }) => {
+    const pinningEnabled = useSettingValue("feature_pinning");
+    const pinnedEvents = usePinnedEvents(pinningEnabled && room);
+    const readPinnedEvents = useReadPinnedEvents(pinningEnabled && room);
+    if (!pinningEnabled) return null;
+
+    let unreadIndicator;
+    if (pinnedEvents.some(id => !readPinnedEvents.has(id))) {
+        unreadIndicator = <div className="mx_RightPanel_pinnedMessagesButton_unreadIndicator" />;
+    }
+
+    return <HeaderButton
+        name="pinnedMessagesButton"
+        title={_t("Pinned messages")}
+        isHighlighted={isHighlighted}
+        onClick={onClick}
+        analytics={["Right Panel", "Pinned Messages Button", "click"]}
+    >
+        { unreadIndicator }
+    </HeaderButton>;
+};
+
+interface IProps {
+    room?: Room;
+}
+
 @replaceableComponent("views.right_panel.RoomHeaderButtons")
-export default class RoomHeaderButtons extends HeaderButtons {
-    constructor(props) {
+export default class RoomHeaderButtons extends HeaderButtons<IProps> {
+    constructor(props: IProps) {
         super(props, HeaderKind.Room);
     }
 
@@ -80,24 +110,32 @@ export default class RoomHeaderButtons extends HeaderButtons {
         this.setPhase(RightPanelPhases.NotificationPanel);
     };
 
+    private onPinnedMessagesClicked = () => {
+        // This toggles for us, if needed
+        this.setPhase(RightPanelPhases.PinnedMessages);
+    };
+
     public renderButtons() {
-        return [
+        return <>
+            <PinnedMessagesHeaderButton
+                room={this.props.room}
+                isHighlighted={this.isPhase(RightPanelPhases.PinnedMessages)}
+                onClick={this.onPinnedMessagesClicked}
+            />
             <HeaderButton
-                key="notifsButton"
                 name="notifsButton"
                 title={_t('Notifications')}
                 isHighlighted={this.isPhase(RightPanelPhases.NotificationPanel)}
                 onClick={this.onNotificationsClicked}
                 analytics={['Right Panel', 'Notification List Button', 'click']}
-            />,
+            />
             <HeaderButton
-                key="roomSummaryButton"
                 name="roomSummaryButton"
                 title={_t('Room Info')}
                 isHighlighted={this.isPhase(ROOM_INFO_PHASES)}
                 onClick={this.onRoomSummaryClicked}
                 analytics={['Right Panel', 'Room Summary Button', 'click']}
-            />,
-        ];
+            />
+        </>;
     }
 }

src/components/views/right_panel/UserInfo.tsx

@@ -25,6 +25,7 @@ import { User } from 'matrix-js-sdk/src/models/user';
 import { Room } from 'matrix-js-sdk/src/models/room';
 import { EventTimeline } from 'matrix-js-sdk/src/models/event-timeline';
 import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 
 import dis from '../../../dispatcher/dispatcher';
 import Modal from '../../../Modal';
@@ -515,9 +516,6 @@ export const useRoomPowerLevels = (cli: MatrixClient, room: Room) => {
         } else {
             setPowerLevels({});
         }
-        return () => {
-            setPowerLevels({});
-        };
     }, [room]);
 
     useEventEmitter(cli, "RoomState.events", update);
@@ -1531,21 +1529,16 @@ interface IProps {
     user: Member;
     groupId?: string;
     room?: Room;
-    phase: RightPanelPhases.RoomMemberInfo | RightPanelPhases.GroupMemberInfo | RightPanelPhases.SpaceMemberInfo;
+    phase: RightPanelPhases.RoomMemberInfo
+        | RightPanelPhases.GroupMemberInfo
+        | RightPanelPhases.SpaceMemberInfo
+        | RightPanelPhases.EncryptionPanel;
     onClose(): void;
+    verificationRequest?: VerificationRequest;
+    verificationRequestPromise?: Promise<VerificationRequest>;
 }
 
-interface IPropsWithEncryptionPanel extends React.ComponentProps<typeof EncryptionPanel> {
-    user: Member;
-    groupId: void;
-    room: Room;
-    phase: RightPanelPhases.EncryptionPanel;
-    onClose(): void;
-}
-
-type Props = IProps | IPropsWithEncryptionPanel;
-
-const UserInfo: React.FC<Props> = ({
+const UserInfo: React.FC<IProps> = ({
     user,
     groupId,
     room,