OpenConceptLab/ocl_issues#809 | search results navigate away -> back …

…to maintain layout actions
OpenConceptLab · Jun 30, 2021 · b732f5a · b732f5a
1 parent 46df36c
commit b732f5a
Show file tree

Hide file tree

Showing 10 changed files with 91 additions and 38 deletions.
diff --git a/src/components/collections/Collection.jsx b/src/components/collections/Collection.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Link } from 'react-router-dom'
 import { Loyalty as LoyaltyIcon } from '@material-ui/icons'
 import { merge, get, isEmpty, map, isArray, reject, includes, keys } from 'lodash'
 import { DARKGRAY } from '../../common/constants';
@@ -11,22 +10,27 @@ const DEFAULT_FIELDS = [{collection_type: 'Collection Type'}]
 const LABEL_FIELDS = ['id', 'short_code', 'name', 'owner']
 
 const Collection = props => {
-  const { summary, viewFields } = props;
+  const { summary, viewFields, history, currentLayoutURL, url } = props;
   const hasSummary = !isEmpty(summary);
   const mainClass = 'no-left-padding ' + hasSummary ? 'col-sm-9': 'col-sm-12';
   const customFields = isArray(viewFields) ? reject(viewFields, fieldConfig => includes(LABEL_FIELDS, keys(fieldConfig)[0])) : [];
   const fields = isEmpty(customFields) ? DEFAULT_FIELDS : customFields;
+  const navigateTo = () => {
+    if(currentLayoutURL)
+      history.replace(currentLayoutURL)
+    history.push(url)
+  }
 
   return (
     <div className='col-sm-12' style={merge({paddingTop: '10px', paddingLeft: 0, paddingRight: 0}, get(props, 'style', {}))}>
       <div className={mainClass}>
-        <Link to={props.url} style={{display: 'inline-block'}}>
+        <span onClick={navigateTo} style={{display: 'inline-block', cursor: 'pointer'}}>
           <ResourceLabel
             owner={props.owner} id={props.id} name={props.name}
             icon={<LoyaltyIcon fontSize='small' style={{width: '10pt', color: DARKGRAY}}/>}
             colorClass="collection-bg"
           />
-        </Link>
+        </span>
         <div className='col-sm-12 no-side-padding resource-attributes'>
           {
             map(fields, field => {

diff --git a/src/components/concepts/Concept.jsx b/src/components/concepts/Concept.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Link } from 'react-router-dom'
 import { LocalOffer as LocalOfferIcon } from '@material-ui/icons'
 import { merge, get, isArray, reject, keys, isEmpty, includes, map } from 'lodash'
 import { DARKGRAY } from '../../common/constants';
@@ -10,18 +9,24 @@ const DEFAULT_FIELDS = [{concept_class: 'Class'}, {datatype: 'Datatype'}]
 const LABEL_FIELDS = ['id', 'display_name', 'name', 'owner', 'source']
 
 const Concept = props => {
-  const { viewFields } = props;
+  const { viewFields, history, currentLayoutURL, url } = props;
   const customFields = isArray(viewFields) ? reject(viewFields, fieldConfig => includes(LABEL_FIELDS, keys(fieldConfig)[0])) : [];
   const fields = isEmpty(customFields) ? DEFAULT_FIELDS : customFields;
 
+  const navigateTo = () => {
+    if(currentLayoutURL)
+      history.replace(currentLayoutURL)
+    history.push(url)
+  }
+
   return (
     <div className='col-sm-12' style={merge({paddingTop: '10px', paddingLeft: 0, paddingRight: 0}, get(props, 'style', {}))}>
-      <Link to={props.url} style={{display: 'inline-block'}}>
+      <span onClick={navigateTo} style={{display: 'inline-block', cursor: 'pointer'}}>
         <ResourceLabel
           owner={props.owner} parent={props.source} id={props.display_name} name={props.id}
           icon={<LocalOfferIcon fontSize='small' style={{width: '10pt', color: DARKGRAY}}/>}
         />
-      </Link>
+      </span>
       <div className='col-sm-11 no-side-padding resource-attributes'>
         {
           map(fields, (field, i) => {

diff --git a/src/components/mappings/Mapping.jsx b/src/components/mappings/Mapping.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 import {
   Link as LinkIcon,
 } from '@material-ui/icons'
@@ -17,7 +16,7 @@ const LABEL_STYLES = {
 };
 
 const Mapping = props => {
-  const { viewFields } = props;
+  const { viewFields, history, currentLayoutURL, url } = props;
   const customFields = isArray(viewFields) ? viewFields : [];
 
   const isFromConceptInContext = props.conceptContext === props.from_concept_code;
@@ -28,15 +27,20 @@ const Mapping = props => {
   const toConceptLabel = isToConceptInContext ?
                          <ThisConceptLabel /> :
                          <ToConceptLabel {...props} />;
+  const navigateTo = () => {
+    if(currentLayoutURL)
+      history.replace(currentLayoutURL)
+    history.push(url)
+  }
 
   return (
     <div className='col-sm-12' style={merge({paddingTop: '10px', paddingLeft: 0, paddingRight: 0}, get(props, 'style', {}))}>
-      <Link to={props.url} style={{display: 'inline-block'}}>
+      <span onClick={navigateTo} style={{display: 'inline-block', cursor: 'pointer'}}>
         <ResourceLabel
           owner={props.owner} parent={props.source} id={props.id} name={props.map_type}
           icon={<LinkIcon fontSize='small' style={{width: '10pt', color: DARKGRAY}}/>}
         />
-      </Link>
+      </span>
       <div className='col-sm-12 no-left-padding' style={{margin: '5px'}}>
         <div className='col-sm-1 no-side-padding' style={LABEL_STYLES}>
           From:

diff --git a/src/components/orgs/Organization.jsx b/src/components/orgs/Organization.jsx
@@ -14,10 +14,16 @@ import LocationLabel from '../common/LocationLabel';
 
 const TAG_ICON_STYLES = {width: '12px', marginRight: '4px', marginTop: '2px'}
 const Organization = props => {
+  const navigateTo = () => {
+    if(props.currentLayoutURL)
+      props.history.replace(props.currentLayoutURL)
+    props.history.push(props.url)
+  }
+
   return (
     <div className='col-sm-12' style={merge({paddingTop: '10px', paddingLeft: 0, paddingRight: 0}, get(props, 'style', {}))}>
       <div className="col-sm-9 no-left-padding">
-        <Link to={props.url} style={{display: 'inline-block'}}>
+        <span onClick={navigateTo} style={{display: 'inline-block', cursor: 'pointer'}}>
           <div className='col-sm-12 no-side-padding'>
             <span className='resource-label ellipsis-text' style={{maxWidth: '100%'}}>
               <span style={{paddingTop: '5px'}}>
@@ -31,7 +37,7 @@ const Organization = props => {
               <span className='ellipsis-text'>{props.name}</span>
             </span>
           </div>
-        </Link>
+        </span>
         <div className='col-sm-12 no-side-padding resource-attributes'>
           {
             props.location &&

diff --git a/src/components/search/Results.jsx b/src/components/search/Results.jsx
@@ -9,7 +9,7 @@ import InfiniteScroll from 'react-infinite-scroll-component';
 const Results = props => {
   const {
     resource, results, viewFields, onPageChange, onCreateSimilarClick, onCreateMappingClick,
-    onLoadMore, isInfinite, noControls, onReferencesDelete
+    onLoadMore, isInfinite, noControls, onReferencesDelete, history, currentLayoutURL
   } = props;
   const items = get(results, 'items', [])
   const count = get(items, 'length', 0)
@@ -29,6 +29,7 @@ const Results = props => {
     item => <RowComponent
               key={item.uuid || item.id} onSelect={onSelectChange}
               item={item} resource={resource} viewFields={viewFields}
+              history={history} currentLayoutURL={currentLayoutURL}
     />
   )
   const infiniteResults = () => (

diff --git a/src/components/search/ResultsTable.jsx b/src/components/search/ResultsTable.jsx
@@ -343,7 +343,7 @@ const LocalesTable = ({ locales, isDescription }) => {
 const ExpandibleRow = props => {
   const {
     item, resourceDefinition, resource, isSelected, isSelectable, onPinCreate, onPinDelete, pins,
-    nested, showPin, columns, hapi, fhir
+    nested, showPin, columns, hapi, fhir, history, currentLayoutURL
   } = props;
   const [details, setDetails] = React.useState(false);
   const [isFetchingMappings, setIsFetchingMappings] = React.useState(true);
@@ -439,13 +439,16 @@ const ExpandibleRow = props => {
       return
     event.stopPropagation();
     event.preventDefault()
+    let url;
     if(fhir) {
       if(hapi)
-        window.location.hash = `/fhir/${resource}/${item.resource.id}`;
+        url = `/fhir/${resource}/${item.resource.id}`;
       else
-        window.location.hash = `/fhir${getOCLFHIRResourceURL(item)}`
-    } else
-      window.location.hash = item.url;
+        url = `/fhir${getOCLFHIRResourceURL(item)}`
+    } else url = item.url;
+
+    history.replace(currentLayoutURL)
+    history.push(url)
   }
 
   const onContextMenu = event => {
@@ -746,7 +749,8 @@ const ResultsTable = (
   {
     resource, results, onPageChange, onSortChange, sortParams,
     onPinCreate, onPinDelete, pins, nested, showPin, essentialColumns, onReferencesDelete,
-    isVersionedObject, onCreateSimilarClick, onCreateMappingClick, viewFields, hapi, fhir
+    isVersionedObject, onCreateSimilarClick, onCreateMappingClick, viewFields, hapi, fhir, history,
+    currentLayoutURL
   }
 ) => {
   const resourceDefinition = RESOURCE_DEFINITIONS[resource];
@@ -903,6 +907,8 @@ const ResultsTable = (
                       columns={columns}
                       hapi={hapi}
                       fhir={fhir}
+                      history={history}
+                      currentLayoutURL={currentLayoutURL}
                     />
                   ))
                 }

diff --git a/src/components/search/RowComponent.jsx b/src/components/search/RowComponent.jsx
@@ -8,22 +8,22 @@ import Collection from '../collections/Collection';
 import Organization from '../orgs/Organization';
 import User from '../users/User';
 
-const RowComponent = ({resource, item, onSelect, viewFields}) => {
+const RowComponent = ({resource, item, onSelect, viewFields, history, currentLayoutURL}) => {
   const isSourceChild = includes(['concepts', 'mappings'], resource);
 
   const getComponent = () => {
     if(resource === 'concepts')
-      return <Concept {...item} viewFields={viewFields} style={{paddingLeft: '10px'}} />;
+      return <Concept {...item} viewFields={viewFields} history={history} currentLayoutURL={currentLayoutURL} style={{paddingLeft: '10px'}} />;
     if(resource === 'mappings')
-      return <Mapping {...item} viewFields={viewFields} style={{paddingLeft: '10px'}} />;
+      return <Mapping {...item} viewFields={viewFields} history={history} currentLayoutURL={currentLayoutURL} style={{paddingLeft: '10px'}} />;
     if(resource === 'sources')
-      return <Source {...item} viewFields={viewFields} style={{paddingLeft: '10px'}} />;
+      return <Source {...item} viewFields={viewFields} history={history} currentLayoutURL={currentLayoutURL} style={{paddingLeft: '10px'}} />;
     if(resource === 'collections')
-      return <Collection {...item} viewFields={viewFields} style={{paddingLeft: '10px'}} />;
+      return <Collection {...item} viewFields={viewFields} history={history} currentLayoutURL={currentLayoutURL} style={{paddingLeft: '10px'}} />;
     if(resource === 'organizations')
-      return <Organization {...item} viewFields={viewFields} style={{paddingLeft: '10px'}} />;
+      return <Organization {...item} viewFields={viewFields} history={history} currentLayoutURL={currentLayoutURL} style={{paddingLeft: '10px'}} />;
     if(resource === 'users')
-      return <User {...item} viewFields={viewFields} style={{paddingLeft: '10px'}} />;
+      return <User {...item} viewFields={viewFields} history={history} currentLayoutURL={currentLayoutURL} style={{paddingLeft: '10px'}} />;
   }
 
   return (

diff --git a/src/components/search/Search.jsx b/src/components/search/Search.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { withRouter } from "react-router";
 import {
   get, set, cloneDeep, merge, forEach, includes, keys, pickBy, size, isEmpty, has, find, isEqual,
   map, omit, isString
@@ -431,12 +432,24 @@ class Search extends React.Component {
     this.setState({isInfinite: !this.state.isInfinite})
   }
 
-  onShareClick = () => {
+  onShareClick = () => copyURL(this.convertURLToFQDN(this.getCurrentLayoutURL()))
+
+  convertURLToFQDN = url => window.location.origin + '/#' + url
+
+  getCurrentLayoutURL() {
     let url = this.props.match.url;
+    let resource = this.state.resource || 'concepts'
+    if(resource === 'organizations')
+      resource = 'orgs'
+    if(this.props.nested && !url.match('/'+resource))
+      url += url.endsWith('/') ? resource : '/' + resource
     url += `?q=${this.state.searchStr || ''}`
     url += `&isTable=${this.state.isTable === true}`
     url += `&page=${this.state.page}`
-    url += `&exactMatch=${this.state.exactMatch}`
+    url += `&exactMatch=${this.state.exactMatch || 'off'}`
+    if(!this.props.nested)
+      url += `&type=${this.state.resource || 'concepts'}`
+
 
     if(this.state.limit !== DEFAULT_LIMIT)
       url += `&limit=${this.state.limit || DEFAULT_LIMIT}`
@@ -449,7 +462,7 @@ class Search extends React.Component {
     if(this.state.updatedSince)
       url += `&updatedSince=${this.state.updatedSince}`
 
-    copyURL(window.location.origin + '/#' + url)
+    return url
   }
 
   getFilterControls() {
@@ -675,6 +688,8 @@ class Search extends React.Component {
                   noControls={noControls}
                   fhir={fhir}
                   hapi={hapi}
+                  history={this.props.history}
+                  currentLayoutURL={this.getCurrentLayoutURL()}
                 /> :
                 <Results
                   resource={resource}
@@ -688,6 +703,8 @@ class Search extends React.Component {
                   isInfinite={isInfinite}
                   onLoadMore={this.loadMore}
                   noControls={noControls}
+                  history={this.props.history}
+                  currentLayoutURL={this.getCurrentLayoutURL()}
                 />
               }
             </div>
@@ -707,4 +724,4 @@ class Search extends React.Component {
   }
 }
 
-export default Search;
+export default withRouter(Search);
diff --git a/src/components/sources/Source.jsx b/src/components/sources/Source.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Link } from 'react-router-dom'
 import {
   List as ListIcon,
 } from '@material-ui/icons'
@@ -13,22 +12,27 @@ const DEFAULT_FIELDS = [{source_type: 'Source Type'}]
 const LABEL_FIELDS = ['id', 'short_code', 'name', 'owner']
 
 const Source = props => {
-  const { summary, viewFields } = props;
+  const { summary, viewFields, history, currentLayoutURL, url } = props;
   const hasSummary = !isEmpty(summary);
   const mainClass = 'no-left-padding ' + hasSummary ? 'col-sm-9': 'col-sm-12';
   const customFields = isArray(viewFields) ? reject(viewFields, fieldConfig => includes(LABEL_FIELDS, keys(fieldConfig)[0])) : [];
   const fields = isEmpty(customFields) ? DEFAULT_FIELDS : customFields;
+  const navigateTo = () => {
+    if(currentLayoutURL)
+      history.replace(currentLayoutURL)
+    history.push(url)
+  }
 
   return (
     <div className='col-sm-12' style={merge({paddingTop: '10px', paddingLeft: 0, paddingRight: 0}, get(props, 'style', {}))}>
       <div className={mainClass}>
-        <Link to={props.url} style={{display: 'inline-block'}}>
+        <span onClick={navigateTo} style={{display: 'inline-block', cursor: 'pointer'}}>
           <ResourceLabel
             owner={props.owner} id={props.id} name={props.name}
             icon={<ListIcon fontSize='small' style={{width: '10pt', color: DARKGRAY}}/>}
             colorClass="source-bg"
           />
-        </Link>
+        </span>
         <div className='col-sm-12 no-side-padding resource-attributes'>
           {
             map(fields, field => {

diff --git a/src/components/users/User.jsx b/src/components/users/User.jsx
@@ -14,10 +14,16 @@ import LocationLabel from '../common/LocationLabel';
 
 const TAG_ICON_STYLES = {width: '12px', marginRight: '4px', marginTop: '2px'}
 const User = props => {
+  const navigateTo = () => {
+    if(props.currentLayoutURL)
+      props.history.replace(props.currentLayoutURL)
+    props.history.push(props.url)
+  }
+
   return (
     <div className='col-sm-12' style={merge({paddingTop: '10px', paddingLeft: 0, paddingRight: 0}, get(props, 'style', {}))}>
       <div className="col-sm-9 no-left-padding">
-        <Link to={props.url} style={{display: 'inline-block'}}>
+        <span onClick={navigateTo} style={{display: 'inline-block', cursor: 'pointer'}}>
           <div className='col-sm-12 no-side-padding'>
             <span className='resource-label ellipsis-text' style={{maxWidth: '100%'}}>
               <span style={{paddingTop: '5px'}}>
@@ -31,7 +37,7 @@ const User = props => {
               <span className='ellipsis-text'>{props.name}</span>
             </span>
           </div>
-        </Link>
+        </span>
         <div className='col-sm-12 no-side-padding resource-attributes'>
           {
             props.company &&