Skip to content

Commit

Permalink
Add Android app link on mobile app connection tab (#1238)
Browse files Browse the repository at this point in the history 
Add the Android app URL to the mobile app connection tab

---------

Co-authored-by: Joey Orlando <joey.orlando@grafana.com>
  • Loading branch information
@vstpme @joeyorlando
vstpme and joeyorlando authored Jan 30, 2023
1 parent 32db4a1 commit 4aa1fea
Show file tree
Hide file tree
Showing 3 changed files with 165 additions and 102 deletions.
217 changes: 133 additions & 84 deletions ...plugin/src/containers/MobileAppConnection/__snapshots__/MobileAppConnection.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
31 changes: 19 additions & 12 deletions ...tainers/MobileAppConnection/parts/DownloadIcons/__snapshots__/DownloadIcons.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
19 changes: 13 additions & 6 deletions grafana-plugin/src/containers/MobileAppConnection/parts/DownloadIcons/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down

0 comments on commit 4aa1fea

Please sign in to comment.