issue RockefellerArchiveCenter#732: included some updates and added …

…new env variable to make search refinement option configurable per code input
ulsdevteam · Oct 1, 2024 · 5b91636 · 5b91636
1 parent 6d4c559
commit 5b91636
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 29 deletions.
diff --git a/.env b/.env
@@ -5,4 +5,5 @@ REACT_APP_MINIMAP_KEY=DIMESMinimapIntro
 REACT_APP_S3_BASEURL=https://iiif.rockarch.org
 REACT_APP_CAPTCHA_SITE_KEY=6LdQiSk
 REACT_APP_ENABLE_READING_ROOM_SELECT=
-REACT_APP_DUPLICATION_REQUEST_LIMIT=20
+REACT_APP_DUPLICATION_REQUEST_LIMIT=20
+REACT_APP_REFINE_SEARCH=True
diff --git a/.env.deploy b/.env.deploy
@@ -5,4 +5,5 @@ REACT_APP_MINIMAP_KEY=DIMESMinimapIntro
 REACT_APP_S3_BASEURL=${AWS_BUCKET_BASEURL}
 REACT_APP_CAPTCHA_SITE_KEY=${CAPTCHA_SITE_KEY}
 REACT_APP_ENABLE_READING_ROOM_SELECT=${ENABLE_READING_ROOM_SELECT}
-REACT_APP_DUPLICATION_REQUEST_LIMIT=${DUPLICATION_REQUEST_LIMIT}
+REACT_APP_DUPLICATION_REQUEST_LIMIT=${DUPLICATION_REQUEST_LIMIT}
+REACT_APP_REFINE_SEARCH=${REFINE_SEARCH}
diff --git a/src/components/RecordsDetail/index.js b/src/components/RecordsDetail/index.js
@@ -137,6 +137,24 @@ const PanelTextSection = ({ params, text, title }) => {
     (null)
 )}
 
+const RefineSearchSection = ({ refinable, params, title }) => {
+  const curr_category = params && params.category ? params.category : ""
+  return (
+    (refinable && refinable.toLowerCase() === 'true') ?
+    (<form className ='refine-search-form' onSubmit="return false;">
+        <input type="hidden" name="category" value={curr_category} />
+        <input type="hidden" name="limit" value={params.limit || '40'}/>
+        <label for="query" className='refine-search-label'>{title}</label>
+        <input className='refine-search-input'
+               type='search' 
+               id="query"
+               name="query"
+               placeholder={params.query}
+               maxLength={255}
+               size={60}/>     
+    </form> ) : (null)
+    )}
+
 const RecordsDetail = props => {
 
   var [isSaved, setIsSaved] = useState(() => {
@@ -155,17 +173,12 @@ const RecordsDetail = props => {
   const searchUrl = (
     props.params && props.params.query ? appendParams('/search/', props.params) : '/'
   )
-
+  
   /** Parses an item's identifier from its URI */
   const identifier = (
     props.item.uri && props.item.uri.split('/')[props.item.uri.split('/').length - 1]
   )
 
-   /** Retrieve current search params for users to refine a query based on initial search results */
-   const curr_search= new URLSearchParams(window.location.search);
-   const curr_query =  curr_search.get("query") 
-   const curr_category=  curr_search.get("category") ? curr_search.get("category"): ""
-
   /** Returns a citation string */
   const dates = props.item.dates && props.item.dates.map(d => d.expression).join(', ')
   const citation = (
@@ -181,8 +194,6 @@ const RecordsDetail = props => {
     setCitationCopied(true)
     setTimeout(() => {setCitationCopied(false)}, '6000')
   }
-
-
   return (
   <div className={classnames('records__detail', {'hidden': props.isContentShown})}>
     {props.isDesktop ? <Button
@@ -193,18 +204,14 @@ const RecordsDetail = props => {
       label={t({ comment: 'About minimap message', message: 'about minimap' })}
     /> : null
     }
-        <form className ='refine-search-form' >
-        <input type="hidden" name="category" value={curr_category} />
-        <input type="hidden" name="limit" value="40" />
-        <label for="query" className='refine-search-label'>Refining Search:</label>
-        <input className='refine-search-input'
-               type='text' 
-               id="query"
-               name="query"
-               placeholder={curr_query || ''}
-               maxLength={255}
-               size={60}/>
-    </form>
+    <RefineSearchSection
+      refinable={process.env.REACT_APP_REFINE_SEARCH}
+      params={props.params}
+      title={t({
+        comment: 'Placeholder for search refinement textbox',
+        message: 'Refining search...'
+      })}
+    />
     <nav className='records__nav'>
       <a href={searchUrl} className='btn btn--sm btn--gray'>
         <Trans comment='Message to go back to previous search'>  

diff --git a/src/styles/components/_records-detail.scss b/src/styles/components/_records-detail.scss
@@ -74,25 +74,32 @@
   font-weight: $font-weight-normal;
 }
 
-.subquery-search-form {
+// style for search refinement on the search results page
+.refine-search-form {
   position: relative;
-  width: 150px;
+  width: 200px;
   padding-top: 20px;
 }
 
-.subquery-search-input {
-  padding: 14px;
+.refine-search-input {
+  padding: 10px;
   font-family: inherit;
   color: inherit;
   font-size: inherit;
-  height: 20px;
+  height: 35px;
   width: 146px;
   background-color: unset;
-  border-radius: 3px;
+  border-radius: 2px;
   border: 1px solid $silver-grey;
 }
 
-.subquery-search-label {
+.refine-search-label {
   display: inline-block;
   font-weight: bold;
+}
+
+.refine-search-btn {
+  height: 35px;
+  padding: 5px;
+  min-width: unset;
 }