From 4aa1feae06a117d6b8f6610208061a9cd32e1174 Mon Sep 17 00:00:00 2001
From: Vadim Stepanov <vadimkerr@gmail.com>
Date: Mon, 30 Jan 2023 11:15:17 +0000
Subject: [PATCH] Add Android app link on mobile app connection tab (#1238)

Add the Android app URL to the mobile app connection tab

---------

Co-authored-by: Joey Orlando <joey.orlando@grafana.com>
---
 .../MobileAppConnection.test.tsx.snap         | 217 +++++++++++-------
 .../__snapshots__/DownloadIcons.test.tsx.snap |  31 ++-
 .../parts/DownloadIcons/index.tsx             |  19 +-
 3 files changed, 165 insertions(+), 102 deletions(-)

diff --git a/grafana-plugin/src/containers/MobileAppConnection/__snapshots__/MobileAppConnection.test.tsx.snap b/grafana-plugin/src/containers/MobileAppConnection/__snapshots__/MobileAppConnection.test.tsx.snap
index 6284efb3c1..56242d64de 100644
--- a/grafana-plugin/src/containers/MobileAppConnection/__snapshots__/MobileAppConnection.test.tsx.snap
+++ b/grafana-plugin/src/containers/MobileAppConnection/__snapshots__/MobileAppConnection.test.tsx.snap
@@ -58,20 +58,27 @@ exports[`MobileAppConnection if we disconnect the app, it disconnects and fetche
             <div
               class="css-bxa289-layoutChildrenWrapper"
             >
-              <div
-                class="root icon-block root_bordered root--fullWidth root--hover"
+              <a
+                href="https://play.google.com/store/apps/details?id=com.grafana.oncall.prod"
+                rel="noreferrer"
+                style="width: 100%;"
+                target="_blank"
               >
-                <img
-                  alt="Play Store"
-                  class="icon"
-                  src="[object Object]"
-                />
-                <span
-                  class="root text icon-text text--primary text--medium"
+                <div
+                  class="root icon-block root_bordered root--fullWidth root--hover"
                 >
-                  Android
-                </span>
-              </div>
+                  <img
+                    alt="Play Store"
+                    class="icon"
+                    src="[object Object]"
+                  />
+                  <span
+                    class="root text icon-text text--primary text--medium"
+                  >
+                    Android
+                  </span>
+                </div>
+              </a>
             </div>
           </div>
         </div>
@@ -2389,20 +2396,27 @@ exports[`MobileAppConnection it shows a QR code if the app isn't already connect
             <div
               class="css-bxa289-layoutChildrenWrapper"
             >
-              <div
-                class="root icon-block root_bordered root--fullWidth root--hover"
+              <a
+                href="https://play.google.com/store/apps/details?id=com.grafana.oncall.prod"
+                rel="noreferrer"
+                style="width: 100%;"
+                target="_blank"
               >
-                <img
-                  alt="Play Store"
-                  class="icon"
-                  src="[object Object]"
-                />
-                <span
-                  class="root text icon-text text--primary text--medium"
+                <div
+                  class="root icon-block root_bordered root--fullWidth root--hover"
                 >
-                  Android
-                </span>
-              </div>
+                  <img
+                    alt="Play Store"
+                    class="icon"
+                    src="[object Object]"
+                  />
+                  <span
+                    class="root text icon-text text--primary text--medium"
+                  >
+                    Android
+                  </span>
+                </div>
+              </a>
             </div>
           </div>
         </div>
@@ -2488,20 +2502,27 @@ exports[`MobileAppConnection it shows a loading message if it is currently disco
             <div
               class="css-bxa289-layoutChildrenWrapper"
             >
-              <div
-                class="root icon-block root_bordered root--fullWidth root--hover"
+              <a
+                href="https://play.google.com/store/apps/details?id=com.grafana.oncall.prod"
+                rel="noreferrer"
+                style="width: 100%;"
+                target="_blank"
               >
-                <img
-                  alt="Play Store"
-                  class="icon"
-                  src="[object Object]"
-                />
-                <span
-                  class="root text icon-text text--primary text--medium"
+                <div
+                  class="root icon-block root_bordered root--fullWidth root--hover"
                 >
-                  Android
-                </span>
-              </div>
+                  <img
+                    alt="Play Store"
+                    class="icon"
+                    src="[object Object]"
+                  />
+                  <span
+                    class="root text icon-text text--primary text--medium"
+                  >
+                    Android
+                  </span>
+                </div>
+              </a>
             </div>
           </div>
         </div>
@@ -2587,20 +2608,27 @@ exports[`MobileAppConnection it shows a loading message if it is currently fetch
             <div
               class="css-bxa289-layoutChildrenWrapper"
             >
-              <div
-                class="root icon-block root_bordered root--fullWidth root--hover"
+              <a
+                href="https://play.google.com/store/apps/details?id=com.grafana.oncall.prod"
+                rel="noreferrer"
+                style="width: 100%;"
+                target="_blank"
               >
-                <img
-                  alt="Play Store"
-                  class="icon"
-                  src="[object Object]"
-                />
-                <span
-                  class="root text icon-text text--primary text--medium"
+                <div
+                  class="root icon-block root_bordered root--fullWidth root--hover"
                 >
-                  Android
-                </span>
-              </div>
+                  <img
+                    alt="Play Store"
+                    class="icon"
+                    src="[object Object]"
+                  />
+                  <span
+                    class="root text icon-text text--primary text--medium"
+                  >
+                    Android
+                  </span>
+                </div>
+              </a>
             </div>
           </div>
         </div>
@@ -2686,20 +2714,27 @@ exports[`MobileAppConnection it shows a message when the mobile app is already c
             <div
               class="css-bxa289-layoutChildrenWrapper"
             >
-              <div
-                class="root icon-block root_bordered root--fullWidth root--hover"
+              <a
+                href="https://play.google.com/store/apps/details?id=com.grafana.oncall.prod"
+                rel="noreferrer"
+                style="width: 100%;"
+                target="_blank"
               >
-                <img
-                  alt="Play Store"
-                  class="icon"
-                  src="[object Object]"
-                />
-                <span
-                  class="root text icon-text text--primary text--medium"
+                <div
+                  class="root icon-block root_bordered root--fullWidth root--hover"
                 >
-                  Android
-                </span>
-              </div>
+                  <img
+                    alt="Play Store"
+                    class="icon"
+                    src="[object Object]"
+                  />
+                  <span
+                    class="root text icon-text text--primary text--medium"
+                  >
+                    Android
+                  </span>
+                </div>
+              </a>
             </div>
           </div>
         </div>
@@ -2885,20 +2920,27 @@ exports[`MobileAppConnection it shows an error message if there was an error dis
             <div
               class="css-bxa289-layoutChildrenWrapper"
             >
-              <div
-                class="root icon-block root_bordered root--fullWidth root--hover"
+              <a
+                href="https://play.google.com/store/apps/details?id=com.grafana.oncall.prod"
+                rel="noreferrer"
+                style="width: 100%;"
+                target="_blank"
               >
-                <img
-                  alt="Play Store"
-                  class="icon"
-                  src="[object Object]"
-                />
-                <span
-                  class="root text icon-text text--primary text--medium"
+                <div
+                  class="root icon-block root_bordered root--fullWidth root--hover"
                 >
-                  Android
-                </span>
-              </div>
+                  <img
+                    alt="Play Store"
+                    class="icon"
+                    src="[object Object]"
+                  />
+                  <span
+                    class="root text icon-text text--primary text--medium"
+                  >
+                    Android
+                  </span>
+                </div>
+              </a>
             </div>
           </div>
         </div>
@@ -2975,20 +3017,27 @@ exports[`MobileAppConnection it shows an error message if there was an error fet
             <div
               class="css-bxa289-layoutChildrenWrapper"
             >
-              <div
-                class="root icon-block root_bordered root--fullWidth root--hover"
+              <a
+                href="https://play.google.com/store/apps/details?id=com.grafana.oncall.prod"
+                rel="noreferrer"
+                style="width: 100%;"
+                target="_blank"
               >
-                <img
-                  alt="Play Store"
-                  class="icon"
-                  src="[object Object]"
-                />
-                <span
-                  class="root text icon-text text--primary text--medium"
+                <div
+                  class="root icon-block root_bordered root--fullWidth root--hover"
                 >
-                  Android
-                </span>
-              </div>
+                  <img
+                    alt="Play Store"
+                    class="icon"
+                    src="[object Object]"
+                  />
+                  <span
+                    class="root text icon-text text--primary text--medium"
+                  >
+                    Android
+                  </span>
+                </div>
+              </a>
             </div>
           </div>
         </div>
diff --git a/grafana-plugin/src/containers/MobileAppConnection/parts/DownloadIcons/__snapshots__/DownloadIcons.test.tsx.snap b/grafana-plugin/src/containers/MobileAppConnection/parts/DownloadIcons/__snapshots__/DownloadIcons.test.tsx.snap
index c355da1be0..fe4b75606c 100644
--- a/grafana-plugin/src/containers/MobileAppConnection/parts/DownloadIcons/__snapshots__/DownloadIcons.test.tsx.snap
+++ b/grafana-plugin/src/containers/MobileAppConnection/parts/DownloadIcons/__snapshots__/DownloadIcons.test.tsx.snap
@@ -52,20 +52,27 @@ exports[`DownloadIcons it renders properly 1`] = `
         <div
           class="css-bxa289-layoutChildrenWrapper"
         >
-          <div
-            class="root icon-block root_bordered root--fullWidth root--hover"
+          <a
+            href="https://play.google.com/store/apps/details?id=com.grafana.oncall.prod"
+            rel="noreferrer"
+            style="width: 100%;"
+            target="_blank"
           >
-            <img
-              alt="Play Store"
-              class="icon"
-              src="[object Object]"
-            />
-            <span
-              class="root text icon-text text--primary text--medium"
+            <div
+              class="root icon-block root_bordered root--fullWidth root--hover"
             >
-              Android
-            </span>
-          </div>
+              <img
+                alt="Play Store"
+                class="icon"
+                src="[object Object]"
+              />
+              <span
+                class="root text icon-text text--primary text--medium"
+              >
+                Android
+              </span>
+            </div>
+          </a>
         </div>
       </div>
     </div>
diff --git a/grafana-plugin/src/containers/MobileAppConnection/parts/DownloadIcons/index.tsx b/grafana-plugin/src/containers/MobileAppConnection/parts/DownloadIcons/index.tsx
index 2b14079970..d3b68fc897 100644
--- a/grafana-plugin/src/containers/MobileAppConnection/parts/DownloadIcons/index.tsx
+++ b/grafana-plugin/src/containers/MobileAppConnection/parts/DownloadIcons/index.tsx
@@ -25,12 +25,19 @@ const DownloadIcons: FC = () => (
           iOS
         </Text>
       </Block>
-      <Block hover fullWidth bordered className={cx('icon-block')}>
-        <img src={PlayStoreLogoSVG} alt="Play Store" className={cx('icon')} />
-        <Text type="primary" className={cx('icon-text')}>
-          Android
-        </Text>
-      </Block>
+      <a
+        style={{ width: '100%' }}
+        href="https://play.google.com/store/apps/details?id=com.grafana.oncall.prod"
+        target="_blank"
+        rel="noreferrer"
+      >
+        <Block hover fullWidth bordered className={cx('icon-block')}>
+          <img src={PlayStoreLogoSVG} alt="Play Store" className={cx('icon')} />
+          <Text type="primary" className={cx('icon-text')}>
+            Android
+          </Text>
+        </Block>
+      </a>
     </VerticalGroup>
   </VerticalGroup>
 );