Added popup on small devices (#2501)

verification/curator-service/ui/cypress/integration/components/AppTest.spec.ts

@@ -371,8 +371,23 @@ describe('App', function () {
         cy.visit('/cases');
         cy.contains('Line list');
 
+        cy.get('#popup-small-screens').should('not.exist');
+
         cy.get('a[data-testid="home-button-data"')
             .should('have.attr', 'href')
             .and('equal', '/');
     });
+
+    it('Displays popup on small devices', () => {
+        cy.viewport(520, 780);
+        cy.login();
+        cy.visit('/cases');
+
+        cy.get('#popup-small-screens').contains(
+            'For a better experience please visit this website using a device with a larger screen',
+        );
+
+        cy.get('#small-screens-popup-close-btn').click();
+        cy.get('#popup-small-screens').should('not.exist');
+    });
 });

verification/curator-service/ui/cypress/integration/components/UploadsTableTest.spec.ts

@@ -59,7 +59,7 @@ describe('Uploads table', function () {
         cy.contains('2020-01-04');
     });
 
-    it.only('can navigate to filtered linelist', function () {
+    it('can navigate to filtered linelist', function () {
         cy.task('clearCasesDB', {});
 
         cy.addCase({

verification/curator-service/ui/src/components/App/App.tsx

@@ -65,6 +65,7 @@ import { selectIsLoading } from '../../redux/app/selectors';
 import { getUserProfile, logout } from '../../redux/auth/thunk';
 import { selectUser } from '../../redux/auth/selectors';
 import { User } from '../../api/models/User';
+import PopupSmallScreens from '../PopupSmallScreens';
 
 // to use our custom theme values in typescript we need to define an extension to the ThemeOptions type.
 declare module '@material-ui/core/styles' {
@@ -325,6 +326,7 @@ function ProfileMenu(props: { user: User }): JSX.Element {
 
     return (
         <div>
+            <PopupSmallScreens />
             <IconButton
                 aria-controls="profile-menu"
                 data-testid="profile-menu"

verification/curator-service/ui/src/components/PopupSmallScreens.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from 'react';
+import CloseIcon from '@material-ui/icons/Close';
+import {
+    createStyles,
+    useTheme,
+    useMediaQuery,
+    Dialog,
+    DialogTitle,
+    IconButton,
+    DialogContent,
+    Theme,
+    Typography,
+    withStyles,
+    WithStyles,
+} from '@material-ui/core';
+
+type Props = WithStyles<typeof styles> & {
+    rootComponentRef: React.RefObject<HTMLDivElement>;
+    triggerComponentRef: React.RefObject<HTMLButtonElement>;
+    isOpen: boolean;
+    onToggle: () => void;
+};
+
+const styles = (theme: Theme) =>
+    createStyles({
+        dialogContainer: {
+            height: '40%',
+        },
+        dialogTitle: {
+            display: 'flex',
+        },
+        closeButton: {
+            position: 'absolute',
+            right: 8,
+            top: 8,
+        },
+    });
+
+const PopupSmallScreens = ({ classes }: Props) => {
+    const theme = useTheme();
+    const [dialogOpen, setDialogOpen] = useState(false);
+
+    /**
+    @name matches - value of the current browser window in pixels
+     **/
+
+    const matches = useMediaQuery(theme.breakpoints.down('md'));
+
+    useEffect(() => {
+        setDialogOpen(matches);
+    }, [matches]);
+
+    const handleClose = () => {
+        setDialogOpen(false);
+    };
+
+    return (
+        <Dialog
+            open={dialogOpen}
+            onClose={handleClose}
+            className={classes.dialogContainer}
+            id="popup-small-screens"
+        >
+            <DialogTitle className={classes.dialogTitle}>
+                Important
+                <IconButton
+                    aria-label="close"
+                    onClick={handleClose}
+                    className={classes.closeButton}
+                    id="small-screens-popup-close-btn"
+                >
+                    <CloseIcon />
+                </IconButton>
+            </DialogTitle>
+            <DialogContent dividers>
+                <Typography gutterBottom>
+                    For a better experience please visit this website using a
+                    device with a larger screen
+                </Typography>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export default withStyles(styles, { withTheme: true })(PopupSmallScreens);