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%;"
>
-
-
-

-
- iOS
-
-
-
@@ -80,6 +62,30 @@ exports[`MobileAppConnection if we disconnect the app, it disconnects and fetche
+
+
+

+
+ iOS
+
+
+ Coming Soon
+
+
+
@@ -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%;"
>
-
-
-

-
- iOS
-
-
-
@@ -2418,6 +2406,30 @@ exports[`MobileAppConnection it shows a QR code if the app isn't already connect
+
+
+

+
+ iOS
+
+
+ Coming Soon
+
+
+
@@ -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%;"
>
-
-
-

-
- iOS
-
-
-
@@ -2524,6 +2518,30 @@ exports[`MobileAppConnection it shows a loading message if it is currently disco
+
+
+

+
+ iOS
+
+
+ Coming Soon
+
+
+
@@ -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%;"
>
-
-
-

-
- iOS
-
-
-
@@ -2630,6 +2630,30 @@ exports[`MobileAppConnection it shows a loading message if it is currently fetch
+
+
+

+
+ iOS
+
+
+ Coming Soon
+
+
+
@@ -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%;"
>
-
-
-

-
- iOS
-
-
-
@@ -2736,6 +2742,30 @@ exports[`MobileAppConnection it shows a message when the mobile app is already c
+
+
+

+
+ iOS
+
+
+ Coming Soon
+
+
+
@@ -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%;"
>
-
-
-

-
- iOS
-
-
-
@@ -2942,6 +2954,30 @@ exports[`MobileAppConnection it shows an error message if there was an error dis
+
+
+

+
+ iOS
+
+
+ Coming Soon
+
+
+
@@ -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%;"
>
-
-
-

-
- iOS
-
-
-
@@ -3039,6 +3057,30 @@ exports[`MobileAppConnection it shows an error message if there was an error fet
+
+
+

+
+ iOS
+
+
+ Coming Soon
+
+
+
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%;"
>
-
-
-

-
- iOS
-
-
-
@@ -74,6 +56,30 @@ exports[`DownloadIcons it renders properly 1`] = `
+
+
+

+
+ iOS
+
+
+ Coming Soon
+
+
+
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 = () => (
The Grafana IRM app is available on both the App Store and Google Play Store.
-
-
-
- iOS
-
-
(
+
+
+
+ iOS
+
+
+ Coming Soon
+
+
);
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 (
-
+
Firing
@@ -26,7 +27,7 @@ export function getIncidentStatusTag(alert: Alert) {
);
case IncidentStatus.Acknowledged:
return (
-
+
Acknowledged
@@ -34,7 +35,7 @@ export function getIncidentStatusTag(alert: Alert) {
);
case IncidentStatus.Resolved:
return (
-
+
Resolved
@@ -42,7 +43,7 @@ export function getIncidentStatusTag(alert: Alert) {
);
case IncidentStatus.Silenced:
return (
-
+
Silenced
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';