Add Server URL below QR code for OSS for debugging purposes (#1209)

# What this PR does

## Which issue(s) this PR fixes

## Checklist

- [ ] Tests updated
- [ ] Documentation added
- [x] `CHANGELOG.md` updated

---------

Co-authored-by: Joey Orlando <joey.orlando@grafana.com>
Co-authored-by: Joey Orlando <joseph.t.orlando@gmail.com>
Co-authored-by: teodosii <rares.mardare@grafana.com>

CHANGELOG.md

@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Add Server URL below QR code for OSS for debugging purposes
 - Add Slack slash command allowing to trigger a direct page via a manually created alert group
 - Remove resolved and acknowledged filters as we switched to status ([#1201](https://github.com/grafana/oncall/pull/1201))
 - Add sync with grafana on /users and /teams api calls from terraform plugin

grafana-plugin/package.json

@@ -10,6 +10,7 @@
     "build": "grafana-toolkit plugin:build",
     "build:dev": "grafana-toolkit plugin:build --skipTest --skipLint",
     "test": "jest --verbose",
+    "test:silent": "jest --silent",
     "dev": "grafana-toolkit plugin:dev",
     "watch": "grafana-toolkit plugin:dev --watch",
     "sign": "grafana-toolkit plugin:sign",

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

@@ -12,6 +12,7 @@ import { User } from 'models/user/user.types';
 import { AppFeature } from 'state/features';
 import { useStore } from 'state/useStore';
 import { isUserActionAllowed, UserActions } from 'utils/authorization';
+import { GRAFANA_LICENSE_OSS } from 'utils/consts';
 
 import styles from './MobileAppConnection.module.scss';
 import DisconnectButton from './parts/DisconnectButton/DisconnectButton';
@@ -153,6 +154,8 @@ const MobileAppConnection = observer(({ userPk }: Props) => {
       </VerticalGroup>
     );
   } else if (QRCodeValue) {
+    const QRCodeDataParsed = getParsedQRCodeValue();
+
     content = (
       <VerticalGroup spacing="lg">
         <Text type="primary" strong>
@@ -163,6 +166,15 @@ const MobileAppConnection = observer(({ userPk }: Props) => {
           <QRCode className={cx({ 'qr-code': true, blurry: isQRBlurry })} value={QRCodeValue} />
           {isQRBlurry && <QRLoading />}
         </div>
+        {store.backendLicense === GRAFANA_LICENSE_OSS && QRCodeDataParsed && (
+          <Text type="secondary">
+            Server URL embedded in this QR:
+            <br />
+            <a href={QRCodeDataParsed.oncall_api_url}>
+              <Text type="link">{QRCodeDataParsed.oncall_api_url}</Text>
+            </a>
+          </Text>
+        )}
       </VerticalGroup>
     );
   }
@@ -178,6 +190,14 @@ const MobileAppConnection = observer(({ userPk }: Props) => {
     </div>
   );
 
+  function getParsedQRCodeValue() {
+    try {
+      return JSON.parse(QRCodeValue);
+    } catch (ex) {
+      return undefined;
+    }
+  }
+
   function clearTimeouts(): void {
     clearTimeout(userTimeoutId);
     clearTimeout(refreshTimeoutId);