Filtered resource description fallback (#197)

* Remove React Text Truncate package
* Render dist.description in div instead of p tag
* Render filtered resource with queryprovider
* Show dataset description if distribution one doesn't exist
* Switch dataset description to load in div instead of p
* Update to 3.1.5

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@civicactions/cmsds-open-data-components",
-  "version": "3.1.4",
+  "version": "3.1.5",
   "description": "Components for the open data catalog frontend using CMS Design System",
   "main": "dist/main.js",
   "source": "src/index.ts",
@@ -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/Dataset/index.tsx

@@ -145,7 +145,7 @@ const Dataset = ({
             </div>
             <div className={'ds-l-md-col--9'}>
               <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(dataset.description) }}/>
+                <div className="dc-c-metadata-description ds-u-margin--0" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(dataset.description) }}/>
               </div>
             </div>
           </div>

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,
@@ -90,12 +82,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);