mirrors/netbird-dashboard
1
0
Fork 0
mirror of https://github.com/netbirdio/dashboard.git synced 2026-01-26 01:21:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add reference to the Apple Store on the Add Peer window (#311)

Browse Source
This commit is contained in:
Misha Bragin
2023-12-29 18:03:50 +01:00
committed by GitHub
parent 87ff65f1a7
commit fa7bc205ba
7 changed files with 114 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
e2e-tests/pages/modals/add-peer-modal.ts
View File

@@ -6,6 +6,7 @@ export class AddPeerModal {
private readonly windowsTab = this.page.getByTestId('add-peer-modal-windows-tab')
private readonly macTab = this.page.getByTestId('add-peer-modal-mac-tab')
private readonly androidTab = this.page.getByTestId('add-peer-modal-android-tab')
private readonly iosTab = this.page.getByTestId('add-peer-modal-ios-tab')
private readonly dockerTab = this.page.getByTestId('add-peer-modal-docker-tab')
private readonly linuxTabText = this.page.locator('pre').filter({ hasText: 'curl -fsSL https://pkgs.netbird.io/install.sh | sh' })
private readonly windowsDownloadButton = this.page.getByTestId('download-windows-button')
@@ -57,6 +58,13 @@ export class AddPeerModal {
})
}
async openIOSTab() {
await test.step('Open iOS tab on add peer modal', async () => {
await this.iosTab.click();
})
}
async openDockerTab() {
await test.step('Open Docker tab on add peer modal', async () => {
await this.dockerTab.click();
@@ -94,6 +102,12 @@ export class AddPeerModal {
})
}
async assertiOSDownloadButtonHasCorrectLink() {
await test.step('Assert iOS download button has a correct link', async () => {
await expect(this.androidDownloadButton).toHaveAttribute('href', 'https://apps.apple.com/app/netbird-p2p-vpn/id6469329339');
})
}
async assertDockerDownloadButtonHasCorrectLink() {
await test.step('Assert Docker download button has a correct link', async () => {
await expect(this.dockerDownloadButton).toHaveAttribute('href', 'https://docs.docker.com/engine/install/');

5
e2e-tests/tests/peers.test.ts
View File

@@ -30,6 +30,11 @@ test('Test MacOS tab on a first access add peer modal / @bc', async () => {
await addPeerModal.assertM1M2DownloadButtonHasCorrectLink();
});
test('Test iOS tab on a first access add peer modal', async () => {
await addPeerModal.openIOSTab();
await addPeerModal.assertiOSDownloadButtonHasCorrectLink();
});
test('Test Android tab on a first access add peer modal', async () => {
await addPeerModal.openAndroidTab();
await addPeerModal.assertAndroidDownloadButtonHasCorrectLink();

BIN
src/assets/app-store-badge.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

8
src/components/Banner.tsx
View File

@@ -15,18 +15,18 @@ const Banner = () => {
localStorage.setItem(banner_closed_key,'true');
};
const announcement = "New Release! Manage DNS with NetBird."
const announcement = "NetBird is now available on the App Store."
const announcement_md5 = Md5.hashStr(announcement)
const linkLearnMore = () => {
return (
<a
href="https://docs.netbird.io/how-to/manage-dns-in-your-network"
href="https://apps.apple.com/us/app/netbird-p2p-vpn/id6469329339"
className="font-bold underline"
target="_blank"
rel="noreferrer"
><Text strong style={{color: "#ffffff"}}>Learn more&nbsp;<span aria-hidden="true">&rarr;</span></Text></a>
><Text strong style={{color: "#ffffff"}}>Download&nbsp;<span aria-hidden="true">&rarr;</span></Text></a>
)
}
@@ -36,7 +36,7 @@ const Banner = () => {
if((!stored_banner_closed || stored_banner_closed !== 'true') ||
(!store_banner_md5 || store_banner_md5 !== announcement_md5)) {
//setShow(true);
setShow(true);
localStorage.setItem(banner_md5_key,announcement_md5);
localStorage.setItem(banner_closed_key,'false');
}

9
src/components/popups/addpeer/addpeer/AddPeerPopup.tsx
View File

@@ -11,6 +11,8 @@ import MacTab from "./MacTab";
import Link from "antd/lib/typography/Link";
import DockerTab from "./DockerTab";
import AndroidTab from "./AndroidTab";
import IOSTab from "./IOSTab";
import {IOSIcon} from "./IOSIcon";
type Props = {
greeting?: string;
@@ -54,11 +56,16 @@ export const AddPeerPopup: React.FC<Props> = ({
},
{
key: "4",
label: <span data-testid="add-peer-modal-ios-tab"><IOSIcon/>iOS</span>,
children: <IOSTab/>,
},
{
key: "5",
label: <span data-testid="add-peer-modal-android-tab"><AndroidFilled/>Android</span>,
children: <AndroidTab/>,
},
{
key: "5",
key: "6",
label: <span data-testid="add-peer-modal-docker-tab"><Icon component={DockerSVG}/>Docker</span>,
children: <DockerTab/>,
}

21
src/components/popups/addpeer/addpeer/IOSIcon.tsx Normal file
View File

@@ -0,0 +1,21 @@
import React from 'react';
import Icon, { HomeOutlined } from '@ant-design/icons';
import type { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
import { Space } from 'antd';
const SvgIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg"
width="15"
height="15"
viewBox="0 0 30 30"
>
<path
d="M 27.126316,5.731579 C 26.889474,5.1078948 26.321052,4.231579 25.51579,3.6078948 25.042106,3.2526316 24.505264,2.9052632 23.747368,2.6842106 22.926316,2.4473684 21.91579,2.368421 20.68421,2.368421 H 9.3157894 c -1.2394736,0 -2.2421052,0.078948 -3.055263,0.3236842 C 5.5026316,2.9210526 4.9421052,3.2605264 4.4842106,3.6157894 3.6789474,4.231579 3.1105264,5.1157894 2.8657894,5.7394736 2.3763158,6.9947368 2.368421,8.4157894 2.368421,9.3157894 V 20.68421 c 0,0.9 0.0079,2.321054 0.4973684,3.584212 0.244737,0.623684 0.813158,1.5 1.6184212,2.123684 0.4657894,0.355262 1.018421,0.70263 1.7763158,0.923684 0.8131578,0.236842 1.8157894,0.315788 3.055263,0.315788 H 20.68421 c 1.239474,0 2.242106,-0.07894 3.055264,-0.323684 0.757894,-0.228946 1.31842,-0.56842 1.776316,-0.923684 0.805262,-0.615788 1.373684,-1.5 1.61842,-2.123684 0.497368,-1.255262 0.497368,-2.68421 0.497368,-3.58421 V 9.3078948 c 0,-0.9 -0.0078,-2.3210526 -0.497368,-3.5842106 z M 7.3736842,19.736842 H 6.4342106 V 14.123684 H 7.3736842 Z M 6.9078948,13.176316 c -0.3157896,0 -0.5842106,-0.260527 -0.5842106,-0.584211 0,-0.323684 0.2605264,-0.58421 0.5842106,-0.58421 0.3236842,0 0.5921052,0.260526 0.5921052,0.58421 -0.0079,0.323684 -0.268421,0.584211 -0.5921052,0.584211 z m 5.6447372,6.702631 c -2.478948,0 -4.0421056,-1.768421 -4.0421056,-4.586842 0,-2.818421 1.5631576,-4.594737 4.0421056,-4.594737 2.478947,0 4.042105,1.776316 4.042105,4.594737 0,2.818421 -1.563158,4.586842 -4.042105,4.586842 z m 8.178946,0 c -1.863157,0 -3.173683,-1.026315 -3.260525,-2.557894 h 0.844736 c 0.09474,1.065789 1.097369,1.792105 2.494737,1.792105 1.33421,0 2.289474,-0.726316 2.289474,-1.728947 0,-0.828948 -0.576316,-1.326316 -1.894736,-1.657895 L 20.1,15.442105 c -1.65,-0.418421 -2.384211,-1.113158 -2.384211,-2.289473 0,-1.436843 1.294737,-2.463158 3.047369,-2.463158 1.736842,0 3,1.026315 3.055264,2.439473 h -0.844738 c -0.07894,-1.002631 -0.971052,-1.673684 -2.23421,-1.673684 -1.231579,0 -2.147369,0.686842 -2.147369,1.66579 0,0.765789 0.552632,1.215789 1.863159,1.547368 l 0.963158,0.244737 c 1.792104,0.45 2.542104,1.136842 2.542104,2.376316 0,1.563158 -1.255262,2.589473 -3.228948,2.589473 z m -4.997367,-4.586842 c 0,2.328948 -1.231579,3.805263 -3.181579,3.805263 -1.95,0 -3.1736846,-1.476315 -3.1736846,-3.805263 0,-2.336842 1.2236846,-3.813158 3.1736846,-3.813158 1.95,0 3.181579,1.476316 3.181579,3.813158 z"
/>
</svg>
);
export const IOSIcon = (props: Partial<CustomIconComponentProps>) => (
<Icon component={SvgIcon} {...props} />
);

62
src/components/popups/addpeer/addpeer/IOSTab.tsx Normal file
View File

@@ -0,0 +1,62 @@
import React, {useState} from 'react';
import {Button, Image, Typography} from "antd";
import TabSteps from "./TabSteps";
import { StepCommand } from "./types"
import applestore from '../../../../assets/app-store-badge.png';
import {getConfig} from "../../../../config";
const { grpcApiOrigin } = getConfig();
const {Text} = Typography;
export const IOSTab = () => {
const [steps, setSteps] = useState([
{
key: 1,
title: 'Download and install the application from App Store:',
commands: (
<a data-testid="download-android-button" href="https://apps.apple.com/app/netbird-p2p-vpn/id6469329339" target="_blank">
<Image width="12em" preview={false} style={{marginTop: "5px"}} src={applestore}/>
</a>
),
copied: false
} as StepCommand,
... grpcApiOrigin ? [{
key: 2,
title: 'Click on "Change Server" and enter the following "Server"',
commands: grpcApiOrigin,
commandsForCopy: grpcApiOrigin,
copied: false,
showCopyButton: false
}] : [],
{
key: 2 + (grpcApiOrigin ? 1 : 0),
title: 'Click on the "Connect" button in the middle of the screen',
commands: '',
copied: false,
showCopyButton: false
},
{
key: 3 + (grpcApiOrigin ? 1 : 0),
title: 'Sign up using your email address',
commands: '',
copied: false,
showCopyButton: false
}
])
return (
<div style={{marginTop: 10}}>
<Text style={{fontWeight: "bold"}}>
Install on Android
</Text>
<div style={{marginTop: 5}}>
<TabSteps stepsItems={steps}/>
</div>
</div>
)
}
export default IOSTab