Merge pull request #152 from kaleido-io/misc-tweaks

Misc tweaks

src/App.tsx

@@ -18,7 +18,6 @@ import {
   createTheme,
   CssBaseline,
   StyledEngineProvider,
-  Theme,
   ThemeProvider,
 } from '@mui/material';
 import { useEffect, useMemo, useRef, useState } from 'react';
@@ -31,17 +30,22 @@ import {
 } from './components/Snackbar/MessageSnackbar';
 import { ApplicationContext } from './contexts/ApplicationContext';
 import { SnackbarContext } from './contexts/SnackbarContext';
-import { FF_EVENTS, INamespace, IStatus, NAMESPACES_PATH } from './interfaces';
+import {
+  FF_EVENTS,
+  INamespace,
+  INewEventSet,
+  IStatus,
+  NAMESPACES_PATH,
+} from './interfaces';
 import { FF_Paths } from './interfaces/constants';
 import { themeOptions } from './theme';
 import { fetchWithCredentials, summarizeFetchError } from './utils';
 
-//TODO: remove along with useStyles() usage
-declare module '@mui/styles/defaultTheme' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  interface DefaultTheme extends Theme {}
-}
-export const theme = createTheme(themeOptions);
+const makeNewEventMap = (): INewEventSet => {
+  const map: any = {};
+  Object.values(FF_EVENTS).map((v) => (map[v] = false));
+  return map;
+};
 
 const App: React.FC = () => {
   const [initialized, setInitialized] = useState(false);
@@ -58,7 +62,7 @@ const App: React.FC = () => {
   const [nodeName, setNodeName] = useState('');
   const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
   // Event Context
-  const [newEvents, setNewEvents] = useState<FF_EVENTS[]>([]);
+  const [newEvents, setNewEvents] = useState<INewEventSet>(makeNewEventMap());
   const [lastRefreshTime, setLastRefresh] = useState<string>(
     new Date().toISOString()
   );
@@ -123,8 +127,13 @@ const App: React.FC = () => {
       ws.current.onmessage = (event: any) => {
         const eventData = JSON.parse(event.data);
         const eventType: FF_EVENTS = eventData.type;
-        if (Object.values(FF_EVENTS).includes(eventType)) {
-          setNewEvents((existing) => [eventType, ...existing]);
+        if (
+          !newEvents[eventType] &&
+          Object.values(FF_EVENTS).includes(eventType)
+        ) {
+          setNewEvents((existing) => {
+            return { ...existing, [eventType]: true };
+          });
         }
       };
 
@@ -144,17 +153,19 @@ const App: React.FC = () => {
   };
 
   const clearNewEvents = () => {
-    setNewEvents([]);
+    setNewEvents(makeNewEventMap());
     setLastRefresh(new Date().toISOString());
   };
 
+  const theme = createTheme(themeOptions);
+
   if (initialized) {
     if (initError) {
       // figure out what to display
       return (
         <>
           <StyledEngineProvider injectFirst>
-            <ThemeProvider {...{ theme }}>
+            <ThemeProvider theme={theme}>
               <CssBaseline>Fallback</CssBaseline>
             </ThemeProvider>
           </StyledEngineProvider>
@@ -181,7 +192,7 @@ const App: React.FC = () => {
             value={{ setMessage, setMessageType, reportFetchError }}
           >
             <StyledEngineProvider injectFirst>
-              <ThemeProvider {...{ theme }}>
+              <ThemeProvider theme={theme}>
                 <CssBaseline>
                   <Router />
                   <MessageSnackbar

src/components/Accordions/ApiAccordion.tsx

@@ -5,9 +5,16 @@ import {
   AccordionSummary,
   Grid,
 } from '@mui/material';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { IDataWithHeader, IFireflyApi } from '../../interfaces';
+import { ApplicationContext } from '../../contexts/ApplicationContext';
+import {
+  FF_NAV_PATHS,
+  FF_Paths,
+  IDataWithHeader,
+  IFireflyApi,
+} from '../../interfaces';
+import { LaunchButton } from '../Buttons/LaunchButton';
 import { HashPopover } from '../Popovers/HashPopover';
 import { FFAccordionHeader } from './FFAccordionHeader';
 import { FFAccordionLink } from './FFAccordionLink';
@@ -19,6 +26,7 @@ interface Props {
 }
 
 export const ApiAccordion: React.FC<Props> = ({ api, isOpen = false }) => {
+  const { selectedNamespace } = useContext(ApplicationContext);
   const { t } = useTranslation();
   const [expanded, setExpanded] = useState<boolean>(isOpen);
 
@@ -42,9 +50,20 @@ export const ApiAccordion: React.FC<Props> = ({ api, isOpen = false }) => {
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
         <FFAccordionHeader
           leftContent={
-            <FFAccordionText color="primary" text={api.name} isHeader />
+            <FFAccordionText
+              color="primary"
+              text={`${FF_Paths.nsPrefix}/${selectedNamespace}/apis/${api.name}`}
+              isHeader
+            />
+          }
+          rightContent={
+            <LaunchButton
+              link={FF_NAV_PATHS.blockchainApisPath(
+                selectedNamespace,
+                api.name
+              )}
+            />
           }
-          rightContent={<HashPopover shortHash address={api.id} />}
         />
       </AccordionSummary>
       <AccordionDetails>
@@ -62,13 +81,9 @@ export const ApiAccordion: React.FC<Props> = ({ api, isOpen = false }) => {
           ))}
         </Grid>
         {/* OpenAPI */}
-        {api.urls.openapi && (
-          <FFAccordionLink header={t('openApi')} link={api.urls.openapi} />
-        )}
-        {/* Swagger */}
-        {api.urls.ui && (
-          <FFAccordionLink header={t('swagger')} link={api.urls.ui} />
-        )}
+        <FFAccordionLink header={t('openApi')} link={api.urls.openapi} />
+        {/* UI */}
+        <FFAccordionLink header={t('ui')} link={api.urls.ui} />
       </AccordionDetails>
     </Accordion>
   );

src/components/Accordions/BlockchainEventAccordion.tsx

@@ -5,10 +5,17 @@ import {
   AccordionSummary,
   Grid,
 } from '@mui/material';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { IBlockchainEvent, IDataWithHeader } from '../../interfaces';
+import { ApplicationContext } from '../../contexts/ApplicationContext';
+import {
+  FF_NAV_PATHS,
+  IBlockchainEvent,
+  IDataWithHeader,
+} from '../../interfaces';
+import { DEFAULT_PADDING } from '../../theme';
 import { getFFTime } from '../../utils';
+import { LaunchButton } from '../Buttons/LaunchButton';
 import { HashPopover } from '../Popovers/HashPopover';
 import { FFJsonViewer } from '../Viewers/FFJsonViewer';
 import { FFAccordionHeader } from './FFAccordionHeader';
@@ -23,6 +30,7 @@ export const BlockchainEventAccordion: React.FC<Props> = ({
   be,
   isOpen = false,
 }) => {
+  const { selectedNamespace } = useContext(ApplicationContext);
   const { t } = useTranslation();
   const [expanded, setExpanded] = useState<boolean>(isOpen);
 
@@ -59,37 +67,49 @@ export const BlockchainEventAccordion: React.FC<Props> = ({
             />
           }
           rightContent={
-            <FFAccordionText color="primary" text={getFFTime(be.timestamp)} />
+            <LaunchButton
+              link={FF_NAV_PATHS.blockchainEventsPath(selectedNamespace, be.id)}
+            />
           }
         />
       </AccordionSummary>
       <AccordionDetails>
-        <Grid container item direction="row">
-          {accInfo.map((info, idx) => (
-            <Grid key={idx} item xs={4} pb={1} justifyContent="flex-start">
-              <FFAccordionText
-                color="primary"
-                text={info.header ?? ''}
-                padding
-              />
-              {info.data}
-            </Grid>
-          ))}
-        </Grid>
         {be.info && (
           <Grid container item direction="column" pb={2}>
-            <FFAccordionText color="primary" text={t('info')} padding />
+            <FFAccordionText
+              color="primary"
+              text={t('info')}
+              padding
+              isHeader
+            />
             <FFJsonViewer json={be.info} />
           </Grid>
         )}
         {be.output && (
           <Grid container item direction="column">
-            <FFAccordionText color="primary" text={t('output')} padding />
+            <FFAccordionText
+              color="primary"
+              text={t('output')}
+              padding
+              isHeader
+            />
             <Grid item>
               <FFJsonViewer json={be.output} />
             </Grid>
           </Grid>
         )}
+        <Grid container item direction="row" pt={DEFAULT_PADDING}>
+          {accInfo.map((info, idx) => (
+            <Grid key={idx} item xs={4} pb={1} justifyContent="flex-start">
+              <FFAccordionText
+                color="primary"
+                text={info.header ?? ''}
+                padding
+              />
+              {info.data}
+            </Grid>
+          ))}
+        </Grid>
       </AccordionDetails>
     </Accordion>
   );

src/components/Accordions/FFAccordionText.tsx

@@ -16,7 +16,7 @@ export const FFAccordionText: React.FC<Props> = ({
   return (
     <Typography
       sx={{
-        fontSize: isHeader ? '16px' : '14px',
+        fontSize: '14px',
         fontWeight: isHeader ? '600' : '500',
         paddingBottom: padding ? 1 : 0,
       }}

src/components/Accordions/ListenerAccordion.tsx

@@ -5,10 +5,16 @@ import {
   AccordionSummary,
   Grid,
 } from '@mui/material';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { IContractListener, IDataWithHeader } from '../../interfaces';
+import { ApplicationContext } from '../../contexts/ApplicationContext';
+import {
+  FF_NAV_PATHS,
+  IContractListener,
+  IDataWithHeader,
+} from '../../interfaces';
 import { getFFTime } from '../../utils';
+import { LaunchButton } from '../Buttons/LaunchButton';
 import { HashPopover } from '../Popovers/HashPopover';
 import { FFAccordionHeader } from './FFAccordionHeader';
 import { FFAccordionText } from './FFAccordionText';
@@ -22,6 +28,7 @@ export const ListenerAccordion: React.FC<Props> = ({
   listener,
   isOpen = false,
 }) => {
+  const { selectedNamespace } = useContext(ApplicationContext);
   const { t } = useTranslation();
   const [expanded, setExpanded] = useState<boolean>(isOpen);
 
@@ -31,13 +38,11 @@ export const ListenerAccordion: React.FC<Props> = ({
       data: <HashPopover address={listener.id} shortHash />,
     },
     {
-      header: t('protocolID'),
-      data: <HashPopover address={listener.protocolId} shortHash />,
-    },
-    {
-      header: t('location'),
-      data: (
-        <HashPopover address={listener.location?.address ?? ''} shortHash />
+      header: t('topic'),
+      data: listener.topic ? (
+        <HashPopover address={listener.topic} shortHash />
+      ) : (
+        <FFAccordionText color="secondary" text={t('noTopicInListener')} />
       ),
     },
     {
@@ -67,10 +72,11 @@ export const ListenerAccordion: React.FC<Props> = ({
             />
           }
           rightContent={
-            <FFAccordionText
-              color="primary"
-              text={getFFTime(listener.created)}
-              isHeader
+            <LaunchButton
+              link={FF_NAV_PATHS.blockchainListenersSinglePath(
+                selectedNamespace,
+                listener.id
+              )}
             />
           }
         />
@@ -79,7 +85,7 @@ export const ListenerAccordion: React.FC<Props> = ({
         {/* Basic Data */}
         <Grid container item direction="row">
           {accInfo.map((info, idx) => (
-            <Grid key={idx} item xs={3} pb={1} justifyContent="flex-start">
+            <Grid key={idx} item xs={4} pb={1} justifyContent="flex-start">
               <FFAccordionText
                 color="primary"
                 text={info.header ?? ''}