Add sandbox indicator for Sandbox Project

frontend/src/components/header/index.js

@@ -3,6 +3,7 @@
 import { Link, useNavigate, useLocation } from 'react-router-dom';
 import Popup from 'reactjs-popup';
 import { FormattedMessage } from 'react-intl';
+import { useProjectSummaryQuery } from '../../api/projects';
 
 import messages from './messages';
 import { ORG_URL, ORG_NAME, ORG_LOGO, SERVICE_DESK } from '../../config';
@@ -35,6 +36,13 @@
   const organisations = useSelector((state) => state.auth.organisations);
   const showOrgBar = useSelector((state) => state.orgBarVisibility.isVisible);
 
+  // Matches URLs containing '/projects/' followed by digits (the project ID), like '/projects/130' or '/manage/projects/130'
+  const match = location.pathname.match(/\/projects\/(\d+)/);
+  const projectId = match ? match[1] : null;
+  const { data: project } = useProjectSummaryQuery(projectId, {
+    enabled: !!projectId,
+  });
+
   const linkCombo = 'link mh3 barlow-condensed blue-dark f4 ttu lh-solid nowrap pv2';
 
   const isActive = ({ isPartiallyCurrent }) => {
@@ -125,6 +133,11 @@
           />
           <span className="barlow-condensed f3 fw6 ml2 blue-dark nowrap">Tasking Manager</span>
         </Link>
+        {project && project.sandbox && (
+          <div className="tc br1 f7 ttu ba b--red red pv1 ph2 ml3 v-mid dib nowrap">
+            <FormattedMessage {...messages.sandbox} />
+          </div>
+        )}
         <HorizontalScroll
           className={'dn dib-l ml5-l mr4-l pl6-xl'}
           style={{ flexGrow: 1 }}

frontend/src/components/header/messages.js

@@ -179,4 +179,8 @@ export default defineMessages({
     id: 'serviceWorker.dialog.remindMeLater',
     defaultMessage: 'Remind me later',
   },
+  sandbox: {
+    id: 'project.detail.sandbox',
+    defaultMessage: 'Sandbox Mode',
+  },
 });

frontend/src/components/header/tests/index.test.js

@@ -17,9 +17,11 @@ describe('Header', () => {
   const setup = () => {
     return {
       ...renderWithRouter(
-        <ReduxIntlProviders>
-          <Header />
-        </ReduxIntlProviders>,
+        <QueryClientProviders>
+          <ReduxIntlProviders>
+            <Header />
+          </ReduxIntlProviders>
+        </QueryClientProviders>,
       ),
     };
   };