dex 1197 - rename server status to site status

locale/en.json

@@ -727,7 +727,7 @@
   "LOCATION_DESCRIPTION": "The precise decimal latitude and longitude where the sighting took place.",
   "WEBSITE": "Website",
   "REVIEW_MATCH_CANDIDATES": "Review match candidates",
-  "SERVER_STATUS": "Server Status",
+  "SITE_STATUS_PAGE_TITLE": "Site Status",
   "YOUR_NAME": "Your name",
   "CHOOSE_PHOTO": "Choose photo",
   "EMAIL_ADDRESS": "Email address",
@@ -974,6 +974,8 @@
   "SERVER_TOOLTIP_JOBCOUNTER_LABEL": "Jobcounter:",
   "SERVER_TOOLTIP_STATUS_LABEL": "Status:",
   "SERVER_TOOLTIP_DATE_RECEIVED_LABEL": "Received on:",
+  "SERVER_TOOLTIP_SUMMARY": "Jobcounter: {jobcounter}; Status: {status}; Received on: {dateReceived}",
+  "SERVER_COLOR_LEGEND_BOX": "{color} legend box",
   "PRINTABLE_PHOTOBOOK": "Printable Photobook",
   "NO_IMAGES": "There are no images for this individual.",
   "TASKS": "Tasks",

src/AuthenticatedSwitch.jsx

@@ -6,7 +6,7 @@ import { TransitionGroup } from 'react-transition-group';
 import AuthenticatedAppHeader from './components/AuthenticatedAppHeader';
 import SaveCustomField from './pages/fieldManagement/settings/saveField/SaveField';
 import GeneralSettings from './pages/generalSettings/GeneralSettings';
-import ServerStatus from './pages/serverStatus/ServerStatus';
+import SiteStatus from './pages/siteStatus/SiteStatus';
 import SplashSettings from './pages/splashSettings/SplashSettings';
 import FieldManagement from './pages/fieldManagement/FieldManagement';
 import UserManagement from './pages/userManagement/UserManagement';
@@ -100,7 +100,7 @@ export default function AuthenticatedSwitch({
                         <Splash />
                       </Route>
                       <Route path="/admin/status">
-                        <ServerStatus />
+                        <SiteStatus />
                       </Route>
                       <Route path="/admin/users">
                         <UserManagement />

src/components/SuperText.jsx

@@ -20,7 +20,7 @@ function SuperTextElement({ datum }) {
   const spaces = datum?.spaces || 1;
   if (isSpacer) return repeat(' ', spaces);
 
-  const textProps = omit(datum, ['type']);
+  const textProps = omit(datum, ['type', 'hide']);
   return <Text component="span" {...textProps} />;
 }
 

src/pages/serverStatus/ServerStatus.jsx → src/pages/siteStatus/SiteStatus.jsx

@@ -62,13 +62,13 @@ const categoryData = {
   },
 };
 
-export default function ServerStatus() {
+export default function SiteStatus() {
   const theme = useTheme();
   const isXs = useMediaQuery(theme.breakpoints.only('xs'));
   const { data: siteInfo, loading: siteInfoLoading } =
     useGetSiteInfo();
 
-  useDocumentTitle('SERVER_STATUS');
+  useDocumentTitle('SITE_STATUS_PAGE_TITLE');
 
   const { data, error, isLoading } = useSageJobs();
   const { lastHour, twoWeeks, byStatus } =
@@ -106,9 +106,9 @@ export default function ServerStatus() {
         variant="h3"
         component="h3"
         style={{ padding: '16px 0 16px 16px' }}
-        id="SERVER_STATUS"
+        id="SITE_STATUS_PAGE_TITLE"
       />
-      <SettingsBreadcrumbs currentPageTextId="SERVER_STATUS" />
+      <SettingsBreadcrumbs currentPageTextId="SITE_STATUS_PAGE_TITLE" />
       <div style={{ padding: 16, boxSizing: 'border-box' }}>
         <Text variant="h5" id="VERSIONS" />
         <SuperText
@@ -124,6 +124,7 @@ export default function ServerStatus() {
               type: superTextTypes.spacer,
             },
             {
+              key: 'version',
               types: superTextTypes.text,
               children: version.packageVersion,
               hide: !version.packageVersion,
@@ -148,6 +149,7 @@ export default function ServerStatus() {
               type: superTextTypes.spacer,
             },
             {
+              key: 'version',
               types: superTextTypes.text,
               children: houstonVersion,
               hide: !houstonVersion,
@@ -172,6 +174,7 @@ export default function ServerStatus() {
               type: superTextTypes.spacer,
             },
             {
+              key: 'version',
               types: superTextTypes.text,
               children: sageVersion,
               hide: !sageVersion,
@@ -196,6 +199,7 @@ export default function ServerStatus() {
               type: superTextTypes.spacer,
             },
             {
+              key: 'build-date',
               types: superTextTypes.text,
               children: edmBuildDate,
               hide: !edmBuildDate,
@@ -225,6 +229,7 @@ export default function ServerStatus() {
               type: superTextTypes.spacer,
             },
             {
+              key: 'commit-hash',
               types: superTextTypes.text,
               children: version.commitHash,
               hide: !version.commitHash,
@@ -249,6 +254,7 @@ export default function ServerStatus() {
               type: superTextTypes.spacer,
             },
             {
+              key: 'commit-hash',
               types: superTextTypes.text,
               children: houstonHash,
               hide: !houstonHash,
@@ -273,6 +279,7 @@ export default function ServerStatus() {
               type: superTextTypes.spacer,
             },
             {
+              key: 'commit-hash',
               types: superTextTypes.text,
               children: edmHash,
               hide: !edmHash,

src/pages/serverStatus/components/LegendItem.jsx → src/pages/siteStatus/components/LegendItem.jsx

@@ -1,11 +1,18 @@
 import React from 'react';
+import { useIntl } from 'react-intl';
+
 import Text from '../../../components/Text';
 
 export default function LegendItem({ color, label }) {
+  const intl = useIntl();
+
   return (
     <div style={{ display: 'flex', alignItems: 'center' }}>
       <dt
-        aria-label={`${color} legend box`}
+        aria-label={intl.formatMessage(
+          { id: 'SERVER_COLOR_LEGEND_BOX' },
+          { color },
+        )}
         style={{
           backgroundColor: color,
           display: 'inline-block',

src/pages/serverStatus/components/WaffleSquare.jsx → src/pages/siteStatus/components/WaffleSquare.jsx

@@ -81,7 +81,14 @@ const WaffleSquare = function ({
   });
   formattedJobData[dateReceivedLabel] = dateReceivedValue;
 
-  const ariaLabel = `${jobCounterLabel} ${jobCounterValue}; ${statusLabel} ${statusValue}; ${dateReceivedLabel} ${dateReceivedValue}`;
+  const ariaLabel = intl.formatMessage(
+    { id: 'SERVER_TOOLTIP_SUMMARY' },
+    {
+      jobcounter: jobCounterValue,
+      status: statusValue,
+      dateReceived: dateReceivedValue,
+    },
+  );
 
   return (
     <LightTooltip