atomicdata-dev · joepio · Oct 10, 2022 · Oct 12, 2022 · Oct 12, 2022 · Oct 15, 2022
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -12,6 +12,17 @@
 			"isBackground": true,
 			"group": "build"
 		},
+		{
+			"type": "npm",
+			"script": "build-server",
+			"problemMatcher": [
+				"$tsc-watch"
+			],
+			"label": "build server JS assets",
+			"detail": "pnpm workspace @tomic/data-browser build-server",
+			"isBackground": true,
+			"group": "build"
+		},
 		{
 			"type": "npm",
 			"script": "test",

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,8 +4,11 @@ This changelog covers all three packages, as they are (for now) updated as a who
 
 ## UNRELEASED
 
+- Let users register using e-mail address, improve sign-up UX.
 - Add `Store.parseMetaTags` to load JSON-AD objects stored in the DOM. Speeds up initial page load by allowing server to set JSON-AD objects in the initial HTML response.
 - Move static assets around, align build with server and fix PWA #292
+- `store.createSubject` allows creating nested paths
+- Add `useChildren` hook and `Store.getChildren` method
 
 ## v0.35.0
 

diff --git a/data-browser/index.html b/data-browser/index.html
@@ -34,6 +34,8 @@
   </style>
   <!-- Meta tags and code added by Atomic-Server -->
   <!-- { inject_html_head } -->
+  <!-- Javascript added by Atomic-Server -->
+  <!-- { inject_script } -->
 </head>
 
 <body>

diff --git a/data-browser/src/components/ClassDetail.tsx b/data-browser/src/components/ClassDetail.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { properties, Resource, useString } from '@tomic/react';
 import { ResourceInline } from '../views/ResourceInline';
 import { Detail } from './Detail';
+import { getIconForClass } from '../views/FolderPage/iconMap';
 
 type Props = {
   resource: Resource;
@@ -15,8 +16,11 @@ export function ClassDetail({ resource }: Props): JSX.Element {
     <React.Fragment>
       {klass && (
         <Detail>
-          {'is a '}
-          <ResourceInline subject={klass} />
+          <>
+            {'is a '}
+            {getIconForClass(klass)}
+            <ResourceInline subject={klass} />
+          </>
         </Detail>
       )}
     </React.Fragment>

diff --git a/data-browser/src/components/CodeBlock.tsx b/data-browser/src/components/CodeBlock.tsx
@@ -7,9 +7,11 @@ import { Button } from './Button';
 interface CodeBlockProps {
   content?: string;
   loading?: boolean;
+  wrapContent?: boolean;
 }
 
-export function CodeBlock({ content, loading }: CodeBlockProps) {
+/** Codeblock with copy feature */
+export function CodeBlock({ content, loading, wrapContent }: CodeBlockProps) {
   const [isCopied, setIsCopied] = useState<string | undefined>(undefined);
 
   function copyToClipboard() {
@@ -19,7 +21,7 @@ export function CodeBlock({ content, loading }: CodeBlockProps) {
   }
 
   return (
-    <CodeBlockStyled data-code-content={content}>
+    <CodeBlockStyled data-code-content={content} wrapContent={wrapContent}>
       {loading ? (
         'loading...'
       ) : (
@@ -46,7 +48,11 @@ export function CodeBlock({ content, loading }: CodeBlockProps) {
   );
 }
 
-export const CodeBlockStyled = styled.pre`
+interface Props {
+  wrapContent?: boolean;
+}
+
+export const CodeBlockStyled = styled.pre<Props>`
   position: relative;
   background-color: ${p => p.theme.colors.bg1};
   border-radius: ${p => p.theme.radius};
@@ -55,4 +61,6 @@ export const CodeBlockStyled = styled.pre`
   font-family: monospace;
   width: 100%;
   overflow-x: auto;
+  word-wrap: ${p => (p.wrapContent ? 'break-word' : 'initial')};
+  white-space: ${p => (p.wrapContent ? 'pre-wrap' : 'initial')};
 `;
diff --git a/data-browser/src/components/Dialog/useDialog.tsx b/data-browser/src/components/Dialog/useDialog.tsx
@@ -1,16 +1,16 @@
 import { useCallback, useMemo, useState } from 'react';
 import { InternalDialogProps } from './index';
 
-export type UseDialogReturnType = [
+export type UseDialogReturnType = {
   /** Props meant to pass to a {@link Dialog} component */
-  dialogProps: InternalDialogProps,
+  dialogProps: InternalDialogProps;
   /** Function to show the dialog */
-  show: () => void,
+  show: () => void;
   /** Function to close the dialog */
-  close: () => void,
+  close: () => void;
   /** Boolean indicating wether the dialog is currently open */
-  isOpen: boolean,
-];
+  isOpen: boolean;
+};
 
 /** Sets up state, and functions to use with a {@link Dialog} */
 export const useDialog = (): UseDialogReturnType => {
@@ -40,5 +40,5 @@ export const useDialog = (): UseDialogReturnType => {
     [showDialog, close, handleClosed],
   );
 
-  return [dialogProps, show, close, visible];
+  return { dialogProps, show, close, isOpen: visible };
 };
diff --git a/data-browser/src/components/Dropdown/index.tsx b/data-browser/src/components/Dropdown/index.tsx
@@ -26,6 +26,8 @@ interface DropdownMenuProps {
   /** The list of menu items */
   items: Item[];
   trigger: DropdownTriggerRenderFunction;
+  /** Enables the keyboard shortcut */
+  isMainMenu?: boolean;
 }
 
 /** Gets the index of an array and loops around when at the beginning or end */
@@ -88,6 +90,7 @@ function normalizeItems(items: Item[]) {
 export function DropdownMenu({
   items,
   trigger,
+  isMainMenu,
 }: DropdownMenuProps): JSX.Element {
   const menuId = useId();
   const dropdownRef = useRef<HTMLDivElement>(null);
@@ -167,7 +170,7 @@ export function DropdownMenu({
       handleToggle();
       setUseKeys(true);
     },
-    {},
+    { enabled: !!isMainMenu },
     [isActive],
   );
   // Click / open the item

diff --git a/data-browser/src/components/ErrorLook.tsx b/data-browser/src/components/ErrorLook.tsx
@@ -2,6 +2,7 @@ import { lighten } from 'polished';
 import styled from 'styled-components';
 import React from 'react';
 import { FaExclamationTriangle } from 'react-icons/fa';
+import { Column } from './Row';
 
 export const ErrorLook = styled.span`
   color: ${props => props.theme.colors.alert};
@@ -20,13 +21,21 @@ export function ErrorBlock({ error, showTrace }: ErrorBlockProps): JSX.Element {
         <FaExclamationTriangle />
         Something went wrong
       </BiggerText>
-      <CodeBlock>{error.message}</CodeBlock>
-      {showTrace && (
-        <>
-          <span>Stack trace:</span>
-          <CodeBlock>{error.stack}</CodeBlock>
-        </>
-      )}
+      <Column>
+        <CodeBlock>{error.message}</CodeBlock>
+        {showTrace && (
+          <>
+            Stack trace:
+            <CodeBlock
+              style={{
+                maxHeight: '10rem',
+              }}
+            >
+              {error.stack}
+            </CodeBlock>
+          </>
+        )}
+      </Column>
     </ErrorLookBig>
   );
 }

diff --git a/data-browser/src/components/Guard.tsx b/data-browser/src/components/Guard.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { useSettings } from '../helpers/AppSettings';
+import { RegisterSignIn } from './RegisterSignIn';
+
+/**
+ * The Guard can be wrapped around a Component that depends on a user being logged in.
+ * If the user is not logged in, it will show a button to sign up / sign in.
+ * Show to users after a new Agent has been created.
+ * Instructs them to save their secret somewhere safe
+ */
+export function Guard({ children }: React.PropsWithChildren<any>): JSX.Element {
+  const { agent } = useSettings();
+
+  if (agent) {
+    return <>{children}</>;
+  } else return <RegisterSignIn />;
+}
diff --git a/data-browser/src/components/Navigation.tsx b/data-browser/src/components/Navigation.tsx
@@ -136,6 +136,7 @@ function NavBar(): JSX.Element {
 
       {showButtons && subject && (
         <ResourceContextMenu
+          isMainMenu
           subject={subject}
           trigger={MenuBarDropdownTrigger}
         />

diff --git a/data-browser/src/components/NewInstanceButton/NewBookmarkButton.tsx b/data-browser/src/components/NewInstanceButton/NewBookmarkButton.tsx
@@ -36,7 +36,7 @@ export function NewBookmarkButton({
 
   const [url, setUrl] = useState('');
 
-  const [dialogProps, show, hide] = useDialog();
+  const { dialogProps, show, close } = useDialog();
 
   const createResourceAndNavigate = useCreateAndNavigate(klass, parent);
 
@@ -86,7 +86,7 @@ export function NewBookmarkButton({
           </form>
         </DialogContent>
         <DialogActions>
-          <Button onClick={hide} subtle>
+          <Button onClick={close} subtle>
             Cancel
           </Button>
           <Button onClick={onDone} disabled={url.trim() === ''}>

diff --git a/data-browser/src/components/NewInstanceButton/NewFolderButton.tsx b/data-browser/src/components/NewInstanceButton/NewFolderButton.tsx
diff --git a/data-browser/src/components/NewInstanceButton/index.tsx b/data-browser/src/components/NewInstanceButton/index.tsx
@@ -4,14 +4,12 @@ import { NewBookmarkButton } from './NewBookmarkButton';
 import { NewInstanceButtonProps } from './NewInstanceButtonProps';
 import { NewInstanceButtonDefault } from './NewInstanceButtonDefault';
 import { useSettings } from '../../helpers/AppSettings';
-import { NewFolderButton } from './NewFolderButton';
 
 type InstanceButton = (props: NewInstanceButtonProps) => JSX.Element;
 
 /** If your New Instance button requires custom logic, such as a custom dialog */
 const classMap = new Map<string, InstanceButton>([
   [classes.bookmark, NewBookmarkButton],
-  [classes.folder, NewFolderButton],
 ]);
 
 /** A button for creating a new instance of some thing */

diff --git a/data-browser/src/components/NewInstanceButton/useCreateAndNavigate.ts b/data-browser/src/components/NewInstanceButton/useCreateAndNavigate.ts
@@ -12,7 +12,7 @@ import { useNavigate } from 'react-router-dom';
 import { constructOpenURL } from '../../helpers/navigation';
 
 /**
- * Hook that builds a function that will create a new resoure with the given
+ * Hook that builds a function that will create a new resource with the given
  * properties and then navigate to it.
  *
  * @param klass The type of resource to create a new instance of.
@@ -34,7 +34,7 @@ export function useCreateAndNavigate(klass: string, parent?: string) {
       /** Do not set a parent for the new resource. Useful for top-level resources */
       noParent?: boolean,
     ): Promise<Resource> => {
-      const subject = store.createSubject(className);
+      const subject = store.createSubject(className, parent);
       const resource = new Resource(subject, true);
 
       await Promise.all([