From 97fcb20a94ebbd24ff59f78fce8c256b6ab700a2 Mon Sep 17 00:00:00 2001
From: Julia Rechkunova <julia.rechkunova@elastic.co>
Date: Wed, 21 Feb 2024 22:12:20 +0100
Subject: [PATCH] [Discover] Fix horizontal rule in Additional display settings
 popover (#177460)

- Noticed in https://github.com/elastic/kibana/pull/176064

## Summary

This PR renders `EuiHorizontalRule` only between available options.

Before:
<img width="494" alt="Screenshot 2024-02-21 at 15 57 24"
src="https://github.com/elastic/kibana/assets/1415710/f718008e-82fb-48f2-9e30-bc607e571e44">

After:
<img width="491" alt="Screenshot 2024-02-21 at 15 56 47"
src="https://github.com/elastic/kibana/assets/1415710/fe6b2bf1-93b6-4913-bd40-d7187a06e7ee">
---
 ...data_table_additional_display_settings.tsx | 103 ++++++++++--------
 1 file changed, 57 insertions(+), 46 deletions(-)

diff --git a/packages/kbn-unified-data-table/src/components/data_table_additional_display_settings.tsx b/packages/kbn-unified-data-table/src/components/data_table_additional_display_settings.tsx
index 164ab402dd46d..f57127d185a94 100644
--- a/packages/kbn-unified-data-table/src/components/data_table_additional_display_settings.tsx
+++ b/packages/kbn-unified-data-table/src/components/data_table_additional_display_settings.tsx
@@ -90,54 +90,65 @@ export const UnifiedDataTableAdditionalDisplaySettings: React.FC<
     setActiveSampleSize(sampleSize); // reset local state
   }, [sampleSize, setActiveSampleSize]);
 
+  const settings = [];
+
+  if (onChangeHeaderRowHeight && onChangeHeaderRowHeightLines) {
+    settings.push(
+      <RowHeightSettings
+        rowHeight={headerRowHeight}
+        rowHeightLines={headerRowHeightLines}
+        label={i18n.translate('unifiedDataTable.headerRowHeightLabel', {
+          defaultMessage: 'Header row height',
+        })}
+        onChangeRowHeight={onChangeHeaderRowHeight}
+        onChangeRowHeightLines={onChangeHeaderRowHeightLines}
+        data-test-subj="unifiedDataTableHeaderRowHeightSettings"
+        maxRowHeight={5}
+      />
+    );
+  }
+
+  if (onChangeRowHeight && onChangeRowHeightLines) {
+    settings.push(
+      <RowHeightSettings
+        rowHeight={rowHeight}
+        rowHeightLines={rowHeightLines}
+        label={i18n.translate('unifiedDataTable.rowHeightLabel', {
+          defaultMessage: 'Cell row height',
+        })}
+        onChangeRowHeight={onChangeRowHeight}
+        onChangeRowHeightLines={onChangeRowHeightLines}
+        data-test-subj="unifiedDataTableRowHeightSettings"
+      />
+    );
+  }
+
+  if (onChangeSampleSize) {
+    settings.push(
+      <EuiFormRow label={sampleSizeLabel} display="columnCompressed">
+        <EuiRange
+          compressed
+          fullWidth
+          min={minRangeSampleSize}
+          max={maxAllowedSampleSize}
+          step={minRangeSampleSize === RANGE_MIN_SAMPLE_SIZE ? RANGE_STEP_SAMPLE_SIZE : 1}
+          showInput
+          value={activeSampleSize}
+          onChange={onChangeActiveSampleSize}
+          data-test-subj="unifiedDataTableSampleSizeInput"
+        />
+      </EuiFormRow>
+    );
+  }
+
   return (
     <>
-      {onChangeHeaderRowHeight && onChangeHeaderRowHeightLines && (
-        <RowHeightSettings
-          rowHeight={headerRowHeight}
-          rowHeightLines={headerRowHeightLines}
-          label={i18n.translate('unifiedDataTable.headerRowHeightLabel', {
-            defaultMessage: 'Header row height',
-          })}
-          onChangeRowHeight={onChangeHeaderRowHeight}
-          onChangeRowHeightLines={onChangeHeaderRowHeightLines}
-          data-test-subj="unifiedDataTableHeaderRowHeightSettings"
-          maxRowHeight={5}
-        />
-      )}
-      {onChangeRowHeight && onChangeRowHeightLines && (
-        <>
-          <EuiHorizontalRule margin="s" />
-          <RowHeightSettings
-            rowHeight={rowHeight}
-            rowHeightLines={rowHeightLines}
-            label={i18n.translate('unifiedDataTable.rowHeightLabel', {
-              defaultMessage: 'Cell row height',
-            })}
-            onChangeRowHeight={onChangeRowHeight}
-            onChangeRowHeightLines={onChangeRowHeightLines}
-            data-test-subj="unifiedDataTableRowHeightSettings"
-          />
-        </>
-      )}
-      {onChangeSampleSize && (
-        <>
-          <EuiHorizontalRule margin="s" />
-          <EuiFormRow label={sampleSizeLabel} display="columnCompressed">
-            <EuiRange
-              compressed
-              fullWidth
-              min={minRangeSampleSize}
-              max={maxAllowedSampleSize}
-              step={minRangeSampleSize === RANGE_MIN_SAMPLE_SIZE ? RANGE_STEP_SAMPLE_SIZE : 1}
-              showInput
-              value={activeSampleSize}
-              onChange={onChangeActiveSampleSize}
-              data-test-subj="unifiedDataTableSampleSizeInput"
-            />
-          </EuiFormRow>
-        </>
-      )}
+      {settings.map((setting, index) => (
+        <React.Fragment key={`setting-${index}`}>
+          {index > 0 && <EuiHorizontalRule margin="s" />}
+          {setting}
+        </React.Fragment>
+      ))}
     </>
   );
 };