history compact event card

src/views/workflow-history/workflow-history-compact-event-card/__tests__/workflow-history-compact-event-card.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { render, screen } from '@/test-utils/rtl';
+
+import type WorkflowHistoryEventStatusBadge from '../../workflow-history-event-status-badge/workflow-history-event-status-badge';
+import WorkflowHistoryCompactEventCard from '../workflow-history-compact-event-card';
+import { type Props } from '../workflow-history-compact-event-card.types';
+
+jest.mock<typeof WorkflowHistoryEventStatusBadge>(
+ '../../workflow-history-event-status-badge/workflow-history-event-status-badge',
+ () => jest.fn((props) => <div>{props.status}</div>)
+);
+
+describe('WorkflowHistoryCompactEventCard', () => {
+ it('renders label correctly', () => {
+ setup({
+ label: 'test label',
+ });
+
+ expect(screen.getByText('test label')).toBeInTheDocument();
+ });
+
+ it('renders skeleton instead of label if showLabelPlaceholder is true', () => {
+ const { container } = setup({
+ label: 'test label',
+ showLabelPlaceholder: true,
+ });
+
+ expect(screen.queryByText('test label')).not.toBeInTheDocument();
+ expect(container.querySelector('[testid="loader"]')).toBeInTheDocument();
+ });
+
+ it('renders secondaryLabel correctly', () => {
+ setup({
+ secondaryLabel: 'date text',
+ });
+ expect(screen.getByText('date text')).toBeInTheDocument();
+ });
+
+ it('renders with correct status', () => {
+ setup({
+ status: 'ONGOING',
+ });
+
+ const badge = screen.getByText('ONGOING');
+ expect(badge).toBeInTheDocument();
+ });
+});
+
+function setup(props: Partial<Props>) {
+ return render(
+ <WorkflowHistoryCompactEventCard
+ status="COMPLETED"
+ label="test label"
+ secondaryLabel="test secondaryLabel"
+ {...props}
+ />
+ );
+}

src/views/workflow-history/workflow-history-compact-event-card/workflow-history-compact-event-card.styles.ts

@@ -0,0 +1,49 @@
+import { type Theme, withStyle } from 'baseui';
+import { Root } from 'baseui/accordion/styled-components';
+import { CardOverrides, Card, StyledRoot as StyleCardRoot } from 'baseui/card';
+import { ConfigurationOverride } from 'baseui/helpers/overrides';
+import { type TileOverrides } from 'baseui/tile';
+import { type StyleObject } from 'styletron-react';
+
+import type {
+ StyletronCSSObject,
+ StyletronCSSObjectOf,
+} from '@/hooks/use-styletron-classes';
+
+export const overrides = {
+ Tile: {
+ Root: {
+ style: ({ $theme }: { $theme: Theme }): StyleObject => ({
+ padding: $theme.sizing.scale550,
+ }),
+ },
+ BodyContainerContent: {
+ style: ({ $theme }: { $theme: Theme }): StyleObject => ({
+ display: 'flex',
+ flexDirection: 'row',
+ gap: $theme.sizing.scale500,
+ alignItems: 'flex-start',
+ }),
+ },
+ } satisfies TileOverrides,
+};
+
+const cssStylesObj = {
+ textContainer: ($theme: Theme) => ({
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'flex-start',
+ gap: $theme.sizing.scale200,
+ }),
+ label: ($theme: Theme) => ({
+ ...$theme.typography.LabelSmall,
+ color: $theme.colors.contentPrimary,
+ }),
+ secondaryLabel: ($theme: Theme) => ({
+ ...$theme.typography.LabelXSmall,
+ color: '#868686',
+ }),
+} satisfies StyletronCSSObject;
+
+export const cssStyles: StyletronCSSObjectOf<typeof cssStylesObj> =
+ cssStylesObj;

src/views/workflow-history/workflow-history-compact-event-card/workflow-history-compact-event-card.tsx

@@ -0,0 +1,50 @@
+'use client';
+import React from 'react';
+
+import { Skeleton } from 'baseui/skeleton';
+import { ALIGNMENT, TILE_KIND, Tile } from 'baseui/tile';
+
+import useStyletronClasses from '@/hooks/use-styletron-classes';
+
+import WorkflowHistoryEventStatusBadge from '../workflow-history-event-status-badge/workflow-history-event-status-badge';
+
+import {
+ cssStyles,
+ overrides,
+} from './workflow-history-compact-event-card.styles';
+import { type Props } from './workflow-history-compact-event-card.types';
+
+export default function WorkflowHistoryCompactEventCard({
+ status,
+ label,
+ secondaryLabel,
+ showLabelPlaceholder,
+}: Props) {
+ const { cls, theme } = useStyletronClasses(cssStyles);
+
+ return (
+ <Tile
+ overrides={overrides.Tile}
+ tileKind={TILE_KIND.selection}
+ headerAlignment={ALIGNMENT.right}
+ bodyAlignment={ALIGNMENT.left}
+ >
+ <WorkflowHistoryEventStatusBadge status={status} size="small" />
+ <div className={cls.textContainer}>
+ {label && !showLabelPlaceholder && (
+ <div className={cls.label}>{label}</div>
+ )}
+ {showLabelPlaceholder && (
+ <div className={cls.label}>
+ <Skeleton
+ rows={0}
+ width="100px"
+ height={theme.typography.LabelSmall.lineHeight.toString()}
+ />
+ </div>
+ )}
+ <div className={cls.secondaryLabel}>{secondaryLabel}</div>
+ </div>
+ </Tile>
+ );
+}

src/views/workflow-history/workflow-history-compact-event-card/workflow-history-compact-event-card.types.ts

@@ -0,0 +1,8 @@
+import { type WorkflowEventStatus } from '../workflow-history-event-status-badge/workflow-history-event-status-badge.types';
+
+export type Props = {
+ status: WorkflowEventStatus;
+ label: string;
+ secondaryLabel: string;
+ showLabelPlaceholder?: boolean;
+};

src/views/workflow-history/workflow-history-event-status-badge/__tests__/workflow-history-tab-event-status-badge.test.tsx.snapshot

@@ -17,7 +17,7 @@ exports[`WorkflowHistoryEventStatusBadge should match snapshot when status is CO
  class="css-cOgsKQ"
  >
  <div
- class="css-iRFFER"
+ class="css-gxDomB"
  >
  <svg
  fill="currentColor"
@@ -50,7 +50,7 @@ exports[`WorkflowHistoryEventStatusBadge should match snapshot when status is CO
  class="css-cOgsKQ"
  >
  <div
- class="css-cnNQvr"
+ class="css-ljhiBX"
  >
  <svg
  fill="currentColor"
@@ -83,7 +83,7 @@ exports[`WorkflowHistoryEventStatusBadge should match snapshot when status is FA
  class="css-cOgsKQ"
  >
  <div
- class="css-kGVINR"
+ class="css-imTrvB"
  >
  <svg
  fill="currentColor"
@@ -119,7 +119,7 @@ exports[`WorkflowHistoryEventStatusBadge should match snapshot when status is FA
  class="css-cOgsKQ"
  >
  <div
- class="css-eddTEr"
+ class="css-bJbCmb"
  >
  <svg
  fill="currentColor"
@@ -155,7 +155,7 @@ exports[`WorkflowHistoryEventStatusBadge should match snapshot when status is ON
  class="css-cOgsKQ"
  >
  <div
- class="css-ZnzXk"
+ class="css-bXJwPs"
  >
  <i
  aria-busy="true"
@@ -177,7 +177,7 @@ exports[`WorkflowHistoryEventStatusBadge should match snapshot when status is ON
  class="css-cOgsKQ"
  >
  <div
- class="css-hemuea"
+ class="css-icIqWi"
  >
  <i
  aria-busy="true"
@@ -199,7 +199,7 @@ exports[`WorkflowHistoryEventStatusBadge should match snapshot when status is WA
  class="css-cOgsKQ"
  >
  <div
- class="css-ioUFkF"
+ class="css-fUSnSp"
  >
  <svg
  fill="currentColor"
@@ -232,7 +232,7 @@ exports[`WorkflowHistoryEventStatusBadge should match snapshot when status is WA
  class="css-cOgsKQ"
  >
  <div
- class="css-bLcQbf"
+ class="css-kGwihL"
  >
  <svg
  fill="currentColor"

src/views/workflow-history/workflow-history-event-status-badge/workflow-history-event-status-badge.styles.ts

@@ -21,6 +21,7 @@ export const styled = {
  alignItems: 'center',
  justifyContent: 'center',
  borderRadius: '16px',
+ flexShrink: 0,
  width: containerSize,
  height: containerSize,
  ...(