#845 tables and ontologies

Earthfile

@@ -91,7 +91,7 @@ docker-musl:
   SAVE IMAGE --push ${tags}
 
 setup-playwright:
-  FROM mcr.microsoft.com/playwright:v1.38.0-jammy
+  FROM mcr.microsoft.com/playwright:v1.43.1-jammy
   RUN curl -f https://get.pnpm.io/v6.14.js | node - add --global pnpm
   RUN apt update && apt install -y zip
   RUN pnpx playwright install --with-deps

browser/.eslintrc.cjs

@@ -34,7 +34,8 @@ module.exports = {
       'lib/tsconfig.json',
       'cli/tsconfig.json',
       'react/tsconfig.json',
-      'data-browser/tsconfig.json'
+      'data-browser/tsconfig.json',
+      'e2e/tsconfig.json',
     ],
   },
   plugins: ['react', '@typescript-eslint', 'prettier', 'react-hooks', 'jsx-a11y'],

browser/CHANGELOG.md

@@ -1,11 +1,13 @@
 # Changelog
 
-This changelog covers all three packages, as they are (for now) updated as a whole
+This changelog covers all five packages, as they are (for now) updated as a whole
 
 ## Unreleased
 
 ### Atomic Browser
 
+- [#845](https://github.com/atomicdata-dev/atomic-server/issues/845) Add option to create instances and tables from the ontology view.
+- [#845](https://github.com/atomicdata-dev/atomic-server/issues/845) Add default Ontology option to drives.
 - [#841](https://github.com/atomicdata-dev/atomic-server/issues/841) Add better inputs for `Timestamp` and `Date` datatypes.
 - [#842](https://github.com/atomicdata-dev/atomic-server/issues/842) Add media picker for properties with classtype file.
 - [#850](https://github.com/atomicdata-dev/atomic-server/issues/850) Add drag & drop sorting to ResourceArray inputs.
@@ -24,6 +26,7 @@ This changelog covers all three packages, as they are (for now) updated as a who
 - Added `collection.totalPages`.
 - BREAKING CHANGE: Renamed `resource.getCommitsCollection` to `resource.getCommitsCollectionSubject`.
 - BREAKING CHANGE: `resource.getChildrenCollection()` now returns a `Promise<Collection>` instead of a subject.
+- BREAKING CHANGE: `resource.createSubject()` no longer accepts a class name as an argument and defaults to a fully random subject.
 - BREAKING CHANGE: Resource now keeps a reference to store internally, therefore all methods that required you to pass a store have been changed to not require a store.
   These methods are:
   - `resource.canWrite()`

browser/cli/package.json

@@ -23,7 +23,7 @@
     "watch": "tsc --build --watch",
     "start": "pnpm watch",
     "tsc": "tsc --build",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "pnpm exec tsc --noEmit"
   },
   "bin": {
     "ad-generate": "./bin/src/index.js"

browser/data-browser/package.json

@@ -50,7 +50,7 @@
     "@types/react-window": "^1.8.7",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "csstype": "^3.1.0",
-    "gh-pages": "^3.1.0",
+    "gh-pages": "^5.0.0",
     "lint-staged": "^10.5.4",
     "types-wm": "^1.1.0",
     "vite-plugin-pwa": "^0.17.0",
@@ -78,6 +78,6 @@
     "preview": "vite preview",
     "start": "vite",
     "test": "jest",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "pnpm exec tsc --noEmit"
   }
 }

browser/data-browser/src/components/Button.tsx

@@ -79,6 +79,7 @@ export const ButtonClean = styled.button<ButtonPropsStyled>`
   appearance: none;
   background-color: initial;
   -webkit-tap-highlight-color: transparent; /* Remove the tap / click effect on touch devices */
+  user-select: none;
 `;
 
 /** Base button style. You're likely to want to use ButtonMargin in most places */

browser/data-browser/src/components/Details/index.tsx → browser/data-browser/src/components/Details.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren, useCallback, useEffect, useState } from 'react';
 import { styled } from 'styled-components';
 import { FaCaretRight } from 'react-icons/fa';
-import { Collapse } from '../Collapse';
+import { Collapse } from './Collapse';
 
 export interface DetailsProps {
   open?: boolean;

browser/data-browser/src/components/Dialog/waitForActiveDocument.ts

@@ -0,0 +1,17 @@
+/**
+ * Waits for when the document becomes active again after it has been inert.
+ * (Useful for waiting for a dialog to close before navigating to a new page)
+ */
+export function waitForActiveDocument(callback: () => void) {
+  const observer = new MutationObserver(() => {
+    if (!document.body.hasAttribute('inert')) {
+      callback();
+      observer.disconnect();
+    }
+  });
+
+  observer.observe(document.body, {
+    attributes: true,
+    attributeFilter: ['inert'],
+  });
+}

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

@@ -35,11 +35,11 @@ export type MenuItemMinimial = {
   shortcut?: string;
 };
 
-export type Item = typeof DIVIDER | MenuItemMinimial;
+export type DropdownItem = typeof DIVIDER | MenuItemMinimial;
 
 interface DropdownMenuProps {
   /** The list of menu items */
-  items: Item[];
+  items: DropdownItem[];
   trigger: DropdownTriggerRenderFunction;
   /** Enables the keyboard shortcut */
   isMainMenu?: boolean;
@@ -51,7 +51,7 @@ export const isItem = (
 ): item is MenuItemMinimial =>
   typeof item !== 'string' && typeof item?.label === 'string';
 
-const shouldSkip = (item?: Item) => !isItem(item) || item.disabled;
+const shouldSkip = (item?: DropdownItem) => !isItem(item) || item.disabled;
 
 const getAdditionalOffest = (increment: number) =>
   increment === 0 ? 1 : Math.sign(increment);
@@ -62,7 +62,7 @@ const getAdditionalOffest = (increment: number) =>
  * Returns 0 when no suitable index is found.
  */
 const createIndexOffset =
-  (items: Item[]) => (startingPoint: number, offset: number) => {
+  (items: DropdownItem[]) => (startingPoint: number, offset: number) => {
     const findNextAvailable = (
       scopedStartingPoint: number,
       scopedOffset: number,
@@ -84,8 +84,8 @@ const createIndexOffset =
     return findNextAvailable(startingPoint, offset);
   };
 
-function normalizeItems(items: Item[]) {
-  return items.reduce((acc: Item[], current, i) => {
+function normalizeItems(items: DropdownItem[]) {
+  return items.reduce((acc: DropdownItem[], current, i) => {
     // If the item is a divider at the start or end of the list, remove it.
     if ((i === 0 || i === items.length - 1) && !isItem(current)) {
       return acc;
@@ -136,7 +136,6 @@ export function DropdownMenu({
 
   useClickAwayListener([triggerRef, dropdownRef], handleClose, isActive, [
     'click',
-    'mouseout',
   ]);
 
   const normalizedItems = useMemo(() => normalizeItems(items), [items]);
@@ -412,19 +411,27 @@ const MenuItemStyled = styled(Button)<MenuItemStyledProps>`
     p.selected ? p.theme.colors.bg1 : p.theme.colors.bg};
   text-decoration: ${p => (p.selected ? 'underline' : 'none')};
 
+  & svg {
+    color: ${p => p.theme.colors.textLight};
+  }
   &:hover {
     background-color: ${p => p.theme.colors.bg1};
   }
   &:active {
     background-color: ${p => p.theme.colors.bg2};
   }
   &:disabled {
-    color: ${p => p.theme.colors.textLight};
+    color: ${p => p.theme.colors.textLight2};
     cursor: default;
+    background-color: ${p => p.theme.colors.bg};
+
     &:hover {
       cursor: 'default';
     }
-    background-color: ${p => p.theme.colors.bg};
+
+    & svg {
+      color: ${p => p.theme.colors.textLight2};
+    }
   }
 
   svg {

browser/data-browser/src/components/InviteForm.tsx

@@ -26,7 +26,7 @@ interface InviteFormProps {
  */
 export function InviteForm({ target }: InviteFormProps) {
   const store = useStore();
-  const [subject] = useState(() => store.createSubject('invite'));
+  const [subject] = useState(() => store.createSubject());
   const invite = useResource(subject, {
     newResource: true,
   });
@@ -59,7 +59,7 @@ export function InviteForm({ target }: InviteFormProps) {
     return (
       <Card>
         <ResourceField
-          label={'Give edit rights'}
+          label={'Allow edits'}
           propertyURL={server.properties.write}
           resource={invite}
         />
@@ -69,11 +69,11 @@ export function InviteForm({ target }: InviteFormProps) {
           resource={invite}
         />
         <ResourceField
-          label={'How many times this link can be used. No value = no limit.'}
+          label={'Limit Usages (optional)'}
           propertyURL={server.properties.usagesLeft}
           resource={invite}
         />
-        <Button onClick={createInvite}>Create Invite</Button>
+        <Button onClick={createInvite}>Create</Button>
         {err && (
           <p>
             <ErrorLook>{err.message}</ErrorLook>
@@ -84,7 +84,7 @@ export function InviteForm({ target }: InviteFormProps) {
   } else
     return (
       <Card>
-        <p>Invite created and copied to clipboard! Send it to your buddy:</p>
+        <p>Invite created and copied to clipboard! 🚀</p>
         <CodeBlock content={invite.subject} data-test='invite-code' />
       </Card>
     );

browser/data-browser/src/components/ParentPicker/ParentPicker.tsx

@@ -0,0 +1,51 @@
+import { styled } from 'styled-components';
+import { Column } from '../Row';
+import { ParentPickerItem } from './ParentPickerItem';
+import { InputStyled, InputWrapper } from '../forms/InputStyles';
+import { useSettings } from '../../helpers/AppSettings';
+import { FaFolderOpen } from 'react-icons/fa6';
+
+export interface ParentPickerProps {
+  root?: string;
+  value: string | undefined;
+  onChange: (subject: string) => void;
+}
+
+export function ParentPicker({
+  root,
+  value,
+  onChange,
+}: ParentPickerProps): React.JSX.Element {
+  const { drive } = useSettings();
+
+  return (
+    <Column>
+      <InputWrapper hasPrefix>
+        <FaFolderOpen size='1rem' />
+        <InputStyled
+          placeholder='Enter a subject'
+          value={value ?? ''}
+          onChange={e => onChange(e.target.value)}
+        />
+      </InputWrapper>
+      <PickerWrapper aria-label='parent selector'>
+        <ParentPickerItem
+          inialOpen={true}
+          subject={root ?? drive}
+          onClick={onChange}
+          selectedValue={value}
+        />
+      </PickerWrapper>
+    </Column>
+  );
+}
+
+const PickerWrapper = styled.section`
+  background-color: ${p => p.theme.colors.bg};
+  border-radius: ${p => p.theme.radius};
+  border: 1px solid ${p => p.theme.colors.bg2};
+  padding: ${p => p.theme.margin}rem;
+
+  height: 20.5rem;
+  overflow-y: auto;
+`;

browser/data-browser/src/components/ParentPicker/ParentPickerDialog.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react';
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  useDialog,
+} from '../Dialog';
+import { ParentPicker } from './ParentPicker';
+import { Button } from '../Button';
+import { waitForActiveDocument } from '../Dialog/waitForActiveDocument';
+
+interface ParentPickerDialogProps {
+  root?: string;
+  open: boolean;
+  onSelect: (subject: string) => void;
+  onCancel?: () => void;
+  onOpenChange?: (open: boolean) => void;
+  title?: string;
+}
+
+export function ParentPickerDialog({
+  open,
+  root,
+  title,
+  onSelect,
+  onCancel,
+  onOpenChange,
+}: ParentPickerDialogProps): React.JSX.Element {
+  const [selected, setSelected] = useState<string>();
+
+  const [dialogProps, show, close, isOpen] = useDialog({
+    onCancel,
+    bindShow: onOpenChange,
+  });
+
+  const select = () => {
+    if (!selected) return;
+
+    waitForActiveDocument(() => {
+      onSelect(selected);
+    });
+    close(true);
+  };
+
+  useEffect(() => {
+    if (open) {
+      show();
+    } else {
+      close();
+      setSelected(undefined);
+    }
+  }, [open]);
+
+  return (
+    <Dialog {...dialogProps}>
+      {isOpen && (
+        <>
+          <DialogTitle>
+            <h1>{title ?? 'Select a location'}</h1>
+          </DialogTitle>
+          <DialogContent>
+            <ParentPicker root={root} value={selected} onChange={setSelected} />
+          </DialogContent>
+          <DialogActions>
+            <Button subtle onClick={() => close(false)}>
+              Cancel
+            </Button>
+            <Button onClick={select} disabled={!selected}>
+              Select
+            </Button>
+          </DialogActions>
+        </>
+      )}
+    </Dialog>
+  );
+}