Add instrument landing pages #1779

packages/datagateway-common/src/app.types.tsx

@@ -112,6 +112,9 @@ export interface Instrument {
   url?: string;
   instrumentScientists?: InstrumentScientist[];
   facility?: Facility;
+  pid?: string;
+  startDate?: string;
+  endDate?: string;
 }
 
 export interface InvestigationUser {

packages/datagateway-dataview/cypress/e2e/landing/instrument.cy.ts

@@ -0,0 +1,24 @@
+describe('Instrument Landing', () => {
+  beforeEach(() => {
+    cy.login();
+    cy.visit('/instrument/1');
+  });
+
+  it('should load correctly', () => {
+    cy.title().should('equal', 'DataGateway DataView');
+    cy.get('#datagateway-dataview').should('be.visible');
+
+    // title
+    cy.contains('Stop prove field onto think suffer measure.').should(
+      'be.visible'
+    );
+    // description
+    cy.contains('Suggest shake effort many last prepare small.').should(
+      'be.visible'
+    );
+    // instrument scientist
+    cy.contains('Kathryn Fox').should('be.visible');
+
+    // TODO: no doi, start date or end date fields yet, and type is just a number so hard to test via text
+  });
+});

packages/datagateway-dataview/public/datagateway-dataview-settings.example.json

@@ -1,6 +1,7 @@
 {
   "facilityName": "Generic",
   "facilityImageURL": "",
+  "landingPageLogo": "STFC",
   "features": {
     "disableAnonDownload": false,
     "disableSelectAll": false
@@ -133,6 +134,13 @@
       "order": 0,
       "hideFromMenu": true
     },
+    {
+      "section": "Browse",
+      "link": "/instrument",
+      "displayName": "Instrument Landing Pages",
+      "order": 0,
+      "hideFromMenu": true
+    },
     {
       "section": "Browse",
       "link": "/browse/investigation",

packages/datagateway-dataview/public/res/default.json

@@ -32,6 +32,13 @@
     "description": "Description",
     "type": "Type",
     "url": "URL",
+    "pid": "DOI",
+    "start_date": "Start Date",
+    "end_date": "End Date",
+    "owner": "Owner",
+    "owner_value": "Science and Technology Facilities Council (<Link href='https://ror.org/057g20z61'>https://ror.org/057g20z61</Link>)",
+    "manufacturer": "Manufacturer",
+    "manufacturer_value": "ISIS Neutron and Muon Source (<Link href='https://ror.org/01t8fg661'>https://ror.org/01t8fg661</Link>)",
     "details": {
       "tabs_label": "Instrument Details",
       "label": "Instrument Details",
@@ -381,6 +388,7 @@
     "warning_message_session_token": "Please remember that your selection will be lost after 2 hours of inactivity on this site"
   },
   "doi_constants": {
+    "no_description": "Description not provided",
     "keywords": [
       "STFC > ISIS",
       "STFC > ISIS > SYNCHROTRON",
@@ -396,7 +404,9 @@
     },
     "branding": {
       "title": "ISIS Neutron and Muon Source",
-      "body": "This is a page describing data taken during an experiment at the ISIS Neutron and Muon Source. Information about the ISIS Neutron and Muon Source can be found at <a href='https://www.isis.stfc.ac.uk'>https://www.isis.stfc.ac.uk</a>."
+      "body_data": "This is a page describing data taken during an experiment at the ISIS Neutron and Muon Source. Information about the ISIS Neutron and Muon Source can be found at <Link href='https://www.isis.stfc.ac.uk'>https://www.isis.stfc.ac.uk</Link>.",
+      "body_instrument": "This is a page describing an instrument at the ISIS Neutron and Muon Source. Information about the ISIS Neutron and Muon Source can be found at <Link href='https://www.isis.stfc.ac.uk'>https://www.isis.stfc.ac.uk</Link>.",
+      "logo_alt_text": "ISIS Logo"
     },
     "license": {
       "url": "https://creativecommons.org/licenses/by/4.0/",

packages/datagateway-dataview/src/main.test.tsx

@@ -22,6 +22,7 @@ describe('index - fetchSettings', () => {
     const settingsResult = {
       facilityName: 'Generic',
       facilityImageURL: 'test-image.jpg',
+      landingPageLogo: 'DLS',
       features: {},
       idsUrl: 'ids',
       apiUrl: 'api',

packages/datagateway-dataview/src/page/pageContainer.component.tsx

@@ -39,6 +39,7 @@ import {
 } from 'react-router-dom';
 import { StateType } from '../state/app.types';
 import DOITypeSelector from '../views/doiTypeSelector.component';
+import InstrumentLandingPage from '../views/landing/instrumentLanding.component';
 import RoleSelector from '../views/roleSelector.component';
 import PageBreadcrumbs from './breadcrumbs.component';
 import PageRouting from './pageRouting.component';
@@ -89,6 +90,7 @@ export const paths = {
   homepage: '/datagateway',
   root: '/browse',
   doiRedirect: '/doi-redirect/:facilityName/:entityName/:entityId',
+  instrumentLandingPage: '/instrument/:instrumentId',
   genericRedirect:
     '/redirect/:facilityName/:entityName/:entityField/:fieldValue',
   myData: {
@@ -813,6 +815,9 @@ const PageContainer: React.FC = () => {
       <Route path={paths.genericRedirect}>
         <GenericRedirect />
       </Route>
+      <Route path={paths.instrumentLandingPage}>
+        <InstrumentLandingPage />
+      </Route>
       {/* Load the standard dataview pageContainer */}
       <Route>
         <DataviewPageContainer />

packages/datagateway-dataview/src/page/pageRouting.component.test.tsx

@@ -562,7 +562,7 @@ describe('PageTable', () => {
       );
 
       expect(
-        await screen.findByLabelText('branding-title')
+        await screen.findByText('doi_constants.branding.title')
       ).toBeInTheDocument();
     });
 

packages/datagateway-dataview/src/settings.ts

@@ -4,6 +4,7 @@ import { BreadcrumbSettings } from './state/actions/actions.types';
 export type DataviewSettings = DataviewSearchCommonSettings &
   DOISettings & {
     facilityImageURL?: string;
+    landingPageLogo?: 'STFC' | 'DLS' | string;
     breadcrumbs?: BreadcrumbSettings[];
     PIRole?: string;
     localContactRole?: string;

packages/datagateway-dataview/src/state/actions/actions.types.tsx

@@ -5,6 +5,8 @@ export const ConfigurePluginHostSettingType =
   'datagateway_dataview:configure_plugin_host';
 export const ConfigureFacilityImageSettingType =
   'datagateway_dataview:configure_facility_image';
+export const ConfigureLandingPageLogoSettingType =
+  'datagateway_dataview:configure_landing_page_logo';
 export const ConfigurePIRoleSettingType =
   'datagateway_dataview:configure_pi_role';
 export const ConfigureLocalContactRoleSettingType =
@@ -23,6 +25,10 @@ export interface ConfigureFacilityImageSettingPayload {
   settings: string;
 }
 
+export interface ConfigureLandingPageLogoSettingPayload {
+  settings: 'STFC' | 'DLS' | string;
+}
+
 export interface ConfigurePIRoleSettingPayload {
   settings: string;
 }

packages/datagateway-dataview/src/state/actions/index.tsx

@@ -14,6 +14,8 @@ import {
   ConfigureBreadcrumbSettingsType,
   ConfigureFacilityImageSettingPayload,
   ConfigureFacilityImageSettingType,
+  ConfigureLandingPageLogoSettingPayload,
+  ConfigureLandingPageLogoSettingType,
   ConfigureLocalContactRoleSettingPayload,
   ConfigureLocalContactRoleSettingType,
   ConfigurePIRoleSettingPayload,
@@ -54,6 +56,15 @@ export const loadFacilityImageSetting = (
   },
 });
 
+export const loadLandingPageLogoSetting = (
+  landingPageLogoSetting: string
+): ActionType<ConfigureLandingPageLogoSettingPayload> => ({
+  type: ConfigureLandingPageLogoSettingType,
+  payload: {
+    settings: landingPageLogoSetting,
+  },
+});
+
 export const loadPIRoleSetting = (
   PIRoleSetting: string | undefined
 ): ActionType<ConfigurePIRoleSettingPayload> => ({
@@ -117,6 +128,10 @@ export const configureApp = (): ThunkResult<Promise<void>> => {
         dispatch(loadFacilityImageSetting(settingsResult['facilityImageURL']));
       }
 
+      if (settingsResult?.['landingPageLogo'] !== undefined) {
+        dispatch(loadLandingPageLogoSetting(settingsResult['landingPageLogo']));
+      }
+
       dispatch(loadPIRoleSetting(settingsResult['PIRole']));
       dispatch(loadLocalContactRoleSetting(settingsResult['localContactRole']));
 

packages/datagateway-dataview/src/state/app.types.tsx

@@ -6,6 +6,7 @@ import type { BreadcrumbSettings } from './actions/actions.types';
 
 export interface DGDataViewState {
   facilityImageURL: string;
+  landingPageLogo?: 'STFC' | 'DLS' | string;
   breadcrumbSettings: BreadcrumbSettings[];
   settingsLoaded: boolean;
   pluginHost: string;

packages/datagateway-dataview/src/state/reducers/dgdataview.reducer.test.tsx

@@ -1,6 +1,7 @@
 import {
   loadBreadcrumbSettings,
   loadFacilityImageSetting,
+  loadLandingPageLogoSetting,
   loadLocalContactRoleSetting,
   loadPIRoleSetting,
   loadPluginHostSetting,
@@ -75,6 +76,17 @@ describe('dgdataview reducer', () => {
     expect(updatedState.facilityImageURL).toEqual('test-image.jpg');
   });
 
+  it('should set landingPageLogo when configuring action is sent', () => {
+    expect(state.landingPageLogo).toEqual(undefined);
+
+    const updatedState = DGDataViewReducer(
+      state,
+      loadLandingPageLogoSetting('DLS')
+    );
+
+    expect(updatedState.landingPageLogo).toEqual('DLS');
+  });
+
   it('should set loadPIRoleSetting when configuring action is sent', () => {
     expect(state.PIRole).toEqual('PI');
 

packages/datagateway-dataview/src/state/reducers/dgdataview.reducer.tsx

@@ -8,6 +8,8 @@ import {
   ConfigureBreadcrumbSettingsType,
   ConfigureFacilityImageSettingPayload,
   ConfigureFacilityImageSettingType,
+  ConfigureLandingPageLogoSettingPayload,
+  ConfigureLandingPageLogoSettingType,
   ConfigureLocalContactRoleSettingPayload,
   ConfigureLocalContactRoleSettingType,
   ConfigurePIRoleSettingPayload,
@@ -67,6 +69,16 @@ export function handleConfigureFacilityImageSetting(
   };
 }
 
+export function handleConfigureLandingPageLogoSetting(
+  state: DGDataViewState,
+  payload: ConfigureLandingPageLogoSettingPayload
+): DGDataViewState {
+  return {
+    ...state,
+    landingPageLogo: payload.settings,
+  };
+}
+
 export function handleConfigurePIRoleSetting(
   state: DGDataViewState,
   payload: ConfigurePIRoleSettingPayload
@@ -92,6 +104,7 @@ const DGDataViewReducer = createReducer(initialState, {
   [ConfigureBreadcrumbSettingsType]: handleConfigureBreadcrumbSettings,
   [ConfigurePluginHostSettingType]: handleConfigurePluginHostSetting,
   [ConfigureFacilityImageSettingType]: handleConfigureFacilityImageSetting,
+  [ConfigureLandingPageLogoSettingType]: handleConfigureLandingPageLogoSetting,
   [ConfigurePIRoleSettingType]: handleConfigurePIRoleSetting,
   [ConfigureLocalContactRoleSettingType]:
     handleConfigureLocalContactRoleSetting,

packages/datagateway-dataview/src/views/landing/StyledDOILink.component.tsx

@@ -0,0 +1,32 @@
+import { styled } from '@mui/material';
+
+const StyledDOILink = styled('a')({
+  display: 'inline-flex',
+  backgroundColor: '#000',
+  color: '#fff',
+  textDecoration: 'none',
+  paddingLeft: '5px',
+  borderRadius: '5px',
+  overflow: 'hidden',
+});
+
+const StyledDOISpan = styled('span')({
+  backgroundColor: '#09c',
+  padding: '0 5px',
+  marginLeft: '5px',
+  '&:hover': {
+    backgroundColor: '#006a8d',
+  },
+});
+
+const StyledDOI: React.FC<{
+  doi: string;
+  doiHandleUrl: string;
+  testId?: string;
+}> = ({ doi, doiHandleUrl, testId }) => (
+  <StyledDOILink href={`${doiHandleUrl}/${doi}`} data-testid={testId}>
+    DOI <StyledDOISpan>{doi}</StyledDOISpan>
+  </StyledDOILink>
+);
+
+export default StyledDOI;

packages/datagateway-dataview/src/views/landing/branding.component.tsx

@@ -0,0 +1,68 @@
+import { Grid, Link, Paper, styled, Typography } from '@mui/material';
+import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { StateType } from '../../state/app.types';
+// TODO: when vite 6, explore no-inline w/ pluginHost vs inline as we have to inline in vite 5
+import STFCLogoWhite from 'datagateway-common/src/images/stfc-logo-white-text.png';
+// TODO: when vite 6, explore no-inline w/ pluginHost vs inline as we have to inline in vite 5
+import DLSLogo from 'datagateway-common/src/images/DLS-logo-white-text.png';
+import { useSelector } from 'react-redux';
+
+const StyledPaper = styled(Paper)(({ theme }) => ({
+  backgroundColor: theme.palette.primary.light,
+  margin: theme.spacing(-1.5),
+  padding: theme.spacing(1.5),
+  paddingBottom: theme.spacing(3),
+}));
+
+const Branding = (props: {
+  landingPageType: 'data' | 'instrument';
+}): React.ReactElement => {
+  const [t] = useTranslation();
+  const landingPageLogo = useSelector(
+    (state: StateType) => state.dgdataview.landingPageLogo
+  );
+
+  return (
+    <StyledPaper elevation={0}>
+      <Grid container spacing={2}>
+        {landingPageLogo && (
+          <Grid item sm={12} md="auto" sx={{ display: 'flex' }}>
+            <img
+              style={{ height: 'auto', maxHeight: 90, margin: 'auto' }}
+              src={
+                landingPageLogo === 'STFC'
+                  ? STFCLogoWhite
+                  : landingPageLogo === 'DLS'
+                    ? DLSLogo
+                    : landingPageLogo
+              }
+              alt={t('doi_constants.branding.logo_alt_text')}
+            />
+          </Grid>
+        )}
+        <Grid item sm={12} md sx={{ display: 'flex' }}>
+          <div style={{ margin: 'auto' }}>
+            <Typography
+              color="primary.contrastText"
+              variant="h4"
+              align="center"
+            >
+              {t('doi_constants.branding.title')}
+            </Typography>
+            <Typography color="primary.contrastText" align="center">
+              <Trans
+                i18nKey={t('doi_constants.branding.body', {
+                  context: props.landingPageType,
+                })}
+                components={{ Link: <Link color="#FFCA98" /> }}
+              />
+            </Typography>
+          </div>
+        </Grid>
+      </Grid>
+    </StyledPaper>
+  );
+};
+
+export default Branding;