feat: Add QR Code to Share Object Modal (#11735)

Co-authored-by: Kaan Kabalak <kaankabalak@gmail.com>

browser/app/js/objects/ShareObjectModal.js

@@ -26,6 +26,7 @@ import {
   SHARE_OBJECT_EXPIRY_HOURS,
   SHARE_OBJECT_EXPIRY_MINUTES
 } from "../constants"
+import QRCode from "react-qr-code";
 
 export class ShareObjectModal extends React.Component {
   constructor(props) {
@@ -89,6 +90,7 @@ export class ShareObjectModal extends React.Component {
         <ModalHeader>Share Object</ModalHeader>
         <ModalBody>
           <div className="input-group copy-text">
+            <QRCode value={url} size={128}/>
             <label>Shareable Link</label>
             <input
               type="text"

browser/app/less/inc/misc.less

@@ -75,6 +75,11 @@
 			border-color: darken(@input-border, 5%);
 		}
 	}
+
+	svg {
+	  display: block;
+		margin: 0 auto 5px;
+	}
 }
 
 /*--------------------------
@@ -150,4 +155,4 @@
   100% {
     transform: rotate(360deg);
   }
-}
+}

browser/package.json

@@ -84,6 +84,7 @@
     "react-dropzone": "^11.0.1",
     "react-infinite-scroller": "^1.2.4",
     "react-onclickout": "^2.0.8",
+    "react-qr-code": "^1.1.1",
     "react-redux": "^5.1.2",
     "react-router-dom": "^5.2.0",
     "redux": "^4.0.5",