[8.x] Remove deprecated usages of `EuiFormRow`'s &#x60…

…;display="columnCompressedSwitch"` prop (elastic#198709) (elastic#199210)

# Backport

This will backport the following commits from `main` to `8.x`:
- [Remove deprecated usages of `EuiFormRow`'s
`display="columnCompressedSwitch"` prop
(elastic#198709)](elastic#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":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-06T18:18:43Z","message":"Remove
deprecated usages of `EuiFormRow`'s `display=\"columnCompressedSwitch\"`
prop (elastic#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
<[email protected]>","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 (elastic#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
<[email protected]>","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 (elastic#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
<[email protected]>","sha":"83a9acd79b79fa650c610adb13bff1ced2c707fc"}},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Cee Chen <[email protected]>

packages/kbn-event-annotation-components/components/annotation_editor_controls/annotation_editor_controls.tsx

@@ -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}

x-pack/examples/testing_embedded_lens/public/controls.tsx

@@ -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

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

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

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

@@ -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 {

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

@@ -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}

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

@@ -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}

x-pack/plugins/file_upload/public/components/geo_upload_form/geo_upload_form.tsx

@@ -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', {

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

@@ -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
                   {...{

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

@@ -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

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

@@ -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',
         })}

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

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

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

@@ -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',
           })}

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

@@ -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

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

@@ -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', {

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

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

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

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

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

@@ -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',
               })}

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

@@ -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',
           })}

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

@@ -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}

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

@@ -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`,

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

@@ -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', {

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

@@ -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', {

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

@@ -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`,

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

@@ -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',

x-pack/plugins/maps/public/components/force_refresh_checkbox.tsx

@@ -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', {

x-pack/plugins/maps/public/components/global_filter_checkbox.tsx

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

x-pack/plugins/maps/public/components/global_time_checkbox.tsx

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

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

@@ -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`,

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

@@ -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()}

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

@@ -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={