Merge pull request #2568 from LD4P/t2564-quick-fix

Allow user to add URI or literal in Lookup Modal

__tests__/feature/editing/selectFromLookup.test.js

@@ -25,11 +25,18 @@ describe('selecting a value from the lookup modal', () => {
     await waitFor(() => expect(screen.getByLabelText('Instance of (lookup)')))
 
     const input = screen.getByLabelText('Instance of (lookup)')
-    fireEvent.change(input, { target: { value: 'test' } })
+
+    fireEvent.keyUp(input, { target: { value: 'test' } })
 
     expect(input).toHaveValue('test')
 
-    // TODO: Add additional selection testing after https://github.com/LD4P/sinopia_editor/issues/2398
-    // This test is limited by the selectors assigned in AsyncTypeahead and will be replaced
+    // Checks if the Add Literal button is available
+    screen.getByLabelText(/add as new literal/i)
+
+    // Adds URI to search on
+    fireEvent.keyUp(input, { target: { value: 'http://example.com/' } })
+
+    // Checks if the  Add URI button is available
+    screen.getByLabelText(/add as new uri/i)
   })
 })

src/components/editor/property/LookupWithMultipleAuthorities.jsx

@@ -11,6 +11,7 @@ import { newUriValue, newLiteralValue } from 'utilities/valueFactory'
 import { addProperty } from 'actions/resources'
 import { hideModal } from 'actions/modals'
 import { selectNormValues } from 'selectors/resources'
+import { isValidURI } from 'utilities/Utilities'
 
 import RenderLookupContext from './RenderLookupContext'
 import Tab from '../Tab'
@@ -71,6 +72,25 @@ const LookupWithMultipleAuthorities = (props) => {
     })
   }, [query, allAuthorities, getLookupResults])
 
+  const addUriOrLiteral = () => {
+    if (!query) return
+    const item = {}
+    let typeOf = 'Literal'
+    if (isValidURI(query)) {
+      item.uri = query
+      item.label = query
+      typeOf = 'URI'
+    } else {
+      item.content = query
+    }
+    const ariaLabel = `Add as new ${typeOf}`
+    return (<button onClick={() => selectionChanged(item)}
+                    aria-label={ariaLabel}
+                    className="btn search-result">
+      <strong>New {typeOf}:</strong> {query}</button>
+    )
+  }
+
   const selectionChanged = (item) => {
     dispatch(hideModal())
     const newProperty = { ...props.property, values }
@@ -167,6 +187,7 @@ const LookupWithMultipleAuthorities = (props) => {
               <label htmlFor="search">{props.propertyTemplate.label}</label>
               <input id="search" type="search" className="form-control"
                      onKeyUp={(e) => setQuery(e.target.value)}></input>
+              {addUriOrLiteral()}
             </div>
 
             <button type="button" className="close" onClick={close} aria-label="Close">