[TIP] Fixing row height on indicators data grid (#144290)

elastic/security-team#5200
elastic · Nov 8, 2022 · 0719411 · 0719411
1 parent 80bda1a
commit 0719411
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 13 deletions.
diff --git a/...t_intelligence/public/modules/indicators/components/table/components/actions_row_cell.tsx b/...t_intelligence/public/modules/indicators/components/table/components/actions_row_cell.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { useContext, VFC } from 'react';
-import { EuiFlexGroup } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { InvestigateInTimelineButtonIcon } from '../../../../timeline';
 import { Indicator } from '../../../../../../common/types/indicator';
 import { OpenIndicatorFlyoutButton } from './open_flyout_button';
@@ -24,13 +24,17 @@ export const ActionsRowCell: VFC<{ indicator: Indicator }> = ({ indicator }) =>
   const { setExpanded, expanded } = indicatorTableContext;
 
   return (
-    <EuiFlexGroup justifyContent="center">
-      <OpenIndicatorFlyoutButton
-        indicator={indicator}
-        onOpen={setExpanded}
-        isOpen={Boolean(expanded && expanded._id === indicator._id)}
-      />
-      <InvestigateInTimelineButtonIcon data={indicator} data-test-subj={INVESTIGATE_TEST_ID} />
+    <EuiFlexGroup justifyContent="center" gutterSize="none">
+      <EuiFlexItem grow={false}>
+        <OpenIndicatorFlyoutButton
+          indicator={indicator}
+          onOpen={setExpanded}
+          isOpen={Boolean(expanded && expanded._id === indicator._id)}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <InvestigateInTimelineButtonIcon data={indicator} data-test-subj={INVESTIGATE_TEST_ID} />
+      </EuiFlexItem>
     </EuiFlexGroup>
   );
 };
diff --git a/...reat_intelligence/public/modules/indicators/components/table/components/cell_renderer.tsx b/...reat_intelligence/public/modules/indicators/components/table/components/cell_renderer.tsx
@@ -8,6 +8,7 @@
 import { EuiDataGridCellValueElementProps } from '@elastic/eui';
 import React, { useContext, useEffect } from 'react';
 import { euiDarkVars as themeDark, euiLightVars as themeLight } from '@kbn/ui-theme';
+import { useStyles } from './styles';
 import { useKibana } from '../../../../../hooks';
 import { Indicator } from '../../../../../../common/types/indicator';
 import { IndicatorFieldValue } from '../../field_value';
@@ -16,6 +17,8 @@ import { ActionsRowCell } from '.';
 
 export const cellRendererFactory = (from: number) => {
   return ({ rowIndex, columnId, setCellProps }: EuiDataGridCellValueElementProps) => {
+    const styles = useStyles();
+
     const indicatorsTableContext = useContext(IndicatorsTableContext);
 
     if (!indicatorsTableContext) {
@@ -48,10 +51,13 @@ export const cellRendererFactory = (from: number) => {
       return null;
     }
 
-    if (columnId === 'Actions') {
-      return <ActionsRowCell indicator={indicator} />;
-    }
+    const renderContent =
+      columnId === 'Actions' ? (
+        <ActionsRowCell indicator={indicator} />
+      ) : (
+        <IndicatorFieldValue indicator={indicator} field={columnId} />
+      );
 
-    return <IndicatorFieldValue indicator={indicator} field={columnId} />;
+    return <div css={styles.tableCell}>{renderContent}</div>;
   };
 };
diff --git a/...ugins/threat_intelligence/public/modules/indicators/components/table/components/styles.ts b/...ugins/threat_intelligence/public/modules/indicators/components/table/components/styles.ts
@@ -13,7 +13,16 @@ export const useStyles = () => {
     'word-break': 'break-word',
   };
 
+  const tableCell: CSSObject = {
+    overflow: 'hidden',
+    'text-overflow': 'ellipsis',
+    'overflow-wrap': 'initial',
+    'word-wrap': 'initial',
+    'word-break': 'initial',
+  };
+
   return {
     popoverMaxWidth,
+    tableCell,
   };
 };
diff --git a/x-pack/plugins/threat_intelligence/public/modules/indicators/components/table/table.tsx b/x-pack/plugins/threat_intelligence/public/modules/indicators/components/table/table.tsx
@@ -18,7 +18,10 @@ import {
 } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiDataGridColumn } from '@elastic/eui/src/components/datagrid/data_grid_types';
+import {
+  EuiDataGridColumn,
+  EuiDataGridRowHeightsOptions,
+} from '@elastic/eui/src/components/datagrid/data_grid_types';
 import { CellActions, cellPopoverRendererFactory, cellRendererFactory } from './components';
 import { BrowserFields, SecuritySolutionDataViewBase } from '../../../../types';
 import { Indicator, RawIndicatorFieldId } from '../../../../../common/types/indicator';
@@ -161,6 +164,10 @@ export const IndicatorsTable: VFC<IndicatorsTableProps> = ({
       );
     }
 
+    const rowHeightsOptions: EuiDataGridRowHeightsOptions = {
+      lineHeight: '30px',
+    };
+
     if (!indicatorCount) {
       return <EmptyState />;
     }
@@ -194,6 +201,7 @@ export const IndicatorsTable: VFC<IndicatorsTableProps> = ({
           sorting={sorting}
           columnVisibility={columnVisibility}
           columns={mappedColumns}
+          rowHeightsOptions={rowHeightsOptions}
         />
       </>
     );