Merge pull request #177 from kaleido-io/timeline-btn-bug

Timeline btn bug
hyperledger · Apr 27, 2022 · fee2c55 · fee2c55
2 parents eff6db9 + dcee41a
commit fee2c55
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 26 deletions.
diff --git a/src/components/Cards/EventCards/EventCardWrapper.tsx b/src/components/Cards/EventCards/EventCardWrapper.tsx
@@ -15,24 +15,14 @@ interface Props {
   link?: string;
   linkState?: any;
   onHandleViewEvent?: any;
-  onHandleViewTx?: any;
 }
 
-export const EventCardWrapper = ({
-  event,
-  onHandleViewEvent,
-  onHandleViewTx,
-  link,
-}: Props) => {
+export const EventCardWrapper = ({ event, onHandleViewEvent, link }: Props) => {
   const { t } = useTranslation();
 
   return (
     <BaseCard
-      onClick={
-        onHandleViewTx
-          ? () => onHandleViewTx(event.transaction)
-          : () => onHandleViewEvent(event)
-      }
+      onClick={() => onHandleViewEvent(event)}
       title={
         event.transaction
           ? t(FF_TX_CATEGORY_MAP[event.transaction?.type]?.nicename)

diff --git a/src/components/Cards/FireFlyCard.tsx b/src/components/Cards/FireFlyCard.tsx
@@ -1,6 +1,6 @@
 import { Box, Grid, Typography } from '@mui/material';
 import { IFireFlyCard } from '../../interfaces';
-import { DEFAULT_BORDER_RADIUS } from '../../theme';
+import { altScrollbarStyle, DEFAULT_BORDER_RADIUS } from '../../theme';
 import { FFArrowButton } from '../Buttons/FFArrowButton';
 
 type Props = {
@@ -19,6 +19,7 @@ export const FireFlyCard: React.FC<Props> = ({ cardData, size }) => {
       item
       md={12}
       lg={size === 'medium' ? 4 : 6}
+      sx={altScrollbarStyle}
     >
       <Box
         p={2}

diff --git a/src/pages/Activity/views/Timeline.tsx b/src/pages/Activity/views/Timeline.tsx
@@ -39,7 +39,7 @@ import {
   IPagedEventResponse,
   ITransaction,
 } from '../../../interfaces';
-import { DEFAULT_PADDING } from '../../../theme';
+import { altScrollbarStyle, DEFAULT_PADDING } from '../../../theme';
 import { fetchCatcher, fetchWithCredentials } from '../../../utils';
 import { isOppositeTimelineEvent } from '../../../utils/timeline';
 import { hasAnyEvent } from '../../../utils/wsEvents';
@@ -138,17 +138,25 @@ export const ActivityTimeline: () => JSX.Element = () => {
         item: (
           <EventCardWrapper
             onHandleViewEvent={(event: IEvent) => {
-              setViewEvent(event);
-              setSlideSearchParam(event?.id);
-            }}
-            onHandleViewTx={(tx: ITransaction) => {
-              setViewTx(tx);
-              setSlideSearchParam(tx?.id);
+              if (event.transaction) {
+                setViewTx(event.transaction);
+                setSlideSearchParam(event?.tx ?? null);
+              } else {
+                setViewEvent(event);
+                setSlideSearchParam(event?.id);
+              }
             }}
             link={
-              event.tx
-                ? FF_NAV_PATHS.activityTxDetailPath(selectedNamespace, event.tx)
-                : FF_NAV_PATHS.activityEventsPath(selectedNamespace, event.id)
+              event.transaction
+                ? FF_NAV_PATHS.activityTxDetailPath(
+                    selectedNamespace,
+                    event.transaction.id
+                  )
+                : FF_NAV_PATHS.activityTxDetailPathWithSlide(
+                    selectedNamespace,
+                    event.tx ?? '',
+                    event.id
+                  )
             }
             {...{ event }}
           />
@@ -175,6 +183,7 @@ export const ActivityTimeline: () => JSX.Element = () => {
           direction="column"
           item
           pt={DEFAULT_PADDING}
+          sx={altScrollbarStyle}
         >
           <FFTimelineHeader
             leftHeader={t('submittedByMe')}

diff --git a/src/pages/Home/views/Dashboard.tsx b/src/pages/Home/views/Dashboard.tsx
@@ -374,9 +374,9 @@ export const HomeDashboard: () => JSX.Element = () => {
             recentEventTxs.map((event) => (
               <React.Fragment key={event.id}>
                 <EventCardWrapper
-                  onHandleViewTx={(tx: ITransaction) => {
-                    setViewTx(tx);
-                    setSlideSearchParam(tx.id);
+                  onHandleViewEvent={(event: IEvent) => {
+                    setViewTx(event.transaction);
+                    setSlideSearchParam(event?.tx ?? null);
                   }}
                   link={
                     event.tx

diff --git a/src/theme.tsx b/src/theme.tsx
@@ -87,3 +87,17 @@ export const themeOptions: ThemeOptions = {
     },
   },
 };
+
+export const altScrollbarStyle = {
+  overflow: 'overlay',
+  scrollbarColor: '#1e242a',
+  '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
+    cursor: 'pointer',
+    backgroundColor: '#1e242a',
+  },
+  '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
+    borderRadius: 8,
+    backgroundColor: '#12171d',
+    border: '3px solid #1e242a',
+  },
+};