Move additional info table back to its own component

src/assets/metadataMapping.jsx

@@ -42,11 +42,13 @@ export const defaultMetadataMapping = {
     if (data.length) {
       return [{ label: 'Bureau Code', value: data[0] }];
     }
+    return [];
   },
   programCode: (data) => {
     if (data.length) {
       return [{ label: 'Program Code', value: data[0] }];
     }
+    return [];
   },
   theme: (data) => {
     return [

src/assets/metadataMapping.test.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { defaultMetadataMapping } from './metadataMapping';
+import TransformedDate from '../components/TransformedDate';
+import * as dataset from '../tests/fixtures/dataset.json';
+
+
+describe('defaultMetadataMapping', () => {
+  test("Date Mapping return TransformedDate component", () => {
+    expect(defaultMetadataMapping.modified(dataset.modified)).toEqual([{
+      label: "Modified",
+      value: <TransformedDate date="2024-01-16T18:50:39+00:00" />
+    }]);
+    // expect(defaultMetadataMapping.issued(dataset.issued)).toEqual([{
+    //   label: "Issued",
+    //   value: <TransformedDate date="2015-08-19T22:29:45+00:00" />
+    // }]);
+  });
+  // test("Strings are returned properly", () => {
+  //   expect(defaultMetadataMapping.accrualPeriodicity(dataset.accrualPeriodicity)).toEqual([{
+  //     label: "Frequency",
+  //     value: "Decennial"
+  //   }]);
+  //   expect(defaultMetadataMapping.identifier(dataset.identifier)).toEqual([{
+  //     label: "Identifier",
+  //     value: "4eaa5ebe-62f7-402e-a407-963cd380688b"
+  //   }]);
+  //   expect(defaultMetadataMapping.bureauCode(dataset.bureauCode)).toEqual([{
+  //     label: "Bureau Code",
+  //     value: "009:00"
+  //   }]);
+  //   expect(defaultMetadataMapping.programCode(dataset.programCode)).toEqual([{
+  //     label: "Program Code",
+  //     value: "009:000"
+  //   }]);
+  //   expect(defaultMetadataMapping.accessLevel(dataset.accessLevel)).toEqual([{
+  //     label: "Public Access Level",
+  //     value: "public"
+  //   }]);
+  //   expect(defaultMetadataMapping.spatial(dataset.spatial)).toEqual([{
+  //     label: "Spacial/Geographical Coverage",
+  //     value: "Florida"
+  //   }]);
+  // });
+  // test("HTML is returned", () => {
+  //   expect(defaultMetadataMapping.temporal(dataset.temporal)).toEqual([{
+  //     label: "Temporal Coverage",
+  //     value: <span className="dc-c-word-break--all">2022-01-01/2022-12-31</span>
+  //   }]);
+  //   // expect(defaultMetadataMapping.license(dataset.license)).toEqual([{
+  //   //   label: "License",
+  //   //   value: <a href="http://www.usa.gov/publicdomain/label/1.0/">http://www.usa.gov/publicdomain/label/1.0/</a>
+  //   // }]);
+  //   // expect(defaultMetadataMapping.references(dataset.references)).toStrictEqual([{
+  //   //   label: "Related Documents",
+  //   //   value:  <ul className="ds-u-margin--0 ds-u-padding-y--0 ds-u-padding-left--2 ds-u-padding-right--0"><li><a href="https://test.com">https://test.com</a></li><li><a href="https://test-2.com">https://test-2.com</a></li></ul>
+  //   // }]);
+  // });
+  // test("Contact point array is returned", () => {
+
+  // });
+  // test("Theme and Keywords are returned", () => {
+
+  // });
+
+  // test("Publisher returns the correct object or empty array", () => {
+
+  //   expect(defaultMetadataMapping.publisher(dataset.publisher)).toEqual([{
+  //     label: "Publisher",
+  //     value: "data.medicaid.gov"
+  //   }]);
+  //   expect(defaultMetadataMapping.publisher({data: { id: 1}})).toEqual([]);
+  //   expect(defaultMetadataMapping.publisher({})).toEqual([]);
+  // });
+});

src/components/DatasetAdditionalInformation/additional-information-table.scss

@@ -12,3 +12,14 @@
   word-break: break-word;
   overflow-wrap: anywhere;
 }
+
+
+@media (max-width: 544px) {
+  .dc-c-additional-info-table table th {
+    display: none;
+  }
+
+  .dc-c-additional-info-table table tbody tr:first-child {
+    border-top: 4px solid var(--table__border-color);
+  }
+}

src/components/DatasetAdditionalInformation/datasetadditionalinformation.test.jsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import { render, screen, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import DatasetAdditionalInformation from './index';
+import { defaultMetadataMapping } from '../../assets/metadataMapping';
+import * as dataset from "../../tests/fixtures/dataset.json";
+import { MemoryRouter } from 'react-router-dom';
+
+describe('<DatasetAdditionalInformation />', () => {
+  test("Renders correctly", () => {
+    const metadataMapping = {
+      ...defaultMetadataMapping,
+    }
+    render(
+      <MemoryRouter>
+        <DatasetAdditionalInformation
+          metadata={dataset}
+          metadataMapping={metadataMapping}
+        />
+      </MemoryRouter>
+    );
+    expect(screen.getByRole('heading', { level: 2 , name: 'Additional Information'})).toBeInTheDocument();
+    const infoTable = screen.getByRole('table');
+    const basicTableRows = [
+      ['Modified', 'January 16, 2024'],
+      ['Issued', 'August 19, 2015'],
+      ['Frequency', 'Decennial'],
+      ['Publisher', 'data.medicaid.gov'],
+      ['Identifier', '4eaa5ebe-62f7-402e-a407-963cd380688b'],
+      ['Contact', 'Medicaid.gov'],
+      ['Contact Email', 'mailto:[email protected]'],
+      ['Bureau Code', '009:00'],
+      ['Program Code', '009:000'],
+      ['Tags', 'keyword1 , tag2'],
+      ['Category', 'theme1 , theme 2'],
+      ['License', 'http://www.usa.gov/publicdomain/label/1.0/'],
+      ['Public Access Level', 'public'],
+      ['Temporal Coverage', '2022-01-01/2022-12-31'],
+      ['Spacial/Geographical Coverage', 'Florida'],
+      ['Related Documents', 'https://test.com https://test-2.com']
+    ];
+
+    basicTableRows.forEach((rowData) => {
+      expect(screen.getByRole('row', { name: rowData[0] + ' ' + rowData[1]}));
+      expect(screen.getByRole('rowheader', { name: rowData[0]}));
+      expect(screen.getByRole('cell', { name: rowData[1]}));
+    })
+
+    expect(within(infoTable).getAllByRole('listitem').length).toBe(2);
+
+    const tableLinks = [
+      ['theme1', '/datasets?theme[]=theme1'],
+      ['theme 2', '/datasets?theme[]=theme 2'],
+      ['keyword1', '/datasets?keyword[]=keyword1'],
+      ['tag2', '/datasets?keyword[]=tag2'],
+      ['http://www.usa.gov/publicdomain/label/1.0/', 'http://www.usa.gov/publicdomain/label/1.0/'],
+      ['https://test.com', 'https://test.com'],
+      ['https://test-2.com', 'https://test-2.com']
+    ];
+
+    tableLinks.forEach((tLink) => {
+      expect(within(infoTable).getByRole('link', { name: tLink[0]})).toHaveAttribute('href', tLink[1]);
+    });
+  });
+  test("Doesn't render missing keys", () => {
+    const metadataMapping = {
+      ...defaultMetadataMapping,
+    }
+    render(
+      <MemoryRouter>
+        <DatasetAdditionalInformation
+          metadata={{"identifier": "4eaa5ebe-62f7-402e-a407-963cd380688b",}}
+          metadataMapping={metadataMapping}
+        />
+      </MemoryRouter>
+    )
+    const infoTable = screen.getByRole('table');
+    expect(within(infoTable).getAllByRole('row').length).toBe(1);
+  });
+
+  test("Doesn't render publisher if data is missing", () => {
+    const metadataMapping = {
+      ...defaultMetadataMapping,
+    }
+
+    render(
+      <MemoryRouter>
+        <DatasetAdditionalInformation
+          metadata={{identifier: "4eaa5ebe-62f7-402e-a407-963cd380688b", publisher: { identifier: 1234}}}
+          metadataMapping={metadataMapping}
+        />
+      </MemoryRouter>
+    )
+    const infoTable = screen.getByRole('table');
+    expect(within(infoTable).getAllByRole('row').length).toBe(1);
+  });
+  test("Doesn't render publisher if data and data.name is missing", () => {
+    const metadataMapping = {
+      ...defaultMetadataMapping,
+    }
+    render(
+      <MemoryRouter>
+        <DatasetAdditionalInformation
+          metadata={{identifier: 1234, publisher: { identifier: 1234, data: { id: "Not name key"}}}}
+          metadataMapping={metadataMapping}
+        />
+      </MemoryRouter>
+    )
+    const infoTable = screen.getByRole('table');
+    expect(within(infoTable).getAllByRole('row').length).toBe(1);
+  });
+  test("Doesn't render contact email if hasEmail is missing", () => {
+    const metadataMapping = {
+      ...defaultMetadataMapping,
+    }
+    render(
+      <MemoryRouter>
+        <DatasetAdditionalInformation
+          metadata={{contactPoint: { fn: "Medicaid.gov" }}}
+          metadataMapping={metadataMapping}
+        />
+      </MemoryRouter>
+    )
+    const infoTable = screen.getByRole('table');
+    expect(within(infoTable).getAllByRole('row').length).toBe(1);
+    expect(within(infoTable).queryByText('Contact Email')).not.toBeInTheDocument();
+  });
+  test("Doesn't render contact if fn is missing", () => {
+    const metadataMapping = {
+      ...defaultMetadataMapping,
+    }
+    render(
+      <MemoryRouter>
+        <DatasetAdditionalInformation
+          metadata={{contactPoint: { hasEmail: "mailto:[email protected]" }}}
+          metadataMapping={metadataMapping}
+        />
+      </MemoryRouter>
+    )
+    const infoTable = screen.getByRole('table');
+    expect(within(infoTable).getAllByRole('row').length).toBe(1);
+    expect(within(infoTable).queryByText('Contact')).not.toBeInTheDocument();
+  });
+  test("Doesn't render bureauCode or programCode if length is 0", () => {
+    const metadataMapping = {
+      ...defaultMetadataMapping,
+    }
+    render(
+      <MemoryRouter>
+        <DatasetAdditionalInformation
+          metadata={{identifier: '1234', bureauCode: [], programCode: []}}
+          metadataMapping={metadataMapping}
+        />
+      </MemoryRouter>
+    )
+    const infoTable = screen.getByRole('table');
+    expect(within(infoTable).queryByText('Bureau Code')).not.toBeInTheDocument();
+    expect(within(infoTable).queryByText('Program Code')).not.toBeInTheDocument();
+  });
+});

src/components/DatasetAdditionalInformation/index.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Table, TableHead, TableRow, TableCell, TableBody } from '@cmsgov/design-system';
+import { Table, TableRow, TableCell, TableBody } from '@cmsgov/design-system';
 import './additional-information-table.scss';
 
 export function buildRows(metadataMapping, datasetInfo) {
@@ -14,27 +14,23 @@ export function buildRows(metadataMapping, datasetInfo) {
   return rows;
 }
 
-const DatasetAdditionalInformation = ({ datasetInfo, id, metadataMapping}) => {
-  const rows = buildRows(metadataMapping, datasetInfo);
+const DatasetAdditionalInformation = ({ metadata, metadataMapping}) => {
+  const rows = buildRows(metadataMapping, metadata);
   return (
-    <div className="dc-c-additional-info-table ds-u-margin-bottom--6">
-      <h2 className="ds-text-heading--2xl ds-u-margin-y--3">Additional Information</h2>
-      <Table compact striped>
-        <TableHead>
-          <TableRow>
-            <TableCell>Field</TableCell>
-            <TableCell>Value</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {rows.map((r) => (
-            <TableRow key={`${r.label}_${id}`}>
-              <TableCell>{r.label}</TableCell>
-              <TableCell className="ds-u-word-break-anywhere">{r.value}</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
+    <div className="dc-c-additional-info-table ds-u-margin-bottom--6 ds-u-padding-left--0 ds-l-lg-col--7 ds-l-md-col--9 ds-l-col--12">
+      <h2 className="ds-h2 ds-text-heading--2xl">Additional Information</h2>
+      <Table compact stackable stackableBreakpoint="sm" warningDisabled>
+          <TableBody>
+            {rows.map((r) => (
+              <TableRow key={`${r.label}_${metadata.identifier}`}>
+                <TableCell id={r.label.replace(/\s+/g, "")} component="th" className="ds-u-font-weight--bold">
+                    {r.label}
+                  </TableCell>
+                <TableCell stackedTitle={r.label} headers={r.label.replace(/\s+/g, "")}>{r.value}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
     </div>
   );
 };

src/components/DatasetOverviewTab/DatasetOverviewTab.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import DatasetOverview from './index';
 import { defaultMetadataMapping } from '../../assets/metadataMapping';

src/components/DatasetOverviewTab/index.tsx

@@ -1,40 +1,17 @@
 import React from 'react';
-import { useMediaQuery } from 'react-responsive';
-import { buildRows } from '../DatasetAdditionalInformation';
-import { Table, TableBody, TableRow, TableCell } from '@cmsgov/design-system';
+import DatasetAdditionalInformation from '../DatasetAdditionalInformation';
 import Resource from '../Resource';
 import { DatasetOverviewPropsType } from '../../types/dataset';
 
 const DatasetOverview = ({ dataset, resource, distributions, metadataMapping } : DatasetOverviewPropsType) => {
-  const md = useMediaQuery({ minWidth: 0, maxWidth: 768 });
-  const rows = buildRows(metadataMapping, dataset);
-
   return (
     <>
       <Resource
         distributions={distributions}
         resource={resource}
         title={dataset.title}
       />
-      <div className="dc-c-additional-info-table ds-u-margin-bottom--6 ds-u-padding-left--0 ds-l-lg-col--7 ds-l-md-col--9 ds-l-col--12">
-        <h2 className="ds-h2 ds-text-heading--2xl">Additional Information</h2>
-        <Table compact stackable stackableBreakpoint="md" warningDisabled>
-          <TableBody>
-            {rows.map((r) => (
-              <TableRow key={`${r.label}_${dataset.identifier}`}>
-                {md ? (
-                  ''
-                ) : (
-                  <TableCell component="th" className="ds-u-font-weight--bold">
-                    {r.label}
-                  </TableCell>
-                )}
-                <TableCell stackedTitle={r.label}>{r.value}</TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
+      <DatasetAdditionalInformation metadata={dataset} metadataMapping={metadataMapping} />
     </>
   );
 };

src/templates/Dataset/index.tsx

@@ -127,8 +127,11 @@ const Dataset = ({
     window.location.hash.substring(1) ? window.location.hash.substring(1) : getDefaultTab())
 
   useEffect(() => {
-    setSelectedTab(getDefaultTab())
-  }, [distribution])
+    if (!window.location.hash.substring(1))
+      setSelectedTab(getDefaultTab())
+    else if (window.location.hash.substring(1) != selectedTab)
+      setSelectedTab(window.location.hash.substring(1))
+  }, [distribution, window.location.hash])
 
   return (
     <>