diff --git a/browser/CHANGELOG.md b/browser/CHANGELOG.md index 2c80d913d..ee7e67297 100644 --- a/browser/CHANGELOG.md +++ b/browser/CHANGELOG.md @@ -11,6 +11,7 @@ This changelog covers all three packages, as they are (for now) updated as a who - [#771](https://github.com/atomicdata-dev/atomic-server/issues/771) Tables: Don't paste in multiple rows when focussed on an input - [#758](https://github.com/atomicdata-dev/atomic-server/issues/758) Fix Relation column forms to close when clicking on the searchbox - [#780](https://github.com/atomicdata-dev/atomic-server/issues/780) Use tags in ontology editor to create enum properties. +- [#810](https://github.com/atomicdata-dev/atomic-server/issues/810) Add button to resource selectors to navigate to the selected resource. - Fix server not rebuilding client when files changed. - Added persistent scrollbar to table - Improved table header UX diff --git a/browser/data-browser/src/components/forms/SearchBox/SearchBox.tsx b/browser/data-browser/src/components/forms/SearchBox/SearchBox.tsx index 724c714fb..c73d8768f 100644 --- a/browser/data-browser/src/components/forms/SearchBox/SearchBox.tsx +++ b/browser/data-browser/src/components/forms/SearchBox/SearchBox.tsx @@ -1,12 +1,21 @@ -import { useCallback, useContext, useEffect, useRef, useState } from 'react'; +import { + MouseEventHandler, + useCallback, + useContext, + useEffect, + useRef, + useState, +} from 'react'; import { styled } from 'styled-components'; import { removeCachedSearchResults, useResource, useStore } from '@tomic/react'; import { DropdownPortalContext } from '../../Dropdown/dropdownContext'; import * as RadixPopover from '@radix-ui/react-popover'; import { SearchBoxWindow } from './SearchBoxWindow'; -import { FaSearch, FaTimes } from 'react-icons/fa'; +import { FaExternalLinkAlt, FaSearch, FaTimes } from 'react-icons/fa'; import { ErrorChip } from '../ErrorChip'; import { useValidation } from '../formValidation/useValidation'; +import { constructOpenURL } from '../../../helpers/navigation'; +import { useNavigateWithTransition } from '../../../hooks/useNavigateWithTransition'; interface SearchBoxProps { autoFocus?: boolean; @@ -37,6 +46,7 @@ export function SearchBox({ onClose, }: React.PropsWithChildren): JSX.Element { const store = useStore(); + const navigate = useNavigateWithTransition(); const selectedResource = useResource(value); const triggerRef = useRef(null); const [inputValue, setInputValue] = useState(''); @@ -111,6 +121,21 @@ export function SearchBox({ setError(undefined); }, [setError, required, value, selectedResource]); + const openLink = + !value || selectedResource.error + ? '#' + : constructOpenURL(selectedResource.getSubject()); + + const navigateToSelectedResource: MouseEventHandler = + e => { + e.preventDefault(); + navigate(openLink); + }; + + const title = selectedResource.error + ? selectedResource.getSubject() + : selectedResource.title; + return ( @@ -133,11 +158,7 @@ export function SearchBox({ }} > {value ? ( - - {selectedResource.error - ? selectedResource.getSubject() - : selectedResource.title} - + {title} ) : ( <> @@ -146,13 +167,24 @@ export function SearchBox({ )} {value && ( - onChange(undefined)} - type='button' - > - - + <> + + + + onChange(undefined)} + type='button' + > + + + )} {children} {error && ( diff --git a/browser/data-browser/src/helpers/navigation.tsx b/browser/data-browser/src/helpers/navigation.tsx index 602234622..66f42793a 100644 --- a/browser/data-browser/src/helpers/navigation.tsx +++ b/browser/data-browser/src/helpers/navigation.tsx @@ -1,5 +1,6 @@ import { useSearchParams } from 'react-router-dom'; import { paths } from '../routes/paths'; +import { unknownSubject } from '@tomic/react'; /** Constructs a URL string with a route, a query Parameter and a value */ function constructURL( @@ -17,6 +18,10 @@ export function constructOpenURL( subject: string, extraParams: Record = {}, ): string { + if (subject === unknownSubject) { + return '#'; + } + const url = new URL(subject); if (window.location.origin === url.origin) {