Fleet UI: Filepath column styling (#11800)

frontend/pages/hosts/details/cards/Software/SoftwareTableConfig.tsx

@@ -144,7 +144,10 @@ const condenseInstalledPaths = (installedPaths: string[]): string[] => {
 const tooltipTextWithLineBreaks = (lines: string[]) => {
   return lines.map((line) => {
     return (
-      <span key={Math.random().toString().slice(2)}>
+      <span
+        className="tooltip__tooptip_text_line"
+        key={Math.random().toString().slice(2)}
+      >
         {line}
         <br />
       </span>
@@ -352,6 +355,7 @@ export const generateSoftwareTableHeaders = ({
           </TooltipWrapper>
         );
       },
+      disableSortBy: true,
       accessor: "installed_paths",
       Cell: (cellProps: IInstalledPathCellProps): JSX.Element => {
         const numInstalledPaths = cellProps.cell.value?.length || 0;
@@ -378,6 +382,7 @@ export const generateSoftwareTableHeaders = ({
                 effect="solid"
                 backgroundColor={COLORS["tooltip-bg"]}
                 id={`installed_paths__${cellProps.row.original.id}`}
+                className="installed_paths__tooltip"
                 data-html
                 clickable
                 delayHide={300}

frontend/pages/hosts/details/cards/Software/_styles.scss

@@ -48,7 +48,7 @@
           width: $col-md;
         }
         .version__header {
-          width: $col-sm;
+          width: $col-xs;
         }
         .vulnerabilities__header {
           min-width: 130px;
@@ -63,6 +63,9 @@
         .last_opened_at__header {
           display: none;
         }
+        .installed_paths__header {
+          display: none;
+        }
         .linkToFilteredHosts__header {
           min-width: 115px;
         }
@@ -73,7 +76,7 @@
 
           .source__header {
             display: table-cell;
-            width: $col-md;
+            width: $col-sm;
           }
         }
       }
@@ -88,6 +91,27 @@
           display: none;
           width: 0px;
         }
+        .installed_paths__cell {
+          display: none;
+          width: 0px;
+
+          .installed_paths__tooltip {
+            max-width: 550px;
+
+            // gap between each filepath
+            .tooltip__tooltip-text {
+              display: flex;
+              flex-direction: column;
+              gap: $pad-small;
+
+              .tooltip__tooptip_text_line {
+                display: block;
+                word-wrap: break-word;
+                max-width: 550px;
+              }
+            }
+          }
+        }
         .hosts_count__cell {
           .hosts-cell__wrapper {
             display: flex;
@@ -198,24 +222,43 @@
         .last_opened_at__header {
           display: table-cell;
         }
-        .installed_paths__header {
-          width: $col-md;
-        }
       }
       tbody {
         .last_opened_at__cell {
           display: table-cell;
         }
+        .linkToFilteredHosts__cell {
+          .view-all-hosts-link {
+            width: 120px;
+          }
+        }
+      }
+    }
 
+    @media (min-width: $break-1500) {
+      thead {
+        .installed_paths__header {
+          display: table-cell;
+          width: $col-lg;
+        }
+      }
+      tbody {
         .installed_paths__cell {
+          display: table-cell;
+          padding: $pad-small 0;
+
+          .text-cell {
+            width: $col-lg;
+            text-overflow: initial;
+            overflow: initial;
+            white-space: initial;
+            word-wrap: break-word;
+            margin-left: $pad-large;
+          }
           .tooltip {
             display: inline; // center tooltip with hovered text
           }
         }
-
-        .linkToFilteredHosts__cell {
-          width: 120px;
-        }
       }
     }
   }

frontend/styles/var/breakpoints.scss

@@ -1,4 +1,5 @@
 $break-1600: 1600px;
+$break-1500: 1500px;
 $break-1400: 1400px;
 $break-990: 990px;
 $break-768: 768px;

frontend/styles/var/tables.scss

@@ -1,3 +1,4 @@
+$col-xs: 85px; // column size for under 10 characters
 $col-sm: 102px; // column size will "hug" its contents
 $col-md: 252px; // column size not including 24px padding on left and right (total width is 300px)
 $col-lg: 352px; // column size not including 24px padding on left and right (total width is 400px)