Console fixes + small fixes & improvements #977

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

@@ -8,6 +8,7 @@ import {
   PropsWithChildren,
   forwardRef,
   ReactNode,
+  useEffect,
 } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { styled } from 'styled-components';
@@ -350,9 +351,11 @@ export function MenuItem({
 }: MenuItemPropsExtended): JSX.Element {
   const ref = useRef<HTMLButtonElement>(null);
 
-  if (selected && document.activeElement !== ref.current) {
-    ref.current?.focus();
-  }
+  useEffect(() => {
+    if (selected && document.activeElement !== ref.current) {
+      ref.current?.focus();
+    }
+  }, [selected]);
 
   return (
     <MenuItemStyled

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

@@ -16,6 +16,7 @@ export const LoaderInline = styled.span`
   border-radius: ${p => p.theme.radius};
   animation: ${loadingAnimation} 0.8s infinite ease-in-out alternate;
   width: 100%;
+  display: inline-block;
   height: 1rem;
 `;
 

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

@@ -6,6 +6,7 @@ import { ErrorLook } from './ErrorLook';
 import { ValueForm } from './forms/ValueForm';
 import ValueComp from './ValueComp';
 import { ALL_PROPS_CONTAINER } from '../helpers/containers';
+import { LoaderInline } from './Loader';
 
 type Props = {
   propertyURL: string;
@@ -33,9 +34,7 @@ function PropVal({
   if (property.loading) {
     return (
       <PropValRow columns={columns}>
-        <PropertyLabel title={propertyURL + ' is loading'}>
-          loading...
-        </PropertyLabel>
+        <StyledLoader title={`Loading ${truncated}`} />
       </PropValRow>
     );
   }
@@ -90,6 +89,13 @@ export const PropertyLabel = styled.span`
   font-weight: bold;
 `;
 
+const StyledLoader = styled(LoaderInline)`
+  grid-column: 1 / 3;
+  margin-inline: 1rem;
+  margin-block: 0.5rem;
+  width: calc(100% - 2rem);
+`;
+
 interface PropValRowProps {
   columns?: boolean;
 }

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

@@ -65,18 +65,17 @@ interface RowProps {
 
 type OnScroll = (props: ListOnScrollProps) => unknown;
 
-export function FancyTable<T>(props: FancyTableProps<T>): JSX.Element {
+export function FancyTable<T>({
+  rowHeight = 40,
+  ...props
+}: FancyTableProps<T>): JSX.Element {
   return (
     <TableEditorContextProvider>
-      <FancyTableInner {...props} />
+      <FancyTableInner rowHeight={rowHeight} {...props} />
     </TableEditorContextProvider>
   );
 }
 
-FancyTable.defaultProps = {
-  rowHeight: 40,
-};
-
 function FancyTableInner<T>({
   children,
   columns,

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

@@ -9,8 +9,8 @@ export function WarningBlock({
 }
 
 const Wrapper = styled.div`
-  background-color: ${p => lighten(0.2, p.theme.colors.warning)};
-  border: 2px solid ${p => p.theme.colors.warning};
+  background-color: ${p => lighten(0.4, p.theme.colors.warning)};
+  border: 2px solid ${p => lighten(0.2, p.theme.colors.warning)};
   border-radius: ${p => p.theme.radius};
   padding: 1rem;
 `;

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { FaAsterisk, FaInfo, FaTrash } from 'react-icons/fa';
 import { styled } from 'styled-components';
 import { Collapse } from '../Collapse';
@@ -12,6 +12,34 @@ import {
 } from './InputStyles';
 import { complement } from 'polished';
 
+interface FieldProps {
+  /** Label */
+  label?: string;
+  /** Helper text / collapsible info */
+  helper?: React.ReactNode;
+  /** Here goes the input */
+  children: React.ReactNode;
+  /** If the field is requires. Shows an aterisk with hover text */
+  required?: boolean;
+  disabled?: boolean;
+  /** The error to be shown in the component */
+  error?: Error;
+
+  /** The id of the field. This is used to link the label with the input */
+  fieldId?: string;
+  labelId?: string;
+  /**
+   * If the field contains multiple inputs like an array.
+   * This will make the component render a fieldset + legend instead of a label.
+   */
+  multiInput?: boolean;
+  /**
+   * This function will be called when the delete icon is clicked. This should
+   * remove the item from any parent list
+   */
+  handleDelete?: (url: string) => unknown;
+}
+
 /** High level form field skeleton. Pass the actual input as a child component. */
 function Field({
   label,
@@ -23,19 +51,21 @@ function Field({
   disabled,
   fieldId,
   labelId,
-}: IFieldProps): JSX.Element {
+  multiInput,
+}: FieldProps): JSX.Element {
   const [collapsedHelper, setCollapsed] = useState(true);
 
   return (
-    <FieldStyled>
+    <FieldStyled as={multiInput ? 'fieldset' : undefined}>
       <LabelWrapper>
         <Row gap='0.4rem' center>
           <FieldLabel
             data-test={`field-label-${label}`}
             htmlFor={fieldId}
             id={labelId}
+            as={multiInput ? 'legend' : undefined}
           >
-            <span>{label}</span>
+            {label}
             {required && <Astrisk title='Required field' size='0.6em' />}
           </FieldLabel>
           {helper && (
@@ -89,29 +119,6 @@ export const FieldLabel = styled.label`
   font-weight: bold;
 `;
 
-interface IFieldProps {
-  /** Label */
-  label?: string;
-  /** Helper text / collapsible info */
-  helper?: React.ReactNode;
-  /** Here goes the input */
-  children: React.ReactNode;
-  /** If the field is requires. Shows an aterisk with hover text */
-  required?: boolean;
-  disabled?: boolean;
-  /** The error to be shown in the component */
-  error?: Error;
-
-  /** The id of the field. This is used to link the label with the input */
-  fieldId?: string;
-  labelId?: string;
-  /**
-   * This function will be called when the delete icon is clicked. This should
-   * remove the item from any parent list
-   */
-  handleDelete?: (url: string) => unknown;
-}
-
 export default Field;
 
 const Astrisk = styled(FaAsterisk)`

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

@@ -29,6 +29,7 @@ export default function InputResourceArray({
   property,
   commit,
   required,
+  id: _id,
   ...props
 }: InputResourceArrayProps): JSX.Element {
   const [draggingSubject, setDraggingSubject] = useState<string>();

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

@@ -1,7 +1,10 @@
 import { styled, css } from 'styled-components';
 
 export const FieldStyled = styled.div`
-  margin-bottom: ${props => props.theme.margin}rem;
+  padding: 0;
+  margin-bottom: ${props => props.theme.size()};
+  border: none;
+  background-color: none;
 `;
 
 export const LabelWrapper = styled.div`
@@ -15,7 +18,7 @@ export const LabelStyled = styled.label`
   display: block;
 `;
 
-export const LabelHelper = styled.label`
+export const LabelHelper = styled.div`
   font-size: 0.9em;
   display: block;
 `;

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

@@ -1,4 +1,4 @@
-import { useProperty, Resource, Property } from '@tomic/react';
+import { useProperty, Resource, Property, Datatype } from '@tomic/react';
 import { styled } from 'styled-components';
 import Field from './Field';
 import Markdown from '../datatypes/Markdown';
@@ -63,7 +63,7 @@ function ResourceField({
         <InputSwitcher
           id={fieldId}
           key={propertyURL + ' input-switcher'}
-          data-testId={`input-${property.shortname}`}
+          data-testid={`input-${property.shortname}`}
           resource={resource}
           property={property}
           autoFocus={autoFocus}
@@ -88,6 +88,7 @@ function ResourceField({
       disabled={disabled}
       fieldId={fieldId}
       labelId={labelId}
+      multiInput={property?.datatype === Datatype.RESOURCEARRAY}
     >
       <InputSwitcher
         id={fieldId}

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

@@ -52,6 +52,7 @@ export interface ResourceSelectorProps {
 
   /** Callback function to be called when the input loses focus */
   onBlur?: () => void;
+  id?: string;
 }
 
 const INVALID_RESOURCE_ERROR = 'Invalid Resource';
@@ -74,6 +75,7 @@ export const ResourceSelector = memo(function ResourceSelector({
   last = true,
   prefix,
   allowsOnly,
+  id,
   onBlur,
 }: ResourceSelectorProps): JSX.Element {
   const store = useStore();
@@ -164,6 +166,7 @@ export const ResourceSelector = memo(function ResourceSelector({
         hideClearButton={hideClearButton}
         allowsOnly={allowsOnly}
         visualError={error || warning}
+        id={id}
         onChange={handleSubjectChange}
         onCreateItem={handleCreateItem}
         onClose={handleBlur}

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

@@ -32,6 +32,7 @@ interface SearchBoxProps {
   prefix?: React.ReactNode;
   hideClearButton?: boolean;
   visualError?: string;
+  id?: string;
   onChange: (value: string | undefined) => void;
   onCreateItem?: (name: string, isA?: string) => void;
   onClose?: () => void;
@@ -51,6 +52,7 @@ export function SearchBox({
   hideClearButton,
   allowsOnly,
   visualError,
+  id,
   onChange,
   onCreateItem,
   onClose,
@@ -164,6 +166,7 @@ export function SearchBox({
               setOpen(true);
               setJustFocussed(true);
             }}
+            id={id}
           >
             {value ? (
               <ResourceTitle>{title}</ResourceTitle>

browser/data-browser/src/components/forms/formValidation/FormValidationContextProvider.tsx

@@ -2,6 +2,7 @@ import {
   createContext,
   PropsWithChildren,
   useCallback,
+  useEffect,
   useMemo,
   useState,
 } from 'react';
@@ -31,15 +32,7 @@ export function FormValidationContextProvider({
 
   const setValidations = useCallback(
     (update: (newValidations: Validations) => Validations) => {
-      _setValidations(prev => {
-        const updatedValidations = update(prev);
-
-        onValidationChange(
-          Object.values(updatedValidations).every(v => v === undefined),
-        );
-
-        return updatedValidations;
-      });
+      _setValidations(prev => update(prev));
     },
     [onValidationChange],
   );
@@ -52,6 +45,10 @@ export function FormValidationContextProvider({
     [validations, setValidations],
   );
 
+  useEffect(() => {
+    onValidationChange(Object.values(validations).every(v => v === undefined));
+  }, [validations, onValidationChange]);
+
   return (
     <FormValidationContext.Provider value={context}>
       {children}

browser/data-browser/src/routes/NewResource/NewRoute.tsx

@@ -69,7 +69,7 @@ function NewResourceSelector() {
         navigate(constructOpenURL(calculatedParent));
       }
     },
-    [parentSubject, navigate],
+    [calculatedParent, navigate],
   );
 
   return (
@@ -86,7 +86,6 @@ function NewResourceSelector() {
         </h1>
         <SideBySide noTemplates={!showTemplates}>
           <Column gap='2rem'>
-            <h2>Classes</h2>
             <div>
               <ResourceSelector
                 hideCreateOption

browser/data-browser/src/routes/PruneTestsRoute.tsx

@@ -30,7 +30,7 @@ export function PruneTestsRoute(): JSX.Element {
             Prune
           </Button>
           {isWaiting && <p>Pruning, this might take a while...</p>}
-          <p data-testId='prune-result'>
+          <p data-testid='prune-result'>
             {result && `✅ ${result.props.responseMessage}`}
           </p>
         </Column>