[8.x] [Observability] fix slo observability compressed styles to be not compressed (#193081) (#194650)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Observability] fix slo observability compressed styles to be not
compressed (#193081)](https://github.com/elastic/kibana/pull/193081)

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

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

<!--BACKPORT [{"author":{"name":"Rachel
Shen","email":"rshen@elastic.co"},"sourceCommit":{"committedDate":"2024-10-01T23:01:20Z","message":"[Observability]
fix slo observability compressed styles to be not compressed
(#193081)\n\n## Summary\r\n\r\nBuilding off of PR
https://github.com/elastic/kibana/pull/192993 to\r\nrevert the
compressed styles for SLOs\r\n\r\nCompressed styles
PR\r\n[here](https://github.com/elastic/kibana/pull/190636)\r\n\r\n\r\n###
Before\r\nIn the SLO page in Observability, the status and tags fields
are uneven\r\nwith the unified search bar.\r\n![Screenshot 2024-09-30 at
2
10\r\n17 PM](https://github.com/user-attachments/assets/63391aa2-ec7d-43f5-9803-8094e73b8a6c)\r\n\r\n###
After\r\n![Screenshot 2024-09-30 at 2
52\r\n37 PM](https://github.com/user-attachments/assets/fb70109d-15d1-4278-81c6-318da290594f)","sha":"7a9a5194d7acf8a9e507ae6b6acc9d22f56cf2ea","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:all-open","ci:project-deploy-observability","Team:obs-ux-management"],"title":"[Observability]
fix slo observability compressed styles to be not
compressed","number":193081,"url":"https://github.com/elastic/kibana/pull/193081","mergeCommit":{"message":"[Observability]
fix slo observability compressed styles to be not compressed
(#193081)\n\n## Summary\r\n\r\nBuilding off of PR
https://github.com/elastic/kibana/pull/192993 to\r\nrevert the
compressed styles for SLOs\r\n\r\nCompressed styles
PR\r\n[here](https://github.com/elastic/kibana/pull/190636)\r\n\r\n\r\n###
Before\r\nIn the SLO page in Observability, the status and tags fields
are uneven\r\nwith the unified search bar.\r\n![Screenshot 2024-09-30 at
2
10\r\n17 PM](https://github.com/user-attachments/assets/63391aa2-ec7d-43f5-9803-8094e73b8a6c)\r\n\r\n###
After\r\n![Screenshot 2024-09-30 at 2
52\r\n37 PM](https://github.com/user-attachments/assets/fb70109d-15d1-4278-81c6-318da290594f)","sha":"7a9a5194d7acf8a9e507ae6b6acc9d22f56cf2ea"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/193081","number":193081,"mergeCommit":{"message":"[Observability]
fix slo observability compressed styles to be not compressed
(#193081)\n\n## Summary\r\n\r\nBuilding off of PR
https://github.com/elastic/kibana/pull/192993 to\r\nrevert the
compressed styles for SLOs\r\n\r\nCompressed styles
PR\r\n[here](https://github.com/elastic/kibana/pull/190636)\r\n\r\n\r\n###
Before\r\nIn the SLO page in Observability, the status and tags fields
are uneven\r\nwith the unified search bar.\r\n![Screenshot 2024-09-30 at
2
10\r\n17 PM](https://github.com/user-attachments/assets/63391aa2-ec7d-43f5-9803-8094e73b8a6c)\r\n\r\n###
After\r\n![Screenshot 2024-09-30 at 2
52\r\n37 PM](https://github.com/user-attachments/assets/fb70109d-15d1-4278-81c6-318da290594f)","sha":"7a9a5194d7acf8a9e507ae6b6acc9d22f56cf2ea"}}]}]
BACKPORT-->

Co-authored-by: Rachel Shen <rshen@elastic.co>

src/plugins/controls/public/control_group/components/control_panel.tsx

@@ -34,6 +34,7 @@ import { ControlPanelProps, DefaultControlApi } from '../../controls/types';
 import { ControlError } from './control_error';
 
 import './control_panel.scss';
+import { isCompressed } from '../utils/is_compressed';
 
 const DragHandle = ({
   isEditable,
@@ -122,7 +123,6 @@ export const ControlPanel = <ApiType extends DefaultControlApi = DefaultControlA
   const isEditable = viewMode === ViewMode.EDIT;
   const controlWidth = width ?? DEFAULT_CONTROL_WIDTH;
   const controlGrow = grow ?? DEFAULT_CONTROL_GROW;
-
   return (
     <EuiFlexItem
       ref={setNodeRef}
@@ -154,12 +154,10 @@ export const ControlPanel = <ApiType extends DefaultControlApi = DefaultControlA
           data-test-subj="control-frame-title"
           fullWidth
           label={usingTwoLineLayout ? panelTitle || defaultPanelTitle || '...' : undefined}
-          display="rowCompressed"
         >
           <EuiFormControlLayout
             fullWidth
             isLoading={Boolean(dataLoading)}
-            compressed
             className={classNames(
               'controlFrame__formControlLayout',
               {
@@ -191,6 +189,7 @@ export const ControlPanel = <ApiType extends DefaultControlApi = DefaultControlA
                 )}
               </>
             }
+            compressed={isCompressed(api)}
           >
             <>
               {blockingError && (

src/plugins/controls/public/control_group/control_group_renderer/control_group_renderer.tsx

@@ -40,6 +40,7 @@ export interface ControlGroupRendererProps {
   timeRange?: TimeRange;
   query?: Query;
   dataLoading?: boolean;
+  compressed?: boolean;
 }
 
 export const ControlGroupRenderer = ({
@@ -50,6 +51,7 @@ export const ControlGroupRenderer = ({
   query,
   viewMode,
   dataLoading,
+  compressed,
 }: ControlGroupRendererProps) => {
   const id = useMemo(() => uuidv4(), []);
   const [regenerateId, setRegenerateId] = useState(uuidv4());
@@ -171,6 +173,7 @@ export const ControlGroupRenderer = ({
         getRuntimeStateForChild: () => {
           return runtimeState$.getValue();
         },
+        compressed: compressed ?? true,
       })}
       onApiAvailable={(controlGroupApi) => {
         const controlGroupRendererApi: ControlGroupRendererApi = {

src/plugins/controls/public/control_group/utils/is_compressed.test.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { isCompressed } from './is_compressed';
+
+describe('isCompressed', () => {
+  test('should return true by default', () => {
+    const mockApi = {};
+    expect(isCompressed(mockApi)).toBe(true);
+  });
+  test('should return false if compressed is false', () => {
+    const mockApi = { compressed: false };
+    expect(isCompressed(mockApi)).toBe(false);
+  });
+  test('should return false if parent api has compressed false', () => {
+    const mockApi = { parentApi: { compressed: false } };
+    expect(isCompressed(mockApi)).toBe(false);
+  });
+  test('should return false if nested api has compressed false', () => {
+    const mockApi = { parentApi: { parentApi: { parentApi: { compressed: false } } } };
+    expect(isCompressed(mockApi)).toBe(false);
+  });
+  test('should return true if parent api does not specify compressed', () => {
+    const mockApi = { parentApi: { parentApi: {} } };
+    expect(isCompressed(mockApi)).toBe(true);
+  });
+});

src/plugins/controls/public/control_group/utils/is_compressed.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { apiHasParentApi } from '@kbn/presentation-publishing';
+
+interface HasCompressed {
+  compressed: boolean;
+}
+
+const apiHasCompressed = (unknownApi: unknown): unknownApi is HasCompressed => {
+  return Boolean(unknownApi) && typeof (unknownApi as HasCompressed).compressed === 'boolean';
+};
+
+export function isCompressed(api: unknown): boolean {
+  if (apiHasCompressed(api)) return api.compressed;
+  return apiHasParentApi(api) ? isCompressed(api.parentApi) : true;
+}

src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx

@@ -25,6 +25,7 @@ import {
   useBatchedPublishingSubjects,
 } from '@kbn/presentation-publishing';
 
+import { isCompressed } from '../../../../control_group/utils/is_compressed';
 import { OptionsListSelection } from '../../../../../common/options_list/options_list_selections';
 import { MIN_POPOVER_WIDTH } from '../../../constants';
 import { useOptionsListContext } from '../options_list_context_provider';
@@ -174,7 +175,7 @@ export const OptionsListControl = ({
   );
 
   return (
-    <EuiFilterGroup fullWidth compressed className={controlPanelClassName}>
+    <EuiFilterGroup fullWidth compressed={isCompressed(api)} className={controlPanelClassName}>
       <EuiInputPopover
         id={popoverId}
         ownFocus

src/plugins/controls/public/controls/data_controls/range_slider/components/range_slider_control.tsx

@@ -33,6 +33,7 @@ interface Props {
   value: RangeValue | undefined;
   uuid: string;
   controlPanelClassName?: string;
+  compressed: boolean;
 }
 
 export const RangeSliderControl: FC<Props> = ({
@@ -46,6 +47,7 @@ export const RangeSliderControl: FC<Props> = ({
   value,
   uuid,
   controlPanelClassName,
+  compressed,
 }: Props) => {
   const rangeSliderRef = useRef<EuiDualRangeProps | null>(null);
 
@@ -194,7 +196,7 @@ export const RangeSliderControl: FC<Props> = ({
         min={displayedMin}
         max={displayedMax}
         isLoading={isLoading}
-        compressed
+        compressed={compressed}
         inputPopoverProps={{
           className: controlPanelClassName,
           panelMinWidth: MIN_POPOVER_WIDTH,

src/plugins/controls/public/controls/data_controls/range_slider/get_range_slider_control_factory.tsx

@@ -14,6 +14,7 @@ import { EuiFieldNumber, EuiFormRow } from '@elastic/eui';
 import { Filter, RangeFilterParams, buildRangeFilter } from '@kbn/es-query';
 import { useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
 
+import { isCompressed } from '../../../control_group/utils/is_compressed';
 import { RANGE_SLIDER_CONTROL } from '../../../../common';
 import { initializeDataControl } from '../initialize_data_control';
 import type { DataControlFactory } from '../types';
@@ -248,6 +249,7 @@ export const getRangesliderControlFactory = (): DataControlFactory<
               step={step ?? 1}
               value={value}
               uuid={uuid}
+              compressed={isCompressed(api)}
             />
           );
         },

src/plugins/controls/public/controls/timeslider_control/components/time_slider_anchored_range.tsx

@@ -19,6 +19,7 @@ interface Props {
   ticks: EuiRangeTick[];
   timeRangeMin: number;
   timeRangeMax: number;
+  compressed: boolean;
 }
 
 export function TimeSliderAnchoredRange(props: Props) {
@@ -40,7 +41,7 @@ export function TimeSliderAnchoredRange(props: Props) {
       max={props.timeRangeMax}
       step={props.stepSize}
       ticks={props.ticks}
-      compressed
+      compressed={props.compressed}
     />
   );
 }

src/plugins/controls/public/controls/timeslider_control/components/time_slider_popover_content.tsx

@@ -24,6 +24,7 @@ interface Props {
   ticks: EuiRangeTick[];
   timeRangeMin: number;
   timeRangeMax: number;
+  compressed: boolean;
 }
 
 export function TimeSliderPopoverContent(props: Props) {
@@ -35,6 +36,7 @@ export function TimeSliderPopoverContent(props: Props) {
       ticks={props.ticks}
       timeRangeMin={props.timeRangeMin}
       timeRangeMax={props.timeRangeMax}
+      compressed={props.compressed}
     />
   ) : (
     <TimeSliderSlidingWindowRange
@@ -44,6 +46,7 @@ export function TimeSliderPopoverContent(props: Props) {
       ticks={props.ticks}
       timeRangeMin={props.timeRangeMin}
       timeRangeMax={props.timeRangeMax}
+      compressed={props.compressed}
     />
   );
   const anchorStartToggleButtonLabel = props.isAnchored

src/plugins/controls/public/controls/timeslider_control/components/time_slider_sliding_window_range.tsx

@@ -18,6 +18,7 @@ interface Props {
   ticks: EuiRangeTick[];
   timeRangeMin: number;
   timeRangeMax: number;
+  compressed: boolean;
 }
 
 export function TimeSliderSlidingWindowRange(props: Props) {
@@ -36,7 +37,7 @@ export function TimeSliderSlidingWindowRange(props: Props) {
       step={props.stepSize}
       ticks={props.ticks}
       isDraggable
-      compressed
+      compressed={props.compressed}
     />
   );
 }

src/plugins/controls/public/controls/timeslider_control/get_timeslider_control_factory.tsx

@@ -37,6 +37,7 @@ import {
   roundUpToNextStepSizeFactor,
 } from './time_utils';
 import { Timeslice, TimesliderControlApi, TimesliderControlState } from './types';
+import { isCompressed } from '../../control_group/utils/is_compressed';
 
 const displayName = i18n.translate('controls.timesliderControl.displayName', {
   defaultMessage: 'Time slider',
@@ -306,6 +307,7 @@ export const getTimesliderControlFactory = (): ControlFactory<
                 ticks={timeRangeMeta.ticks}
                 timeRangeMin={timeRangeMeta.timeRangeMin}
                 timeRangeMax={timeRangeMeta.timeRangeMax}
+                compressed={isCompressed(api)}
               />
             </EuiInputPopover>
           );

x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx

@@ -92,6 +92,7 @@ export function QuickFilters({
           };
         }}
         timeRange={{ from: 'now-24h', to: 'now' }}
+        compressed={false}
       />
     </Container>
   );