🪟 🎉 [Job logs] Make reset streams list expandable (#11502)

airbyte-webapp/src/area/connection/components/JobHistoryItem/ResetStreamDetails.module.scss

@@ -8,9 +8,11 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   line-height: 20px;
+  max-height: 250px;
 
-  &.open {
+  &.expanded {
     white-space: unset;
+    overflow: auto;
   }
 }
 
@@ -25,3 +27,7 @@
   white-space: nowrap;
   color: colors.$grey-400;
 }
+
+.expandBtn.expandBtn {
+  height: 20px; // non-standard button size
+}

airbyte-webapp/src/area/connection/components/JobHistoryItem/ResetStreamDetails.tsx

@@ -1,21 +1,46 @@
 import classNames from "classnames";
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
+import { useToggle } from "react-use";
 
+import { Button } from "components/ui/Button";
+import { FlexContainer } from "components/ui/Flex";
+import { Icon } from "components/ui/Icon";
 import { Text } from "components/ui/Text";
 
 import styles from "./ResetStreamDetails.module.scss";
 
 interface ResetStreamsDetailsProps {
   names?: string[];
-  isOpen?: boolean;
 }
 
-export const ResetStreamsDetails: React.FC<ResetStreamsDetailsProps> = ({ names = [], isOpen }) => (
-  <Text size="sm" className={classNames(styles.textContainer, { [styles.open]: isOpen })}>
-    {names.map((name, idx) => (
-      <span key={idx} className={styles.text}>
-        {name}
-      </span>
-    ))}
-  </Text>
-);
+export const ResetStreamsDetails: React.FC<ResetStreamsDetailsProps> = ({ names = [] }) => {
+  const textRef = useRef<HTMLParagraphElement>(null);
+  const [isExpanded, setIsExpanded] = useToggle(false);
+  const [isExpandButtonVisible, setIsExpandButtonVisible] = useState<boolean>(false);
+  const onIconClick = () => setIsExpanded();
+
+  useEffect(() => {
+    const textCurrent = textRef.current;
+    // detect text overflow
+    if (textCurrent) {
+      setIsExpandButtonVisible(textCurrent.scrollWidth > textCurrent.clientWidth);
+    }
+  }, []);
+
+  return (
+    <FlexContainer direction="column" justifyContent="center" alignItems="center" gap="none">
+      <Text ref={textRef} size="sm" className={classNames(styles.textContainer, { [styles.expanded]: isExpanded })}>
+        {names.map((name, idx) => (
+          <span key={idx} className={styles.text}>
+            {name}
+          </span>
+        ))}
+      </Text>
+      {isExpandButtonVisible && (
+        <Button size="xs" onClick={onIconClick} variant="clear" className={styles.expandBtn}>
+          <Icon type={isExpanded ? "chevronUp" : "chevronDown"} />
+        </Button>
+      )}
+    </FlexContainer>
+  );
+};