#259 fix upload, improve error look

Author: joepio

CHANGELOG.md

@@ -11,6 +11,7 @@ This changelog covers all three packages, as they are (for now) updated as a who
 - Add cookie based authentication #241
 - Get rid of `useWindowSize` #256
 - `canWrite` check should succeed for `publicAgent` #252
+- Improve error look & text
 
 ## v0.32.1
 

data-browser/src/components/ErrorLook.tsx

@@ -1,7 +1,6 @@
 import { lighten } from 'polished';
 import styled from 'styled-components';
 import React from 'react';
-import { Details } from './Details';
 import { FaExclamationTriangle } from 'react-icons/fa';
 
 export const ErrorLook = styled.span`
@@ -21,30 +20,24 @@ export function ErrorBlock({ error, showTrace }: ErrorBlockProps): JSX.Element {
         <FaExclamationTriangle />
         Something went wrong
       </BiggerText>
-      <Details title={<span>Show Details</span>}>
-        <pre>
-          <CodeBlock>{error.message}</CodeBlock>
-        </pre>
-        {showTrace && (
-          <>
-            <span>Stack trace:</span>
-            <pre>
-              <CodeBlock>{error.stack}</CodeBlock>
-            </pre>
-          </>
-        )}
-      </Details>
+      <CodeBlock>{error.message}</CodeBlock>
+      {showTrace && (
+        <>
+          <span>Stack trace:</span>
+          <CodeBlock>{error.stack}</CodeBlock>
+        </>
+      )}
     </ErrorLookBig>
   );
 }
 
 const ErrorLookBig = styled.div`
-  background-color: ${p => lighten(0.4, p.theme.colors.alert)};
   color: ${p => p.theme.colors.alert};
   font-size: 1rem;
   padding: ${p => p.theme.margin}rem;
   border-radius: ${p => p.theme.radius};
   border: 1px solid ${p => lighten(0.2, p.theme.colors.alert)};
+  background-color: ${p => p.theme.colors.bg1};
 `;
 
 const CodeBlock = styled.code`

data-browser/src/components/forms/FileDropzone/useUpload.ts

@@ -1,4 +1,5 @@
 import {
+  AtomicError,
   properties,
   Resource,
   uploadFiles,
@@ -44,7 +45,7 @@ export function useUpload(parentResource: Resource): UseUploadResult {
 
         return allUploaded;
       } catch (e) {
-        setError(e);
+        setError(new AtomicError(e?.message));
         setIsUploading(false);
 
         return [];

lib/src/client.ts

@@ -201,9 +201,14 @@ export async function uploadFiles(
     throw new AtomicError(`No agent present. Can't sign the upload request.`);
   }
 
+  // TODO: Use cookie authentication here if possible
+  // https://github.com/atomicdata-dev/atomic-data-browser/issues/253
+  const signedHeaders = await signRequest(uploadURL.toString(), agent, {});
+
   const options = {
     method: 'POST',
     body: formData,
+    headers: signedHeaders,
   };
 
   const resp = await fetch(uploadURL.toString(), options);