Merge pull request #5682 from urbit/po/fix-silent-s3-failures

groups: fix silent s3 failures

pkg/interface/src/logic/lib/useStorage.ts

@@ -10,7 +10,7 @@ export interface IuseStorage {
   upload: (file: File, bucket: string) => Promise<string>;
   uploadDefault: (file: File) => Promise<string>;
   uploading: boolean;
-  promptUpload: () => Promise<string>;
+  promptUpload: (onError?: (err: Error) => void) => Promise<string>;
 }
 
 const useStorage = ({ accept = '*' } = { accept: '*' }): IuseStorage => {
@@ -85,7 +85,7 @@ const useStorage = ({ accept = '*' } = { accept: '*' }): IuseStorage => {
   }, [s3, upload]);
 
   const promptUpload = useCallback(
-    (): Promise<string> => {
+    (onError?: (err: Error) => void): Promise<string> => {
       return new Promise((resolve, reject) => {
         const fileSelector = document.createElement('input');
         fileSelector.setAttribute('type', 'file');
@@ -95,6 +95,9 @@ const useStorage = ({ accept = '*' } = { accept: '*' }): IuseStorage => {
           const files = fileSelector.files;
           if (!files || files.length <= 0) {
             reject();
+          } else if (onError) {
+            uploadDefault(files[0]).then(resolve).catch(err => onError(err));
+            document.body.removeChild(fileSelector);
           } else {
             uploadDefault(files[0]).then(resolve);
             document.body.removeChild(fileSelector);

pkg/interface/src/views/apps/chat/components/ChatInput.tsx

@@ -1,6 +1,13 @@
-import { Box, Icon, LoadingSpinner, Row } from '@tlon/indigo-react';
+import { Box, Col, Icon, LoadingSpinner, Row, Text } from '@tlon/indigo-react';
 import { Contact, Content, evalCord } from '@urbit/api';
-import React, { FC, PropsWithChildren, useRef, useState } from 'react';
+import VisibilitySensor from 'react-visibility-sensor';
+import React, {
+  FC,
+  PropsWithChildren,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
 import tokenizeMessage from '~/logic/lib/tokenizeMessage';
 import { IuseStorage } from '~/logic/lib/useStorage';
 import { MOBILE_BROWSER_REGEX } from '~/logic/lib/util';
@@ -11,24 +18,40 @@ import { ChatAvatar } from './ChatAvatar';
 import { useChatStore } from './ChatPane';
 import { useImperativeHandle } from 'react';
 import { FileUploadSource, useFileUpload } from '~/logic/lib/useFileUpload';
+import { Portal } from '~/views/components/Portal';
+import styled from 'styled-components';
+import { useOutsideClick } from '~/logic/lib/useOutsideClick';
 
-type ChatInputProps = PropsWithChildren<IuseStorage & {
+const FixedOverlay = styled(Col)`
+  position: fixed;
+  -webkit-transition: all 0.1s ease-out;
+  -moz-transition: all 0.1s ease-out;
+  -o-transition: all 0.1s ease-out;
+  transition: all 0.1s ease-out;
+`;
+
+type ChatInputProps = PropsWithChildren<
+  IuseStorage & {
     hideAvatars: boolean;
     ourContact?: Contact;
     placeholder: string;
     onSubmit: (contents: Content[]) => void;
-}>;
+    uploadError: string;
+    setUploadError: (val: string) => void;
+    handleUploadError: (err: Error) => void;
+  }
+>;
 
 const InputBox: FC = ({ children }) => (
   <Row
-    alignItems='center'
+    alignItems="center"
-    position='relative'
+    position="relative"
     flexGrow={1}
     flexShrink={0}
     borderTop={1}
-    borderTopColor='lightGray'
+    borderTopColor="lightGray"
-    backgroundColor='white'
+    backgroundColor="white"
-    className='cf'
+    className="cf"
     zIndex={0}
   >
     {children}
@@ -37,12 +60,12 @@ const InputBox: FC = ({ children }) => (
 
 const IconBox = ({ children, ...props }) => (
   <Box
-    ml='12px'
+    ml="12px"
     mr={3}
     flexShrink={0}
-    height='16px'
+    height="16px"
-    width='16px'
+    width="16px"
-    flexBasis='16px'
+    flexBasis="16px"
     {...props}
   >
     {children}
@@ -68,17 +91,39 @@ const MobileSubmitButton = ({ enabled, onSubmit }) => (
   </Box>
 );
 
-export const ChatInput = React.forwardRef(({ ourContact, hideAvatars, placeholder, onSubmit }: ChatInputProps, ref) => {
+export const ChatInput = React.forwardRef(
+  (
+    {
+      ourContact,
+      hideAvatars,
+      placeholder,
+      onSubmit,
+      uploadError,
+      setUploadError,
+      handleUploadError
+    }: ChatInputProps,
+    ref
+  ) => {
     const chatEditor = useRef<CodeMirrorShim>(null);
     useImperativeHandle(ref, () => chatEditor.current);
     const [inCodeMode, setInCodeMode] = useState(false);
+    const [showPortal, setShowPortal] = useState(false);
+    const [visible, setVisible] = useState(false);
+    const innerRef = useRef<HTMLDivElement>(null);
+    const outerRef = useRef<HTMLDivElement>(null);
 
-  const {
+    useEffect(() => {
-    message,
+      if (!visible) {
-    setMessage
+        setShowPortal(false);
-  } = useChatStore();
+      }
+    }, [visible]);
+
+    useOutsideClick(innerRef, () => setShowPortal(false));
+
+    const { message, setMessage } = useChatStore();
     const { canUpload, uploading, promptUpload, onPaste } = useFileUpload({
-    onSuccess: uploadSuccess
+      onSuccess: uploadSuccess,
+      onError: handleUploadError
     });
 
     function uploadSuccess(url: string, source: FileUploadSource) {
@@ -87,6 +132,7 @@ export const ChatInput = React.forwardRef(({ ourContact, hideAvatars, placeholde
       } else {
         onSubmit([{ url }]);
       }
+      setUploadError('');
     }
 
     function toggleCode() {
@@ -113,8 +159,34 @@ export const ChatInput = React.forwardRef(({ ourContact, hideAvatars, placeholde
     }
 
     return (
+      <Box ref={outerRef}>
+        <VisibilitySensor active={showPortal} onChange={setVisible}>
           <InputBox>
-      <Row p='12px 4px 12px 12px' flexShrink={0} alignItems='center'>
+            {showPortal && (
+              <Portal>
+                <FixedOverlay
+                  ref={innerRef}
+                  backgroundColor="white"
+                  color="washedGray"
+                  border={1}
+                  right={25}
+                  bottom={75}
+                  borderRadius={2}
+                  borderColor="lightGray"
+                  boxShadow="0px 0px 0px 3px"
+                  zIndex={3}
+                  fontSize={0}
+                  width="250px"
+                  padding={3}
+                  justifyContent="center"
+                  alignItems="center"
+                >
+                  <Text>{uploadError}</Text>
+                  <Text>Please check S3 settings.</Text>
+                </FixedOverlay>
+              </Portal>
+            )}
+            <Row p="12px 4px 12px 12px" flexShrink={0} alignItems="center">
               <ChatAvatar contact={ourContact} hideAvatars={hideAvatars} />
             </Row>
             <ChatEditor
@@ -126,41 +198,51 @@ export const ChatInput = React.forwardRef(({ ourContact, hideAvatars, placeholde
             />
             <IconBox mr={canUpload ? '12px' : 3}>
               <Icon
-          icon='Dojo'
+                icon="Dojo"
-          cursor='pointer'
+                cursor="pointer"
                 onClick={toggleCode}
                 color={inCodeMode ? 'blue' : 'black'}
               />
             </IconBox>
+            {console.log({ uploadError })}
             {canUpload && (
               <IconBox>
-          {uploading ? (
+                {uploadError == '' && uploading && <LoadingSpinner />}
-            <LoadingSpinner />
+                {uploadError !== '' && (
-          ) : (
                   <Icon
-              icon='Attachment'
+                    icon="ExclaimationMark"
-              cursor='pointer'
+                    cursor="pointer"
-              width='16'
+                    onClick={() => setShowPortal(true)}
-              height='16'
+                  />
+                )}
+                {uploadError == '' && !uploading && (
+                  <Icon
+                    icon="Attachment"
+                    cursor="pointer"
+                    width="16"
+                    height="16"
                     onClick={() =>
-                promptUpload().then(url => uploadSuccess(url, 'direct'))
+                      promptUpload(handleUploadError).then(url =>
+                        uploadSuccess(url, 'direct')
+                      )
                     }
                   />
                 )}
               </IconBox>
             )}
             {MOBILE_BROWSER_REGEX.test(navigator.userAgent) && (
-        <MobileSubmitButton
+              <MobileSubmitButton enabled={message !== ''} onSubmit={submit} />
-          enabled={message !== ''}
-          onSubmit={submit}
-        />
             )}
           </InputBox>
+        </VisibilitySensor>
+      </Box>
+    );
+  }
 );
-});
 
 // @ts-ignore withLocalState prop passing weirdness
-export default withLocalState<Omit<ChatInputProps, keyof IuseStorage>, 'hideAvatars', ChatInput>(
+export default withLocalState<
-  ChatInput,
+  Omit<ChatInputProps, keyof IuseStorage>,
-  ['hideAvatars']
+  'hideAvatars',
-);
+  typeof ChatInput
+>(ChatInput, ['hideAvatars']);

pkg/interface/src/views/apps/chat/components/ChatPane.tsx

@@ -114,8 +114,18 @@ export function ChatPane(props: ChatPaneProps): ReactElement {
   const graphTimesentMap = useGraphTimesent(id);
   const ourContact = useOurContact();
   const { restore, setMessage } = useChatStore(s => ({ setMessage: s.setMessage, restore: s.restore }));
+  const [uploadError, setUploadError] = useState<string>('');
+
+  const handleUploadError = useCallback((err: Error) => {
+    setUploadError(err.message);
+  }, []);
+
   const { canUpload, drag } = useFileUpload({
-    onSuccess: url => onSubmit([{ url }])
+    onSuccess: (url) => {
+      onSubmit([{ url }]);
+      setUploadError('');
+    },
+    onError: handleUploadError
   });
 
   useEffect(() => {
@@ -171,6 +181,9 @@ export function ChatPane(props: ChatPaneProps): ReactElement {
           onSubmit={onSubmit}
           ourContact={(promptShare.length === 0 && ourContact) || undefined}
           placeholder="Message..."
+          uploadError={uploadError}
+          setUploadError={setUploadError}
+          handleUploadError={handleUploadError}
         />
       )}
     </Col>

pkg/interface/src/views/apps/links/components/LinkBlockInput.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react';
-import { Box, LoadingSpinner, Action, Row } from '@tlon/indigo-react';
+import { Box, LoadingSpinner, Action, Row, Icon, Text } from '@tlon/indigo-react';
 
 import { StatelessUrlInput } from '~/views/components/StatelessUrlInput';
 import SubmitDragger from '~/views/components/SubmitDragger';
@@ -21,6 +21,7 @@ export function LinkBlockInput(props: LinkBlockInputProps) {
   const [url, setUrl] = useState(props.url || '');
   const [valid, setValid] = useState(false);
   const [focussed, setFocussed] = useState(false);
+  const [error, setError] = useState<string>('');
 
   const addPost = useGraphState(selGraph);
 
@@ -39,10 +40,16 @@ export function LinkBlockInput(props: LinkBlockInputProps) {
   const handleChange = useCallback((val: string) => {
     setUrl(val);
     setValid(URLparser.test(val) || Boolean(parsePermalink(val)));
+    setError('');
+  }, []);
+
+  const handleError = useCallback((err: Error) => {
+    setError(err.message);
   }, []);
 
   const { uploading, canUpload, promptUpload, drag } = useFileUpload({
-    onSuccess: handleChange
+    onSuccess: handleChange,
+    onError: handleError
   });
 
   const doPost = () => {
@@ -64,7 +71,7 @@ export function LinkBlockInput(props: LinkBlockInputProps) {
   };
 
   const onKeyPress = useCallback(
-    (e) => {
+    (e: any) => {
       if (e.key === 'Enter') {
         e.preventDefault();
         doPost();
@@ -89,8 +96,28 @@ export function LinkBlockInput(props: LinkBlockInputProps) {
       backgroundColor="washedGray"
       {...drag.bind}
     >
-      {drag.dragging && <SubmitDragger />}
+      {drag.dragging && canUpload && <SubmitDragger />}
       {uploading ? (
+        error != '' ? (
+          <Box
+            display="flex"
+            flexDirection="column"
+            width="100%"
+            height="100%"
+            padding={3}
+            position="absolute"
+            left={0}
+            right={0}
+            bg="white"
+            zIndex={9}
+            alignItems="center"
+            justifyContent="center"
+          >
+            <Icon icon="ExclaimationMarkBold" size={32} />
+            <Text bold>{error}</Text>
+            <Text>Please check your S3 settings.</Text>
+          </Box>
+        ) : (
           <Box
             display="flex"
             width="100%"
@@ -105,6 +132,7 @@ export function LinkBlockInput(props: LinkBlockInputProps) {
           >
             <LoadingSpinner />
           </Box>
+        )
       ) : (
         <StatelessUrlInput
           value={url}
@@ -114,6 +142,7 @@ export function LinkBlockInput(props: LinkBlockInputProps) {
           focussed={focussed}
           onBlur={onBlur}
           promptUpload={promptUpload}
+          handleError={handleError}
           onKeyPress={onKeyPress}
           center
         />
@@ -125,7 +154,11 @@ export function LinkBlockInput(props: LinkBlockInputProps) {
         p="2"
         justifyContent="row-end"
       >
-        <Action onClick={doPost} disabled={!valid} backgroundColor="transparent">
+        <Action
+          onClick={doPost}
+          disabled={!valid}
+          backgroundColor="transparent"
+        >
           Post
         </Action>
       </Row>

pkg/interface/src/views/apps/links/components/LinkSubmit.tsx

@@ -1,6 +1,13 @@
-import { BaseInput, Box, Button, LoadingSpinner } from '@tlon/indigo-react';
+import {
+  BaseInput,
+  Box,
+  Button,
+  Icon,
+  LoadingSpinner,
+  Text
+} from '@tlon/indigo-react';
 import { hasProvider } from 'oembed-parser';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { parsePermalink, permalinkToReference } from '~/logic/lib/permalinks';
 import { StatelessUrlInput } from '~/views/components/StatelessUrlInput';
 import SubmitDragger from '~/views/components/SubmitDragger';
@@ -22,15 +29,18 @@ const LinkSubmit = (props: LinkSubmitProps) => {
   const [linkTitle, setLinkTitle] = useState('');
   const [disabled, setDisabled] = useState(false);
   const [linkValid, setLinkValid] = useState(false);
+  const [error, setError] = useState<string>('');
 
-  const {
+  const handleError = useCallback((err: Error) => {
-    canUpload,
+    setError(err.message);
-    uploading,
+  }, []);
-    promptUpload,
+
-    drag,
+  const { canUpload, uploading, promptUpload, drag, onPaste } = useFileUpload({
-    onPaste
+    onSuccess: (url) => {
-  } = useFileUpload({
+      setLinkValue(url);
-    onSuccess: setLinkValue,
+      setError('');
+    },
+    onError: handleError,
     multiple: false
   });
 
@@ -45,18 +55,14 @@ const LinkSubmit = (props: LinkSubmitProps) => {
     const parentIndex = props.parentIndex || '';
     const post = createPost(window.ship, contents, parentIndex);
 
-    addPost(
+    addPost(`~${props.ship}`, props.name, post);
-      `~${props.ship}`,
-      props.name,
-      post
-    );
     setDisabled(false);
     setLinkValue('');
     setLinkTitle('');
     setLinkValid(false);
   };
 
-  const validateLink = (link) => {
+  const validateLink = (link: any) => {
     const URLparser = new RegExp(
       /((?:([\w\d\.-]+)\:\/\/?){1}(?:(www)\.?){0,1}(((?:[\w\d-]+\.)*)([\w\d-]+\.[\w\d]+))){1}(?:\:(\d+)){0,1}((\/(?:(?:[^\/\s\?]+\/)*))(?:([^\?\/\s#]+?(?:.[^\?\s]+){0,1}){0,1}(?:\?([^\s#]+)){0,1})){0,1}(?:#([^#\s]+)){0,1}/
     );
@@ -86,9 +92,14 @@ const LinkSubmit = (props: LinkSubmitProps) => {
             if (result.title && !linkTitle) {
               setLinkTitle(result.title);
             }
-          }).catch((error) => { /* noop*/ });
+          })
+          .catch((error) => {
+            /* noop*/
+          });
       } else if (!linkTitle) {
-        setLinkTitle(decodeURIComponent(link
+        setLinkTitle(
+          decodeURIComponent(
+            link
               .split('/')
               .pop()
               .split('.')
@@ -96,7 +107,8 @@ const LinkSubmit = (props: LinkSubmitProps) => {
               .join('.')
               .replace('_', ' ')
               .replace(/\d{4}\.\d{1,2}\.\d{2}\.\.\d{2}\.\d{2}\.\d{2}-/, '')
-        ));
+          )
+        );
       }
     }
     return link;
@@ -113,7 +125,7 @@ const LinkSubmit = (props: LinkSubmitProps) => {
 
   useEffect(onLinkChange, [linkValue]);
 
-  const onKeyPress = (e) => {
+  const onKeyPress = (e: any) => {
     if (e.key === 'Enter') {
       e.preventDefault();
       doPost();
@@ -125,28 +137,50 @@ const LinkSubmit = (props: LinkSubmitProps) => {
       {/* @ts-ignore archaic event type mismatch */}
       <Box
         flexShrink={0}
-        position='relative'
+        position="relative"
-        border='1px solid'
+        border="1px solid"
         borderColor={submitFocused ? 'black' : 'lightGray'}
-        width='100%'
+        width="100%"
         borderRadius={2}
         {...drag.bind}
       >
-        {uploading && <Box
+        {uploading ? (
+          error !== '' ? (
+            <Box
               display="flex"
+              flexDirection="column"
               width="100%"
               height="100%"
-          position="absolute"
               left={0}
               right={0}
               bg="white"
               zIndex={9}
               alignItems="center"
               justifyContent="center"
+              py={2}
+            >
+              <Icon icon="ExclaimationMarkBold" size={32} />
+              <Text bold>{error}</Text>
+              <Text>Please check your S3 settings.</Text>
+            </Box>
+          ) : (
+            <Box
+              display="flex"
+              width="100%"
+              height="100%"
+              left={0}
+              right={0}
+              bg="white"
+              zIndex={9}
+              alignItems="center"
+              justifyContent="center"
+              py={2}
             >
               <LoadingSpinner />
-        </Box>}
+            </Box>
-      {drag.dragging && <SubmitDragger />}
+          )
+        ) : (
+          <>
             <StatelessUrlInput
               value={linkValue}
               promptUpload={promptUpload}
@@ -156,6 +190,7 @@ const LinkSubmit = (props: LinkSubmitProps) => {
               error={linkValid ? 'Invalid URL' : undefined}
               onKeyPress={onKeyPress}
               onPaste={onPaste}
+              handleError={handleError}
             />
             <BaseInput
               type="text"
@@ -176,6 +211,9 @@ const LinkSubmit = (props: LinkSubmitProps) => {
               onKeyPress={onKeyPress}
               value={linkTitle}
             />
+          </>
+        )}
+        {drag.dragging && <SubmitDragger />}
       </Box>
       <Box mt={2} mb={4}>
         <Button
@@ -183,7 +221,9 @@ const LinkSubmit = (props: LinkSubmitProps) => {
           flexShrink={0}
           disabled={!linkValid || disabled}
           onClick={doPost}
-        >Post link</Button>
+        >
+          Post link
+        </Button>
       </Box>
     </>
   );

pkg/interface/src/views/components/StatelessUrlInput.tsx

@@ -9,8 +9,9 @@ type StatelessUrlInputProps = PropFunc<typeof BaseInput> & {
   focussed?: boolean;
   disabled?: boolean;
   onChange?: (value: string) => void;
-  promptUpload: () => Promise<string>;
+  promptUpload: (onError: (err: Error) => void) => Promise<string>;
   canUpload: boolean;
+  handleError: (err: Error) => void;
   center?: boolean;
 };
 
@@ -22,6 +23,7 @@ export function StatelessUrlInput(props: StatelessUrlInputProps) {
     onChange = () => {},
     promptUpload,
     canUpload,
+    handleError,
     center = false,
     ...rest
   } = props;
@@ -53,7 +55,7 @@ export function StatelessUrlInput(props: StatelessUrlInputProps) {
                   cursor="pointer"
                   color="blue"
                   style={{ pointerEvents: 'all' }}
-                  onClick={() => promptUpload().then(onChange)}
+                  onClick={() => promptUpload(handleError).then(onChange)}
                 >
                   upload
                 </Text>{' '}