[Suggested refactor] DRY out misc popover content utils

cee-chen · cee-chen · commit b89f80c29d53 · 2021-09-01T11:20:10.000-07:00
- DefaultColumnFormatter is repeated in DataGridBody and DataGridFooterRow

- Moving the fns to their own util file lets us write unit tests for them instead of having to dive into props and also removes extra complexity from the already-long DataGridBody file
diff --git a/src/components/datagrid/body/data_grid_body.tsx b/src/components/datagrid/body/data_grid_body.tsx
@@ -23,25 +23,25 @@ import {
   VariableSizeGridProps,
 } from 'react-window';
 import tabbable from 'tabbable';
-import { EuiCodeBlock } from '../../code';
 import {
   EuiMutationObserver,
   useMutationObserver,
 } from '../../observer/mutation_observer';
 import { useResizeObserver } from '../../observer/resize_observer';
-import { EuiText } from '../../text';
 import { EuiDataGridCell } from './data_grid_cell';
 import {
   DataGridSortingContext,
   DataGridWrapperRowsContext,
 } from '../data_grid_context';
 import { EuiDataGridFooterRow } from './data_grid_footer_row';
 import { EuiDataGridHeaderRow } from './header';
+import {
+  DefaultColumnFormatter,
+  providedPopoverContents,
+} from './popover_utils';
 import {
   EuiDataGridBodyProps,
   EuiDataGridInMemoryValues,
-  EuiDataGridPopoverContent,
-  EuiDataGridPopoverContents,
   EuiDataGridSchemaDetector,
 } from '../data_grid_types';
 
@@ -55,32 +55,6 @@ const defaultComparator: NonNullable<
   return 0;
 };
 
-const providedPopoverContents: EuiDataGridPopoverContents = {
-  json: ({ cellContentsElement }) => {
-    let formattedText = cellContentsElement.innerText;
-
-    // attempt to pretty-print the json
-    try {
-      formattedText = JSON.stringify(JSON.parse(formattedText), null, 2);
-    } catch (e) {} // eslint-disable-line no-empty
-
-    return (
-      <EuiCodeBlock
-        isCopyable
-        transparentBackground
-        paddingSize="none"
-        language="json"
-      >
-        {formattedText}
-      </EuiCodeBlock>
-    );
-  },
-};
-
-const DefaultColumnFormatter: EuiDataGridPopoverContent = ({ children }) => {
-  return <EuiText>{children}</EuiText>;
-};
-
 const Cell: FunctionComponent<GridChildComponentProps> = ({
   columnIndex,
   rowIndex: visibleRowIndex,
diff --git a/src/components/datagrid/body/data_grid_footer_row.test.tsx b/src/components/datagrid/body/data_grid_footer_row.test.tsx
@@ -151,20 +151,4 @@ describe('EuiDataGridFooterRow', () => {
       .prop('renderCellValue');
     expect(renderCellValue()).toEqual(null);
   });
-
-  describe('DefaultColumnFormatter', () => {
-    it('wraps content with EuiText', () => {
-      const component = shallow(<EuiDataGridFooterRow {...requiredProps} />);
-      const popoverContent: Function = component
-        .find('EuiDataGridCell')
-        .first()
-        .prop('popoverContent');
-
-      expect(popoverContent({ children: 'test' })).toMatchInlineSnapshot(`
-        <EuiText>
-          test
-        </EuiText>
-      `);
-    });
-  });
 });
diff --git a/src/components/datagrid/body/data_grid_footer_row.tsx b/src/components/datagrid/body/data_grid_footer_row.tsx
@@ -8,16 +8,9 @@
 
 import classnames from 'classnames';
 import React, { forwardRef, memo } from 'react';
-import { EuiText } from '../../text';
 import { EuiDataGridCell } from './data_grid_cell';
-import {
-  EuiDataGridFooterRowProps,
-  EuiDataGridPopoverContent,
-} from '../data_grid_types';
-
-const DefaultColumnFormatter: EuiDataGridPopoverContent = ({ children }) => {
-  return <EuiText>{children}</EuiText>;
-};
+import { DefaultColumnFormatter } from './popover_utils';
+import { EuiDataGridFooterRowProps } from '../data_grid_types';
 
 const EuiDataGridFooterRow = memo(
   forwardRef<HTMLDivElement, EuiDataGridFooterRowProps>(
diff --git a/src/components/datagrid/body/popover_utils.test.tsx b/src/components/datagrid/body/popover_utils.test.tsx
@@ -0,0 +1,54 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import {
+  DefaultColumnFormatter,
+  providedPopoverContents,
+} from './popover_utils';
+
+describe('popover utils', () => {
+  const cellContentsElement = document.createElement('div');
+  cellContentsElement.innerText = '{ "hello": "world" }';
+
+  test('DefaultColumnFormatter', () => {
+    const component = shallow(
+      <DefaultColumnFormatter cellContentsElement={cellContentsElement}>
+        Test
+      </DefaultColumnFormatter>
+    );
+
+    expect(component).toMatchInlineSnapshot(`
+      <EuiText>
+        Test
+      </EuiText>
+    `);
+  });
+
+  test('providedPopoverContents.json', () => {
+    const Component = providedPopoverContents.json;
+    const component = shallow(
+      <Component cellContentsElement={cellContentsElement}>Test</Component>
+    );
+
+    expect(component).toMatchInlineSnapshot(`
+      <EuiCodeBlock
+        isCopyable={true}
+        language="json"
+        paddingSize="none"
+        transparentBackground={true}
+      >
+        {
+        "hello": "world"
+      }
+      </EuiCodeBlock>
+    `);
+  });
+});
diff --git a/src/components/datagrid/body/popover_utils.tsx b/src/components/datagrid/body/popover_utils.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { EuiText } from '../../text';
+import { EuiCodeBlock } from '../../code';
+import {
+  EuiDataGridPopoverContents,
+  EuiDataGridPopoverContent,
+} from '../data_grid_types';
+
+export const DefaultColumnFormatter: EuiDataGridPopoverContent = ({
+  children,
+}) => {
+  return <EuiText>{children}</EuiText>;
+};
+
+export const providedPopoverContents: EuiDataGridPopoverContents = {
+  json: ({ cellContentsElement }) => {
+    let formattedText = cellContentsElement.innerText;
+
+    // attempt to pretty-print the json
+    try {
+      formattedText = JSON.stringify(JSON.parse(formattedText), null, 2);
+    } catch (e) {} // eslint-disable-line no-empty
+
+    return (
+      <EuiCodeBlock
+        isCopyable
+        transparentBackground
+        paddingSize="none"
+        language="json"
+      >
+        {formattedText}
+      </EuiCodeBlock>
+    );
+  },
+};
