Allow direct resource picking in file picker #968

atomicdata-dev · Sep 12, 2024 · 2ba155e · 2ba155e
1 parent fffd590
commit 2ba155e
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 5 deletions.
diff --git a/browser/CHANGELOG.md b/browser/CHANGELOG.md
@@ -7,6 +7,7 @@ This changelog covers all five packages, as they are (for now) updated as a whol
 ### Atomic Browser
 
 - [#952](https://github.com/atomicdata-dev/atomic-server/issues/952) Add templates containing pre made ontologies and resources.
+- [#968](https://github.com/atomicdata-dev/atomic-server/issues/968) Allow users to pick files by entering a subject into the file picker search bar.
 
 ### @tomic/lib
 

diff --git a/browser/data-browser/src/components/forms/FilePicker/FilePickerDialog.tsx b/browser/data-browser/src/components/forms/FilePicker/FilePickerDialog.tsx
@@ -8,7 +8,7 @@ import {
 } from '../../Dialog';
 import { InputStyled, InputWrapper } from '../InputStyles';
 import { FaPlus, FaSearch } from 'react-icons/fa';
-import { core, server, useServerSearch } from '@tomic/react';
+import { Client, core, server, useServerSearch } from '@tomic/react';
 import { styled } from 'styled-components';
 import { FilePickerItem } from './FilePickerItem';
 import { Button } from '../../Button';
@@ -44,6 +44,7 @@ export function FilePickerDialog({
   );
 
   const [query, setQuery] = useState('');
+  const [queryIsURL, setQueryIsURL] = useState(false);
 
   const { results } = useServerSearch(query, {
     filters: {
@@ -53,6 +54,8 @@ export function FilePickerDialog({
     parents: [drive],
   });
 
+  const shownResults = queryIsURL ? [query] : results;
+
   const handleResourcePicked = (subject: string) => {
     onResourcePicked(subject);
     closeDialog(true);
@@ -67,10 +70,20 @@ export function FilePickerDialog({
     }
   };
 
+  const updateQuery = (value: string) => {
+    if (Client.isValidSubject(value)) {
+      setQueryIsURL(true);
+      setQuery(value);
+    } else {
+      setQueryIsURL(false);
+      setQuery(value);
+    }
+  };
+
   useEffect(() => {
     if (show) {
       showDialog();
-      setQuery('');
+      updateQuery('');
     }
   }, [show, showDialog]);
 
@@ -84,9 +97,9 @@ export function FilePickerDialog({
                 <FaSearch />
                 <InputStyled
                   type='search'
-                  placeholder='Search...'
+                  placeholder='Search or enter a URL...'
                   value={query}
-                  onChange={e => setQuery(e.target.value)}
+                  onChange={e => updateQuery(e.target.value)}
                 />
               </InputWrapper>
               {!noUpload && (
@@ -104,7 +117,7 @@ export function FilePickerDialog({
             </Row>
           </DialogTitle>
           <StyledDialogContent>
-            {results.map(subject => (
+            {shownResults.map(subject => (
               <FilePickerItem
                 allowedMimes={allowedMimes}
                 subject={subject}

diff --git a/browser/data-browser/src/components/forms/FilePicker/FilePickerItem.tsx b/browser/data-browser/src/components/forms/FilePicker/FilePickerItem.tsx
@@ -18,6 +18,15 @@ export function FilePickerItem({
 
   const isAllowed = allowedMimes?.has(resource.props.mimetype ?? '') ?? true;
 
+  if (resource.error) {
+    return (
+      <ItemWrapper disabled>
+        <ItemCard></ItemCard>
+        <span>Resource not found</span>
+      </ItemWrapper>
+    );
+  }
+
   if (resource.loading) {
     return <div>loading</div>;
   }