Filtered resource description fallback

package.json

@@ -29,7 +29,6 @@
     "react-popper": "^2.3.0",
     "react-responsive": "^9.0.2",
     "react-router-dom": "^6.8.0",
-    "react-text-truncate": "^0.19.0",
     "swagger-ui-react": "^5.11.3"
   },
   "devDependencies": {

src/components/Resource/index.tsx

@@ -44,7 +44,7 @@ const Resource = ({ distributions, resource, title } : ResourcePropsType ) => {
                   </div>
                   {dist.data.description && (
                     <div className={'ds-u-measure--wide ds-u-margin-bottom--7'}>
-                      <p className="dc-c-metadata-description ds-u-margin--0" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(dist.data.description) }}/>
+                      <div className="dc-c-metadata-description ds-u-margin--0" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(dist.data.description) }}/>
                     </div>
                   )}
                   {fileFormat === "csv" && <ResourceInformation resource={resource} />}

src/templates/FilteredResource/FilteredResourceBody.jsx

@@ -1,31 +1,23 @@
 import React, { useEffect, useRef } from 'react';
 import qs from 'qs';
-import DOMPurify from 'dompurify';
 import { Link, useNavigate } from 'react-router-dom';
 import SwaggerUI from 'swagger-ui-react';
 import useDatastore from '../../services/useDatastore';
-import {
-  HelpDrawerToggle,
-  Button,
-  Tooltip,
-  Spinner,
-  Accordion,
-  AccordionItem,
-} from '@cmsgov/design-system';
+import {Spinner } from '@cmsgov/design-system';
 import ResourceHeader from '../../components/ResourceHeader';
 import ResourcePreview from '../../components/ResourcePreview';
 import ResourceFooter from '../../components/ResourceFooter';
 import { buildCustomColHeaders } from './functions';
 import QueryBuilder from './QueryBuilder';
 import TransformedDate from '../../components/TransformedDate';
+import FilteredResourceDescription from './FilteredResourceDescription';
 import 'swagger-ui-react/swagger-ui.css';
 
 const FilteredResourceBody = ({
   id,
   dataset,
   distIndex,
   location,
-  apiDocPage,
   additionalParams,
   customColumns,
   columnSettings,
@@ -76,6 +68,8 @@ const FilteredResourceBody = ({
       ? distribution.data.title
       : dataset.title;
 
+  let description = "";
+
   return (
     <section className="ds-l-container ds-u-padding-bottom--3 ds-u-margin-bottom--2">
       {Object.keys(distribution).length && (
@@ -90,12 +84,7 @@ const FilteredResourceBody = ({
             <p className="ds-u-margin--0">Updated <TransformedDate date={dataset.modified} /></p>
           </div>
           <div className={'ds-l-md-col--9'}>
-            <div className={'ds-u-measure--wide ds-u-margin-bottom--7'}>
-              <p
-                className="ds-u-margin-top--0 dc-c-metadata-description"
-                dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(distribution.data.description) }}
-              />
-            </div>
+            <FilteredResourceDescription distribution={distribution} dataset={dataset} />
           </div>
           {resource.columns && Object.keys(resource.schema).length && (
             <QueryBuilder

src/templates/FilteredResource/FilteredResourceDescription.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import DOMPurify from 'dompurify';
+
+const FilteredResourceDescription = ({distribution, dataset}) => {
+  if(!distribution && !dataset) {
+    return null;
+  }
+  let description = "";
+  if(distribution.data && distribution.data.description) {
+    description = distribution.data.description;
+  } else if(dataset.description) {
+    description = dataset.description
+  }
+
+  return (
+    <div className={'ds-u-measure--wide ds-u-margin-bottom--7'}>
+      <div 
+        className="ds-u-margin-top--0 dc-c-metadata-description"
+        dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(description) }}
+      />
+    </div>
+  );
+}
+
+export default FilteredResourceDescription;

src/templates/FilteredResource/filteredresource-description.test.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import FilteredResourceDescription from './FilteredResourceDescription';
+import * as dataset from "../../tests/fixtures/dataset.json";
+import * as distributionWithTitle from "../../tests/fixtures/distributionWithTitle.json"
+
+describe('<FilteredResourceDescription />', () => {
+  test("Renders with distribution description over dataset description", () => {
+    render(
+      <FilteredResourceDescription
+        dataset={dataset}
+        distribution={distributionWithTitle.distribution[0]}
+      />
+    );
+    expect(screen.getByText("Test Custom Description")).toBeInTheDocument();
+  });
+  test("Renders dataset description", () => {
+    render(
+      <FilteredResourceDescription
+        dataset={dataset}
+        distribution={dataset.distribution[0]}
+      />
+    );
+    expect(screen.getByText("The data below contains newly reported, active covered outpatient drugs which were reported by participating drug manufacturers since the last quarterly update of the Drug Products in the Medicaid Drug Rebate Program (MDRP) database.")).toBeInTheDocument();
+  });
+  test("Doesn't render when no dataset or distribution is added", () => {
+    const { container } = render(<FilteredResourceDescription />);
+    expect(container.innerHTML).toBe("");
+  });
+});

src/templates/FilteredResource/index.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import useMetastoreDataset from '../../services/useMetastoreDataset';
 import PageNotFound from '../PageNotFound';
 import FilteredResourceBody from './FilteredResourceBody';
+import withQueryProvider from '../../utilities/QueryProvider/QueryProvider';
 import "./filtered-resource.scss";
 
 const FilteredResource = ({
@@ -80,4 +81,4 @@ const FilteredResource = ({
   );
 };
 
-export default FilteredResource;
+export default withQueryProvider(FilteredResource);