From 63ef176d6c66c8b39eb46b745115ec1ea979bf91 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Fri, 23 Aug 2024 10:28:31 -0400
Subject: [PATCH] fix: more comprehensive handling of invalid event rendering
 (#13645)

---
 .../ConnectionTimelineAllEventsList.module.scss      | 12 ++++++++++++
 .../components/EventLineItem.module.scss             |  3 ---
 .../components/EventLineItem.tsx                     |  6 +-----
 3 files changed, 13 insertions(+), 8 deletions(-)
 delete mode 100644 airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/EventLineItem.module.scss

diff --git a/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/ConnectionTimelineAllEventsList.module.scss b/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/ConnectionTimelineAllEventsList.module.scss
index 070b9c329ef..da1e4375eac 100644
--- a/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/ConnectionTimelineAllEventsList.module.scss
+++ b/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/ConnectionTimelineAllEventsList.module.scss
@@ -22,5 +22,17 @@
       background-color: colors.$grey-100;
       transform: translateX(-50%);
     }
+
+    &:empty {
+      // virtuoso cannot gracefully handle a <1px item inside an li, so we need to return a 1px tall empty item
+      // https://virtuoso.dev/troubleshooting/#i-get-error-zero-sized-element-this-should-not-happen
+      // https://github.com/petyosi/react-virtuoso/issues/35
+      height: 1px;
+
+      /* stylelint-disable-next-line no-descending-specificity */
+      &::before {
+        background-color: transparent;
+      }
+    }
   }
 }
diff --git a/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/EventLineItem.module.scss b/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/EventLineItem.module.scss
deleted file mode 100644
index d96831b28b0..00000000000
--- a/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/EventLineItem.module.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.emptyItem {
-  height: 1px;
-}
diff --git a/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/EventLineItem.tsx b/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/EventLineItem.tsx
index 4d9ce18d917..ddd86235e7a 100644
--- a/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/EventLineItem.tsx
+++ b/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/EventLineItem.tsx
@@ -5,7 +5,6 @@ import { Box } from "components/ui/Box";
 import { ConnectionEvent } from "core/api/types/AirbyteClient";
 
 import { ClearEventItem } from "./ClearEventItem";
-import styles from "./EventLineItem.module.scss";
 import { JobStartEventItem } from "./JobStartEventItem";
 import { RefreshEventItem } from "./RefreshEventItem";
 import { RunningJobItem } from "./RunningJobItem";
@@ -59,8 +58,5 @@ export const EventLineItem: React.FC<{ event: ConnectionEvent | InferType<typeof
       </Box>
     );
   }
-  // virtuoso cannot gracefully handle a <1px item inside an li, so we need to return a 1px tall empty item
-  // https://virtuoso.dev/troubleshooting/#i-get-error-zero-sized-element-this-should-not-happen
-  // https://github.com/petyosi/react-virtuoso/issues/35
-  return <span className={styles.emptyItem} />;
+  return null;
 };