[7951] Add customRender API to showDisplaySelector

elastic · Oct 15, 2024 · 92bc73e · 92bc73e
1 parent 8ea7bd0
commit 92bc73e
Show file tree

Hide file tree

Showing 4 changed files with 249 additions and 4 deletions.
diff --git a/packages/eui/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap b/packages/eui/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap
@@ -1,5 +1,196 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`useDataGridDisplaySelector displaySelector allows consumers to customize render order via a render prop 1`] = `
+<div
+  data-test-subj="customRender"
+>
+  <div>
+    Hello world
+  </div>
+  <div
+    class="euiFormRow euiFormRow--hasLabel emotion-euiFormRow-columnCompressed"
+    id="generated-id-row"
+  >
+    <div
+      class="euiFormRow__labelWrapper"
+    >
+      <label
+        class="euiFormLabel euiFormRow__label emotion-euiFormLabel"
+        for="generated-id"
+        id="generated-id-label"
+      >
+        Density
+      </label>
+    </div>
+    <div
+      class="euiFormRow__fieldWrapper"
+    >
+      <fieldset
+        class="euiButtonGroup emotion-euiButtonGroup-fullWidth"
+        data-test-subj="densityButtonGroup"
+        id="generated-id"
+      >
+        <legend
+          class="emotion-euiScreenReaderOnly"
+        >
+          Density
+        </legend>
+        <div
+          class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-fullWidth-compressed"
+        >
+          <button
+            aria-pressed="false"
+            class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-empty-text"
+            data-test-subj="compact"
+            title="Compact"
+            type="button"
+          >
+            <span
+              class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
+            >
+              <span
+                class="eui-textTruncate emotion-euiButtonGroupButton__text"
+                data-text="Compact"
+              >
+                Compact
+              </span>
+            </span>
+          </button>
+          <button
+            aria-pressed="false"
+            class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-empty-text"
+            data-test-subj="normal"
+            title="Normal"
+            type="button"
+          >
+            <span
+              class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
+            >
+              <span
+                class="eui-textTruncate emotion-euiButtonGroupButton__text"
+                data-text="Normal"
+              >
+                Normal
+              </span>
+            </span>
+          </button>
+          <button
+            aria-pressed="false"
+            class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-empty-text"
+            data-test-subj="expanded"
+            title="Expanded"
+            type="button"
+          >
+            <span
+              class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
+            >
+              <span
+                class="eui-textTruncate emotion-euiButtonGroupButton__text"
+                data-text="Expanded"
+              >
+                Expanded
+              </span>
+            </span>
+          </button>
+        </div>
+      </fieldset>
+    </div>
+  </div>
+  <div>
+    Mock custom control
+  </div>
+  <div
+    class="euiFormRow euiFormRow--hasLabel emotion-euiFormRow-columnCompressed"
+    id="generated-id-row"
+  >
+    <div
+      class="euiFormRow__labelWrapper"
+    >
+      <label
+        class="euiFormLabel euiFormRow__label emotion-euiFormLabel"
+        for="generated-id"
+        id="generated-id-label"
+      >
+        Row height
+      </label>
+    </div>
+    <div
+      class="euiFormRow__fieldWrapper"
+    >
+      <fieldset
+        class="euiButtonGroup emotion-euiButtonGroup-fullWidth"
+        data-test-subj="rowHeightButtonGroup"
+        id="generated-id"
+      >
+        <legend
+          class="emotion-euiScreenReaderOnly"
+        >
+          Row height
+        </legend>
+        <div
+          class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-fullWidth-compressed"
+        >
+          <button
+            aria-pressed="true"
+            class="euiButtonGroupButton euiButtonGroupButton-isSelected emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-fill-text"
+            data-test-subj="undefined"
+            title="Single"
+            type="button"
+          >
+            <span
+              class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
+            >
+              <span
+                class="eui-textTruncate emotion-euiButtonGroupButton__text"
+                data-text="Single"
+              >
+                Single
+              </span>
+            </span>
+          </button>
+          <button
+            aria-pressed="false"
+            class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-empty-text"
+            data-test-subj="auto"
+            title="Auto fit"
+            type="button"
+          >
+            <span
+              class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
+            >
+              <span
+                class="eui-textTruncate emotion-euiButtonGroupButton__text"
+                data-text="Auto fit"
+              >
+                Auto fit
+              </span>
+            </span>
+          </button>
+          <button
+            aria-pressed="false"
+            class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-empty-text"
+            data-test-subj="lineCount"
+            title="Custom"
+            type="button"
+          >
+            <span
+              class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
+            >
+              <span
+                class="eui-textTruncate emotion-euiButtonGroupButton__text"
+                data-text="Custom"
+              >
+                Custom
+              </span>
+            </span>
+          </button>
+        </div>
+      </fieldset>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`useDataGridDisplaySelector displaySelector renders a toolbar button/popover allowing users to customize display settings 1`] = `
 <body>
   <div>

diff --git a/packages/eui/src/components/datagrid/controls/display_selector.test.tsx b/packages/eui/src/components/datagrid/controls/display_selector.test.tsx
@@ -19,6 +19,7 @@ import { keys } from '../../../services';
 
 import {
   EuiDataGridToolBarVisibilityOptions,
+  EuiDataGridDisplaySelectorCustomRender,
   EuiDataGridRowHeightsOptions,
 } from '../data_grid_types';
 
@@ -86,6 +87,30 @@ describe('useDataGridDisplaySelector', () => {
       expect(container).toBeEmptyDOMElement();
     });
 
+    it('allows consumers to customize render order via a render prop', () => {
+      const customRender: EuiDataGridDisplaySelectorCustomRender = ({
+        densityControl,
+        rowHeightControl,
+      }) => {
+        return (
+          <div data-test-subj="customRender">
+            <div>Hello world</div>
+            {densityControl}
+            <div>Mock custom control</div>
+            {rowHeightControl}
+          </div>
+        );
+      };
+      const { getByTestSubject } = render(
+        <MockComponent showDisplaySelector={{ customRender }} />
+      );
+      fireEvent.click(getByTestSubject('dataGridDisplaySelectorButton'));
+      expect(getByTestSubject('customRender')).toContainHTML(
+        'Mock custom control'
+      );
+      expect(getByTestSubject('customRender')).toMatchSnapshot();
+    });
+
     describe('density', () => {
       it('renders display density buttons that change grid density on click', async () => {
         const { container, baseElement, getByTestSubject } = render(

diff --git a/packages/eui/src/components/datagrid/controls/display_selector.tsx b/packages/eui/src/components/datagrid/controls/display_selector.tsx
@@ -291,6 +291,11 @@ export const useDataGridDisplaySelector = (
       ? null
       : showDisplaySelector?.additionalDisplaySettings ?? null;
 
+  const customRender =
+    typeof showDisplaySelector === 'boolean'
+      ? undefined
+      : showDisplaySelector?.customRender;
+
   // Track styles specified by the user at run time
   const [userGridStyles, setUserGridStyles] = useState({});
   const [userRowHeightsOptions, setUserRowHeightsOptions] = useState({});
@@ -401,10 +406,21 @@ export const useDataGridDisplaySelector = (
           </EuiToolTip>
         }
       >
-        {densityControl}
-        {rowHeightControl}
-        {additionalDisplaySettings}
-        {resetButton}
+        {customRender ? (
+          customRender({
+            densityControl,
+            rowHeightControl,
+            additionalDisplaySettings,
+            resetButton,
+          })
+        ) : (
+          <>
+            {densityControl}
+            {rowHeightControl}
+            {additionalDisplaySettings}
+            {resetButton}
+          </>
+        )}
       </EuiPopover>
     ) : null;
   }, [
@@ -413,6 +429,7 @@ export const useDataGridDisplaySelector = (
     rowHeightControl,
     additionalDisplaySettings,
     resetButton,
+    customRender,
     buttonLabel,
     isOpen,
   ]);

diff --git a/packages/eui/src/components/datagrid/data_grid_types.ts b/packages/eui/src/components/datagrid/data_grid_types.ts
@@ -937,8 +937,20 @@ export interface EuiDataGridToolBarVisibilityDisplaySelectorOptions {
    * Allows appending additional content to the bottom of the display settings popover
    */
   additionalDisplaySettings?: ReactNode;
+  /**
+   * Allows completely custom rendering of the display selector popover via render prop.
+   * Passes back the default controls as arguments for optional rendering.
+   */
+  customRender?: EuiDataGridDisplaySelectorCustomRender;
 }
 
+export type EuiDataGridDisplaySelectorCustomRender = (args: {
+  densityControl: ReactNode;
+  rowHeightControl: ReactNode;
+  additionalDisplaySettings: ReactNode;
+  resetButton: ReactNode;
+}) => ReactNode;
+
 export interface EuiDataGridToolBarVisibilityOptions {
   /**
    * Allows the ability for the user to hide fields and sort columns, boolean or a #EuiDataGridToolBarVisibilityColumnSelectorOptions