#648 Add ontology test

Author: Polleps

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

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { Client, properties, useResource, useStore } from '@tomic/react';
+import { Client, core, useResource, useStore } from '@tomic/react';
 import {
   editURL,
   dataURL,
@@ -57,6 +57,7 @@ export interface ResourceContextMenuProps {
   bindActive?: (active: boolean) => void;
   /** Callback that is called after the resource was deleted */
   onAfterDelete?: () => void;
+  title?: string;
 }
 
 /** Dropdown menu that opens a bunch of actions for some resource */
@@ -66,6 +67,7 @@ function ResourceContextMenu({
   trigger,
   simple,
   isMainMenu,
+  title,
   bindActive,
   onAfterDelete,
 }: ResourceContextMenuProps) {
@@ -80,7 +82,7 @@ function ResourceContextMenu({
   // Try to not have a useResource hook in here, as that will lead to many costly fetches when the user enters a new subject
 
   const handleDestroy = useCallback(async () => {
-    const parent = resource.get<string>(properties.parent);
+    const parent = resource.get(core.properties.parent);
 
     try {
       await resource.destroy(store);
@@ -187,7 +189,12 @@ function ResourceContextMenu({
       )
     : items;
 
-  const triggerComp = trigger ?? buildDefaultTrigger(<FaEllipsisV />);
+  const triggerComp =
+    trigger ??
+    buildDefaultTrigger(
+      <FaEllipsisV />,
+      title ?? `Open ${resource.title} menu`,
+    );
 
   return (
     <>

browser/data-browser/src/components/forms/NewForm/NewFormDialog.tsx

@@ -14,7 +14,7 @@ import { useNewForm } from './useNewForm';
 import { getNamePartFromProps } from '../../../helpers/getNamePartFromProps';
 
 export interface NewFormDialogProps extends NewFormProps {
-  closeDialog: () => void;
+  closeDialog: (success?: boolean) => void;
   initialProps?: Record<string, JSONValue>;
   onSave: (subject: string) => void;
   parent: string;
@@ -43,7 +43,7 @@ export const NewFormDialog = ({
 
   const onResourceSave = useCallback(() => {
     onSave(resource.getSubject());
-    closeDialog();
+    closeDialog(true);
   }, [onSave, closeDialog, resource]);
 
   // Onmount we generate a new subject based on the classtype and the user input.
@@ -95,7 +95,7 @@ export const NewFormDialog = ({
       </DialogContent>
       <DialogActions>
         {error && <InlineErrMessage>{error.message}</InlineErrMessage>}
-        <Button subtle onClick={closeDialog}>
+        <Button subtle onClick={() => closeDialog(false)}>
           Cancel
         </Button>
         <Button onClick={save} disabled={saving}>

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

@@ -1,12 +1,11 @@
-import * as React from 'react';
 import { useProperty, Resource, Property } from '@tomic/react';
 import { styled } from 'styled-components';
 import Field from './Field';
 import Markdown from '../datatypes/Markdown';
 import { InputWrapper, InputStyled } from './InputStyles';
 import InputSwitcher from './InputSwitcher';
 import { AtomicLink } from '../AtomicLink';
-import { useState } from 'react';
+import React, { useId, useState } from 'react';
 import { Button } from '../Button';
 
 function generateErrorPropName(prop: Property): string {
@@ -27,14 +26,19 @@ function ResourceField({
   disabled,
   label: labelProp,
 }: IFieldProps): JSX.Element {
+  const id = useId();
   const property = useProperty(propertyURL);
   const [collapsedDynamic, setCollapsedDynamic] = useState(true);
 
   if (property === null) {
     return (
-      <Field label={labelProp || 'loading...'}>
+      <Field label={labelProp || 'loading...'} fieldId={id}>
         <InputWrapper>
-          <InputStyled disabled={disabled} placeholder='loading property...' />
+          <InputStyled
+            disabled={disabled}
+            placeholder='loading property...'
+            id={id}
+          />
         </InputWrapper>
       </Field>
     );
@@ -71,8 +75,10 @@ function ResourceField({
       handleDelete={handleDelete}
       required={required}
       disabled={disabled}
+      fieldId={id}
     >
       <InputSwitcher
+        id={id}
         key={propertyURL + ' input-switcher'}
         data-test={`input-${property.shortname}`}
         resource={resource}
@@ -106,6 +112,7 @@ function HelperText({ text, link }: HelperTextProps) {
 
 /** A single field in a Resource form should receive these */
 export type InputProps = {
+  id?: string;
   /** The resource that is being edited */
   resource: Resource;
   /** The property of the resource that is being edited */

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

@@ -6,7 +6,7 @@ import React, {
   useState,
 } from 'react';
 import styled from 'styled-components';
-import { useResource } from '@tomic/react';
+import { removeCachedSearchResults, useResource, useStore } from '@tomic/react';
 import { DropdownPortalContext } from '../../Dropdown/dropdownContext';
 import * as RadixPopover from '@radix-ui/react-popover';
 import { SearchBoxWindow } from './SearchBoxWindow';
@@ -42,6 +42,7 @@ export function SearchBox({
   onCreateItem,
   onClose,
 }: React.PropsWithChildren<SearchBoxProps>): JSX.Element {
+  const store = useStore();
   const selectedResource = useResource(value);
   const triggerRef = useRef<HTMLButtonElement>(null);
   const [inputValue, setInputValue] = useState('');
@@ -83,8 +84,9 @@ export function SearchBox({
       }
 
       handleExit(false);
+      removeCachedSearchResults(store);
     },
-    [inputValue, onChange, handleExit],
+    [inputValue, onChange, handleExit, store],
   );
 
   const handleTriggerFocus = () => {

browser/data-browser/src/views/OntologyPage/Class/ClassCardWrite.tsx

@@ -48,7 +48,7 @@ export function ClassCardWrite({ subject }: ClassCardWriteProps): JSX.Element {
   };
 
   return (
-    <StyledCard>
+    <StyledCard data-testid={`class-card-write-${resource.title}`}>
       <Column id={toAnchorId(subject)}>
         <Row center justify='space-between'>
           <TitleWrapper>

browser/data-browser/src/views/OntologyPage/CreateInstanceButton.tsx

@@ -15,7 +15,12 @@ export function CreateInstanceButton({ ontology }: CreateInstanceButtonProps) {
   const store = useStore();
   const [active, setActive] = useState(false);
   const [classSubject, setClassSubject] = useState<string | undefined>();
-  const [dialogProps, show, close, isOpen] = useDialog();
+  const [dialogProps, show, close, isOpen] = useDialog({
+    onSuccess: () => {
+      setClassSubject(undefined);
+      setActive(false);
+    },
+  });
 
   const handleClassSelect = (subject: string | undefined) => {
     setClassSubject(subject);
@@ -30,8 +35,6 @@ export function CreateInstanceButton({ ontology }: CreateInstanceButtonProps) {
   const handleSave = (subject: string) => {
     ontology.pushPropVal(urls.properties.instances, [subject], true);
     ontology.save(store);
-    setClassSubject(undefined);
-    setActive(false);
   };
 
   return (

browser/data-browser/src/views/OntologyPage/Property/PropertyLineWrite.tsx

@@ -1,4 +1,4 @@
-import { urls, useCanWrite, useProperty, useResource } from '@tomic/react';
+import { core, useCanWrite, useProperty, useResource } from '@tomic/react';
 import React from 'react';
 import styled from 'styled-components';
 import InputSwitcher from '../../../components/forms/InputSwitcher';
@@ -23,8 +23,8 @@ export function PropertyLineWrite({
   onRemove,
 }: PropertyLineWriteProps): JSX.Element {
   const resource = useResource(subject);
-  const shortnameProp = useProperty(urls.properties.shortname);
-  const descriptionProp = useProperty(urls.properties.description);
+  const shortnameProp = useProperty(core.properties.shortname);
+  const descriptionProp = useProperty(core.properties.description);
   const [dialogProps, show, hide] = useDialog();
   const [canEdit] = useCanWrite(resource);
 
@@ -65,7 +65,11 @@ export function PropertyLineWrite({
           property={descriptionProp}
         />
         <PropertyDatatypePicker disabled={disabled} resource={resource} />
-        <IconButton title='open' color='textLight' onClick={show}>
+        <IconButton
+          title={`Configure ${resource.title}`}
+          color='textLight'
+          onClick={show}
+        >
           <FaSlidersH />
         </IconButton>
         <IconButton