Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve scigateway mobile support #1281

Merged
merged 7 commits into from
Jul 28, 2023
Merged

Improve scigateway mobile support #1281

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
63b2881
Update drawer interaction on mobile
kennethnym Jun 15, 2023
a932152
Update app bar behavior on mobile
kennethnym Jun 15, 2023
1740991
Update app bar tests for interactions on mobile
kennethnym Jun 15, 2023
8ee9649
Fix home page layout on mobile
kennethnym Jun 15, 2023
8c1cc3d
Update test snapshots
kennethnym Jun 15, 2023
29c4286
Make home page cards take up full width on mobile
kennethnym Jul 7, 2023
6380a48
Update test snapshots
kennethnym Jul 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions public/res/default.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@
"admin-page": "Admin page",
"help-page": "Help page",
"open-browser-settings": "Open browser settings",
"home-page": "Home page"
"home-page": "Home page",
"tutorial": "Tutorial",
"open-mobile-menu": "More options"
},
"login": {
"title": "Sign in",
Expand Down Expand Up @@ -139,9 +141,7 @@
"accessibility-page": {
"title": "Accessibility statement for DataGateway",
"domains-list-text": "This accessibility statement applies to all facilities using DataGateway. This includes:",
"domains-list": [
"https://data.isis.stfc.ac.uk "
],
"domains-list": ["https://data.isis.stfc.ac.uk "],
"website-developed-by": "These sites are maintained by the Data Software and Engineering Group, in the Scientific Computing Department. ",
"how-accessible-this-website-is": "How Accessible This Website Is ",
"how-accessible-this-website-is-text": "We want as many people as possible to be able to use this website. For example, that means you should be able to: ",
Expand Down Expand Up @@ -198,4 +198,4 @@
"preparation-of-this-accessibility-statement": "Preparation of this accessibility statement ",
"preparation-of-this-accessibility-statement-text": "This statement was prepared on the <2>14th of February 2022</2>. It was last reviewed on the <5>11th of March 2022</5>. This website was last tested on <9>30th of November 2021</9>. The test was carried out by the <12>Data & Software Engineering Group</12>."
}
}
}
10 changes: 10 additions & 0 deletions src/App.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,17 @@ import { act, fireEvent, render, screen } from '@testing-library/react';
import { flushPromises } from './setupTests';
import axios from 'axios';
import { RegisterRouteType } from './state/scigateway.types';
import { useMediaQuery } from '@mui/material';

jest.mock('./state/actions/loadMicroFrontends', () => ({
init: jest.fn(() => Promise.resolve()),
singleSpaPluginRoutes: ['/plugin1'],
}));
jest.mock('@mui/material', () => ({
__esmodule: true,
...jest.requireActual('@mui/material'),
useMediaQuery: jest.fn(),
}));

const testToken =
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InRlc3QifQ.hNQI_r8BATy1LyXPr6Zuo9X_V0kSED8ngcqQ6G-WV5w';
Expand All @@ -20,6 +26,10 @@ window.localStorage.__proto__.getItem = jest.fn().mockImplementation((name) => {
});

describe('App', () => {
beforeEach(() => {
jest.mocked(useMediaQuery).mockReturnValue(true);
});

afterEach(() => {
jest.useRealTimers();
});
Expand Down
176 changes: 24 additions & 152 deletions src/__snapshots__/pageContainer.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ exports[`PageContainer - Tests renders correctly 1`] = `
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorTransparent MuiAppBar-positionStatic css-1p9tt43-MuiPaper-root-MuiAppBar-root"
>
<div
class="MuiToolbar-root MuiToolbar-regular css-qcjnfz-MuiToolbar-root"
class="MuiToolbar-root MuiToolbar-regular css-iv6ml1-MuiToolbar-root"
>
<button
aria-label="open-navigation-menu"
Expand Down Expand Up @@ -84,110 +84,52 @@ exports[`PageContainer - Tests renders correctly 1`] = `
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
<button
aria-label="help-page"
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium tour-help css-19myg6g-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
<p
class="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-1vvwrqo-MuiTypography-root"
>
help
</p>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
<div
style="flex-grow: 1;"
/>
<button
aria-label="help"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-19c6lcd-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
<div
class="tour-user-profile"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
data-testid="HelpOutlineIcon"
focusable="false"
viewBox="0 0 24 24"
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1yxmrfv-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
<path
d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"
<p
class="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-1vvwrqo-MuiTypography-root"
>
login-button
</p>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</button>
</div>
<button
aria-haspopup="true"
aria-label="open-browser-settings"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge tour-settings css-19c6lcd-MuiButtonBase-root-MuiIconButton-root"
aria-label="open-mobile-menu"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-19c6lcd-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
data-testid="SettingsIcon"
data-testid="MoreVertIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"
d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
<div
class="tour-user-profile"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1yxmrfv-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
<p
class="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-1vvwrqo-MuiTypography-root"
>
login-button
</p>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
</div>
</header>
</div>
<div
class="MuiDrawer-root MuiDrawer-docked css-ak80xd-MuiDrawer-docked"
>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiDrawer-paper MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft css-8bwi45-MuiPaper-root-MuiDrawer-paper"
style="visibility: hidden; webkit-transform: translateX(-0px); transform: translateX(-0px);"
>
<div
class="MuiBox-root css-1pvs5pb"
>
<div
class="MuiBox-root css-8xl60i"
>
<img
alt="alternative-text"
class="css-1taxr2z"
src="stfc-logo-blue-text.png"
/>
</div>
</div>
</div>
</div>
<div
class="react-joyride"
/>
Expand All @@ -207,7 +149,7 @@ exports[`PageContainer - Tests renders correctly 1`] = `
class="MuiBox-root css-h95k7f"
>
<h2
class="MuiTypography-root MuiTypography-h2 css-1c7qyh0-MuiTypography-root"
class="MuiTypography-root MuiTypography-h2 css-1qicgzl-MuiTypography-root"
>
<strong>
Data discovery
Expand All @@ -218,7 +160,7 @@ exports[`PageContainer - Tests renders correctly 1`] = `
</strong>
</h2>
<h2
class="MuiTypography-root MuiTypography-h2 css-1c7qyh0-MuiTypography-root"
class="MuiTypography-root MuiTypography-h2 css-1qicgzl-MuiTypography-root"
>
for
<strong>
Expand All @@ -230,7 +172,7 @@ exports[`PageContainer - Tests renders correctly 1`] = `
</div>
</div>
<div
class="MuiBox-root css-12vlygr"
class="MuiBox-root css-1qrn4l7"
>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-cswzw8-MuiPaper-root"
Expand All @@ -240,7 +182,7 @@ exports[`PageContainer - Tests renders correctly 1`] = `
style="height: 100%;"
>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 css-1osj8n2-MuiGrid-root"
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-1fyyp8j-MuiGrid-root"
>
<div
class="MuiBox-root css-1onku40"
Expand Down Expand Up @@ -280,17 +222,6 @@ exports[`PageContainer - Tests renders correctly 1`] = `
</div>
</div>
</div>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 css-1osj8n2-MuiGrid-root"
>
<div
style="background-image: url(facility.jpg); background-repeat: no-repeat; background-position: bottom right; background-size: cover; width: 100%; height: 100%; border-radius: 4px;"
>
<div
class="css-1g012h9"
/>
</div>
</div>
</div>
</div>
<div
Expand Down Expand Up @@ -445,65 +376,6 @@ exports[`PageContainer - Tests renders correctly 1`] = `
</div>
</div>
</div>
<div
class="css-1co1cbj"
>
<div
style="text-align: left; font-weight: bold; font-size: 14px; text-indent: 16px; display: inline-block;"
>
<a
class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-1szgdkc-MuiTypography-root-MuiLink-root"
href="footer.links.facility"
>
Facility Home
</a>
|
<a
class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-1szgdkc-MuiTypography-root-MuiLink-root"
href="footer.links.privacy-statement"
>
Privacy statement
</a>
|
<a
class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-1szgdkc-MuiTypography-root-MuiLink-root"
href="footer.links.data-policy"
>
Data policy
</a>
|
<a
class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-1szgdkc-MuiTypography-root-MuiLink-root"
href="/accessibility"
>
Accessibilty statement
</a>
|
<a
class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-1szgdkc-MuiTypography-root-MuiLink-root"
href="footer.links.contact"
>
Contact
</a>
</div>
<div
style="text-align: right; font-size: 14px; right: 0px; padding-right: 16px; margin-left: auto;"
>
Built by the
<a
class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-1szgdkc-MuiTypography-root-MuiLink-root"
href="https://www.scd.stfc.ac.uk/Pages/home.aspx"
>
Scientific Computing
</a>
<a
class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-1szgdkc-MuiTypography-root-MuiLink-root"
href="https://www.scd.stfc.ac.uk/Pages/Software-Engineering-Group.aspx"
>
Data and Software Engineering Group
</a>
</div>
</div>
</div>
</DocumentFragment>
`;
6 changes: 6 additions & 0 deletions src/authentication/testAuthProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,3 +73,9 @@ export default class TestAuthProvider implements AuthProvider {
return Promise.resolve('test');
}
}

export class NonAdminTestAuthProvider extends TestAuthProvider {
isAdmin(): boolean {
return false;
}
}
19 changes: 4 additions & 15 deletions src/homePage/__snapshots__/homePage.component.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ exports[`Home page component homepage renders correctly 1`] = `
class="MuiBox-root css-h95k7f"
>
<h2
class="MuiTypography-root MuiTypography-h2 css-1c7qyh0-MuiTypography-root"
class="MuiTypography-root MuiTypography-h2 css-1qicgzl-MuiTypography-root"
>
<strong>
Data discovery
Expand All @@ -26,7 +26,7 @@ exports[`Home page component homepage renders correctly 1`] = `
</strong>
</h2>
<h2
class="MuiTypography-root MuiTypography-h2 css-1c7qyh0-MuiTypography-root"
class="MuiTypography-root MuiTypography-h2 css-1qicgzl-MuiTypography-root"
>
for
<strong>
Expand All @@ -38,7 +38,7 @@ exports[`Home page component homepage renders correctly 1`] = `
</div>
</div>
<div
class="MuiBox-root css-12vlygr"
class="MuiBox-root css-1qrn4l7"
>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-cswzw8-MuiPaper-root"
Expand All @@ -48,7 +48,7 @@ exports[`Home page component homepage renders correctly 1`] = `
style="height: 100%;"
>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 css-1osj8n2-MuiGrid-root"
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-1fyyp8j-MuiGrid-root"
>
<div
class="MuiBox-root css-1onku40"
Expand Down Expand Up @@ -88,17 +88,6 @@ exports[`Home page component homepage renders correctly 1`] = `
</div>
</div>
</div>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 css-1osj8n2-MuiGrid-root"
>
<div
style="background-image: url(facility.jpg); background-repeat: no-repeat; background-position: bottom right; background-size: cover; width: 100%; height: 100%; border-radius: 4px;"
>
<div
class="css-1g012h9"
/>
</div>
</div>
</div>
</div>
<div
Expand Down
6 changes: 6 additions & 0 deletions src/homePage/homePage.component.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,12 @@ import { ThemeProvider } from '@mui/material';
import { buildTheme } from '../theming';
import { MemoryRouter } from 'react-router-dom';

jest.mock('@mui/material', () => ({
__esmodule: true,
...jest.requireActual('@mui/material'),
useMediaQuery: jest.fn(() => true),
}));

describe('Home page component', () => {
it('homepage renders correctly', () => {
const { asFragment } = render(
Expand Down
Loading