[Discover] Fix horizontal rule in Additional display settings popover (…

…#177460) - Noticed in #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">
elastic · Feb 21, 2024 · 97fcb20 · 97fcb20
1 parent 9f2bde1
commit 97fcb20
Showing 1 changed file with 57 additions and 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
@@ -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>
+      ))}
     </>
   );
 };