From cfdc3ddcc95106f93d83a1ad6fe9af180edf979a Mon Sep 17 00:00:00 2001
From: Assem Hafez <assem.a.hafez@gmail.com>
Date: Tue, 10 Sep 2024 11:20:41 +0000
Subject: [PATCH 1/2] cadence history compact event card

---
 ...rkflow-history-compact-event-card.test.tsx | 59 +++++++++++++++++++
 ...kflow-history-compact-event-card.styles.ts | 49 +++++++++++++++
 .../workflow-history-compact-event-card.tsx   | 51 ++++++++++++++++
 ...rkflow-history-compact-event-card.types.ts |  8 +++
 ...y-tab-event-status-badge.test.tsx.snapshot | 16 ++---
 ...kflow-history-event-status-badge.styles.ts |  1 +
 6 files changed, 176 insertions(+), 8 deletions(-)
 create mode 100644 src/views/workflow-history/workflow-history-compact-event-card/__tests__/workflow-history-compact-event-card.test.tsx
 create mode 100644 src/views/workflow-history/workflow-history-compact-event-card/workflow-history-compact-event-card.styles.ts
 create mode 100644 src/views/workflow-history/workflow-history-compact-event-card/workflow-history-compact-event-card.tsx
 create mode 100644 src/views/workflow-history/workflow-history-compact-event-card/workflow-history-compact-event-card.types.ts

diff --git a/src/views/workflow-history/workflow-history-compact-event-card/__tests__/workflow-history-compact-event-card.test.tsx b/src/views/workflow-history/workflow-history-compact-event-card/__tests__/workflow-history-compact-event-card.test.tsx
new file mode 100644
index 00000000..b48fe4c2
--- /dev/null
+++ b/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}
+    />
+  );
+}
diff --git a/src/views/workflow-history/workflow-history-compact-event-card/workflow-history-compact-event-card.styles.ts b/src/views/workflow-history/workflow-history-compact-event-card/workflow-history-compact-event-card.styles.ts
new file mode 100644
index 00000000..59e54053
--- /dev/null
+++ b/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;
diff --git a/src/views/workflow-history/workflow-history-compact-event-card/workflow-history-compact-event-card.tsx b/src/views/workflow-history/workflow-history-compact-event-card/workflow-history-compact-event-card.tsx
new file mode 100644
index 00000000..bce2c7b2
--- /dev/null
+++ b/src/views/workflow-history/workflow-history-compact-event-card/workflow-history-compact-event-card.tsx
@@ -0,0 +1,51 @@
+'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>
+  );
+}
diff --git a/src/views/workflow-history/workflow-history-compact-event-card/workflow-history-compact-event-card.types.ts b/src/views/workflow-history/workflow-history-compact-event-card/workflow-history-compact-event-card.types.ts
new file mode 100644
index 00000000..4c0e5a5e
--- /dev/null
+++ b/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;
+};
diff --git a/src/views/workflow-history/workflow-history-event-status-badge/__tests__/workflow-history-tab-event-status-badge.test.tsx.snapshot b/src/views/workflow-history/workflow-history-event-status-badge/__tests__/workflow-history-tab-event-status-badge.test.tsx.snapshot
index 30a6c0ff..3d619804 100644
--- a/src/views/workflow-history/workflow-history-event-status-badge/__tests__/workflow-history-tab-event-status-badge.test.tsx.snapshot
+++ b/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"
diff --git a/src/views/workflow-history/workflow-history-event-status-badge/workflow-history-event-status-badge.styles.ts b/src/views/workflow-history/workflow-history-event-status-badge/workflow-history-event-status-badge.styles.ts
index 19ac3c8a..394dcdb5 100644
--- a/src/views/workflow-history/workflow-history-event-status-badge/workflow-history-event-status-badge.styles.ts
+++ b/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,
       ...(

From 0fcf2fb9dc2f9a201812465c17c7260f6ed17b07 Mon Sep 17 00:00:00 2001
From: Assem Hafez <assem.a.hafez@gmail.com>
Date: Tue, 10 Sep 2024 11:27:25 +0000
Subject: [PATCH 2/2] remove unnecessary space

---
 .../workflow-history-compact-event-card.tsx                      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/views/workflow-history/workflow-history-compact-event-card/workflow-history-compact-event-card.tsx b/src/views/workflow-history/workflow-history-compact-event-card/workflow-history-compact-event-card.tsx
index bce2c7b2..27fc15b2 100644
--- a/src/views/workflow-history/workflow-history-compact-event-card/workflow-history-compact-event-card.tsx
+++ b/src/views/workflow-history/workflow-history-compact-event-card/workflow-history-compact-event-card.tsx
@@ -36,7 +36,6 @@ export default function WorkflowHistoryCompactEventCard({
         )}
         {showLabelPlaceholder && (
           <div className={cls.label}>
-            {' '}
             <Skeleton
               rows={0}
               width="100px"