From 3f6e6168a824be657275cef5c54b4f4eab3466cb Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Thu, 2 Feb 2023 14:55:22 +0200
Subject: [PATCH] Rares/coming soon (#1272)

# What this PR does

Added Coming Soon label for `iOS`

- [x] `CHANGELOG.md` updated
---
 CHANGELOG.md                                  |   1 +
 .../MobileAppConnection.test.tsx.snap         | 294 ++++++++++--------
 .../DownloadIcons/DownloadIcons.module.scss   |   8 +
 .../__snapshots__/DownloadIcons.test.tsx.snap |  42 +--
 .../parts/DownloadIcons/index.tsx             |  17 +-
 .../src/pages/incident/Incident.helpers.tsx   |   9 +-
 grafana-plugin/src/utils/consts.ts            |   5 +
 7 files changed, 222 insertions(+), 154 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 36ead2eb..db28e8e7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add [`django-dbconn-retry` library](https://github.com/jdelic/django-dbconn-retry) to `INSTALLED_APPS` to attempt
   to alleviate occasional `django.db.utils.OperationalError` errors
 - Improve alerts and alert group endpoint response time in internal API with caching ([1261](https://github.com/grafana/oncall/pull/1261))
+- Added Coming Soon for iOS on Mobile App screen
 
 ### Changed
 
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 56242d64..b49ac43b 100644
--- a/grafana-plugin/src/containers/MobileAppConnection/__snapshots__/MobileAppConnection.test.tsx.snap
+++ b/grafana-plugin/src/containers/MobileAppConnection/__snapshots__/MobileAppConnection.test.tsx.snap
@@ -37,24 +37,6 @@ exports[`MobileAppConnection if we disconnect the app, it disconnects and fetche
             class="css-1j7sh2x-vertical-group"
             style="width: 100%; height: 100%;"
           >
-            <div
-              class="css-bxa289-layoutChildrenWrapper"
-            >
-              <div
-                class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
-              >
-                <img
-                  alt="Apple"
-                  class="icon"
-                  src="[object Object]"
-                />
-                <span
-                  class="root text icon-text text--primary text--medium"
-                >
-                  iOS
-                </span>
-              </div>
-            </div>
             <div
               class="css-bxa289-layoutChildrenWrapper"
             >
@@ -80,6 +62,30 @@ exports[`MobileAppConnection if we disconnect the app, it disconnects and fetche
                 </div>
               </a>
             </div>
+            <div
+              class="css-bxa289-layoutChildrenWrapper"
+            >
+              <div
+                class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
+              >
+                <img
+                  alt="Apple"
+                  class="icon"
+                  src="[object Object]"
+                />
+                <span
+                  class="root text icon-text text--primary text--medium"
+                >
+                  iOS
+                </span>
+                <span
+                  class="root icon-tag"
+                  style="background-color: rgb(41, 156, 70);"
+                >
+                  Coming Soon
+                </span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -2375,24 +2381,6 @@ exports[`MobileAppConnection it shows a QR code if the app isn't already connect
             class="css-1j7sh2x-vertical-group"
             style="width: 100%; height: 100%;"
           >
-            <div
-              class="css-bxa289-layoutChildrenWrapper"
-            >
-              <div
-                class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
-              >
-                <img
-                  alt="Apple"
-                  class="icon"
-                  src="[object Object]"
-                />
-                <span
-                  class="root text icon-text text--primary text--medium"
-                >
-                  iOS
-                </span>
-              </div>
-            </div>
             <div
               class="css-bxa289-layoutChildrenWrapper"
             >
@@ -2418,6 +2406,30 @@ exports[`MobileAppConnection it shows a QR code if the app isn't already connect
                 </div>
               </a>
             </div>
+            <div
+              class="css-bxa289-layoutChildrenWrapper"
+            >
+              <div
+                class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
+              >
+                <img
+                  alt="Apple"
+                  class="icon"
+                  src="[object Object]"
+                />
+                <span
+                  class="root text icon-text text--primary text--medium"
+                >
+                  iOS
+                </span>
+                <span
+                  class="root icon-tag"
+                  style="background-color: rgb(41, 156, 70);"
+                >
+                  Coming Soon
+                </span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -2481,24 +2493,6 @@ exports[`MobileAppConnection it shows a loading message if it is currently disco
             class="css-1j7sh2x-vertical-group"
             style="width: 100%; height: 100%;"
           >
-            <div
-              class="css-bxa289-layoutChildrenWrapper"
-            >
-              <div
-                class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
-              >
-                <img
-                  alt="Apple"
-                  class="icon"
-                  src="[object Object]"
-                />
-                <span
-                  class="root text icon-text text--primary text--medium"
-                >
-                  iOS
-                </span>
-              </div>
-            </div>
             <div
               class="css-bxa289-layoutChildrenWrapper"
             >
@@ -2524,6 +2518,30 @@ exports[`MobileAppConnection it shows a loading message if it is currently disco
                 </div>
               </a>
             </div>
+            <div
+              class="css-bxa289-layoutChildrenWrapper"
+            >
+              <div
+                class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
+              >
+                <img
+                  alt="Apple"
+                  class="icon"
+                  src="[object Object]"
+                />
+                <span
+                  class="root text icon-text text--primary text--medium"
+                >
+                  iOS
+                </span>
+                <span
+                  class="root icon-tag"
+                  style="background-color: rgb(41, 156, 70);"
+                >
+                  Coming Soon
+                </span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -2587,24 +2605,6 @@ exports[`MobileAppConnection it shows a loading message if it is currently fetch
             class="css-1j7sh2x-vertical-group"
             style="width: 100%; height: 100%;"
           >
-            <div
-              class="css-bxa289-layoutChildrenWrapper"
-            >
-              <div
-                class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
-              >
-                <img
-                  alt="Apple"
-                  class="icon"
-                  src="[object Object]"
-                />
-                <span
-                  class="root text icon-text text--primary text--medium"
-                >
-                  iOS
-                </span>
-              </div>
-            </div>
             <div
               class="css-bxa289-layoutChildrenWrapper"
             >
@@ -2630,6 +2630,30 @@ exports[`MobileAppConnection it shows a loading message if it is currently fetch
                 </div>
               </a>
             </div>
+            <div
+              class="css-bxa289-layoutChildrenWrapper"
+            >
+              <div
+                class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
+              >
+                <img
+                  alt="Apple"
+                  class="icon"
+                  src="[object Object]"
+                />
+                <span
+                  class="root text icon-text text--primary text--medium"
+                >
+                  iOS
+                </span>
+                <span
+                  class="root icon-tag"
+                  style="background-color: rgb(41, 156, 70);"
+                >
+                  Coming Soon
+                </span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -2693,24 +2717,6 @@ exports[`MobileAppConnection it shows a message when the mobile app is already c
             class="css-1j7sh2x-vertical-group"
             style="width: 100%; height: 100%;"
           >
-            <div
-              class="css-bxa289-layoutChildrenWrapper"
-            >
-              <div
-                class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
-              >
-                <img
-                  alt="Apple"
-                  class="icon"
-                  src="[object Object]"
-                />
-                <span
-                  class="root text icon-text text--primary text--medium"
-                >
-                  iOS
-                </span>
-              </div>
-            </div>
             <div
               class="css-bxa289-layoutChildrenWrapper"
             >
@@ -2736,6 +2742,30 @@ exports[`MobileAppConnection it shows a message when the mobile app is already c
                 </div>
               </a>
             </div>
+            <div
+              class="css-bxa289-layoutChildrenWrapper"
+            >
+              <div
+                class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
+              >
+                <img
+                  alt="Apple"
+                  class="icon"
+                  src="[object Object]"
+                />
+                <span
+                  class="root text icon-text text--primary text--medium"
+                >
+                  iOS
+                </span>
+                <span
+                  class="root icon-tag"
+                  style="background-color: rgb(41, 156, 70);"
+                >
+                  Coming Soon
+                </span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -2899,24 +2929,6 @@ exports[`MobileAppConnection it shows an error message if there was an error dis
             class="css-1j7sh2x-vertical-group"
             style="width: 100%; height: 100%;"
           >
-            <div
-              class="css-bxa289-layoutChildrenWrapper"
-            >
-              <div
-                class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
-              >
-                <img
-                  alt="Apple"
-                  class="icon"
-                  src="[object Object]"
-                />
-                <span
-                  class="root text icon-text text--primary text--medium"
-                >
-                  iOS
-                </span>
-              </div>
-            </div>
             <div
               class="css-bxa289-layoutChildrenWrapper"
             >
@@ -2942,6 +2954,30 @@ exports[`MobileAppConnection it shows an error message if there was an error dis
                 </div>
               </a>
             </div>
+            <div
+              class="css-bxa289-layoutChildrenWrapper"
+            >
+              <div
+                class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
+              >
+                <img
+                  alt="Apple"
+                  class="icon"
+                  src="[object Object]"
+                />
+                <span
+                  class="root text icon-text text--primary text--medium"
+                >
+                  iOS
+                </span>
+                <span
+                  class="root icon-tag"
+                  style="background-color: rgb(41, 156, 70);"
+                >
+                  Coming Soon
+                </span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -2996,24 +3032,6 @@ exports[`MobileAppConnection it shows an error message if there was an error fet
             class="css-1j7sh2x-vertical-group"
             style="width: 100%; height: 100%;"
           >
-            <div
-              class="css-bxa289-layoutChildrenWrapper"
-            >
-              <div
-                class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
-              >
-                <img
-                  alt="Apple"
-                  class="icon"
-                  src="[object Object]"
-                />
-                <span
-                  class="root text icon-text text--primary text--medium"
-                >
-                  iOS
-                </span>
-              </div>
-            </div>
             <div
               class="css-bxa289-layoutChildrenWrapper"
             >
@@ -3039,6 +3057,30 @@ exports[`MobileAppConnection it shows an error message if there was an error fet
                 </div>
               </a>
             </div>
+            <div
+              class="css-bxa289-layoutChildrenWrapper"
+            >
+              <div
+                class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
+              >
+                <img
+                  alt="Apple"
+                  class="icon"
+                  src="[object Object]"
+                />
+                <span
+                  class="root text icon-text text--primary text--medium"
+                >
+                  iOS
+                </span>
+                <span
+                  class="root icon-tag"
+                  style="background-color: rgb(41, 156, 70);"
+                >
+                  Coming Soon
+                </span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/grafana-plugin/src/containers/MobileAppConnection/parts/DownloadIcons/DownloadIcons.module.scss b/grafana-plugin/src/containers/MobileAppConnection/parts/DownloadIcons/DownloadIcons.module.scss
index 6f41181e..b8620322 100644
--- a/grafana-plugin/src/containers/MobileAppConnection/parts/DownloadIcons/DownloadIcons.module.scss
+++ b/grafana-plugin/src/containers/MobileAppConnection/parts/DownloadIcons/DownloadIcons.module.scss
@@ -13,4 +13,12 @@
   display: flex;
   align-items: center;
   min-height: 80px;
+  column-gap: 12px;
+}
+
+.icon-tag {
+  border-radius: 12px;
+  font-size: 12px;
+  padding: 2px 8px;
+  cursor: default;
 }
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 fe4b7560..d021d2ee 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
@@ -31,24 +31,6 @@ exports[`DownloadIcons it renders properly 1`] = `
         class="css-1j7sh2x-vertical-group"
         style="width: 100%; height: 100%;"
       >
-        <div
-          class="css-bxa289-layoutChildrenWrapper"
-        >
-          <div
-            class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
-          >
-            <img
-              alt="Apple"
-              class="icon"
-              src="[object Object]"
-            />
-            <span
-              class="root text icon-text text--primary text--medium"
-            >
-              iOS
-            </span>
-          </div>
-        </div>
         <div
           class="css-bxa289-layoutChildrenWrapper"
         >
@@ -74,6 +56,30 @@ exports[`DownloadIcons it renders properly 1`] = `
             </div>
           </a>
         </div>
+        <div
+          class="css-bxa289-layoutChildrenWrapper"
+        >
+          <div
+            class="root icon-block root_bordered root--fullWidth root--withBackground root--hover"
+          >
+            <img
+              alt="Apple"
+              class="icon"
+              src="[object Object]"
+            />
+            <span
+              class="root text icon-text text--primary text--medium"
+            >
+              iOS
+            </span>
+            <span
+              class="root icon-tag"
+              style="background-color: rgb(41, 156, 70);"
+            >
+              Coming Soon
+            </span>
+          </div>
+        </div>
       </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 d3b68fc8..059efab7 100644
--- a/grafana-plugin/src/containers/MobileAppConnection/parts/DownloadIcons/index.tsx
+++ b/grafana-plugin/src/containers/MobileAppConnection/parts/DownloadIcons/index.tsx
@@ -6,7 +6,9 @@ import cn from 'classnames/bind';
 import AppleLogoSVG from 'assets/img/brand/apple-logo.svg';
 import PlayStoreLogoSVG from 'assets/img/brand/play-store-logo.svg';
 import Block from 'components/GBlock/Block';
+import Tag from 'components/Tag/Tag';
 import Text from 'components/Text/Text';
+import { COLOR_PRIMARY } from 'utils/consts';
 
 import styles from './DownloadIcons.module.scss';
 
@@ -19,12 +21,6 @@ const DownloadIcons: FC = () => (
     </Text>
     <Text type="primary">The Grafana IRM app is available on both the App Store and Google Play Store.</Text>
     <VerticalGroup>
-      <Block hover fullWidth withBackground bordered className={cx('icon-block')}>
-        <img src={AppleLogoSVG} alt="Apple" className={cx('icon')} />
-        <Text type="primary" className={cx('icon-text')}>
-          iOS
-        </Text>
-      </Block>
       <a
         style={{ width: '100%' }}
         href="https://play.google.com/store/apps/details?id=com.grafana.oncall.prod"
@@ -38,6 +34,15 @@ const DownloadIcons: FC = () => (
           </Text>
         </Block>
       </a>
+      <Block hover fullWidth withBackground bordered className={cx('icon-block')}>
+        <img src={AppleLogoSVG} alt="Apple" className={cx('icon')} />
+        <Text type="primary" className={cx('icon-text')}>
+          iOS
+        </Text>
+        <Tag color={COLOR_PRIMARY} className={cx('icon-tag')}>
+          Coming Soon
+        </Tag>
+      </Block>
     </VerticalGroup>
   </VerticalGroup>
 );
diff --git a/grafana-plugin/src/pages/incident/Incident.helpers.tsx b/grafana-plugin/src/pages/incident/Incident.helpers.tsx
index 9749ea0b..e98b9a87 100644
--- a/grafana-plugin/src/pages/incident/Incident.helpers.tsx
+++ b/grafana-plugin/src/pages/incident/Incident.helpers.tsx
@@ -13,12 +13,13 @@ import { User } from 'models/user/user.types';
 import SilenceDropdown from 'pages/incidents/parts/SilenceDropdown';
 import { move } from 'state/helpers';
 import { UserActions } from 'utils/authorization';
+import { COLOR_DANGER, COLOR_PRIMARY, COLOR_SECONDARY, COLOR_WARNING } from 'utils/consts';
 
 export function getIncidentStatusTag(alert: Alert) {
   switch (alert.status) {
     case IncidentStatus.New:
       return (
-        <Tag color="#E02F44">
+        <Tag color={COLOR_DANGER}>
           <Text strong size="small">
             Firing
           </Text>
@@ -26,7 +27,7 @@ export function getIncidentStatusTag(alert: Alert) {
       );
     case IncidentStatus.Acknowledged:
       return (
-        <Tag color="#C69B06">
+        <Tag color={COLOR_WARNING}>
           <Text strong size="small">
             Acknowledged
           </Text>
@@ -34,7 +35,7 @@ export function getIncidentStatusTag(alert: Alert) {
       );
     case IncidentStatus.Resolved:
       return (
-        <Tag color="#299C46">
+        <Tag color={COLOR_PRIMARY}>
           <Text strong size="small">
             Resolved
           </Text>
@@ -42,7 +43,7 @@ export function getIncidentStatusTag(alert: Alert) {
       );
     case IncidentStatus.Silenced:
       return (
-        <Tag color="#464C54">
+        <Tag color={COLOR_SECONDARY}>
           <Text strong size="small">
             Silenced
           </Text>
diff --git a/grafana-plugin/src/utils/consts.ts b/grafana-plugin/src/utils/consts.ts
index ddddf6cf..f38d49ee 100644
--- a/grafana-plugin/src/utils/consts.ts
+++ b/grafana-plugin/src/utils/consts.ts
@@ -30,3 +30,8 @@ export const FARO_ENDPOINT_PROD =
 
 export const DOCS_SLACK_SETUP = 'https://grafana.com/docs/grafana-cloud/oncall/open-source/#slack-setup';
 export const DOCS_TELEGRAM_SETUP = 'https://grafana.com/docs/grafana-cloud/oncall/chat-options/configure-telegram/';
+
+export const COLOR_DANGER = '#E02F44';
+export const COLOR_WARNING = '#C69B06';
+export const COLOR_PRIMARY = '#299C46';
+export const COLOR_SECONDARY = '#464C54';