From 5188a8d7b82ee076d9b592d0324aefedff44c61b Mon Sep 17 00:00:00 2001
From: Salvatore Giordano <salvatoregiordanoo@gmail.com>
Date: Wed, 24 Apr 2024 10:10:22 +0200
Subject: [PATCH] Update mobile app sign in page (#4264)

# What this PR does

Changed the text of the deep link sign in button and reorders the
sections so that the qr code is on top in mobile mode

## Which issue(s) this PR closes

Closes https://github.com/grafana/oncall-mobile-app/issues/605

## 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] Added the relevant release notes label (see labels prefixed w/
`release:`). These labels dictate how your PR will
    show up in the autogenerated release notes.
---
 .../MobileAppConnection.tsx                   |   4 +-
 .../MobileAppConnection.test.tsx.snap         | 150 +++++++++---------
 .../parts/LinkLoginButton/LinkLoginButton.tsx |   2 +-
 .../LinkLoginButton.test.tsx.snap             |   2 +-
 4 files changed, 79 insertions(+), 79 deletions(-)

diff --git a/grafana-plugin/src/containers/MobileAppConnection/MobileAppConnection.tsx b/grafana-plugin/src/containers/MobileAppConnection/MobileAppConnection.tsx
index 839b20ac..701c96b1 100644
--- a/grafana-plugin/src/containers/MobileAppConnection/MobileAppConnection.tsx
+++ b/grafana-plugin/src/containers/MobileAppConnection/MobileAppConnection.tsx
@@ -203,10 +203,10 @@ export const MobileAppConnection = observer(({ userPk }: Props) => {
             </Block>
           )}
           <Block shadowed bordered withBackground className={cx('container__box')}>
-            <DownloadIcons />
+            {content}
           </Block>
           <Block shadowed bordered withBackground className={cx('container__box')}>
-            {content}
+            <DownloadIcons />
           </Block>
         </div>
         {mobileAppIsCurrentlyConnected && isCurrentUser && !disconnectingMobileApp && (
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 c02a1a27..2e879db0 100644
--- a/grafana-plugin/src/containers/MobileAppConnection/__snapshots__/MobileAppConnection.test.tsx.snap
+++ b/grafana-plugin/src/containers/MobileAppConnection/__snapshots__/MobileAppConnection.test.tsx.snap
@@ -15,6 +15,25 @@ exports[`MobileAppConnection it shows a QR code if the app isn't already connect
       <div
         class="container"
       >
+        <div
+          class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
+        >
+          <div
+            class="css-1yjvs5a"
+          >
+            Loading...
+             
+            <div
+              class="css-1tqtz24"
+              data-testid="Spinner"
+            >
+              <i
+                aria-label="loading spinner"
+                class="fa fa-spinner fa-spin fa-spin"
+              />
+            </div>
+          </div>
+        </div>
         <div
           class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
         >
@@ -101,25 +120,6 @@ exports[`MobileAppConnection it shows a QR code if the app isn't already connect
             </div>
           </div>
         </div>
-        <div
-          class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
-        >
-          <div
-            class="css-1yjvs5a"
-          >
-            Loading...
-             
-            <div
-              class="css-1tqtz24"
-              data-testid="Spinner"
-            >
-              <i
-                aria-label="loading spinner"
-                class="fa fa-spinner fa-spin fa-spin"
-              />
-            </div>
-          </div>
-        </div>
       </div>
     </div>
   </div>
@@ -141,6 +141,25 @@ exports[`MobileAppConnection it shows a loading message if it is currently disco
       <div
         class="container"
       >
+        <div
+          class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
+        >
+          <div
+            class="css-1yjvs5a"
+          >
+            Loading...
+             
+            <div
+              class="css-1tqtz24"
+              data-testid="Spinner"
+            >
+              <i
+                aria-label="loading spinner"
+                class="fa fa-spinner fa-spin fa-spin"
+              />
+            </div>
+          </div>
+        </div>
         <div
           class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
         >
@@ -227,25 +246,6 @@ exports[`MobileAppConnection it shows a loading message if it is currently disco
             </div>
           </div>
         </div>
-        <div
-          class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
-        >
-          <div
-            class="css-1yjvs5a"
-          >
-            Loading...
-             
-            <div
-              class="css-1tqtz24"
-              data-testid="Spinner"
-            >
-              <i
-                aria-label="loading spinner"
-                class="fa fa-spinner fa-spin fa-spin"
-              />
-            </div>
-          </div>
-        </div>
       </div>
     </div>
   </div>
@@ -267,6 +267,25 @@ exports[`MobileAppConnection it shows a loading message if it is currently fetch
       <div
         class="container"
       >
+        <div
+          class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
+        >
+          <div
+            class="css-1yjvs5a"
+          >
+            Loading...
+             
+            <div
+              class="css-1tqtz24"
+              data-testid="Spinner"
+            >
+              <i
+                aria-label="loading spinner"
+                class="fa fa-spinner fa-spin fa-spin"
+              />
+            </div>
+          </div>
+        </div>
         <div
           class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
         >
@@ -353,25 +372,6 @@ exports[`MobileAppConnection it shows a loading message if it is currently fetch
             </div>
           </div>
         </div>
-        <div
-          class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
-        >
-          <div
-            class="css-1yjvs5a"
-          >
-            Loading...
-             
-            <div
-              class="css-1tqtz24"
-              data-testid="Spinner"
-            >
-              <i
-                aria-label="loading spinner"
-                class="fa fa-spinner fa-spin fa-spin"
-              />
-            </div>
-          </div>
-        </div>
       </div>
     </div>
   </div>
@@ -434,6 +434,15 @@ exports[`MobileAppConnection it shows an error message if there was an error dis
       <div
         class="container"
       >
+        <div
+          class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
+        >
+          <span
+            class="css-77ouhj--primary css-77ouhj--medium css-1d6rs0l"
+          >
+            There was an error disconnecting your mobile app. Please try again.
+          </span>
+        </div>
         <div
           class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
         >
@@ -520,15 +529,6 @@ exports[`MobileAppConnection it shows an error message if there was an error dis
             </div>
           </div>
         </div>
-        <div
-          class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
-        >
-          <span
-            class="css-77ouhj--primary css-77ouhj--medium css-1d6rs0l"
-          >
-            There was an error disconnecting your mobile app. Please try again.
-          </span>
-        </div>
       </div>
     </div>
   </div>
@@ -550,6 +550,15 @@ exports[`MobileAppConnection it shows an error message if there was an error fet
       <div
         class="container"
       >
+        <div
+          class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
+        >
+          <span
+            class="css-77ouhj--primary css-77ouhj--medium css-1d6rs0l"
+          >
+            There was an error fetching your QR code. Please try again.
+          </span>
+        </div>
         <div
           class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
         >
@@ -636,15 +645,6 @@ exports[`MobileAppConnection it shows an error message if there was an error fet
             </div>
           </div>
         </div>
-        <div
-          class="css-1x53p5e css-1x53p5e--bordered css-1x53p5e--shadowed css-1x53p5e--withBackGround container__box"
-        >
-          <span
-            class="css-77ouhj--primary css-77ouhj--medium css-1d6rs0l"
-          >
-            There was an error fetching your QR code. Please try again.
-          </span>
-        </div>
       </div>
     </div>
   </div>
diff --git a/grafana-plugin/src/containers/MobileAppConnection/parts/LinkLoginButton/LinkLoginButton.tsx b/grafana-plugin/src/containers/MobileAppConnection/parts/LinkLoginButton/LinkLoginButton.tsx
index 54f97245..da308987 100644
--- a/grafana-plugin/src/containers/MobileAppConnection/parts/LinkLoginButton/LinkLoginButton.tsx
+++ b/grafana-plugin/src/containers/MobileAppConnection/parts/LinkLoginButton/LinkLoginButton.tsx
@@ -25,7 +25,7 @@ export const LinkLoginButton: FC<Props> = (props: Props) => {
           window.open(mobileDeepLink, '_blank');
         }}
       >
-        Sign in
+        Connect Mobile App
       </Button>
     </VerticalGroup>
   );
diff --git a/grafana-plugin/src/containers/MobileAppConnection/parts/LinkLoginButton/__snapshots__/LinkLoginButton.test.tsx.snap b/grafana-plugin/src/containers/MobileAppConnection/parts/LinkLoginButton/__snapshots__/LinkLoginButton.test.tsx.snap
index f68e7860..077cae5c 100644
--- a/grafana-plugin/src/containers/MobileAppConnection/parts/LinkLoginButton/__snapshots__/LinkLoginButton.test.tsx.snap
+++ b/grafana-plugin/src/containers/MobileAppConnection/parts/LinkLoginButton/__snapshots__/LinkLoginButton.test.tsx.snap
@@ -34,7 +34,7 @@ exports[`LinkLoginButton it renders properly 1`] = `
         <span
           class="css-1riaxdn"
         >
-          Sign in
+          Connect Mobile App
         </span>
       </button>
     </div>