use qrcode.react instead of react-qr-code lib (#3347)

# What this PR does
Use qrcode.react instead of react-qr-code library because the second one
is buggy and doesn't set defaultProps correctly


## Which issue(s) this PR fixes
https://github.com/grafana/oncall/issues/3318


## Checklist

- [x] Unit, integration, and e2e (if applicable) tests updated
- [x] Documentation added (or `pr:no public docs` PR label added if not
required)
- [x] `CHANGELOG.md` updated (or `pr:no changelog` PR label added if not
required)

CHANGELOG.md

@@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix styling when light theme is turned on via system preferences
   by excluding dark theme css vars in this case ([#3336](https://github.com/grafana/oncall/pull/3336))
 - Fix issue when acknowledge reminder works for deleted organizations @Ferril ([#3345](https://github.com/grafana/oncall/pull/3345))
+- Fix generating QR code ([#3347](https://github.com/grafana/oncall/pull/3347))
 
 ## v1.3.57 (2023-11-10)
 

grafana-plugin/package.json

@@ -128,13 +128,13 @@
     "mobx-react": "6.1.1",
     "object-hash": "^3.0.0",
     "prettier": "^2.8.2",
+    "qrcode.react": "^3.1.0",
     "raw-loader": "^4.0.2",
     "rc-table": "^7.17.1",
     "react-copy-to-clipboard": "^5.0.2",
     "react-draggable": "^4.4.5",
     "react-emoji-render": "^1.2.4",
     "react-modal": "^3.15.1",
-    "react-qr-code": "^2.0.8",
     "react-responsive": "^8.1.0",
     "react-router-dom": "5.3.3",
     "react-sortable-hoc": "^1.11.0",

grafana-plugin/src/containers/MobileAppConnection/parts/QRCode/QRCode.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 
-import QRCodeBase from 'react-qr-code';
+import { QRCodeSVG } from 'qrcode.react';
 
 import Block from 'components/GBlock/Block';
 
@@ -14,7 +14,7 @@ const QRCode: FC<Props> = (props: Props) => {
 
   return (
     <Block bordered className={className}>
-      <QRCodeBase value={value} />
+      <QRCodeSVG value={value} size={256} />
     </Block>
   );
 };

grafana-plugin/yarn.lock

@@ -12475,10 +12475,10 @@ punycode@^2.1.0, punycode@^2.1.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
-qr.js@0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
-  integrity sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==
+qrcode.react@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-3.1.0.tgz#5c91ddc0340f768316fbdb8fff2765134c2aecd8"
+  integrity sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==
 
 query-string@*:
   version "7.1.1"
@@ -13224,14 +13224,6 @@ react-popper@2.3.0, react-popper@^2.3.0:
     react-fast-compare "^3.0.1"
     warning "^4.0.2"
 
-react-qr-code@^2.0.8:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/react-qr-code/-/react-qr-code-2.0.8.tgz#d34a766fb5b664a40dbdc7020f7ac801bacb2851"
-  integrity sha512-zYO9EAPQU8IIeD6c6uAle7NlKOiVKs8ji9hpbWPTGxO+FLqBN2on+XCXQvnhm91nrRd306RvNXUkUNcXXSfhWA==
-  dependencies:
-    prop-types "^15.8.1"
-    qr.js "0.0.0"
-
 react-redux@^7.2.0:
   version "7.2.9"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d"