#810 Add goto button to searchbox

Author: Polleps

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

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<SearchBoxProps>): JSX.Element {
   const store = useStore();
+  const navigate = useNavigateWithTransition();
   const selectedResource = useResource(value);
   const triggerRef = useRef<HTMLButtonElement>(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<HTMLAnchorElement> =
+    e => {
+      e.preventDefault();
+      navigate(openLink);
+    };
+
+  const title = selectedResource.error
+    ? selectedResource.getSubject()
+    : selectedResource.title;
+
   return (
     <RadixPopover.Root open={open}>
       <RadixPopover.Anchor>
@@ -133,11 +158,7 @@ export function SearchBox({
             }}
           >
             {value ? (
-              <ResourceTitle>
-                {selectedResource.error
-                  ? selectedResource.getSubject()
-                  : selectedResource.title}
-              </ResourceTitle>
+              <ResourceTitle>{title}</ResourceTitle>
             ) : (
               <>
                 <FaSearch />
@@ -146,13 +167,24 @@ export function SearchBox({
             )}
           </TriggerButton>
           {value && (
-            <SearchBoxButton
-              title='clear'
-              onClick={() => onChange(undefined)}
-              type='button'
-            >
-              <FaTimes />
-            </SearchBoxButton>
+            <>
+              <SearchBoxButton
+                as='a'
+                href={openLink}
+                title={`go to ${title}`}
+                onClick={navigateToSelectedResource}
+                type='button'
+              >
+                <FaExternalLinkAlt />
+              </SearchBoxButton>
+              <SearchBoxButton
+                title='clear'
+                onClick={() => onChange(undefined)}
+                type='button'
+              >
+                <FaTimes />
+              </SearchBoxButton>
+            </>
           )}
           {children}
           {error && (

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, string> = {},
 ): string {
+  if (subject === unknownSubject) {
+    return '#';
+  }
+
   const url = new URL(subject);
 
   if (window.location.origin === url.origin) {