diff --git a/package.json b/package.json index 46d3cc39e0..78b76592ac 100644 --- a/package.json +++ b/package.json @@ -117,6 +117,7 @@ "react-draggable": "^4.4.5", "react-emoji-render": "^1.2.4", "react-modal": "^3.15.1", + "react-qr-code": "^2.0.8", "react-responsive": "^8.1.0", "react-router-dom": "^5.2.0", "react-sortable-hoc": "^1.11.0", diff --git a/src/assets/img/brand/apple-logo.svg b/src/assets/img/brand/apple-logo.svg new file mode 100644 index 0000000000..acfaa37e17 --- /dev/null +++ b/src/assets/img/brand/apple-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/brand/play-store-logo.svg b/src/assets/img/brand/play-store-logo.svg new file mode 100644 index 0000000000..e4e5150d58 --- /dev/null +++ b/src/assets/img/brand/play-store-logo.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/components/GBlock/Block.module.css b/src/components/GBlock/Block.module.scss similarity index 61% rename from src/components/GBlock/Block.module.css rename to src/components/GBlock/Block.module.scss index 49f4ed2d09..b83e6c794a 100644 --- a/src/components/GBlock/Block.module.css +++ b/src/components/GBlock/Block.module.scss @@ -1,6 +1,18 @@ .root { padding: 16px; border-radius: 2px; + + &--withBackGround { + background: var(--secondary-background); + } + + &--fullWidth { + width: 100%; + } + + &--hover:hover { + background: var(--hover-selected); + } } :global(.theme-dark) .root_bordered { @@ -14,7 +26,3 @@ :global(.theme-dark) .root_shadowed { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); } - -.root_with-background { - background: var(--secondary-background); -} diff --git a/src/components/GBlock/Block.tsx b/src/components/GBlock/Block.tsx index 16fd72607c..f3a4dc0ec7 100644 --- a/src/components/GBlock/Block.tsx +++ b/src/components/GBlock/Block.tsx @@ -2,25 +2,39 @@ import React, { FC, HTMLAttributes } from 'react'; import cn from 'classnames/bind'; -import styles from './Block.module.css'; +import styles from './Block.module.scss'; interface BlockProps extends HTMLAttributes { bordered?: boolean; shadowed?: boolean; withBackground?: boolean; + hover?: boolean; + fullWidth?: boolean; } const cx = cn.bind(styles); const Block: FC = (props) => { - const { children, style, className, bordered = false, shadowed = false, withBackground = false, ...rest } = props; + const { + children, + style, + className, + bordered = false, + fullWidth = false, + hover = false, + shadowed = false, + withBackground = false, + ...rest + } = props; return (
>; + +const mockUseStore = (rest?: any, connected = false) => { + const store = { + userStore: { + currentUser: { + messaging_backends: { + MOBILE_APP: { connected }, + }, + } as unknown as User, + ...(rest ? rest : {}), + } as unknown as UserStore, + } as unknown as RootStore; + + useStore.mockReturnValue(store); + + return store; +}; + +const USER_PK = '8585'; +const BACKEND = 'MOBILE_APP'; + +describe('MobileAppVerification', () => { + test('it shows a loading message if it is currently fetching the QR code', async () => { + const { userStore } = mockUseStore({ + sendBackendConfirmationCode: jest.fn().mockResolvedValueOnce('dfd'), + }); + + const component = render(); + expect(component.container).toMatchSnapshot(); + + expect(userStore.sendBackendConfirmationCode).toHaveBeenCalledTimes(1); + expect(userStore.sendBackendConfirmationCode).toHaveBeenCalledWith(USER_PK, BACKEND); + }); + + test('it shows a message when the mobile app is already connected', async () => { + const { userStore } = mockUseStore( + { + sendBackendConfirmationCode: jest.fn().mockResolvedValueOnce('dfd'), + }, + true + ); + + const component = render(); + expect(component.container).toMatchSnapshot(); + + expect(userStore.sendBackendConfirmationCode).toHaveBeenCalledTimes(0); + }); + + test('it shows an error message if there was an error fetching the QR code', async () => { + const { userStore } = mockUseStore({ + sendBackendConfirmationCode: jest.fn().mockRejectedValueOnce('dfd'), + }); + + const component = render(); + await screen.findByText(/.*error fetching your QR code.*/); + + expect(component.container).toMatchSnapshot(); + + expect(userStore.sendBackendConfirmationCode).toHaveBeenCalledTimes(1); + expect(userStore.sendBackendConfirmationCode).toHaveBeenCalledWith(USER_PK, BACKEND); + }); + + test("it shows a QR code if the app isn't already connected", async () => { + const { userStore } = mockUseStore({ + sendBackendConfirmationCode: jest.fn().mockResolvedValueOnce('dfd'), + }); + + const component = render(); + await screen.findByText(/.*the QR code is only valid for one minute.*/); + + expect(component.container).toMatchSnapshot(); + + expect(userStore.sendBackendConfirmationCode).toHaveBeenCalledTimes(1); + expect(userStore.sendBackendConfirmationCode).toHaveBeenCalledWith(USER_PK, BACKEND); + }); + + test('if we disconnect the app, it disconnects and fetches a new QR code', async () => { + const { userStore } = mockUseStore( + { + sendBackendConfirmationCode: jest.fn().mockResolvedValueOnce('dfd'), + unlinkBackend: jest.fn().mockResolvedValueOnce('asdfadsfafds'), + }, + true + ); + + const component = render(); + + const user = userEvent.setup(); + const button = await screen.findByRole('button'); + + // click the disconnect button, which opens the modal + await user.click(button); + // click the confirm button within the modal, which actually triggers the callback + await user.click(screen.getByText('Remove')); + + await screen.findByText(/.*the QR code is only valid for one minute.*/); + + expect(component.container).toMatchSnapshot(); + + expect(userStore.sendBackendConfirmationCode).toHaveBeenCalledTimes(1); + expect(userStore.sendBackendConfirmationCode).toHaveBeenCalledWith(USER_PK, BACKEND); + + expect(userStore.unlinkBackend).toHaveBeenCalledTimes(1); + expect(userStore.unlinkBackend).toHaveBeenCalledWith(USER_PK, BACKEND); + }); + + test('it shows a loading message if it is currently disconnecting', async () => { + const { userStore } = mockUseStore( + { + sendBackendConfirmationCode: jest.fn().mockResolvedValueOnce('dfd'), + unlinkBackend: jest.fn().mockResolvedValueOnce('aaa'), + }, + true + ); + + const component = render(); + + const user = userEvent.setup(); + const button = await screen.findByRole('button'); + + // click the disconnect button, which opens the modal + await user.click(button); + // click the confirm button within the modal, which actually triggers the callback + // this is maybe a bit "hacky" but by not awaiting the below promise it allows us to check the loading state.. + user.click(screen.getByText('Remove')); + + // wait for loading state + await screen.findByText(/.*Loading.*/); + + expect(component.container).toMatchSnapshot(); + + expect(userStore.sendBackendConfirmationCode).toHaveBeenCalledTimes(1); + expect(userStore.sendBackendConfirmationCode).toHaveBeenCalledWith(USER_PK, BACKEND); + + expect(userStore.unlinkBackend).toHaveBeenCalledTimes(1); + expect(userStore.unlinkBackend).toHaveBeenCalledWith(USER_PK, BACKEND); + }); + + test('it shows an error message if there was an error disconnecting the mobile app', async () => { + const { userStore } = mockUseStore( + { + sendBackendConfirmationCode: jest.fn().mockResolvedValueOnce('dfd'), + unlinkBackend: jest.fn().mockRejectedValueOnce('asdfadsfafds'), + }, + true + ); + + const component = render(); + + const user = userEvent.setup(); + const button = await screen.findByRole('button'); + + // click the disconnect button, which opens the modal + await user.click(button); + // click the confirm button within the modal, which actually triggers the callback + await user.click(screen.getByText('Remove')); + + await screen.findByText(/.*error disconnecting your mobile app.*/); + + expect(component.container).toMatchSnapshot(); + + expect(userStore.sendBackendConfirmationCode).toHaveBeenCalledTimes(0); + + expect(userStore.unlinkBackend).toHaveBeenCalledTimes(1); + expect(userStore.unlinkBackend).toHaveBeenCalledWith(USER_PK, BACKEND); + }); +}); diff --git a/src/containers/MobileAppVerification/MobileAppVerification.tsx b/src/containers/MobileAppVerification/MobileAppVerification.tsx index 5413c2705a..cdaf5af2ef 100644 --- a/src/containers/MobileAppVerification/MobileAppVerification.tsx +++ b/src/containers/MobileAppVerification/MobileAppVerification.tsx @@ -1,104 +1,107 @@ -import React, { HTMLAttributes, useEffect, useState } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; -import { Button, LoadingPlaceholder } from '@grafana/ui'; -import cn from 'classnames/bind'; +import { HorizontalGroup, LoadingPlaceholder, VerticalGroup } from '@grafana/ui'; import { observer } from 'mobx-react'; +import Block from 'components/GBlock/Block'; import Text from 'components/Text/Text'; -import { WithPermissionControl } from 'containers/WithPermissionControl/WithPermissionControl'; import { User } from 'models/user/user.types'; import { useStore } from 'state/useStore'; -import { UserAction } from 'state/userAction'; -import styles from './MobileAppVerification.module.css'; +import DisconnectButton from './parts/DisconnectButton'; +import DownloadIcons from './parts/DownloadIcons'; +import QRCode from './parts/QRCode'; -const cx = cn.bind(styles); +type Props = { + userPk: User['pk']; +}; -interface MobileAppVerificationProps extends HTMLAttributes { - userPk?: User['pk']; - phone?: string; -} +const BACKEND = 'MOBILE_APP'; -const MobileAppVerification = observer((props: MobileAppVerificationProps) => { - const { userPk: propsUserPk } = props; +const MobileAppVerification = observer(({ userPk }: Props) => { + const { userStore } = useStore(); - const store = useStore(); - const { userStore } = store; + const [mobileAppIsCurrentlyConnected, setMobileAppIsCurrentlyConnected] = useState( + userStore.currentUser.messaging_backends[BACKEND]?.connected === true + ); - const userPk = (propsUserPk || userStore.currentUserPk) as User['pk']; - const user = userStore.items[userPk as User['pk']]; - const isCurrent = userStore.currentUserPk === user.pk; - const action = isCurrent ? UserAction.UpdateOwnSettings : UserAction.UpdateOtherUsersSettings; + const [fetchingQRCode, setFetchingQRCode] = useState(!mobileAppIsCurrentlyConnected); + const [QRCodeValue, setQRCodeValue] = useState(null); + const [errorFetchingQRCode, setErrorFetchingQRCode] = useState(null); - const [showMobileAppVerificationToken, setShowMobileAppVerificationToken] = useState(undefined); - const [isMobileAppVerificationTokenExisting, setIsMobileAppVerificationTokenExisting] = useState(false); - const [MobileAppVerificationTokenLoading, setMobileAppVerificationTokenLoading] = useState(true); + const [disconnectingMobileApp, setDisconnectingMobileApp] = useState(false); + const [errorDisconnectingMobileApp, setErrorDisconnectingMobileApp] = useState(null); - const handleCreateMobileAppVerificationToken = async () => { - setIsMobileAppVerificationTokenExisting(true); - await userStore - .sendBackendConfirmationCode(userPk, 'MOBILE_APP') - .then((res) => setShowMobileAppVerificationToken(res)); - }; + const fetchQRCode = useCallback(async () => { + setFetchingQRCode(true); + try { + // backend verification code that we receive is a JSON object that has been "stringified" + const qrCodeContent = await userStore.sendBackendConfirmationCode(userPk, BACKEND); + setQRCodeValue(qrCodeContent); + } catch (e) { + setErrorFetchingQRCode('There was an error fetching your QR code. Please try again.'); + } + setFetchingQRCode(false); + }, [userPk]); - useEffect(() => { - handleCreateMobileAppVerificationToken().then(() => { - setMobileAppVerificationTokenLoading(false); - }); + const resetState = useCallback(() => { + setErrorDisconnectingMobileApp(null); + setMobileAppIsCurrentlyConnected(false); + setQRCodeValue(null); }, []); + const disconnectMobileApp = useCallback(async () => { + setDisconnectingMobileApp(true); + + try { + await userStore.unlinkBackend(userPk, BACKEND); + resetState(); + } catch (e) { + setErrorDisconnectingMobileApp('There was an error disconnecting your mobile app. Please try again.'); + } + setDisconnectingMobileApp(false); + }, [userPk, resetState]); + + useEffect(() => { + if (!mobileAppIsCurrentlyConnected) { + fetchQRCode(); + } + }, [mobileAppIsCurrentlyConnected]); + + let content: React.ReactNode = null; + + if (fetchingQRCode || disconnectingMobileApp) { + content = ; + } else if (errorFetchingQRCode || errorDisconnectingMobileApp) { + content = {errorFetchingQRCode || errorDisconnectingMobileApp}; + } else if (mobileAppIsCurrentlyConnected) { + content = ( + + Your mobile app is currently connected. Click below to disconnect. + + + ); + } else if (QRCodeValue) { + content = ( + + + + Note: the QR code is only valid for one minute. If you have issues connecting your mobile app, try refreshing + this page to generate a new code. + + + ); + } + return ( -
- {MobileAppVerificationTokenLoading ? ( - - ) : ( - <> -

- Open Grafana OnCall mobile application and enter the following code to add the new device: -

- {isMobileAppVerificationTokenExisting ? ( - <> - {showMobileAppVerificationToken !== undefined ? ( - <> -

{showMobileAppVerificationToken}

-

- * This code is active only for a minute -

-

- - - -

- - ) : ( - <> - )} - - ) : ( -

- - - -

- )} -

- * Only iOS is currently supported -

- - )} -
+ + + {content} + + + + + ); }); diff --git a/src/containers/MobileAppVerification/__snapshots__/MobileAppVerification.test.tsx.snap b/src/containers/MobileAppVerification/__snapshots__/MobileAppVerification.test.tsx.snap new file mode 100644 index 0000000000..bb4670cfe4 --- /dev/null +++ b/src/containers/MobileAppVerification/__snapshots__/MobileAppVerification.test.tsx.snap @@ -0,0 +1,5191 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`MobileAppVerification if we disconnect the app, it disconnects and fetches a new QR code 1`] = ` +
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + Note: the QR code is only valid for one minute. If you have issues connecting your mobile app, try refreshing this page to generate a new code. + +
+
+
+
+
+
+
+
+ + Download + +
+
+ + The Grafana IRM app is available on both the App Store and Google Play Store. + +
+
+
+
+
+ Apple + + iOS + +
+
+
+
+ Play Store + + Android + +
+
+
+
+
+
+
+
+
+`; + +exports[`MobileAppVerification it shows a QR code if the app isn't already connected 1`] = ` +
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + Note: the QR code is only valid for one minute. If you have issues connecting your mobile app, try refreshing this page to generate a new code. + +
+
+
+
+
+
+
+
+ + Download + +
+
+ + The Grafana IRM app is available on both the App Store and Google Play Store. + +
+
+
+
+
+ Apple + + iOS + +
+
+
+
+ Play Store + + Android + +
+
+
+
+
+
+
+
+
+`; + +exports[`MobileAppVerification it shows a loading message if it is currently disconnecting 1`] = ` +
+
+
+
+
+ Loading... + +
+