From c4ee8e4a6c86746a31321137f0e388b736579cd0 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 29 Sep 2020 10:11:04 +0100 Subject: [PATCH] Fix Encryption Panel close button clashing with Base Card Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/structures/RightPanel.js | 8 +++- src/components/views/right_panel/BaseCard.tsx | 8 +++- .../views/right_panel/EncryptionPanel.tsx | 46 +++++++++---------- src/components/views/right_panel/UserInfo.tsx | 18 +++++++- 4 files changed, 52 insertions(+), 28 deletions(-) diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 6c6d8700a5..320128d767 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -202,13 +202,19 @@ export default class RightPanel extends React.Component { dis.dispatch({ action: "view_home_page", }); + } else if (this.state.phase === RightPanelPhases.EncryptionPanel && + this.state.verificationRequest && this.state.verificationRequest.pending + ) { + // When the user clicks close on the encryption panel cancel the pending request first if any + this.state.verificationRequest.cancel(); } else { // Otherwise we have got our user from RoomViewStore which means we're being shown // within a room/group, so go back to the member panel if we were in the encryption panel, // or the member list if we were in the member panel... phew. + const isEncryptionPhase = this.state.phase === RightPanelPhases.EncryptionPanel; dis.dispatch({ action: Action.ViewUser, - member: this.state.phase === RightPanelPhases.EncryptionPanel ? this.state.member : null, + member: isEncryptionPhase ? this.state.member : null, }); } }; diff --git a/src/components/views/right_panel/BaseCard.tsx b/src/components/views/right_panel/BaseCard.tsx index 3e95da1bc1..5927c7c3cc 100644 --- a/src/components/views/right_panel/BaseCard.tsx +++ b/src/components/views/right_panel/BaseCard.tsx @@ -31,6 +31,7 @@ interface IProps { className?: string; withoutScrollContainer?: boolean; previousPhase?: RightPanelPhases; + closeLabel?: string; onClose?(): void; } @@ -47,6 +48,7 @@ export const Group: React.FC = ({ className, title, children }) => }; const BaseCard: React.FC = ({ + closeLabel, onClose, className, header, @@ -68,7 +70,11 @@ const BaseCard: React.FC = ({ let closeButton; if (onClose) { - closeButton = ; + closeButton = ; } if (!withoutScrollContainer) { diff --git a/src/components/views/right_panel/EncryptionPanel.tsx b/src/components/views/right_panel/EncryptionPanel.tsx index df52e5cabd..c237a4ade6 100644 --- a/src/components/views/right_panel/EncryptionPanel.tsx +++ b/src/components/views/right_panel/EncryptionPanel.tsx @@ -27,6 +27,9 @@ import * as sdk from "../../../index"; import {_t} from "../../../languageHandler"; import {VerificationRequest} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; import {RoomMember} from "matrix-js-sdk/src/models/room-member"; +import dis from "../../../dispatcher/dispatcher"; +import {Action} from "../../../dispatcher/actions"; +import {RightPanelPhases} from "../../../stores/RightPanelStorePhases"; // cancellation codes which constitute a key mismatch const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"]; @@ -42,7 +45,14 @@ interface IProps { } const EncryptionPanel: React.FC = (props: IProps) => { - const {verificationRequest, verificationRequestPromise, member, onClose, layout, isRoomEncrypted} = props; + const { + verificationRequest, + verificationRequestPromise, + member, + onClose, + layout, + isRoomEncrypted, + } = props; const [request, setRequest] = useState(verificationRequest); // state to show a spinner immediately after clicking "start verification", // before we have a request @@ -95,22 +105,6 @@ const EncryptionPanel: React.FC = (props: IProps) => { }, [onClose, request]); useEventEmitter(request, "change", changeHandler); - const onCancel = useCallback(function() { - if (request) { - request.cancel(); - } - }, [request]); - - let cancelButton: JSX.Element; - if (layout !== "dialog" && request && request.pending) { - const AccessibleButton = sdk.getComponent("elements.AccessibleButton"); - cancelButton = (); - } - const onStartVerification = useCallback(async () => { setRequesting(true); const cli = MatrixClientPeg.get(); @@ -118,7 +112,13 @@ const EncryptionPanel: React.FC = (props: IProps) => { const verificationRequest_ = await cli.requestVerificationDM(member.userId, roomId); setRequest(verificationRequest_); setPhase(verificationRequest_.phase); - }, [member.userId]); + // Notify the RightPanelStore about this + dis.dispatch({ + action: Action.SetRightPanelPhase, + phase: RightPanelPhases.EncryptionPanel, + refireParams: { member, verificationRequest: verificationRequest_ }, + }); + }, [member]); const requested = (!request && isRequesting) || @@ -128,8 +128,7 @@ const EncryptionPanel: React.FC = (props: IProps) => { member.userId === MatrixClientPeg.get().getUserId(); if (!request || requested) { const initiatedByMe = (!request && isRequesting) || (request && request.initiatedByMe); - return ( - {cancelButton} + return ( = (props: IProps) => { waitingForOtherParty={requested && initiatedByMe} waitingForNetwork={requested && !initiatedByMe} inDialog={layout === "dialog"} /> - ); + ); } else { - return ( - {cancelButton} + return ( = (props: IProps) => { inDialog={layout === "dialog"} phase={phase} /> - ); + ); } }; diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index ff7695eaeb..ecb47e9906 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -1604,8 +1604,22 @@ const UserInfo: React.FC = ({ previousPhase = RightPanelPhases.RoomMemberList; } - const header = ; - return + let closeLabel = undefined; + if (phase === RightPanelPhases.EncryptionPanel) { + const verificationRequest = (props as React.ComponentProps).verificationRequest; + if (verificationRequest && verificationRequest.pending) { + closeLabel = _t("Cancel"); + } + } + + const header = ; + return { content } ; };