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

Add cancel button to verification panel

res/css/views/right_panel/_VerificationPanel.scss

@@ -15,6 +15,21 @@ limitations under the License.
 */
 
 .mx_UserInfo {
+    .mx_EncryptionPanel_cancel {
+        mask: url('$(res)/img/feather-customised/cancel.svg');
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: cover;
+        width: 14px;
+        height: 14px;
+        background-color: $settings-subsection-fg-color;
+        cursor: pointer;
+        position: absolute;
+        z-index: 100;
+        top: 14px;
+        right: 14px;
+    }
+
     .mx_VerificationPanel_verified_section .mx_E2EIcon {
         // Override general user info margin
         margin: 0 auto !important;

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 = {