Merge branch 'react-18-#1205' into migrate-to-vite-#1379

ral-facilities · Jun 4, 2024 · d881122 · d881122
2 parents 4276cfd + 431ceef
commit d881122
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 42 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,7 +1,7 @@
 # Dockerfile to build and serve scigateway
 
 # Build stage
-FROM node:20.11.1-alpine3.19@sha256:bf77dc26e48ea95fca9d1aceb5acfa69d2e546b765ec2abfb502975f1a2d4def as builder
+FROM node:20.14.0-alpine3.20@sha256:928b24aaadbd47c1a7722c563b471195ce54788bf8230ce807e1dd500aec0549 as builder
 
 WORKDIR /scigateway-build
 
@@ -24,7 +24,7 @@ COPY docker/settings.json public/settings.json
 RUN yarn build
 
 # Run stage
-FROM httpd:2.4.58-alpine3.19@sha256:92535cf7f151901ba91b04186292c3bd5bf82aa6ffa6eb7bc405fefbffedd480
+FROM httpd:2.4.59-alpine3.20@sha256:554f25b8496f360a58febaaa5df9effb8e037cc1b70b27d40b7353a85e8edbf0
 
 WORKDIR /usr/local/apache2/htdocs
 

diff --git a/package.json b/package.json
@@ -95,7 +95,7 @@
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.5.2",
     "@types/jsonwebtoken": "9.0.1",
-    "@types/node": "20.11.5",
+    "@types/node": "20.14.0",
     "@types/react": "18.0.33",
     "@types/react-redux": "7.1.20",
     "@types/react-router": "5.1.20",

diff --git a/public/res/default.json b/public/res/default.json
@@ -145,16 +145,16 @@
     "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: ",
-    "accessibile-parts-of-datagateway-list": [
+    "accessible-parts-of-list": [
       "listen to most of the website using a screen reader",
       "clearly see all components and text as the contrast has been checked against different types of colour-blindness in normal or high contrast modes (which includes protanopia, protanomaly, deuteranopia, deuteranomaly, tritanopia, tritanomaly, achromatopsia and achromatomaly) ",
       "navigate most of the website using just a keyboard  ",
       "zoom in up to 300% without the text spilling off the screen "
     ],
     "advice-on-how-to-make-device-more-accessible": "<0>AbilityNet</0> has advice on making your device easier to use if you have a disability.",
     "advice-on-how-to-make-device-more-accessible-link": "https://mcmw.abilitynet.org.uk/",
-    "non-accessibile-parts-of-datagateway-text": "We know some parts of this website are not fully accessible:",
-    "non-accessibile-parts-of-datagateway-list": [
+    "non-accessible-parts-of-text": "We know some parts of this website are not fully accessible:",
+    "non-accessible-parts-of-list": [
       "the columns on table view cannot be resized using the keyboard",
       "pages sometimes have unreadable ARIA labels",
       "table view has aria-hidden elements that contain focusable elements and elements in the table with an ARIA role that require a parent are not contained by them ",

diff --git a/src/accessibilityPage/__snapshots__/accessibilityPage.component.test.tsx.snap b/src/accessibilityPage/__snapshots__/accessibilityPage.component.test.tsx.snap
@@ -62,10 +62,10 @@ exports[`Accessibility page component > should render correctly and display cont
         class="MuiTypography-root MuiTypography-body1 css-158lj4w-MuiTypography-root"
       >
         <li>
-          accessibility-page.accessibile-parts-of-datagateway-list0
+          accessibility-page.accessible-parts-of-list0
         </li>
         <li>
-          accessibility-page.accessibile-parts-of-datagateway-list1
+          accessibility-page.accessible-parts-of-list1
         </li>
       </ul>
     </div>
@@ -86,16 +86,16 @@ exports[`Accessibility page component > should render correctly and display cont
       <p
         class="MuiTypography-root MuiTypography-body1 css-158lj4w-MuiTypography-root"
       >
-        accessibility-page.non-accessibile-parts-of-datagateway-text
+        accessibility-page.non-accessible-parts-of-text
       </p>
       <ul
         class="MuiTypography-root MuiTypography-body1 css-158lj4w-MuiTypography-root"
       >
         <li>
-          accessibility-page.non-accessibile-parts-of-datagateway-list0
+          accessibility-page.accessible-parts-of-list0
         </li>
         <li>
-          accessibility-page.non-accessibile-parts-of-datagateway-list1
+          accessibility-page.accessible-parts-of-list1
         </li>
       </ul>
     </div>

diff --git a/src/accessibilityPage/accessibilityPage.component.tsx b/src/accessibilityPage/accessibilityPage.component.tsx
@@ -41,41 +41,41 @@ const DescriptionTypography = styled(Typography)<{
   color: theme.palette.text.primary,
 }));
 
-const AccessibiiltyPage = (): React.ReactElement => {
+const AccessibilityPage = (): React.ReactElement => {
   const [t] = useTranslation();
 
-  let datagatewayDomains: string[] = t('accessibility-page.domains-list', {
+  let domains: string[] = t('accessibility-page.domains-list', {
     returnObjects: true,
   });
-  let datagatewayAccessibileParts: string[] = t(
-    'accessibility-page.accessibile-parts-of-datagateway-list',
+  let accessibleParts: string[] = t(
+    'accessibility-page.accessible-parts-of-list',
     {
       returnObjects: true,
     }
   );
 
-  let datagatewayNonAccessibileParts: string[] = t(
-    'accessibility-page.non-accessibile-parts-of-datagateway-list',
+  let nonAccessibleParts: string[] = t(
+    'accessibility-page.non-accessible-parts-of-list',
     {
       returnObjects: true,
     }
   );
 
-  let datagatewayNonCompliance: string[] = t(
+  let nonCompliance: string[] = t(
     'accessibility-page.non-compliance-with-the-accessibility-regulations-list',
     {
       returnObjects: true,
     }
   );
 
-  let datagatewayDisproportionateBurdenTable: string[] = t(
+  let disproportionateBurdenTable: string[] = t(
     'accessibility-page.disproportionate-burden.table-view-list',
     {
       returnObjects: true,
     }
   );
 
-  let datagatewayDisproportionateBurdenCard: string[] = t(
+  let disproportionateBurdenCard: string[] = t(
     'accessibility-page.disproportionate-burden.card-view-list',
     {
       returnObjects: true,
@@ -87,17 +87,14 @@ const AccessibiiltyPage = (): React.ReactElement => {
   //When testing can't easily mock i18next data, but **.map will fail if
   //given a string, so replace the formats here
 
-  if (!Array.isArray(datagatewayDomains)) datagatewayDomains = listPlaceholder;
-  if (!Array.isArray(datagatewayAccessibileParts))
-    datagatewayAccessibileParts = listPlaceholder;
-  if (!Array.isArray(datagatewayNonAccessibileParts))
-    datagatewayNonAccessibileParts = listPlaceholder;
-  if (!Array.isArray(datagatewayNonCompliance))
-    datagatewayNonCompliance = listPlaceholder;
-  if (!Array.isArray(datagatewayDisproportionateBurdenTable))
-    datagatewayDisproportionateBurdenTable = listPlaceholder;
-  if (!Array.isArray(datagatewayDisproportionateBurdenCard))
-    datagatewayDisproportionateBurdenCard = listPlaceholder;
+  if (!Array.isArray(domains)) domains = listPlaceholder;
+  if (!Array.isArray(accessibleParts)) accessibleParts = listPlaceholder;
+  if (!Array.isArray(nonAccessibleParts)) nonAccessibleParts = listPlaceholder;
+  if (!Array.isArray(nonCompliance)) nonCompliance = listPlaceholder;
+  if (!Array.isArray(disproportionateBurdenTable))
+    disproportionateBurdenTable = listPlaceholder;
+  if (!Array.isArray(disproportionateBurdenCard))
+    disproportionateBurdenCard = listPlaceholder;
 
   return (
     <RootDiv id="accessibility-page">
@@ -111,7 +108,7 @@ const AccessibiiltyPage = (): React.ReactElement => {
         </DescriptionTypography>
 
         <DescriptionTypography component="ul">
-          {datagatewayDomains.map((item) => (
+          {domains.map((item) => (
             <li key={item}>
               <Link href={item}>{item}</Link>
             </li>
@@ -132,7 +129,7 @@ const AccessibiiltyPage = (): React.ReactElement => {
           {t('accessibility-page.how-accessible-this-website-is-text')}
         </DescriptionTypography>
         <DescriptionTypography component="ul">
-          {datagatewayAccessibileParts.map((item) => (
+          {accessibleParts.map((item) => (
             <li key={item}>{item}</li>
           ))}
         </DescriptionTypography>
@@ -157,11 +154,11 @@ const AccessibiiltyPage = (): React.ReactElement => {
 
       <ContainerDiv>
         <DescriptionTypography>
-          {t('accessibility-page.non-accessibile-parts-of-datagateway-text')}
+          {t('accessibility-page.non-accessible-parts-of-text')}
         </DescriptionTypography>
 
         <DescriptionTypography component="ul">
-          {datagatewayNonAccessibileParts.map((item) => (
+          {accessibleParts.map((item) => (
             <li key={item}>{item}</li>
           ))}
         </DescriptionTypography>
@@ -243,7 +240,7 @@ const AccessibiiltyPage = (): React.ReactElement => {
 
       <ContainerDiv>
         <DescriptionTypography component="ul">
-          {datagatewayNonCompliance.map((item) => (
+          {nonCompliance.map((item) => (
             <li key={item}>{item}</li>
           ))}
         </DescriptionTypography>
@@ -264,7 +261,7 @@ const AccessibiiltyPage = (): React.ReactElement => {
       </TitleTypography>
       <ContainerDiv>
         <DescriptionTypography component="ul">
-          {datagatewayDisproportionateBurdenTable.map((item) => (
+          {disproportionateBurdenTable.map((item) => (
             <li key={item}>{item}</li>
           ))}
         </DescriptionTypography>
@@ -275,7 +272,7 @@ const AccessibiiltyPage = (): React.ReactElement => {
       </TitleTypography>
       <ContainerDiv>
         <DescriptionTypography component="ul">
-          {datagatewayDisproportionateBurdenCard.map((item) => (
+          {disproportionateBurdenCard.map((item) => (
             <li key={item}>{item}</li>
           ))}
         </DescriptionTypography>
@@ -319,4 +316,4 @@ const AccessibiiltyPage = (): React.ReactElement => {
   );
 };
 
-export default AccessibiiltyPage;
+export default AccessibilityPage;
diff --git a/src/theming.tsx b/src/theming.tsx
@@ -72,7 +72,7 @@ interface ThemeColours {
 
   /* Lighter colours */
   lightBlue: string; //Used for lighter coloured buttons
-  lightOrange: string; //Used for notifcation icon
+  lightOrange: string; //Used for notification icon
 
   /* Darker colours */
   darkGreen: string; //Used for cookie consent message
@@ -479,6 +479,9 @@ export const buildTheme = (
       secondary: {
         main: colours.secondary,
       },
+      error: {
+        main: colours.red,
+      },
       text: {
         secondary: colours.textSecondary,
       },

diff --git a/yarn.lock b/yarn.lock
@@ -1598,7 +1598,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:*, @types/node@npm:20.11.5":
+"@types/node@npm:*":
   version: 20.11.5
   resolution: "@types/node@npm:20.11.5"
   dependencies:
@@ -1607,6 +1607,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:20.14.0":
+  version: 20.14.0
+  resolution: "@types/node@npm:20.14.0"
+  dependencies:
+    undici-types: "npm:~5.26.4"
+  checksum: 10/49b332fbf8aee4dc4f61cc1f1f6e130632510f795dd7b274e55894516feaf4bec8a3d13ea764e2443e340a64ce9bbeb006d14513bf6ccdd4f21161eccc7f311e
+  languageName: node
+  linkType: hard
+
 "@types/parse-json@npm:^4.0.0":
   version: 4.0.0
   resolution: "@types/parse-json@npm:4.0.0"
@@ -8326,7 +8335,7 @@ __metadata:
     "@types/jest": "npm:29.5.2"
     "@types/js-cookie": "npm:3.0.1"
     "@types/jsonwebtoken": "npm:9.0.1"
-    "@types/node": "npm:20.11.5"
+    "@types/node": "npm:20.14.0"
     "@types/react": "npm:18.0.33"
     "@types/react-dom": "npm:18.0.11"
     "@types/react-redux": "npm:7.1.20"