Merge pull request #46 from kaleido-io/spinners

Spinners

Author: dechdev

ui/package-lock.json

@@ -20,6 +20,8 @@ import { summarizeFetchError } from './utils/fetches';
 
 // TODO: Make dynamic
 export const SELECTED_NS = 'default';
+// TODO: Figure out why this works
+let dumbAwaitedEventID: string | undefined = undefined;
 
 function App() {
   const [initialized, setInitialized] = useState(true);
@@ -101,23 +103,35 @@ function App() {
 
       const txMap = deepCopyMap.get(event.tx);
       if (txMap !== undefined) {
+        const isComplete = event.reference === dumbAwaitedEventID;
+        if (isComplete) dumbAwaitedEventID = undefined;
+
         return new Map(
           deepCopyMap.set(event.tx, {
-            events: [...txMap.events, event],
+            events: [event, ...txMap.events],
             created: event.created,
+            // TODO: Need better logic
+            isComplete,
           })
         );
       } else {
         return new Map(
           deepCopyMap.set(event.tx, {
             events: [event],
             created: event.created,
+            isComplete: event.reference === dumbAwaitedEventID,
           })
         );
       }
     });
   };
 
+  const addAwaitedEventID = (apiRes: any) => {
+    if (apiRes?.id && apiRes?.id) {
+      dumbAwaitedEventID = apiRes.id;
+    }
+  };
+
   if (initialized) {
     return (
       <SnackbarContext.Provider
@@ -144,6 +158,8 @@ function App() {
             value={{
               logHistory,
               addLogToHistory,
+              dumbAwaitedEventID,
+              addAwaitedEventID,
             }}
           >
             <StyledEngineProvider injectFirst>

ui/src/App.tsx

@@ -127,7 +127,7 @@ export const ContractStateAccordion: React.FC = () => {
                     <Grid container>
                       {contractListeners
                         ?.filter((l) => l.address === api.address)
-                        .map((l) => {
+                        .map((l, idx) => {
                           return (
                             <Grid
                               item
@@ -137,6 +137,7 @@ export const ContractStateAccordion: React.FC = () => {
                               direction="row"
                               justifyContent="space-between"
                               alignItems="flex-start"
+                              key={idx}
                             >
                               <Grid item>
                                 <FFAccordionText

ui/src/components/Accordion/ContractStateAccordion.tsx

@@ -1,8 +1,16 @@
 import { ArrowForwardIos } from '@mui/icons-material';
-import { Alert, Button, Snackbar, Typography } from '@mui/material';
-import { useContext, useState } from 'react';
+import {
+  Alert,
+  Button,
+  CircularProgress,
+  Grid,
+  Snackbar,
+  Typography,
+} from '@mui/material';
+import { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ApplicationContext } from '../../contexts/ApplicationContext';
+import { EventContext } from '../../contexts/EventContext';
 import { DEFAULT_BORDER_RADIUS } from '../../theme';
 
 interface Props {
@@ -16,6 +24,9 @@ export const RunButton: React.FC<Props> = ({ endpoint, payload, disabled }) => {
   const [showSnackbar, setShowSnackbar] = useState(false);
   const { activeForm, setApiStatus, setApiResponse, payloadMissingFields } =
     useContext(ApplicationContext);
+  const { dumbAwaitedEventID, addAwaitedEventID } = useContext(EventContext);
+  // TODO: Remove soon
+  const [justSubmitted, setJustSubmitted] = useState<boolean>(false);
 
   const handleCloseSnackbar = (_: any, reason?: string) => {
     if (reason === 'clickaway') {
@@ -25,6 +36,11 @@ export const RunButton: React.FC<Props> = ({ endpoint, payload, disabled }) => {
     setShowSnackbar(false);
   };
 
+  // TODO: Remove soon
+  useEffect(() => {
+    setJustSubmitted(false);
+  }, [dumbAwaitedEventID]);
+
   const handlePost = () => {
     const blobUpload = activeForm.includes('blob');
     managePayload();
@@ -48,6 +64,8 @@ export const RunButton: React.FC<Props> = ({ endpoint, payload, disabled }) => {
       .then((data) => {
         setShowSnackbar(true);
         setApiResponse(data);
+        setJustSubmitted(true);
+        addAwaitedEventID(data);
       })
       .catch((err) => {
         setShowSnackbar(true);
@@ -82,29 +100,50 @@ export const RunButton: React.FC<Props> = ({ endpoint, payload, disabled }) => {
 
   return (
     <>
-      <Button
-        endIcon={<ArrowForwardIos />}
-        variant="contained"
-        disabled={disabled || payloadMissingFields}
-        sx={{ borderRadius: DEFAULT_BORDER_RADIUS }}
-        onClick={handlePost}
-      >
-        <Typography>{t('run')}</Typography>
-      </Button>
-      <Snackbar
-        open={showSnackbar}
-        autoHideDuration={6000}
-        onClose={handleCloseSnackbar}
-      >
-        <Alert
-          onClose={handleCloseSnackbar}
-          severity={'info'}
-          sx={{ width: '100%' }}
-          variant={'filled'}
+      {dumbAwaitedEventID || justSubmitted ? (
+        <Grid
+          justifyContent="space-between"
+          direction="row"
+          container
+          alignItems={'center'}
         >
-          {`${t('postSentTo')}${endpoint}`}
-        </Alert>
-      </Snackbar>
+          <Grid item xs={11}>
+            <Typography sx={{ fontSize: '14px', fontWeight: '500' }}>
+              {t('waitingForTxEventsToFinish')}
+            </Typography>
+          </Grid>
+          <Grid item xs={1} container justifyContent="flex-end">
+            <CircularProgress size={16} color="warning" />
+          </Grid>
+        </Grid>
+      ) : (
+        <>
+          <Button
+            endIcon={<ArrowForwardIos />}
+            variant="contained"
+            disabled={disabled || payloadMissingFields}
+            sx={{ borderRadius: DEFAULT_BORDER_RADIUS }}
+            onClick={handlePost}
+            size="small"
+          >
+            <Typography>{t('run')}</Typography>
+          </Button>
+          <Snackbar
+            open={showSnackbar}
+            autoHideDuration={6000}
+            onClose={handleCloseSnackbar}
+          >
+            <Alert
+              onClose={handleCloseSnackbar}
+              severity={'success'}
+              sx={{ width: '100%' }}
+              variant={'filled'}
+            >
+              {`${t('postSentTo')}${endpoint}`}
+            </Alert>
+          </Snackbar>
+        </>
+      )}
     </>
   );
 };

ui/src/components/Buttons/RunButton.tsx

@@ -19,8 +19,10 @@ import { IEvent } from '../interfaces/api';
 import { IEventHistoryItem } from '../interfaces/events';
 
 export interface IEventContext {
-  logHistory: Map<string, IEventHistoryItem>;
   addLogToHistory: (event: IEvent) => void;
+  logHistory: Map<string, IEventHistoryItem>;
+  dumbAwaitedEventID: string | undefined;
+  addAwaitedEventID: (apiRes: any) => void;
 }
 
 export const EventContext = createContext({} as IEventContext);