Merge pull request #1772 from LD4P/t1693-qa_context

Adds context to QA search results.
LD4P · Nov 19, 2019 · a7d1a7b · a7d1a7b
2 parents 3a326e5 + 039f112
commit a7d1a7b
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 23 deletions.
diff --git a/__tests__/components/search/QASearchResults.test.js b/__tests__/components/search/QASearchResults.test.js
@@ -67,7 +67,7 @@ describe('<QASearchResults />', () => {
           {
             property: 'Contributor',
             values: [
-              'Bennett, Arnold,1867-1931.',
+              'Bennett, Arnold.',
             ],
             selectable: false,
             drillable: false,
@@ -84,12 +84,15 @@ describe('<QASearchResults />', () => {
     // Headers
     expect(getByText('Label')).toBeInTheDocument()
     expect(getByText('Classes')).toBeInTheDocument()
+    expect(getByText('Context')).toBeInTheDocument()
 
     // Rows
     expect(getByText('These twain')).toBeInTheDocument()
     expect(getByText('Those twain')).toBeInTheDocument()
     expect(getByText('http://id.loc.gov/ontologies/bflc/Hub')).toBeInTheDocument()
     expect(getAllByText('http://id.loc.gov/ontologies/bibframe/Work').length).toBe(2)
+    expect(getAllByText('Contributor', { selector: 'strong' }).length).toBe(2)
+    expect(getByText(/Bennett, Arnold,1867-1931./)).toBeInTheDocument()
     expect(getAllByTitle('Copy').length).toBe(2)
   })
 

diff --git a/src/components/search/QASearchResults.jsx b/src/components/search/QASearchResults.jsx
@@ -43,12 +43,17 @@ const QASearchResults = (props) => {
   const tableData = useMemo(() => searchResults.map((result) => {
     // Discogs returns a context that is not an array
     const types = []
+    const contexts = {}
     if (result.context) {
       if (Array.isArray(result.context)) {
         const classContext = result.context.find(context => context.property === 'Type')
         if (classContext) {
           types.push(...classContext.values)
         }
+        const excludeProperties = ['Type', 'Title', 'Image URL']
+        result.context.forEach((context) => {
+          if (!excludeProperties.includes(context.property)) contexts[context.property] = context.values
+        })
       } else if (Array.isArray(result.context.Type)) {
         types.push(...result.context.Type)
       }
@@ -59,6 +64,7 @@ const QASearchResults = (props) => {
       uri: result.uri,
       id: result.id,
       types,
+      contexts,
     }
   }),
   [searchResults])
@@ -75,26 +81,29 @@ const QASearchResults = (props) => {
     setResourceTemplateId(resourceTemplateId)
   }
 
-  function typesFormatter(types) {
-    return (
-      <ul className="list-unstyled">
-        {types.map(type => <li key={type}>{type}</li>)}
-      </ul>
-    )
-  }
+  const typesFormatter = types => (
+    <ul className="list-unstyled">
+      {types.map(type => <li key={type}>{type}</li>)}
+    </ul>
+  )
 
-  function actionFormatter(uri, id) {
-    return (
-      <div>
-        <button type="button"
-                className="btn btn-link"
-                onClick={() => handleCopy(uri, id)}
-                title="Copy"
-                aria-label="Copy this resource">
-          <FontAwesomeIcon icon={faCopy} size="2x" />
-        </button>
-      </div>
-    )
+  const actionFormatter = (uri, id) => (
+    <div>
+      <button type="button"
+              className="btn btn-link"
+              onClick={() => handleCopy(uri, id)}
+              title="Copy"
+              aria-label="Copy this resource">
+        <FontAwesomeIcon icon={faCopy} size="2x" />
+      </button>
+    </div>
+  )
+
+  const contextFormatter = (contexts) => {
+    const contextItems = Object.entries(contexts).map(([property, values]) => (
+      <li key={property}><strong>{property}</strong>: {values}</li>
+    ))
+    return (<ul className="list-unstyled">{contextItems}</ul>)
   }
 
   const generateRows = () => {
@@ -103,6 +112,7 @@ const QASearchResults = (props) => {
       rows.push(<tr key={row.uri}>
         <td>{ row.label }</td>
         <td>{typesFormatter(row.types)}</td>
+        <td>{contextFormatter(row.contexts)}</td>
         <td>{actionFormatter(row.uri, row.id)}</td>
       </tr>)
     })
@@ -120,13 +130,16 @@ const QASearchResults = (props) => {
         <table className="table table-bordered">
           <thead>
             <tr>
-              <th className="search-header" style={{ width: '45%' }}>
+              <th className="search-header" style={{ width: '40%' }}>
                 Label
               </th>
-              <th className="search-header" style={{ width: '40%' }}>
+              <th className="search-header" style={{ width: '25%' }}>
                 Classes
               </th>
-              <th className="search-header" style={{ width: '15%' }}/>
+              <th className="search-header" style={{ width: '25%' }}>
+                Context
+              </th>
+              <th className="search-header" style={{ width: '10%' }}/>
             </tr>
           </thead>
           <tbody>