Merge pull request #4283 from matrix-org/bwindels/cancelverifypanel

Add cancel button to verification panel

src/components/views/right_panel/EncryptionPanel.js

@@ -84,6 +84,22 @@ const EncryptionPanel = (props) => {
     }, [onClose, request]);
     useEventEmitter(request, "change", changeHandler);
 
+    const onCancel = useCallback(function() {
+        if (request) {
+            request.cancel();
+        }
+    }, [request]);
+
+    let cancelButton;
+    if (layout !== "dialog" && request && request.pending) {
+        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
+        cancelButton = (<AccessibleButton
+            className="mx_EncryptionPanel_cancel"
+            onClick={onCancel}
+            title={_t('Cancel')}
+        ></AccessibleButton>);
+    }
+
     const onStartVerification = useCallback(async () => {
         setRequesting(true);
         const cli = MatrixClientPeg.get();
@@ -98,14 +114,18 @@ const EncryptionPanel = (props) => {
         (request && (phase === PHASE_REQUESTED || phase === PHASE_UNSENT || phase === undefined));
     if (!request || requested) {
         const initiatedByMe = (!request && isRequesting) || (request && request.initiatedByMe);
-        return <EncryptionInfo
-            isRoomEncrypted={isRoomEncrypted}
-            onStartVerification={onStartVerification}
-            member={member}
-            waitingForOtherParty={requested && initiatedByMe}
-            waitingForNetwork={requested && !initiatedByMe} />;
+        return (<React.Fragment>
+            {cancelButton}
+            <EncryptionInfo
+                isRoomEncrypted={isRoomEncrypted}
+                onStartVerification={onStartVerification}
+                member={member}
+                waitingForOtherParty={requested && initiatedByMe}
+                waitingForNetwork={requested && !initiatedByMe} />
+        </React.Fragment>);
     } else {
-        return (
+        return (<React.Fragment>
+            {cancelButton}
             <VerificationPanel
                 isRoomEncrypted={isRoomEncrypted}
                 layout={layout}
@@ -114,7 +134,7 @@ const EncryptionPanel = (props) => {
                 request={request}
                 key={request.channel.transactionId}
                 phase={phase} />
-        );
+        </React.Fragment>);
     }
 };
 EncryptionPanel.propTypes = {