Merge branch 'develop' into 543-s3-uploads

Earthfile

@@ -1,7 +1,7 @@
 VERSION --try --global-cache 0.7
 PROJECT ontola/atomic-server
 IMPORT ./browser AS browser
-IMPORT github.com/earthly/lib/rust:2.2.11 AS rust
+IMPORT github.com/earthly/lib/rust AS rust
 FROM rust:1.73.0-buster
 WORKDIR /code
 
@@ -41,20 +41,20 @@ source:
   COPY --keep-ts Cargo.toml Cargo.lock ./
   COPY --keep-ts --dir server lib cli  ./
   COPY browser+build/dist /code/browser/data-browser/dist
+  DO rust+CARGO --args=fetch
 
 cross-build:
   FROM +source
   ARG --required TARGET
-  # This does not yet cache properly
-  # https://github.com/earthly/lib/issues/34
+  DO rust+GET_RUST_CACHE_MOUNTS
   WITH DOCKER
-    RUN cross build --target $TARGET --release
+    RUN --mount=$EARTHLY_RUST_CARGO_HOME_CACHE --mount=$EARTHLY_RUST_TARGET_CACHE  cross build --target $TARGET --release
   END
   SAVE ARTIFACT ./target/$TARGET/release/atomic-server AS LOCAL artifact/bin/atomic-server-$TARGET
 
 build:
   FROM +source
-  DO rust+CARGO --args="build --release" --output="release/[^/\.]+"
+  DO rust+CARGO --args="build --offline --release" --output="release/[^/\.]+"
   RUN ./target/release/atomic-server --version
   SAVE ARTIFACT ./target/release/atomic-server AS LOCAL artifact/bin/atomic-server-x86_64-unknown-linux-gnu
 

browser/CHANGELOG.md

@@ -7,6 +7,9 @@ This changelog covers all three packages, as they are (for now) updated as a who
 ### Atomic Browser
 
 - [#747](https://github.com/atomicdata-dev/atomic-server/issues/747) Show ontology classes on new resource page.
+- [#770](https://github.com/atomicdata-dev/atomic-server/issues/770) Display more info on search result page.
+- [#771](https://github.com/atomicdata-dev/atomic-server/issues/771) Tables: Don't paste in multiple rows when focussed on an input
+- [#758](https://github.com/atomicdata-dev/atomic-server/issues/758) Fix Relation column forms to close when clicking on the searchbox
 - Fix server not rebuilding client when files changed.
 
 ## v0.36.2

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

@@ -11,17 +11,19 @@ type CardProps = {
 /** A Card with a border. */
 export const Card = styled.div<CardProps>`
   background-color: ${props => props.theme.colors.bg};
-  /** Don't put side margins in this component - use a wrapping component */
-  border: solid 1px ${props => props.theme.colors.bg2};
-  box-shadow: ${props => props.theme.boxShadow};
+
+  border: solid 1px
+    ${props =>
+      props.highlight ? props.theme.colors.main : props.theme.colors.bg2};
+  box-shadow: ${props =>
+    props.highlight
+      ? `0 0 0 1px ${props.theme.colors.main}, ${props.theme.boxShadow}`
+      : props.theme.boxShadow};
+
   padding: ${props => props.theme.margin}rem;
-  /* margin-bottom: ${props => props.theme.margin}rem; */
-  padding-bottom: 0;
   border-radius: ${props => props.theme.radius};
   max-height: ${props => (props.small ? '10rem' : 'none')};
   overflow: ${props => (props.small ? 'hidden' : 'visible')};
-  border-color: ${props =>
-    props.highlight ? props.theme.colors.main : props.theme.colors.bg2};
 
   ${p => transitionName('resource-page', p.about)};
 `;

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

@@ -166,7 +166,6 @@ const NavBarBase = styled.div<NavBarStyledProps>`
 /** Width of the floating navbar in rem */
 const NavBarFloating = styled(NavBarBase)`
   box-shadow: ${props => props.theme.boxShadow};
-  box-sizing: border-box;
   border-radius: 999px;
   overflow: hidden;
   max-width: calc(100% - 2rem);
@@ -179,6 +178,11 @@ const NavBarFloating = styled(NavBarBase)`
   top: ${props => (props.top ? '2rem' : 'auto')};
   bottom: ${props => (props.top ? 'auto' : '1rem')};
 
+  &:has(input:focus) {
+    box-shadow: 0px 0px 0px 1px ${props => props.theme.colors.main};
+    border-color: ${props => props.theme.colors.main};
+  }
+
   @media (max-width: ${props => props.theme.containerWidth}rem) {
     max-width: calc(100% - 1rem);
     left: auto;
@@ -198,6 +202,10 @@ const NavBarFixed = styled(NavBarBase)`
     props.top ? 'solid 1px ' + props.theme.colors.bg2 : 'none'};
   border-top: ${props =>
     !props.top ? 'solid 1px ' + props.theme.colors.bg2 : 'none'};
+
+  &:has(input:focus) {
+    box-shadow: 0px 0px 0px 2px ${props => props.theme.colors.main};
+  }
 `;
 
 const SideBarWrapper = styled('div')`

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

@@ -61,7 +61,7 @@ function PropVal({
         </PropertyLabel>
       </AtomicLink>
       {editable ? (
-        <ValueForm resource={resource} propertyURL={propertyURL} noMargin />
+        <ValueForm resource={resource} propertyURL={propertyURL} />
       ) : (
         <ValueComp
           datatype={property.datatype}

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

@@ -159,7 +159,8 @@ const Input = styled.input`
   flex: 1;
   min-width: 1rem;
   background-color: ${props => props.theme.colors.bg};
-  outline: 0;
+  // Outline is handled by the Navbar.
+  outline: none;
   color: ${p => p.theme.colors.textLight};
 `;
 
@@ -172,9 +173,7 @@ const Form = styled.form`
   border-radius: 999px;
 
   :hover {
-    box-shadow: inset 0 0 0 2px
-      ${props => transparentize(0.6, props.theme.colors.main)};
-
+    ${props => transparentize(0.6, props.theme.colors.main)};
     ${Input} {
       color: ${p => p.theme.colors.text};
     }
@@ -183,8 +182,9 @@ const Form = styled.form`
     ${Input} {
       color: ${p => p.theme.colors.text};
     }
+
+    // Outline is handled by the Navbar.
     outline: none;
-    box-shadow: inset 0 0 0 2px ${props => props.theme.colors.main};
   }
 `;
 

browser/data-browser/src/components/TableEditor/hooks/usePasteCommand.ts

@@ -38,6 +38,11 @@ export function usePasteCommand<T>(
         return;
       }
 
+      // Don't use custom paste logic when the user is focussed on an input
+      if (document.activeElement?.tagName === 'INPUT') {
+        return;
+      }
+
       const htmlData = event.clipboardData?.getData('text/html');
 
       if (htmlData) {

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

@@ -16,11 +16,10 @@ import { ErrMessage } from './forms/InputStyles';
 type Props = {
   value: JSONValue;
   datatype: Datatype;
-  noMargin?: boolean;
 };
 
 /** Renders a value in a fitting way, depending on its DataType */
-function ValueComp({ value, datatype, noMargin }: Props): JSX.Element {
+function ValueComp({ value, datatype }: Props): JSX.Element {
   try {
     switch (datatype) {
       case Datatype.ATOMIC_URL: {
@@ -36,7 +35,7 @@ function ValueComp({ value, datatype, noMargin }: Props): JSX.Element {
       case (Datatype.DATE, Datatype.TIMESTAMP):
         return <DateTime date={valToDate(value)} />;
       case Datatype.MARKDOWN:
-        return <Markdown text={valToString(value)} noMargin={noMargin} />;
+        return <Markdown text={valToString(value)} />;
       case Datatype.RESOURCEARRAY:
         return <ResourceArray subjects={valToArray(value)} />;
       default:

browser/data-browser/src/components/datatypes/Markdown.tsx

@@ -3,30 +3,21 @@ import { styled } from 'styled-components';
 import remarkGFM from 'remark-gfm';
 import { Button } from '../Button';
 import { truncateMarkdown } from '../../helpers/markdown';
-import { useState } from 'react';
+import { FC, useState } from 'react';
 
 type Props = {
   text: string;
-  /**
-   * By default, all bottom Markdown elements have some margin (e.g. the last
-   * paragraph). If you set noMargin, this is corrected.
-   */
-  noMargin?: boolean;
   renderGFM?: boolean;
   /**
    * If this is set, and the markdown is more characters than this number, the
    * text will be truncated and a button will be shown
    */
   maxLength?: number;
+  className?: string;
 };
 
 /** Renders a markdown value */
-function Markdown({
-  text,
-  noMargin,
-  renderGFM,
-  maxLength,
-}: Props): JSX.Element | null {
+const Markdown: FC<Props> = ({ text, renderGFM, maxLength, className }) => {
   const [collapsed, setCollapsed] = useState(true);
 
   maxLength = maxLength || 5000;
@@ -36,7 +27,7 @@ function Markdown({
   }
 
   return (
-    <MarkdownWrapper noMargin={noMargin}>
+    <MarkdownWrapper className={className}>
       <ReactMarkdown remarkPlugins={renderGFM ? [remarkGFM] : []}>
         {collapsed ? truncateMarkdown(text, maxLength) : text}
       </ReactMarkdown>
@@ -47,19 +38,14 @@ function Markdown({
       )}
     </MarkdownWrapper>
   );
-}
+};
 
 Markdown.defaultProps = {
   renderGFM: true,
 };
 
-interface MarkdownWrapperProps {
-  noMargin?: boolean;
-}
-
-const MarkdownWrapper = styled.div<MarkdownWrapperProps>`
+const MarkdownWrapper = styled.div`
   /* Corrects the margin added by <p> and other HTML elements */
-  margin-bottom: -${p => (p.noMargin ? p.theme.margin : 0)}rem;
 
   width: 100%;
   overflow-x: hidden;

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

@@ -120,6 +120,7 @@ export function SearchBox({
           invalid={!!error}
         >
           <TriggerButton
+            type='button'
             autoFocus={autoFocus}
             disabled={disabled}
             ref={triggerRef}

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

@@ -26,19 +26,13 @@ interface ValueFormProps {
    * also override it manually
    */
   datatype?: Datatype;
-  noMargin?: boolean;
 }
 
 /**
  * A form for a single Value. Presents a normal value, but let's the user click
  * on a button to turn it into an input.
  */
-export function ValueForm({
-  resource,
-  noMargin,
-  propertyURL,
-  datatype,
-}: ValueFormProps) {
+export function ValueForm({ resource, propertyURL, datatype }: ValueFormProps) {
   const [editMode, setEditMode] = useState(false);
   const property = useProperty(propertyURL);
   const [value] = useValue(resource, propertyURL);
@@ -86,11 +80,7 @@ export function ValueForm({
   if (!editMode) {
     return (
       <ValueFormWrapper>
-        <ValueComp
-          value={value}
-          datatype={datatype || property.datatype}
-          noMargin={noMargin}
-        />
+        <ValueComp value={value} datatype={datatype || property.datatype} />
         <EditButton title='Edit value'>
           <FaEdit onClick={() => setEditMode(!editMode)} />
         </EditButton>

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

@@ -142,7 +142,6 @@ export function Search(): JSX.Element {
               {results.map((subject, index) => (
                 <ResourceCard
                   initialInView={index < 5}
-                  small
                   subject={subject}
                   key={subject}
                   highlight={index === selectedIndex}

browser/data-browser/src/views/Card/BookmarkCard.tsx

@@ -1,24 +1,22 @@
-import { urls, useString, useTitle } from '@tomic/react';
+import { urls, useString } from '@tomic/react';
 
 import { styled } from 'styled-components';
-import { AtomicLink } from '../../components/AtomicLink';
 import Markdown from '../../components/datatypes/Markdown';
 import {
   ExternalLink,
   ExternalLinkVariant,
 } from '../../components/ExternalLink';
 import { CardViewProps } from './CardViewProps';
+import { ResourceCardTitle } from './ResourceCardTitle';
+import { Column } from '../../components/Row';
 
 export function BookmarkCard({ resource }: CardViewProps): JSX.Element {
-  const [title] = useTitle(resource);
   const [url] = useString(resource, urls.properties.bookmark.url);
   const [preview] = useString(resource, urls.properties.bookmark.preview);
 
   return (
-    <>
-      <AtomicLink subject={resource.getSubject()}>
-        <Title>{title}</Title>
-      </AtomicLink>
+    <Column gap='0.5rem'>
+      <ResourceCardTitle resource={resource} />
       <ExternalLink to={url!} variant={ExternalLinkVariant.Button}>
         Open site
       </ExternalLink>
@@ -27,17 +25,10 @@ export function BookmarkCard({ resource }: CardViewProps): JSX.Element {
           <Markdown maxLength={1000} renderGFM text={preview} />
         </MarkdownWrapper>
       )}
-    </>
+    </Column>
   );
 }
 
-const Title = styled.h2`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: 1.2;
-`;
-
 const MarkdownWrapper = styled.div`
   margin-top: ${p => p.theme.margin}rem;
   margin-inline: -${p => p.theme.margin}rem;