Info header info icon: add tooltip

Author: esikkala

src/client/components/main_layout/InfoHeader.js

@@ -9,6 +9,7 @@ import Typography from '@material-ui/core/Typography'
 // import Divider from '@material-ui/core/Divider';
 import IconButton from '@material-ui/core/IconButton'
 import InfoIcon from '@material-ui/icons/InfoOutlined'
+import Tooltip from '@material-ui/core/Tooltip'
 import intl from 'react-intl-universal'
 
 const useStyles = makeStyles(theme => ({
@@ -90,7 +91,12 @@ const InfoHeader = props => {
     let label = ''
     const data = props.instanceData
     const hasData = data !== null && Object.values(data).length >= 1
-    if (hasData && data.prefLabel) { label = data.prefLabel.prefLabel || data.prefLabel }
+    if (hasData && data.prefLabel) {
+      if (Array.isArray(data.prefLabel)) {
+        data.prefLabel = data.prefLabel[0]
+      }
+      label = data.prefLabel.prefLabel || data.prefLabel
+    }
     return label
   }
 
@@ -126,9 +132,11 @@ const InfoHeader = props => {
               {props.pageType === 'facetResults' && intl.get(`perspectives.${props.resultClass}.label`)}
               {props.pageType === 'instancePage' && intl.get(`perspectives.${props.resultClass}.instancePage.label`)}
             </Typography>
-            <IconButton aria-label='open instructions' className={classes.infoIconButton} onClick={handleExpandButtonOnClick}>
-              <InfoIcon className={classes.infoIcon} />
-            </IconButton>
+            <Tooltip title={intl.get('infoHeader.toggleInstructions')}>
+              <IconButton aria-label='toggle instructions' className={classes.infoIconButton} onClick={handleExpandButtonOnClick}>
+                <InfoIcon className={classes.infoIcon} />
+              </IconButton>
+            </Tooltip>
           </div>
           {props.pageType === 'instancePage' &&
             <Typography className={classes.label} component='h1' variant='h6'>{generateLabel()}</Typography>}

src/client/translations/sampo/localeEN.json

@@ -15,6 +15,9 @@
   "selectPerspective": "Select a perspective to search and browse the knowledge graph:",
   "mainPageImageLicence": "Images used under license from Shutterstock.com",
   "backendErrorText": "One of the backend services is not available at the moment. Please try again later.",
+  "infoHeader": {
+    "toggleInstructions": "Click to show or hide instructions"
+  },
   "topBar": {
     "feedback": "feedback",
     "info": {