🪟 🐛 Truncate Displayed External Message for Failure/Partial Failure J…

…obs (#15633) * truncate error message * add ellipses if truncated * trim to 136 to prevent extra wrap * use flexbox to truncate message
airbytehq · Aug 16, 2022 · bcc698c · bcc698c
1 parent 8b382b5
commit bcc698c
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/airbyte-webapp/src/components/JobItem/components/AttemptDetails.module.scss b/airbyte-webapp/src/components/JobItem/components/AttemptDetails.module.scss
@@ -5,3 +5,9 @@
   line-height: 15px;
   color: colors.$grey;
 }
+
+.truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/airbyte-webapp/src/components/JobItem/components/AttemptDetails.tsx b/airbyte-webapp/src/components/JobItem/components/AttemptDetails.tsx
@@ -99,7 +99,7 @@ const AttemptDetails: React.FC<IProps> = ({ attempt, className, configType }) =>
         ) : null}
       </div>
       {isFailed && (
-        <div>
+        <div className={styles.truncate}>
           {formatMessage(
             {
               id: "ui.keyValuePairV3",

diff --git a/airbyte-webapp/src/components/JobItem/components/MainInfo.module.scss b/airbyte-webapp/src/components/JobItem/components/MainInfo.module.scss
@@ -8,12 +8,14 @@
   .titleCell {
     display: flex;
     color: colors.$dark-blue;
+    min-width: 0;
 
     .statusIcon {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 75px;
+      min-width: 75px;
 
       & > div {
         margin: 0;
@@ -28,8 +30,10 @@
 
     .justification {
       display: flex;
+      flex-grow: 1;
       flex-direction: column;
       justify-content: center;
+      min-width: 0;
     }
   }