fix: connection timeline alignment bugs (#13398)

airbytehq · Aug 5, 2024 · 1c679d6 · 1c679d6
1 parent 474d714
commit 1c679d6
Show file tree

Hide file tree

Showing 14 changed files with 124 additions and 106 deletions.
diff --git a/...p/src/pages/connections/ConnectionTimelinePage/ConnectionTimelineEventActions.module.scss b/...p/src/pages/connections/ConnectionTimelinePage/ConnectionTimelineEventActions.module.scss
@@ -0,0 +1,9 @@
+@use "scss/variables";
+
+.eventActions {
+  display: flex;
+  gap: variables.$spacing-xs;
+  align-items: center;
+  flex-shrink: 0;
+  min-width: max-content;
+}
diff --git a/...te-webapp/src/pages/connections/ConnectionTimelinePage/ConnectionTimelineEventActions.tsx b/...te-webapp/src/pages/connections/ConnectionTimelinePage/ConnectionTimelineEventActions.tsx
@@ -0,0 +1,27 @@
+import { FormattedDate } from "react-intl";
+
+import { Text } from "components/ui/Text";
+
+import styles from "./ConnectionTimelineEventActions.module.scss";
+import { JobEventMenu } from "./JobEventMenu";
+
+interface ConnectionTimelineEventActionsProps {
+  jobId: number;
+  eventId?: string;
+  createdAt: number;
+}
+
+export const ConnectionTimelineEventActions: React.FC<ConnectionTimelineEventActionsProps> = ({
+  jobId,
+  eventId,
+  createdAt,
+}) => {
+  return (
+    <div className={styles.eventActions}>
+      <Text color="grey400">
+        <FormattedDate value={createdAt * 1000} timeStyle="short" dateStyle="medium" />
+      </Text>
+      <JobEventMenu jobId={jobId} eventId={eventId} />
+    </div>
+  );
+};
diff --git a/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/ConnectionTimelineEventItem.tsx b/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/ConnectionTimelineEventItem.tsx
@@ -3,6 +3,7 @@ import { PropsWithChildren } from "react";
 import { FlexContainer } from "components/ui/Flex";
 
 import styles from "./ConnectionTimelineEventItem.module.scss";
+
 export const ConnectionTimelineEventItem: React.FC<PropsWithChildren<{ centered?: boolean }>> = ({
   centered,
   children,

diff --git a/...p/src/pages/connections/ConnectionTimelinePage/ConnectionTimelineEventSummary.module.scss b/...p/src/pages/connections/ConnectionTimelinePage/ConnectionTimelineEventSummary.module.scss
@@ -0,0 +1,4 @@
+.eventSummary {
+  flex-grow: 1;
+  min-width: 0;
+}
diff --git a/...te-webapp/src/pages/connections/ConnectionTimelinePage/ConnectionTimelineEventSummary.tsx b/...te-webapp/src/pages/connections/ConnectionTimelinePage/ConnectionTimelineEventSummary.tsx
@@ -0,0 +1,7 @@
+import { PropsWithChildren } from "react";
+
+import styles from "./ConnectionTimelineEventSummary.module.scss";
+
+export const ConnectionTimelineEventSummary: React.FC<PropsWithChildren> = ({ children }) => {
+  return <div className={styles.eventSummary}>{children}</div>;
+};
diff --git a/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/ClearEventItem.tsx b/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/ClearEventItem.tsx
@@ -1,16 +1,16 @@
-import { FormattedDate, FormattedMessage } from "react-intl";
+import { FormattedMessage } from "react-intl";
 import { InferType } from "yup";
 
 import { Box } from "components/ui/Box";
-import { FlexContainer, FlexItem } from "components/ui/Flex";
 import { Text } from "components/ui/Text";
 
 import { ResetStreamsDetails } from "area/connection/components/JobHistoryItem/ResetStreamDetails";
 import { useLocalStorage } from "core/utils/useLocalStorage";
 
+import { ConnectionTimelineEventActions } from "../ConnectionTimelineEventActions";
 import { ConnectionTimelineEventIcon } from "../ConnectionTimelineEventIcon";
 import { ConnectionTimelineEventItem } from "../ConnectionTimelineEventItem";
-import { JobEventMenu } from "../JobEventMenu";
+import { ConnectionTimelineEventSummary } from "../ConnectionTimelineEventSummary";
 import { clearEventSchema } from "../types";
 import { getStatusByEventType, getStatusIcon, titleIdMap } from "../utils";
 
@@ -26,7 +26,7 @@ export const ClearEventItem: React.FC<ClearEventProps> = ({ clearEvent }) => {
   return (
     <ConnectionTimelineEventItem>
       <ConnectionTimelineEventIcon icon="cross" statusIcon={getStatusIcon(jobStatus)} />
-      <FlexItem grow>
+      <ConnectionTimelineEventSummary>
         <Text bold>
           <FormattedMessage id={title} values={{ value: streamsToList.length }} />
         </Text>
@@ -49,13 +49,12 @@ export const ClearEventItem: React.FC<ClearEventProps> = ({ clearEvent }) => {
             </>
           )}
         </Box>
-      </FlexItem>
-      <FlexContainer direction="row" gap="xs" alignItems="center">
-        <Text color="grey400">
-          <FormattedDate value={clearEvent.createdAt * 1000} timeStyle="short" dateStyle="medium" />
-        </Text>
-        <JobEventMenu eventId={clearEvent.id} jobId={clearEvent.summary.jobId} />
-      </FlexContainer>
+      </ConnectionTimelineEventSummary>
+      <ConnectionTimelineEventActions
+        createdAt={clearEvent.createdAt}
+        eventId={clearEvent.id}
+        jobId={clearEvent.summary.jobId}
+      />
     </ConnectionTimelineEventItem>
   );
 };
diff --git a/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/ClearRunningItem.tsx b/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/ClearRunningItem.tsx
@@ -1,14 +1,14 @@
-import { FormattedDate, FormattedMessage } from "react-intl";
+import { FormattedMessage } from "react-intl";
 
 import { Box } from "components/ui/Box";
-import { FlexContainer, FlexItem } from "components/ui/Flex";
 import { Text } from "components/ui/Text";
 
 import { ResetStreamsDetails } from "area/connection/components/JobHistoryItem/ResetStreamDetails";
 
+import { ConnectionTimelineEventActions } from "../ConnectionTimelineEventActions";
 import { ConnectionTimelineEventIcon } from "../ConnectionTimelineEventIcon";
 import { ConnectionTimelineEventItem } from "../ConnectionTimelineEventItem";
-import { JobEventMenu } from "../JobEventMenu";
+import { ConnectionTimelineEventSummary } from "../ConnectionTimelineEventSummary";
 
 interface ClearRunningItemProps {
   jobId: number;
@@ -20,19 +20,14 @@ export const ClearRunningItem: React.FC<ClearRunningItemProps> = ({ jobId, strea
   return (
     <ConnectionTimelineEventItem centered>
       <ConnectionTimelineEventIcon icon="cross" running />
-      <FlexItem grow>
+      <ConnectionTimelineEventSummary>
         <Text bold>
           <FormattedMessage id="connection.timeline.clear_running" values={{ count: streams.length }} />
         </Text>
 
         <Box pt="xs">{streams.length > 0 && <ResetStreamsDetails names={streams} />}</Box>
-      </FlexItem>
-      <FlexContainer direction="row" gap="xs" alignItems="center">
-        <Text color="grey400">
-          <FormattedDate value={startedAt * 1000} timeStyle="short" dateStyle="medium" />
-        </Text>
-        <JobEventMenu jobId={jobId} />
-      </FlexContainer>
+      </ConnectionTimelineEventSummary>
+      <ConnectionTimelineEventActions createdAt={startedAt} jobId={jobId} />
     </ConnectionTimelineEventItem>
   );
 };
diff --git a/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/JobStartEventItem.tsx b/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/JobStartEventItem.tsx
@@ -1,15 +1,15 @@
 import { useMemo } from "react";
-import { FormattedDate, FormattedMessage } from "react-intl";
+import { FormattedMessage } from "react-intl";
 import { InferType } from "yup";
 
 import { Box } from "components/ui/Box";
-import { FlexContainer, FlexItem } from "components/ui/Flex";
 import { IconType } from "components/ui/Icon";
 import { Text } from "components/ui/Text";
 
+import { ConnectionTimelineEventActions } from "../ConnectionTimelineEventActions";
 import { ConnectionTimelineEventIcon } from "../ConnectionTimelineEventIcon";
 import { ConnectionTimelineEventItem } from "../ConnectionTimelineEventItem";
-import { JobEventMenu } from "../JobEventMenu";
+import { ConnectionTimelineEventSummary } from "../ConnectionTimelineEventSummary";
 import { jobStartedEventSchema } from "../types";
 import { titleIdMap } from "../utils";
 
@@ -44,7 +44,7 @@ export const JobStartEventItem: React.FC<JobStartEventItemProps> = ({ jobStartEv
   return (
     <ConnectionTimelineEventItem>
       <ConnectionTimelineEventIcon icon={icon} />
-      <FlexItem grow>
+      <ConnectionTimelineEventSummary>
         <Text bold>
           <FormattedMessage id={titleId} />
         </Text>
@@ -61,13 +61,12 @@ export const JobStartEventItem: React.FC<JobStartEventItemProps> = ({ jobStartEv
             />
           </Text>
         </Box>
-      </FlexItem>
-      <FlexContainer direction="row" gap="xs" alignItems="center">
-        <Text color="grey400">
-          <FormattedDate value={jobStartEvent.createdAt * 1000} timeStyle="short" dateStyle="medium" />
-        </Text>
-        <JobEventMenu eventId={jobStartEvent.id} jobId={jobStartEvent.summary.jobId} />
-      </FlexContainer>
+      </ConnectionTimelineEventSummary>
+      <ConnectionTimelineEventActions
+        createdAt={jobStartEvent.createdAt}
+        eventId={jobStartEvent.id}
+        jobId={jobStartEvent.summary.jobId}
+      />
     </ConnectionTimelineEventItem>
   );
 };
diff --git a/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/RefreshEventItem.tsx b/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/RefreshEventItem.tsx
@@ -1,16 +1,16 @@
-import { FormattedDate, FormattedMessage } from "react-intl";
+import { FormattedMessage } from "react-intl";
 import { InferType } from "yup";
 
 import { Box } from "components/ui/Box";
-import { FlexContainer, FlexItem } from "components/ui/Flex";
 import { Text } from "components/ui/Text";
 
 import { ResetStreamsDetails } from "area/connection/components/JobHistoryItem/ResetStreamDetails";
 import { useLocalStorage } from "core/utils/useLocalStorage";
 
+import { ConnectionTimelineEventActions } from "../ConnectionTimelineEventActions";
 import { ConnectionTimelineEventIcon } from "../ConnectionTimelineEventIcon";
 import { ConnectionTimelineEventItem } from "../ConnectionTimelineEventItem";
-import { JobEventMenu } from "../JobEventMenu";
+import { ConnectionTimelineEventSummary } from "../ConnectionTimelineEventSummary";
 import { refreshEventSchema } from "../types";
 import { getStatusByEventType, getStatusIcon, titleIdMap } from "../utils";
 
@@ -27,7 +27,7 @@ export const RefreshEventItem: React.FC<RefreshEventItemProps> = ({ refreshEvent
     <ConnectionTimelineEventItem>
       <ConnectionTimelineEventIcon icon="rotate" statusIcon={getStatusIcon(jobStatus)} />
 
-      <FlexItem grow>
+      <ConnectionTimelineEventSummary>
         <Text bold>
           <FormattedMessage id={titleId} values={{ value: streamsToList.length }} />
         </Text>
@@ -50,13 +50,12 @@ export const RefreshEventItem: React.FC<RefreshEventItemProps> = ({ refreshEvent
             </>
           )}
         </Box>
-      </FlexItem>
-      <FlexContainer direction="row" gap="xs" alignItems="center">
-        <Text color="grey400">
-          <FormattedDate value={refreshEvent.createdAt * 1000} timeStyle="short" dateStyle="medium" />
-        </Text>
-        <JobEventMenu eventId={refreshEvent.id} jobId={refreshEvent.summary.jobId} />
-      </FlexContainer>
+      </ConnectionTimelineEventSummary>
+      <ConnectionTimelineEventActions
+        createdAt={refreshEvent.createdAt}
+        eventId={refreshEvent.id}
+        jobId={refreshEvent.summary.jobId}
+      />
     </ConnectionTimelineEventItem>
   );
 };
diff --git a/...yte-webapp/src/pages/connections/ConnectionTimelinePage/components/RefreshRunningItem.tsx b/...yte-webapp/src/pages/connections/ConnectionTimelinePage/components/RefreshRunningItem.tsx
@@ -1,14 +1,14 @@
-import { FormattedDate, FormattedMessage } from "react-intl";
+import { FormattedMessage } from "react-intl";
 
 import { Box } from "components/ui/Box";
-import { FlexContainer, FlexItem } from "components/ui/Flex";
 import { Text } from "components/ui/Text";
 
 import { ResetStreamsDetails } from "area/connection/components/JobHistoryItem/ResetStreamDetails";
 
+import { ConnectionTimelineEventActions } from "../ConnectionTimelineEventActions";
 import { ConnectionTimelineEventIcon } from "../ConnectionTimelineEventIcon";
 import { ConnectionTimelineEventItem } from "../ConnectionTimelineEventItem";
-import { JobEventMenu } from "../JobEventMenu";
+import { ConnectionTimelineEventSummary } from "../ConnectionTimelineEventSummary";
 
 interface RefreshRunningItemProps {
   jobId: number;
@@ -20,19 +20,13 @@ export const RefreshRunningItem: React.FC<RefreshRunningItemProps> = ({ jobId, s
   return (
     <ConnectionTimelineEventItem centered>
       <ConnectionTimelineEventIcon icon="rotate" running />
-      <FlexItem grow>
+      <ConnectionTimelineEventSummary>
         <Text bold>
           <FormattedMessage id="connection.timeline.refresh_running" values={{ count: streams.length }} />
         </Text>
         <Box pt="xs">{streams.length > 0 && <ResetStreamsDetails names={streams} />}</Box>
-      </FlexItem>
-
-      <FlexContainer direction="row" gap="xs" alignItems="center">
-        <Text color="grey400">
-          <FormattedDate value={startedAt * 1000} timeStyle="short" dateStyle="medium" />
-        </Text>
-        <JobEventMenu jobId={jobId} />
-      </FlexContainer>
+      </ConnectionTimelineEventSummary>
+      <ConnectionTimelineEventActions createdAt={startedAt} jobId={jobId} />
     </ConnectionTimelineEventItem>
   );
 };
diff --git a/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/SyncEventItem.tsx b/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/SyncEventItem.tsx
@@ -1,17 +1,18 @@
-import { FormattedDate, FormattedMessage } from "react-intl";
+import { FormattedMessage } from "react-intl";
 import { InferType } from "yup";
 
 import { Box } from "components/ui/Box";
-import { FlexContainer, FlexItem } from "components/ui/Flex";
+import { FlexContainer } from "components/ui/Flex";
 import { Text } from "components/ui/Text";
 
 import { formatBytes } from "core/utils/numberHelper";
 import { useFormatDuration } from "core/utils/time";
 import { useLocalStorage } from "core/utils/useLocalStorage";
 
+import { ConnectionTimelineEventActions } from "../ConnectionTimelineEventActions";
 import { ConnectionTimelineEventIcon } from "../ConnectionTimelineEventIcon";
 import { ConnectionTimelineEventItem } from "../ConnectionTimelineEventItem";
-import { JobEventMenu } from "../JobEventMenu";
+import { ConnectionTimelineEventSummary } from "../ConnectionTimelineEventSummary";
 import { syncEventSchema } from "../types";
 import { getStatusByEventType, getStatusIcon, titleIdMap } from "../utils";
 
@@ -80,20 +81,19 @@ export const SyncEventItem: React.FC<SyncEventProps> = ({ syncEvent }) => {
   return (
     <ConnectionTimelineEventItem>
       <ConnectionTimelineEventIcon icon="sync" statusIcon={getStatusIcon(jobStatus)} />
-      <FlexItem grow>
+      <ConnectionTimelineEventSummary>
         <Text bold>
           <FormattedMessage id={titleId} />
         </Text>
         <Box pt="xs">
           <JobStats />
         </Box>
-      </FlexItem>
-      <FlexContainer direction="row" gap="xs" alignItems="center">
-        <Text color="grey400">
-          <FormattedDate value={syncEvent.createdAt * 1000} timeStyle="short" dateStyle="medium" />
-        </Text>
-        <JobEventMenu eventId={syncEvent.id} jobId={syncEvent.summary.jobId} />
-      </FlexContainer>
+      </ConnectionTimelineEventSummary>
+      <ConnectionTimelineEventActions
+        createdAt={syncEvent.createdAt * 1000}
+        eventId={syncEvent.id}
+        jobId={syncEvent.summary.jobId}
+      />
     </ConnectionTimelineEventItem>
   );
 };
diff --git a/...app/src/pages/connections/ConnectionTimelinePage/components/SyncFailEventItem.module.scss b/...app/src/pages/connections/ConnectionTimelinePage/components/SyncFailEventItem.module.scss
@@ -1,12 +1,3 @@
-.failureDetails {
+.details {
   white-space: pre-wrap;
 }
-
-.container {
-  min-width: 0;
-}
-
-.endContent {
-  flex-shrink: 0;
-  min-width: max-content;
-}