show selection indicator for history events accordion (#890)

Author: Assem-Uber

src/views/workflow-history/workflow-history-events-card/workflow-history-events-card.styles.ts

@@ -1,6 +1,10 @@
-import { type Theme } from 'baseui';
-import { type AccordionOverrides } from 'baseui/accordion';
+import { type Theme, withStyle } from 'baseui';
+import {
+  type StatelessAccordion,
+  type AccordionOverrides,
+} from 'baseui/accordion';
 import { type SkeletonOverrides } from 'baseui/skeleton/types';
+import { StyledTableHeadCell } from 'baseui/table-semantic';
 import { type StyleObject } from 'styletron-react';
 
 import type {
@@ -10,7 +14,7 @@ import type {
 
 import getBadgeContainerSize from '../workflow-history-event-status-badge/helpers/get-badge-container-size';
 
-export const overrides = {
+export const overrides = (animateBorderOnEnter?: boolean) => ({
   circularSkeleton: {
     Root: {
       style: {
@@ -23,6 +27,17 @@ export const overrides = {
       style: ({ $theme }: { $theme: Theme }): StyleObject => ({
         ...$theme.borders.border100,
         borderRadius: $theme.borders.radius300,
+        animationDuration: '2s',
+        ...(animateBorderOnEnter && {
+          animationName: {
+            from: {
+              boxShadow: `0px 0px 0px 2px ${$theme.colors.primary}`,
+            },
+            to: {
+              boxShadow: `0px 0px 0px 0px rgba(0, 0, 0, 0)`,
+            },
+          },
+        }),
         overflow: 'hidden',
       }),
     },
@@ -66,7 +81,7 @@ export const overrides = {
       }),
     },
   } satisfies AccordionOverrides,
-};
+});
 
 const cssStylesObj = {
   eventLabel: ($theme: Theme) => ({

src/views/workflow-history/workflow-history-events-card/workflow-history-events-card.tsx

@@ -10,7 +10,10 @@ import WorkflowHistoryEventDetails from '../workflow-history-event-details/workf
 import getBadgeContainerSize from '../workflow-history-event-status-badge/helpers/get-badge-container-size';
 import WorkflowHistoryEventStatusBadge from '../workflow-history-event-status-badge/workflow-history-event-status-badge';
 
-import { cssStyles, overrides } from './workflow-history-events-card.styles';
+import {
+  cssStyles,
+  overrides as getOverrides,
+} from './workflow-history-events-card.styles';
 import { type Props } from './workflow-history-events-card.types';
 
 export default function WorkflowHistoryEventsCard({
@@ -20,6 +23,7 @@ export default function WorkflowHistoryEventsCard({
   decodedPageUrlParams,
   getIsEventExpanded,
   onEventToggle,
+  animateBorderOnEnter,
 }: Props) {
   const { cls, theme } = useStyletronClasses(cssStyles);
 
@@ -29,6 +33,7 @@ export default function WorkflowHistoryEventsCard({
     if (getIsEventExpanded(id)) result.push(id);
     return result;
   }, [] as string[]);
+  const overrides = getOverrides(animateBorderOnEnter);
 
   return (
     <StatelessAccordion overrides={overrides.accordion} expanded={expanded}>

src/views/workflow-history/workflow-history-events-card/workflow-history-events-card.types.ts

@@ -15,4 +15,5 @@ export type Props = {
   decodedPageUrlParams: WorfklowHistoryProps['params'];
   getIsEventExpanded: GetIsEventExpanded;
   onEventToggle: ToggleIsEventExpanded;
+  animateBorderOnEnter?: boolean;
 };

src/views/workflow-history/workflow-history-timeline-group/workflow-history-timeline-group.tsx

@@ -30,6 +30,7 @@ export default function WorkflowHistoryTimelineGroup({
   getIsEventExpanded,
   onEventToggle,
   onReset,
+  selected,
 }: Props) {
   const { cls } = useStyletronClasses(cssStyles);
   const hasBadges = badges !== undefined && badges.length > 0;
@@ -88,6 +89,7 @@ export default function WorkflowHistoryTimelineGroup({
           decodedPageUrlParams={decodedPageUrlParams}
           getIsEventExpanded={getIsEventExpanded}
           onEventToggle={onEventToggle}
+          animateBorderOnEnter={selected}
         />
       </div>
     </div>

src/views/workflow-history/workflow-history-timeline-group/workflow-history-timeline-group.types.ts

@@ -23,4 +23,5 @@ export type Props = Pick<
   getIsEventExpanded: GetIsEventExpanded;
   onEventToggle: ToggleIsEventExpanded;
   onReset?: () => void;
+  selected?: boolean;
 };

src/views/workflow-history/workflow-history.tsx

@@ -422,6 +422,10 @@ export default function WorkflowHistory({ params }: Props) {
                       setResetToDecisionEventId(group.resetToDecisionEventId);
                     }
                   }}
+                  selected={
+                    queryParams.historySelectedEventId ===
+                    group.events[0].eventId
+                  }
                 />
               )}
               components={{