Merge pull request #746 from ral-facilities/bugfix/fix-instrument-sea…

…rch-#731 Fix instruments filter on ISIS/DLS card views (#731)
ral-facilities · Jul 30, 2021 · d91f688 · d91f688
2 parents 9ee697f + d0b715e
commit d91f688
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 12 deletions.
diff --git a/packages/datagateway-common/src/card/cardView.component.test.tsx b/packages/datagateway-common/src/card/cardView.component.test.tsx
@@ -429,6 +429,30 @@ describe('Card View', () => {
     });
   });
 
+  it('information displays with content that has no tooltip', () => {
+    const updatedProps = {
+      ...props,
+      title: { dataKey: 'title', disableSort: true },
+      description: { dataKey: 'name', disableSort: true },
+      information: [
+        {
+          dataKey: 'name',
+          label: 'Name',
+          content: (entity: Entity) => 'Content',
+          noTooltip: true,
+        },
+      ],
+    };
+
+    const wrapper = createWrapper(updatedProps);
+    expect(
+      wrapper.find('[aria-label="card-info-Name"]').first().text()
+    ).toEqual('Name:');
+    expect(
+      wrapper.find('[aria-label="card-info-data-Name"]').first().text()
+    ).toEqual('Content');
+  });
+
   it('cannot sort when fields are disabled', () => {
     const updatedProps = {
       ...props,

diff --git a/packages/datagateway-common/src/card/cardView.component.tsx b/packages/datagateway-common/src/card/cardView.component.tsx
@@ -74,6 +74,7 @@ export interface CardViewDetails {
   // Filter and sort options.
   filterComponent?: (label: string, dataKey: string) => React.ReactElement;
   disableSort?: boolean;
+  noTooltip?: boolean;
 }
 
 type CVPaginationPosition = 'top' | 'bottom' | 'both';
@@ -713,29 +714,33 @@ const CardView = (props: CardViewProps): React.ReactElement => {
                           information &&
                           information
                             .map((details) => ({
+                              icon: details.icon,
                               // We can say the data key is the label if not defined.
                               label: details.label
                                 ? details.label
                                 : details.dataKey,
-                              content: details.content
-                                ? details.content(entity)
-                                : nestedValue(entity, details.dataKey),
                               // Keep the dataKey in so we can use it for adding the tooltip
                               // once content has been created.
                               dataKey: details.dataKey,
-                              icon: details.icon,
+                              content: details.content
+                                ? details.content(entity)
+                                : nestedValue(entity, details.dataKey),
+                              noTooltip: details.noTooltip,
                             }))
                             // Filter afterwards to only show content with information.
                             .filter((v) => v.content)
                             // Add in tooltips to the content we have filtered.
                             .map((details) => ({
                               ...details,
-                              content: (
+                              // If we use custom content we can choose to not show a tooltip.
+                              content: !details.noTooltip ? (
                                 <ArrowTooltip
                                   title={nestedValue(entity, details.dataKey)}
                                 >
                                   <Typography>{details.content}</Typography>
                                 </ArrowTooltip>
+                              ) : (
+                                details.content
                               ),
                             }))
                         }

diff --git a/packages/datagateway-dataview/src/views/card/dls/dlsVisitsCardView.component.tsx b/packages/datagateway-dataview/src/views/card/dls/dlsVisitsCardView.component.tsx
@@ -24,6 +24,8 @@ import {
   TextFilter,
   pushPageNum,
   pushQuery,
+  nestedValue,
+  ArrowTooltip,
 } from 'datagateway-common';
 import { ThunkDispatch } from 'redux-thunk';
 import { AnyAction } from 'redux';
@@ -35,6 +37,7 @@ import {
   ConfirmationNumber,
 } from '@material-ui/icons';
 import { useTranslation } from 'react-i18next';
+import { Typography } from '@material-ui/core';
 
 interface DLSVisitsCVProps {
   proposalName: string;
@@ -158,7 +161,21 @@ const DLSVisitsCardView = (
         {
           icon: <Assessment />,
           label: t('investigations.instrument'),
-          dataKey: 'investigationInstruments[0].instrument.name',
+          dataKey: 'investigationInstruments.instrument.name',
+          content: (investigation: Investigation) => {
+            const instrument = nestedValue(
+              investigation,
+              'investigationInstruments[0].instrument.name'
+            );
+            return function Content(): React.ReactNode {
+              return (
+                <ArrowTooltip title={instrument}>
+                  <Typography>{instrument}</Typography>
+                </ArrowTooltip>
+              );
+            };
+          },
+          noTooltip: true,
           filterComponent: textFilter,
         },
         {

diff --git a/packages/datagateway-dataview/src/views/card/isis/isisInstrumentsCardView.component.tsx b/packages/datagateway-dataview/src/views/card/isis/isisInstrumentsCardView.component.tsx
@@ -127,10 +127,10 @@ const ISISInstrumentsCardView = (
           icon: <LinkIcon />,
           label: t('instruments.url'),
           dataKey: 'url',
-          // eslint-disable-next-line react/display-name
-          content: (instrument: Instrument) => (
-            <Link href={instrument.url}>{instrument.url}</Link>
-          ),
+          content: (instrument: Instrument) =>
+            function Content() {
+              return <Link href={instrument.url}>{instrument.url}</Link>;
+            },
           filterComponent: textFilter,
         },
       ]}

diff --git a/packages/datagateway-dataview/src/views/card/isis/isisInvestigationsCardView.component.tsx b/packages/datagateway-dataview/src/views/card/isis/isisInvestigationsCardView.component.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@material-ui/core';
+import { Button, Typography } from '@material-ui/core';
 import {
   AddCircleOutlineOutlined,
   RemoveCircleOutlineOutlined,
@@ -11,6 +11,7 @@ import {
 import { push } from 'connected-react-router';
 import {
   addToCart,
+  ArrowTooltip,
   CardView,
   DateColumnFilter,
   DateFilter,
@@ -24,6 +25,7 @@ import {
   Filter,
   formatBytes,
   Investigation,
+  nestedValue,
   pushPageFilter,
   pushPageNum,
   pushQuery,
@@ -229,7 +231,21 @@ const ISISInvestigationsCardView = (
         {
           icon: <Assessment />,
           label: t('investigations.instrument'),
-          dataKey: 'investigationInstruments[0].instrument.fullName',
+          dataKey: 'investigationInstruments.instrument.fullName',
+          content: (investigation: Investigation) => {
+            const instrument = nestedValue(
+              investigation,
+              'investigationInstruments[0].instrument.fullName'
+            );
+            return function Content(): React.ReactNode {
+              return (
+                <ArrowTooltip title={instrument}>
+                  <Typography>{instrument}</Typography>
+                </ArrowTooltip>
+              );
+            };
+          },
+          noTooltip: true,
           filterComponent: textFilter,
         },
         {