Add import context menu, allows importing anywhere

Importer to context menu with e2e test

Author: joepio

CHANGELOG.md

@@ -12,6 +12,7 @@ This changelog covers all three packages, as they are (for now) updated as a who
 - Add new file preview types to the folder grid view.
 - Fix Dialogue form #308
 - Refactor search, escape query strings for Tantivy
+- Add `import` context menu, allows importing anywhere
 
 ### @tomic/react
 
@@ -25,6 +26,7 @@ This changelog covers all three packages, as they are (for now) updated as a who
 - Add `store.preloadClassesAndProperties` and remove `urls.properties.getAll` and `urls.classes.getAll`. This enables using `atomic-data-browser` without relying on `atomicdata.dev` being available.
 - Fix Race condition of `store.getResourceAsync` #309
 - Add `buildSearchSubject` in `search.ts` which allows you to build full text search queries to send to Atomic-Server.
+- Add `importJSONADString` function, allowing you to import resources from external sources.
 
 ## v0.35.0
 

data-browser/src/components/NewInstanceButton/useDefaultNewInstanceHandler.tsx

@@ -56,13 +56,6 @@ export function useDefaultNewInstanceHandler(klass: string, parent?: string) {
           break;
         }
 
-        case classes.importer: {
-          createResourceAndNavigate('importer', {
-            [properties.isA]: [classes.importer],
-          });
-          break;
-        }
-
         case classes.drive: {
           const agent = store.getAgent();
 

data-browser/src/components/ResourceContextMenu/index.tsx

@@ -7,6 +7,7 @@ import {
   constructOpenURL,
   versionsURL,
   shareURL,
+  importerURL,
 } from '../../helpers/navigation';
 import { DIVIDER, DropdownMenu, isItem, Item } from '../Dropdown';
 import toast from 'react-hot-toast';
@@ -16,6 +17,7 @@ import { DropdownTriggerRenderFunction } from '../Dropdown/DropdownTrigger';
 import { buildDefaultTrigger } from '../Dropdown/DefaultTrigger';
 import {
   FaClock,
+  FaDownload,
   FaEdit,
   FaEllipsisV,
   FaRedo,
@@ -144,6 +146,13 @@ function ResourceContextMenu({
       helper: 'Show the versions of this resource',
       onClick: () => navigate(versionsURL(subject, store.getServerUrl())),
     },
+    {
+      id: 'import',
+      icon: <FaDownload />,
+      label: 'import',
+      helper: 'Import Atomic Data to this resource',
+      onClick: () => navigate(importerURL(subject)),
+    },
   ];
 
   const filteredItems = hide

data-browser/src/components/forms/Field.tsx

@@ -74,7 +74,7 @@ function Field({
   );
 }
 
-const FieldLabel = styled.label`
+export const FieldLabel = styled.label`
   text-transform: capitalize;
   display: inline-flex;
   gap: 0.2rem;

data-browser/src/components/forms/InputStyles.tsx

@@ -81,6 +81,8 @@ export const InputStyled = styled.input`
 
 export const TextAreaStyled = styled.textarea`
   ${inputStyle}
+  min-height: 5rem;
+  height: unset;
 `;
 
 export const ErrMessage = styled.div`

data-browser/src/helpers/navigation.tsx

@@ -97,6 +97,10 @@ export function pathToURL(path: string): string {
   return window.location.origin + path;
 }
 
+export function importerURL(subject: string): string {
+  return constructURL(paths.import, { subject });
+}
+
 /**
  * Constructs the URL for the `all-versions` endpoint. Assumes the current URL
  * supports that endpoint

data-browser/src/routes/NewRoute.tsx

@@ -21,21 +21,32 @@ import { getIconForClass } from '../views/FolderPage/iconMap';
 import { NewFormFullPage } from '../components/forms/NewForm/NewFormPage';
 
 /** Start page for instantiating a new Resource from some Class */
-function New(): JSX.Element {
+function NewRoute(): JSX.Element {
   const [classSubject] = useQueryString('classSubject');
+
+  return (
+    <ContainerNarrow>
+      {classSubject ? (
+        <NewFormFullPage classSubject={classSubject.toString()} />
+      ) : (
+        <NewResourceSelector />
+      )}
+    </ContainerNarrow>
+  );
+}
+
+function NewResourceSelector() {
   const [parentSubject] = useQueryString('parentSubject');
-  // For selecting a class
+  const { drive } = useSettings();
+  const calculatedParent = parentSubject || drive;
+  const parentResource = useResource(calculatedParent);
+  const [error, setError] = useState<Error | undefined>(undefined);
   const [classInputValue, setClassInputValue] = useState<string | undefined>(
     undefined,
   );
-  const [error, setError] = useState<Error | undefined>(undefined);
-  const navigate = useNavigate();
   const classFull = useResource(classInputValue);
   const [className] = useString(classFull, urls.properties.shortname);
-  const { drive } = useSettings();
-
-  const calculatedParent = parentSubject || drive;
-  const parentResource = useResource(calculatedParent);
+  const navigate = useNavigate();
 
   const buttons = [
     urls.classes.folder,
@@ -44,7 +55,6 @@ function New(): JSX.Element {
     urls.classes.bookmark,
     urls.classes.class,
     urls.classes.property,
-    urls.classes.importer,
   ];
 
   function handleClassSet(e) {
@@ -70,52 +80,46 @@ function New(): JSX.Element {
   );
 
   return (
-    <ContainerNarrow>
-      {classSubject ? (
-        <NewFormFullPage classSubject={classSubject.toString()} />
-      ) : (
-        <StyledForm onSubmit={handleClassSet}>
-          <h1>
-            Create new resource{' '}
-            {parentSubject && (
-              <>
-                {`under `}
-                <ResourceInline subject={parentSubject} />
-              </>
-            )}
-          </h1>
-          <div>
-            <ResourceSelector
-              setSubject={setClassInputValue}
-              value={classInputValue}
-              error={error}
-              setError={setError}
-              classType={urls.classes.class}
-            />
-          </div>
-          <Row wrapItems>
-            {classInputValue && (
-              <Button onClick={handleClassSet}>new {className}</Button>
-            )}
-            {!classInputValue && (
-              <>
-                {buttons.map(classType => (
-                  <WrappedButton
-                    key={classType}
-                    classType={classType}
-                    parent={calculatedParent}
-                  />
-                ))}
-              </>
-            )}
-          </Row>
-          <FileDropzoneInput
-            parentResource={parentResource}
-            onFilesUploaded={onUploadComplete}
-          />
-        </StyledForm>
-      )}
-    </ContainerNarrow>
+    <StyledForm onSubmit={handleClassSet}>
+      <h1>
+        Create new resource{' '}
+        {parentSubject && (
+          <>
+            {`under `}
+            <ResourceInline subject={parentSubject} />
+          </>
+        )}
+      </h1>
+      <div>
+        <ResourceSelector
+          setSubject={setClassInputValue}
+          value={classInputValue}
+          error={error}
+          setError={setError}
+          classType={urls.classes.class}
+        />
+      </div>
+      <Row wrapItems>
+        {classInputValue && (
+          <Button onClick={handleClassSet}>new {className}</Button>
+        )}
+        {!classInputValue && (
+          <>
+            {buttons.map(classType => (
+              <WrappedButton
+                key={classType}
+                classType={classType}
+                parent={calculatedParent}
+              />
+            ))}
+          </>
+        )}
+      </Row>
+      <FileDropzoneInput
+        parentResource={parentResource}
+        onFilesUploaded={onUploadComplete}
+      />
+    </StyledForm>
   );
 }
 
@@ -125,7 +129,7 @@ const StyledForm = styled.form`
   gap: ${({ theme }) => theme.margin}rem;
 `;
 
-export default New;
+export default NewRoute;
 
 interface WrappedButtonProps {
   classType: string;

data-browser/src/routes/Routes.tsx

@@ -4,7 +4,7 @@ import { Route, Routes } from 'react-router-dom';
 
 import Show from './ShowRoute';
 import { Search } from './SearchRoute';
-import New from './NewRoute';
+import NewRoute from './NewRoute';
 import { SettingsTheme } from './SettingsTheme';
 import { Edit } from './EditRoute';
 import Data from './DataRoute';
@@ -17,6 +17,7 @@ import { paths } from './paths';
 import ResourcePage from '../views/ResourcePage';
 import { ShareRoute } from './ShareRoute';
 import { Sandbox } from './Sandbox';
+import { ImporterPage } from '../views/ImporterPage';
 
 const homeURL = window.location.origin;
 
@@ -31,13 +32,14 @@ const isDev = import.meta.env.MODE === 'development';
 export function AppRoutes(): JSX.Element {
   return (
     <Routes>
-      <Route path={paths.new} element={<New />} />
+      <Route path={paths.new} element={<NewRoute />} />
       <Route path={paths.themeSettings} element={<SettingsTheme />} />
       <Route path={paths.agentSettings} element={<SettingsAgent />} />
       <Route path={paths.serverSettings} element={<SettingsServer />} />
       <Route path={paths.shortcuts} element={<Shortcuts />} />
       <Route path={paths.data} element={<Data />} />
       <Route path={paths.edit} element={<Edit />} />
+      <Route path={paths.import} element={<ImporterPage />} />
       <Route path={paths.share} element={<ShareRoute />} />
       <Route path={paths.show} element={<Show />} />
       <Route path={paths.about} element={<About />} />

data-browser/src/routes/paths.tsx

@@ -10,6 +10,7 @@ export const paths = {
   data: '/app/data',
   edit: '/app/edit',
   about: '/app/about',
+  import: '/app/import',
   allVersions: '/all-versions',
   sandbox: '/sandbox',
   fetchBookmark: '/fetch-bookmark',