github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-27 18:51:07 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Discover] Fix horizontal rule in Additional display settings popover (#177460)

Browse source 
- 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="f718008e-82fb-48f2-9e30-bc607e571e44">

After:
<img width="491" alt="Screenshot 2024-02-21 at 15 56 47"
src="fe6b2bf1-93b6-4913-bd40-d7187a06e7ee">
This commit is contained in:
Julia Rechkunova 2024-02-21 22:12:20 +01:00 • committed by GitHub
parent 9f2bde1b8a
commit 97fcb20a94
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 57 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

103
packages/kbn-unified-data-table/src/components/data_table_additional_display_settings.tsx
View file

@ -90,54 +90,65 @@ export const UnifiedDataTableAdditionalDisplaySettings: React.FC<
setActiveSampleSize(sampleSize); // reset local state setActiveSampleSize(sampleSize); // reset local state
}, [sampleSize, setActiveSampleSize]); }, [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 ( return (
<> <>
{onChangeHeaderRowHeight && onChangeHeaderRowHeightLines && ( {settings.map((setting, index) => (
<RowHeightSettings <React.Fragment key={`setting-${index}`}>
rowHeight={headerRowHeight} {index > 0 && <EuiHorizontalRule margin="s" />}
rowHeightLines={headerRowHeightLines} {setting}
label={i18n.translate('unifiedDataTable.headerRowHeightLabel', { </React.Fragment>
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>
</>
)}
</> </>
); );
}; };