[Cloud Security Posture] EuiDataGrid tweaks

- restore left alignment of header cells - fix vertical center alignment of cell contents - add more left spacing to custom toolbar data - give timestamp tooltips the same workaround for new cell actions design that Security timeline received
elastic · Jan 4, 2024 · 35a86f3 · 35a86f3
1 parent ac3bef9
commit 35a86f3
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 15 deletions.
diff --git a/packages/kbn-unified-data-table/src/components/data_table.scss b/packages/kbn-unified-data-table/src/components/data_table.scss
@@ -85,10 +85,7 @@
 .euiDataGridHeader {
 
   .euiDataGridHeaderCell__content {
-    @include euiTextTruncate;
-    overflow: hidden;
     white-space: pre-wrap;
-    flex-grow: 1;
   }
 
   .euiDataGridHeaderCell__popover {

diff --git a/.../plugins/cloud_security_posture/public/components/cloud_security_data_table/use_styles.ts b/.../plugins/cloud_security_posture/public/components/cloud_security_data_table/use_styles.ts
@@ -33,18 +33,20 @@ export const useStyles = () => {
 
     & .euiDataGridRowCell {
       font-size: ${euiTheme.size.m};
-      // Vertically center content
-      display: flex;
-      align-items: center;
 
-      // Stretch content to full-width
+      // Vertically center content
       .euiDataGridRowCell__content {
-        flex-grow: 1;
+        display: flex;
+        align-items: center;
       }
     }
     & .euiDataGridRowCell.euiDataGridRowCell--numeric {
       text-align: left;
     }
+    & .euiDataGridHeaderCell--numeric .euiDataGridHeaderCell__content {
+      flex-grow: 0;
+      text-align: left;
+    }
     & .euiDataGrid__controls {
       gap: ${euiTheme.size.s};
     }
@@ -57,7 +59,7 @@ export const useStyles = () => {
       font-size: ${euiTheme.size.m};
       font-weight: ${euiTheme.font.weight.bold};
       border-right: ${euiTheme.border.thin};
-      margin-right: ${euiTheme.size.s};
+      margin-inline: ${euiTheme.size.s};
       padding-right: ${euiTheme.size.m};
     }
     & .euiDataGrid__rightControls {

diff --git a/x-pack/plugins/cloud_security_posture/public/components/timestamp_table_cell.tsx b/x-pack/plugins/cloud_security_posture/public/components/timestamp_table_cell.tsx
@@ -7,11 +7,23 @@
 
 import React from 'react';
 import moment, { type MomentInput } from 'moment';
+import { css } from '@emotion/react';
 import { EuiToolTip } from '@elastic/eui';
 import { CSP_MOMENT_FORMAT } from '../common/constants';
 
+// Offset top-aligned tooltips so that cell actions are visible
+const datagridToolTipOffset = css`
+  &[data-position='top'] {
+    margin-block-start: -8px;
+  }
+`;
+
 export const TimestampTableCell = ({ timestamp }: { timestamp: MomentInput }) => (
-  <EuiToolTip position="top" content={moment(timestamp).format(CSP_MOMENT_FORMAT)}>
+  <EuiToolTip
+    position="bottom"
+    css={datagridToolTipOffset}
+    content={moment(timestamp).format(CSP_MOMENT_FORMAT)}
+  >
     <span>{moment(timestamp).fromNow()}</span>
   </EuiToolTip>
 );
diff --git a/x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/hooks/use_styles.ts b/x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/hooks/use_styles.ts
@@ -45,13 +45,11 @@ export const useStyles = () => {
     }
     & .euiDataGridRowCell {
       font-size: ${euiTheme.size.m};
-      // Vertically center content
-      display: flex;
-      align-items: center;
 
-      // Stretch content to full-width
+      // Vertically center content
       .euiDataGridRowCell__content {
-        flex-grow: 1;
+        display: flex;
+        align-items: center;
       }
     }
     /* EUI QUESTION: Why is this being done via CSS instead of setting isExpandable: false in the columns API? */
@@ -61,6 +59,10 @@ export const useStyles = () => {
     & .euiDataGridRowCell.euiDataGridRowCell--numeric {
       text-align: left;
     }
+    & .euiDataGridHeaderCell--numeric .euiDataGridHeaderCell__content {
+      flex-grow: 0;
+      text-align: left;
+    }
   `;
 
   const highlightStyle = css`

diff --git a/...ecurity_posture/public/pages/vulnerabilities/vulnerabilities_by_resource/severity_map.tsx b/...ecurity_posture/public/pages/vulnerabilities/vulnerabilities_by_resource/severity_map.tsx
@@ -88,6 +88,7 @@ export const SeverityMap = ({ severityMap, total }: Props) => {
       `}
       anchorClassName={css`
         height: ${euiTheme.size.xl};
+        flex-grow: 1;
         display: flex;
         align-items: center;
       `}