github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[8.x] Remove deprecated usages of `EuiFormRow`'s `display="columnCompressedSwitch"` prop (#198709) (#199210)

Browse source 
# Backport

This will backport the following commits from `main` to `8.x`:
- [Remove deprecated usages of `EuiFormRow`'s
`display="columnCompressedSwitch"` prop
(#198709)](https://github.com/elastic/kibana/pull/198709)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Cee
Chen","email":"549407+cee-chen@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-11-06T18:18:43Z","message":"Remove
deprecated usages of `EuiFormRow`'s `display=\"columnCompressedSwitch\"`
prop (#198709)\n\n## Summary\r\n\r\nThis prop option has been deprecated
as of\r\nhttps://github.com/elastic/eui/pull/7968.
`display=\"columnCompressed\"`\r\nnow automatically accounts for
EuiSwitches (via `:has` CSS) and the\r\nextra prop option is no longer
needed.\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [x] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n\r\n---------\r\n\r\nCo-authored-by:
Marta Bondyra
<4283304+mbondyra@users.noreply.github.com>","sha":"83a9acd79b79fa650c610adb13bff1ced2c707fc","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","EUI","v9.0.0","backport:version","v8.17.0"],"title":"Remove
deprecated usages of `EuiFormRow`'s `display=\"columnCompressedSwitch\"`
prop","number":198709,"url":"https://github.com/elastic/kibana/pull/198709","mergeCommit":{"message":"Remove
deprecated usages of `EuiFormRow`'s `display=\"columnCompressedSwitch\"`
prop (#198709)\n\n## Summary\r\n\r\nThis prop option has been deprecated
as of\r\nhttps://github.com/elastic/eui/pull/7968.
`display=\"columnCompressed\"`\r\nnow automatically accounts for
EuiSwitches (via `:has` CSS) and the\r\nextra prop option is no longer
needed.\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [x] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n\r\n---------\r\n\r\nCo-authored-by:
Marta Bondyra
<4283304+mbondyra@users.noreply.github.com>","sha":"83a9acd79b79fa650c610adb13bff1ced2c707fc"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/198709","number":198709,"mergeCommit":{"message":"Remove
deprecated usages of `EuiFormRow`'s `display=\"columnCompressedSwitch\"`
prop (#198709)\n\n## Summary\r\n\r\nThis prop option has been deprecated
as of\r\nhttps://github.com/elastic/eui/pull/7968.
`display=\"columnCompressed\"`\r\nnow automatically accounts for
EuiSwitches (via `:has` CSS) and the\r\nextra prop option is no longer
needed.\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [x] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n\r\n---------\r\n\r\nCo-authored-by:
Marta Bondyra
<4283304+mbondyra@users.noreply.github.com>","sha":"83a9acd79b79fa650c610adb13bff1ced2c707fc"}},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2024-11-07 07:11:05 +11:00 • committed by GitHub
parent 0432f750ee
commit c1b598fc27
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
31 changed files with 43 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/kbn-event-annotation-components/components/annotation_editor_controls/annotation_editor_controls.tsx
View file

@ -386,7 +386,7 @@ const ConfigPanelGenericSwitch = ({
value: boolean;
onChange: (event: EuiSwitchEvent) => void;
}) => (
<EuiFormRow label={label} display="columnCompressedSwitch" fullWidth>
<EuiFormRow label={label} display="columnCompressed" fullWidth>
<EuiSwitch
compressed
label={label}

14
x-pack/examples/testing_embedded_lens/public/controls.tsx
View file

@ -150,7 +150,7 @@ export function OverrideSwitch({
</EuiToolTip>
}
helpText={helpText}
display="columnCompressedSwitch"
display="columnCompressed"
hasChildLabel={false}
>
<EuiSwitch
@ -249,7 +249,7 @@ export function AttributesMenu({
</EuiFormRow>
) : null}
{isPieChart(currentAttributes) ? (
<EuiFormRow label="Show values" display="columnCompressedSwitch">
<EuiFormRow label="Show values" display="columnCompressed">
<EuiSwitch
label="As percentage"
name="switch"
@ -269,7 +269,7 @@ export function AttributesMenu({
</EuiFormRow>
) : null}
{isHeatmapChart(currentAttributes) ? (
<EuiFormRow label="Show values" display="columnCompressedSwitch">
<EuiFormRow label="Show values" display="columnCompressed">
<EuiSwitch
label="As percentage"
name="switch"
@ -287,7 +287,7 @@ export function AttributesMenu({
</EuiFormRow>
) : null}
{isGaugeChart(currentAttributes) ? (
<EuiFormRow label="Ticks visibility" display="columnCompressedSwitch">
<EuiFormRow label="Ticks visibility" display="columnCompressed">
<EuiSwitch
label="Show ticks"
name="switch"
@ -522,7 +522,7 @@ export function PanelMenu({
<EuiSpacer />
<EuiFormRow
label="Enable triggers"
display="columnCompressedSwitch"
display="columnCompressed"
helpText="This setting controls the interactivity of the chart: when disabled the chart won't bubble any event on user action."
>
<EuiSwitch
@ -538,7 +538,7 @@ export function PanelMenu({
</EuiFormRow>
<EuiFormRow
label="Enable default action"
display="columnCompressedSwitch"
display="columnCompressed"
helpText="When disabled the default panel actions (i.e. CSV download)"
>
<EuiSwitch
@ -589,7 +589,7 @@ export function PanelMenu({
</span>
</EuiToolTip>
}
display="columnCompressedSwitch"
display="columnCompressed"
helpText="Pass a consumer defined action to show in the panel context menu."
>
<EuiSwitch

2
x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/alerts_settings/alerts_settings.tsx
View file

@ -28,7 +28,7 @@ const AlertsSettingsComponent = ({ knowledgeBase, setUpdatedKnowledgeBaseSetting
return (
<>
<EuiFormRow
display="columnCompressedSwitch"
display="columnCompressed"
label={i18n.ALERTS_LABEL}
css={css`
.euiFormRow__labelWrapper {

2
x-pack/packages/kbn-elastic-assistant/impl/knowledge_base/knowledge_base_settings.tsx
View file

@ -149,7 +149,7 @@ export const KnowledgeBaseSettings: React.FC<Props> = React.memo(
<EuiHorizontalRule margin={'s'} />
<EuiFormRow
display="columnCompressedSwitch"
display="columnCompressed"
label={i18n.KNOWLEDGE_BASE_LABEL}
css={css`
.euiFormRow__labelWrapper {

2
x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/partition_labels/extended_template.tsx
View file

@ -116,7 +116,7 @@ export const ExtendedTemplate: FunctionComponent<Props> = ({ onValueChange, argV
/>
</EuiFormRow>
<EuiSpacer size="s" />
<EuiFormRow label={strings.getValuesLabel()} display="columnCompressedSwitch">
<EuiFormRow label={strings.getValuesLabel()} display="columnCompressed">
<EuiSwitch
compressed
checked={showValues}

2
x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_view.tsx
View file

@ -216,7 +216,7 @@ export const DataDriftView = ({
runAnalysisDisabled={!dataView || requiresWindowParameters}
>
<EuiFlexItem grow={false}>
<EuiFormRow display="columnCompressedSwitch">
<EuiFormRow display="columnCompressed">
<EuiSwitch
label={showOnlyDriftedFieldsOptionLabel}
aria-label={showOnlyDriftedFieldsOptionLabel}

2
x-pack/plugins/file_upload/public/components/geo_upload_form/geo_upload_form.tsx
View file

@ -142,7 +142,7 @@ export class GeoUploadForm extends Component<Props, State> {
onIndexNameValidationEnd={this.props.onIndexNameValidationEnd}
/>
<EuiSpacer size="m" />
<EuiFormRow display="columnCompressedSwitch">
<EuiFormRow display="columnCompressed">
<EuiToolTip
position="top"
content={i18n.translate('xpack.fileUpload.smallChunks.tooltip', {

3
x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
View file

@ -684,9 +684,6 @@ export function LayerPanel(props: LayerPanelProps) {
{layerDatasource?.LayerSettingsComponent && (
<layerDatasource.LayerSettingsComponent {...layerDatasourceConfigProps} />
)}
{layerDatasource?.LayerSettingsComponent && visualizationLayerSettings.data ? (
<EuiSpacer size="m" />
) : null}
{activeVisualization?.LayerSettingsComponent && visualizationLayerSettings.data ? (
<activeVisualization.LayerSettingsComponent
{...{

2
x-pack/plugins/lens/public/shared_components/axis/extent/axis_extent_settings.tsx
View file

@ -111,7 +111,7 @@ export function AxisBoundsControl({
label={i18n.translate('xpack.lens.fullExtent.niceValues', {
defaultMessage: 'Round to nice values',
})}
display="columnCompressedSwitch"
display="columnCompressed"
fullWidth
>
<EuiSwitch

2
x-pack/plugins/lens/public/shared_components/axis/ticks/axis_ticks_settings.tsx
View file

@ -40,7 +40,7 @@ export const AxisTicksSettings: React.FunctionComponent<AxisTicksSettingsProps>
return (
<>
<EuiFormRow
display="columnCompressedSwitch"
display="columnCompressed"
label={i18n.translate('xpack.lens.shared.tickLabels', {
defaultMessage: 'Tick labels',
})}

2
x-pack/plugins/lens/public/shared_components/ignore_global_filter/settings_control.tsx
View file

@ -18,7 +18,7 @@ export function IgnoreGlobalFilterRowControl({
}) {
return (
<EuiFormRow
display="columnCompressedSwitch"
display="columnCompressed"
label={i18n.translate('xpack.lens.layerSettings.ignoreGlobalFilters', {
defaultMessage: 'Use global filters',
})}

4
x-pack/plugins/lens/public/shared_components/legend/legend_settings_popover.tsx
View file

@ -360,7 +360,7 @@ export function LegendSettingsPopover<LegendStats extends LegendValue = XYLegend
)}
{showsShowValueSetting && (
<EuiFormRow
display="columnCompressedSwitch"
display="columnCompressed"
label={i18n.translate('xpack.lens.shared.valueInLegendLabel', {
defaultMessage: 'Show value',
})}
@ -415,7 +415,7 @@ export function LegendSettingsPopover<LegendStats extends LegendValue = XYLegend
{isLegendNotHidden && renderNestedLegendSwitch && (
<EuiFormRow
display="columnCompressedSwitch"
display="columnCompressed"
label={i18n.translate('xpack.lens.shared.nestedLegendLabel', {
defaultMessage: 'Nested',
})}

4
x-pack/plugins/lens/public/visualizations/datatable/components/dimension_editor.tsx
View file

@ -256,7 +256,7 @@ export function TableDimensionEditor(props: TableDimensionEditorProps) {
label={i18n.translate('xpack.lens.table.columnVisibilityLabel', {
defaultMessage: 'Hide column',
})}
display="columnCompressedSwitch"
display="columnCompressed"
>
<EuiSwitch
compressed
@ -292,7 +292,7 @@ export function TableDimensionEditor(props: TableDimensionEditorProps) {
label={i18n.translate('xpack.lens.table.columnFilterClickLabel', {
defaultMessage: 'Directly filter on click',
})}
display="columnCompressedSwitch"
display="columnCompressed"
>
<EuiSwitch
compressed

2
x-pack/plugins/lens/public/visualizations/datatable/components/toolbar.tsx
View file

@ -112,7 +112,7 @@ export function DataTableToolbar(props: VisualizationToolbarProps<DatatableVisua
label={i18n.translate('xpack.lens.table.visualOptionsPaginateTable', {
defaultMessage: 'Paginate table',
})}
display="columnCompressedSwitch"
display="columnCompressed"
>
<EuiToolTip
content={i18n.translate('xpack.lens.table.visualOptionsPaginateTableTooltip', {

2
x-pack/plugins/lens/public/visualizations/gauge/dimension_editor.tsx
View file

@ -143,7 +143,7 @@ export function GaugeDimensionEditor(
</PalettePanelContainer>
</EuiFormRow>
<EuiFormRow
display="columnCompressedSwitch"
display="columnCompressed"
fullWidth
label={
<TooltipWrapper

2
x-pack/plugins/lens/public/visualizations/partition/layer_settings.tsx
View file

@ -30,7 +30,7 @@ export function LayerSettings(
return (
<EuiFormRow
display="columnCompressedSwitch"
display="columnCompressed"
label={i18n.translate('xpack.lens.pieChart.multipleMetrics', {
defaultMessage: 'Multiple metrics',
})}

2
x-pack/plugins/lens/public/visualizations/tagcloud/tagcloud_toolbar/tagcloud_toolbar.tsx
View file

@ -100,7 +100,7 @@ export function TagcloudToolbar(props: VisualizationToolbarProps<TagcloudState>)
/>
</EuiFormRow>
<EuiFormRow
display="columnCompressedSwitch"
display="columnCompressed"
label={i18n.translate('xpack.lens.label.tagcloud.showLabel', {
defaultMessage: 'Show label',
})}

6
x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/axis_settings_popover.tsx
View file

@ -279,7 +279,7 @@ export const AxisSettingsPopover: React.FunctionComponent<AxisSettingsPopoverPro
isTitleVisible={isTitleVisible}
/>
<EuiFormRow
display="columnCompressedSwitch"
display="columnCompressed"
label={i18n.translate('xpack.lens.xyChart.Gridlines', {
defaultMessage: 'Gridlines',
})}
@ -332,7 +332,7 @@ export const AxisSettingsPopover: React.FunctionComponent<AxisSettingsPopoverPro
)}
{setEndzoneVisibility && (
<EuiFormRow
display="columnCompressedSwitch"
display="columnCompressed"
label={i18n.translate('xpack.lens.xyChart.showEnzones', {
defaultMessage: 'Show partial data markers',
})}
@ -352,7 +352,7 @@ export const AxisSettingsPopover: React.FunctionComponent<AxisSettingsPopoverPro
)}
{setCurrentTimeMarkerVisibility && (
<EuiFormRow
display="columnCompressedSwitch"
display="columnCompressed"
label={i18n.translate('xpack.lens.xyChart.showCurrenTimeMarker', {
defaultMessage: 'Show current time marker',
})}

2
x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/visual_options_popover/missing_values_option.tsx
View file

@ -120,7 +120,7 @@ export const MissingValuesOptions: React.FC<MissingValuesOptionProps> = ({
label={i18n.translate('xpack.lens.xyChart.missingValuesStyle', {
defaultMessage: 'Show as dotted line',
})}
display="columnCompressedSwitch"
display="columnCompressed"
>
<EuiSwitch
showLabel={false}

4
x-pack/plugins/maps/public/classes/styles/vector/components/__snapshots__/vector_style_editor.test.tsx.snap generated
View file

@ -392,7 +392,7 @@ exports[`should render 1`] = `
size="m"
/>
<EuiFormRow
display="columnCompressedSwitch"
display="columnCompressed"
>
<EuiSwitch
checked={true}
@ -741,7 +741,7 @@ exports[`should render with no style fields 1`] = `
size="m"
/>
<EuiFormRow
display="columnCompressedSwitch"
display="columnCompressed"
>
<EuiSwitch
checked={true}

2
x-pack/plugins/maps/public/classes/styles/vector/components/color/dynamic_color_form.tsx
View file

@ -159,7 +159,7 @@ export function DynamicColorForm({
invert={invert}
/>
{!!styleOptions.useCustomColorRamp ? null : (
<EuiFormRow display="columnCompressedSwitch">
<EuiFormRow display="columnCompressed">
<EuiSwitch
label={i18n.translate('xpack.maps.style.revereseColorsLabel', {
defaultMessage: `Reverse colors`,

2
x-pack/plugins/maps/public/classes/styles/vector/components/data_mapping/categorical_data_mapping_popover.tsx
View file

@ -31,7 +31,7 @@ export function CategoricalDataMappingPopover<DynamicOptions>(props: Props<Dynam
return (
<DataMappingPopover>
<EuiFormRow display="columnCompressedSwitch">
<EuiFormRow display="columnCompressed">
<>
<EuiSwitch
label={i18n.translate('xpack.maps.styles.fieldMetaOptions.isEnabled.categoricalLabel', {

2
x-pack/plugins/maps/public/classes/styles/vector/components/data_mapping/ordinal_data_mapping_popover.tsx
View file

@ -161,7 +161,7 @@ export function OrdinalDataMappingPopover<DynamicOptions>(props: Props<DynamicOp
return (
<Fragment>
<EuiFormRow display="columnCompressedSwitch">
<EuiFormRow display="columnCompressed">
<>
<EuiSwitch
label={i18n.translate('xpack.maps.styles.ordinalDataMapping.isEnabledSwitchLabel', {

2
x-pack/plugins/maps/public/classes/styles/vector/components/size/dynamic_size_form.tsx
View file

@ -72,7 +72,7 @@ export function DynamicSizeForm({
showLabels
compressed
/>
<EuiFormRow display="columnCompressedSwitch">
<EuiFormRow display="columnCompressed">
<EuiSwitch
label={i18n.translate('xpack.maps.style.revereseSizeLabel', {
defaultMessage: `Reverse size`,

2
x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.tsx
View file

@ -616,7 +616,7 @@ export class VectorStyleEditor extends Component<Props, State> {
}
return (
<EuiFormRow display="columnCompressedSwitch">
<EuiFormRow display="columnCompressed">
<EuiSwitch
label={i18n.translate('xpack.maps.vectorStyleEditor.isTimeAwareLabel', {
defaultMessage: 'Apply global time to style metadata requests',

2
x-pack/plugins/maps/public/components/force_refresh_checkbox.tsx
View file

@ -20,7 +20,7 @@ export function ForceRefreshCheckbox({ applyForceRefresh, setApplyForceRefresh }
};
return (
<EuiFormRow display="columnCompressedSwitch">
<EuiFormRow display="columnCompressed">
<EuiToolTip
position="top"
content={i18n.translate('xpack.maps.filterEditor.applyForceRefreshTooltip', {

2
x-pack/plugins/maps/public/components/global_filter_checkbox.tsx
View file

@ -35,7 +35,7 @@ export function GlobalFilterCheckbox({
});
return (
<EuiFormRow display="columnCompressedSwitch">
<EuiFormRow display="columnCompressed">
<EuiToolTip position="top" content={tooltipMessage}>
<EuiSwitch
label={label}

2
x-pack/plugins/maps/public/components/global_time_checkbox.tsx
View file

@ -34,7 +34,7 @@ export function GlobalTimeCheckbox({
});
return (
<EuiFormRow display="columnCompressedSwitch">
<EuiFormRow display="columnCompressed">
<EuiToolTip position="top" content={tooltipMessage}>
<EuiSwitch
label={label}

6
x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
View file

@ -94,7 +94,7 @@ export function LayerSettings(props: Props) {
return null;
}
return (
<EuiFormRow display="columnCompressedSwitch">
<EuiFormRow display="columnCompressed">
<EuiToolTip
position="top"
content={i18n.translate('xpack.maps.layerPanel.settingsPanel.fittableFlagTooltip', {
@ -157,7 +157,7 @@ export function LayerSettings(props: Props) {
}
return (
<EuiFormRow display="columnCompressedSwitch">
<EuiFormRow display="columnCompressed">
<EuiSwitch
label={i18n.translate('xpack.maps.layerPanel.settingsPanel.labelsOnTop', {
defaultMessage: `Show labels on top`,
@ -173,7 +173,7 @@ export function LayerSettings(props: Props) {
const renderDisableTooltips = () => {
return !isVectorLayer(props.layer) ? null : (
<EuiFormRow display="columnCompressedSwitch">
<EuiFormRow display="columnCompressed">
<EuiSwitch
label={i18n.translate('xpack.maps.layerPanel.settingsPanel.DisableTooltips', {
defaultMessage: `Show tooltips`,

2
x-pack/plugins/maps/public/trigger_actions/filter_by_map_extent/modal.tsx
View file

@ -34,7 +34,7 @@ class FilterByMapExtentModal extends Component<Props> {
_renderSwitches() {
return mapEmbeddablesSingleton.getMapPanels().map((mapPanel) => {
return (
<EuiFormRow display="columnCompressedSwitch" key={mapPanel.id}>
<EuiFormRow display="columnCompressed" key={mapPanel.id}>
<EuiSwitch
label={mapPanel.getTitle()}
checked={mapPanel.getIsFilterByMapExtent()}

2
x-pack/plugins/maps/public/trigger_actions/synchronize_movement/modal.tsx
View file

@ -42,7 +42,7 @@ class SynchronizeMovementModal extends Component<Props> {
const hasErrors = synchronizedPanels.length === 1 && mapPanel.getIsMovementSynchronized();
return (
<EuiFormRow
display="columnCompressedSwitch"
display="columnCompressed"
key={mapPanel.id}
isInvalid={hasErrors}
error={