From 2fb8a5a85fd0b1bc54ac656dd79ef80d4d5a0d63 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Mon, 16 Sep 2024 13:52:45 -0600 Subject: [PATCH 01/19] fix slo observability compressed styles to be not compressed --- .../public/control_group/control_group.scss | 9 +++++++++ .../external_api/control_group_renderer.tsx | 3 +++ .../options_list/components/options_list.scss | 6 ++++++ .../control_group/components/control_group.tsx | 3 +++ .../control_group/components/control_panel.scss | 14 ++++++++++++++ .../control_group/components/control_panel.tsx | 5 +++-- .../control_group/components/control_renderer.tsx | 4 +++- .../control_group/get_control_group_factory.tsx | 3 ++- .../components/options_list.scss | 6 ++++++ .../components/options_list_control.tsx | 8 +++++++- .../get_options_list_control_factory.tsx | 8 ++++++-- .../components/range_slider_control.tsx | 4 +++- .../components/time_slider_anchored_range.tsx | 3 ++- .../time_slider_sliding_window_range.tsx | 3 ++- .../public/react_controls/controls/types.ts | 1 + .../component/viewport/_dashboard_viewport.scss | 6 ++++++ .../react_embeddable_renderer.tsx | 1 + .../custom_panels/apm/embeddable_root.tsx | 1 + .../pages/slos/components/common/quick_filters.tsx | 1 + 19 files changed, 79 insertions(+), 10 deletions(-) diff --git a/src/plugins/controls/public/control_group/control_group.scss b/src/plugins/controls/public/control_group/control_group.scss index e797f3b421297..d22b51b9793eb 100644 --- a/src/plugins/controls/public/control_group/control_group.scss +++ b/src/plugins/controls/public/control_group/control_group.scss @@ -213,3 +213,12 @@ $controlMinWidth: $euiSize * 14; } } } + +.observability-slo { + .controlsWrapper { + min-height: $euiSize * 4; + } + .controlsFrame__draggable { + height: $euiButtonHeight; + } +} \ No newline at end of file diff --git a/src/plugins/controls/public/control_group/external_api/control_group_renderer.tsx b/src/plugins/controls/public/control_group/external_api/control_group_renderer.tsx index 1a5e01ff9ab07..5bde276a9f095 100644 --- a/src/plugins/controls/public/control_group/external_api/control_group_renderer.tsx +++ b/src/plugins/controls/public/control_group/external_api/control_group_renderer.tsx @@ -40,6 +40,7 @@ export interface ControlGroupRendererProps { timeRange?: TimeRange; query?: Query; dataLoading?: boolean; + className?: string; } export const ControlGroupRenderer = ({ @@ -50,6 +51,7 @@ export const ControlGroupRenderer = ({ query, viewMode, dataLoading, + className, }: ControlGroupRendererProps) => { const id = useMemo(() => uuidv4(), []); const [regenerateId, setRegenerateId] = useState(uuidv4()); @@ -187,6 +189,7 @@ export const ControlGroupRenderer = ({ }} hidePanelChrome panelProps={{ hideLoader: true }} + className={className} /> ); }; diff --git a/src/plugins/controls/public/options_list/components/options_list.scss b/src/plugins/controls/public/options_list/components/options_list.scss index f7175b74c792e..38e840859b044 100644 --- a/src/plugins/controls/public/options_list/components/options_list.scss +++ b/src/plugins/controls/public/options_list/components/options_list.scss @@ -98,3 +98,9 @@ padding: $euiSizeM; } } + +.observability-slo { + .optionsList--filterBtn { + height: $euiButtonHeight; + } +} \ No newline at end of file diff --git a/src/plugins/controls/public/react_controls/control_group/components/control_group.tsx b/src/plugins/controls/public/react_controls/control_group/components/control_group.tsx index f6259ddc95149..5fb9250997053 100644 --- a/src/plugins/controls/public/react_controls/control_group/components/control_group.tsx +++ b/src/plugins/controls/public/react_controls/control_group/components/control_group.tsx @@ -46,6 +46,7 @@ interface Props { }; hasUnappliedSelections: boolean; labelPosition: ControlStyle; + className?: string; } export function ControlGroup({ @@ -54,6 +55,7 @@ export function ControlGroup({ controlsManager, labelPosition, hasUnappliedSelections, + className, }: Props) { const [isInitialized, setIsInitialized] = useState(false); const [autoApplySelections, controlsInOrder] = useBatchedPublishingSubjects( @@ -154,6 +156,7 @@ export function ControlGroup({ controlsManager.setControlApi(id, controlApi); }} isControlGroupInitialized={isInitialized} + className={className} /> ))} diff --git a/src/plugins/controls/public/react_controls/control_group/components/control_panel.scss b/src/plugins/controls/public/react_controls/control_group/components/control_panel.scss index 6c25854aa97cc..ac62f55aa4647 100644 --- a/src/plugins/controls/public/react_controls/control_group/components/control_panel.scss +++ b/src/plugins/controls/public/react_controls/control_group/components/control_panel.scss @@ -68,4 +68,18 @@ .euiFormControlLayout__prepend { padding-inline-start: $euiSizeXS * .5; // skinny icon } +} + +.observability-slo { + .controlPanel { + height: $euiButtonHeight; + + &--labelWrapper { + height: 100%; + } + + .controlPanel--label { + height: 100%; + } + } } \ No newline at end of file diff --git a/src/plugins/controls/public/react_controls/control_group/components/control_panel.tsx b/src/plugins/controls/public/react_controls/control_group/components/control_panel.tsx index cbb7bf09fdab7..538895c785cc3 100644 --- a/src/plugins/controls/public/react_controls/control_group/components/control_panel.tsx +++ b/src/plugins/controls/public/react_controls/control_group/components/control_panel.tsx @@ -61,6 +61,7 @@ const DragHandle = ({ export const ControlPanel = ({ Component, uuid, + className, }: ControlPanelProps) => { const [api, setApi] = useState(null); const { @@ -157,12 +158,12 @@ export const ControlPanel = ControlGroupApi; onApiAvailable?: (api: ApiType) => void; isControlGroupInitialized: boolean; + className?: string; }) => { const cleanupFunction = useRef<(() => void) | null>(null); @@ -138,7 +140,7 @@ export const ControlRenderer = < return component && isControlGroupInitialized ? ( // @ts-expect-error - Component={component} uuid={uuid} /> + Component={component} uuid={uuid} className={className} /> ) : // Control group will not display controls until all controls are initialized null; }; diff --git a/src/plugins/controls/public/react_controls/control_group/get_control_group_factory.tsx b/src/plugins/controls/public/react_controls/control_group/get_control_group_factory.tsx index bc3fde2ebe829..0c187dbbcc3a6 100644 --- a/src/plugins/controls/public/react_controls/control_group/get_control_group_factory.tsx +++ b/src/plugins/controls/public/react_controls/control_group/get_control_group_factory.tsx @@ -76,7 +76,7 @@ export const getControlGroupEmbeddableFactory = (services: { autoApplySelections, ignoreParentSettings, } = initialRuntimeState; - + const isObservabilitySLO = await services.core.application.capabilities.apm; const autoApplySelections$ = new BehaviorSubject(autoApplySelections); const defaultDataViewId = await services.dataViews.getDefaultId(); const lastSavedControlsState$ = new BehaviorSubject( @@ -298,6 +298,7 @@ export const getControlGroupEmbeddableFactory = (services: { controlsManager={controlsManager} hasUnappliedSelections={hasUnappliedSelections} labelPosition={labelPosition} + className={isObservabilitySLO ? 'observability-slo' : undefined} /> ); }, diff --git a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list.scss b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list.scss index 029edd5a8a363..b6f572a30f460 100644 --- a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list.scss +++ b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list.scss @@ -88,3 +88,9 @@ padding: $euiSizeM; } } + +.observability-slo { + .optionsList--filterBtn { + height: $euiButtonHeight; + } +} diff --git a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list_control.tsx b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list_control.tsx index b82258cb510c4..2a1a85f8481ad 100644 --- a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list_control.tsx +++ b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list_control.tsx @@ -35,8 +35,10 @@ import './options_list.scss'; export const OptionsListControl = ({ controlPanelClassName, + className, }: { controlPanelClassName: string; + className?: string; }) => { const popoverId = useMemo(() => htmlIdGenerator()(), []); const { api, stateManager, displaySettings } = useOptionsListContext(); @@ -174,7 +176,11 @@ export const OptionsListControl = ({ ); return ( - + - + ); }, diff --git a/src/plugins/controls/public/react_controls/controls/data_controls/range_slider/components/range_slider_control.tsx b/src/plugins/controls/public/react_controls/controls/data_controls/range_slider/components/range_slider_control.tsx index 16c7ad967e8df..b958c050b2a0a 100644 --- a/src/plugins/controls/public/react_controls/controls/data_controls/range_slider/components/range_slider_control.tsx +++ b/src/plugins/controls/public/react_controls/controls/data_controls/range_slider/components/range_slider_control.tsx @@ -33,6 +33,7 @@ interface Props { value: RangeValue | undefined; uuid: string; controlPanelClassName?: string; + className?: string; } export const RangeSliderControl: FC = ({ @@ -46,6 +47,7 @@ export const RangeSliderControl: FC = ({ value, uuid, controlPanelClassName, + className, }: Props) => { const rangeSliderRef = useRef(null); @@ -194,7 +196,7 @@ export const RangeSliderControl: FC = ({ min={displayedMin} max={displayedMax} isLoading={isLoading} - compressed + compressed={className === 'observability-slo' ? false : true} inputPopoverProps={{ className: controlPanelClassName, panelMinWidth: MIN_POPOVER_WIDTH, diff --git a/src/plugins/controls/public/react_controls/controls/timeslider_control/components/time_slider_anchored_range.tsx b/src/plugins/controls/public/react_controls/controls/timeslider_control/components/time_slider_anchored_range.tsx index 0ab4a467e8694..01d3b3dd9d0f3 100644 --- a/src/plugins/controls/public/react_controls/controls/timeslider_control/components/time_slider_anchored_range.tsx +++ b/src/plugins/controls/public/react_controls/controls/timeslider_control/components/time_slider_anchored_range.tsx @@ -19,6 +19,7 @@ interface Props { ticks: EuiRangeTick[]; timeRangeMin: number; timeRangeMax: number; + className?: string; } 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.className !== 'observability-slo' ? false : true} /> ); } diff --git a/src/plugins/controls/public/react_controls/controls/timeslider_control/components/time_slider_sliding_window_range.tsx b/src/plugins/controls/public/react_controls/controls/timeslider_control/components/time_slider_sliding_window_range.tsx index aa699a3082ebd..103199814bd8b 100644 --- a/src/plugins/controls/public/react_controls/controls/timeslider_control/components/time_slider_sliding_window_range.tsx +++ b/src/plugins/controls/public/react_controls/controls/timeslider_control/components/time_slider_sliding_window_range.tsx @@ -18,6 +18,7 @@ interface Props { ticks: EuiRangeTick[]; timeRangeMin: number; timeRangeMax: number; + className?: string; } export function TimeSliderSlidingWindowRange(props: Props) { @@ -36,7 +37,7 @@ export function TimeSliderSlidingWindowRange(props: Props) { step={props.stepSize} ticks={props.ticks} isDraggable - compressed + compressed={props.className !== 'observability-slo' ? true : false} /> ); } diff --git a/src/plugins/controls/public/react_controls/controls/types.ts b/src/plugins/controls/public/react_controls/controls/types.ts index e45f0c0be7d98..d55f629703715 100644 --- a/src/plugins/controls/public/react_controls/controls/types.ts +++ b/src/plugins/controls/public/react_controls/controls/types.ts @@ -96,4 +96,5 @@ export interface ControlPanelProps< > { uuid: string; Component: PanelCompatibleComponent; + className?: string; } diff --git a/src/plugins/dashboard/public/dashboard_container/component/viewport/_dashboard_viewport.scss b/src/plugins/dashboard/public/dashboard_container/component/viewport/_dashboard_viewport.scss index f0c51724b551b..8f0639d30d493 100644 --- a/src/plugins/dashboard/public/dashboard_container/component/viewport/_dashboard_viewport.scss +++ b/src/plugins/dashboard/public/dashboard_container/component/viewport/_dashboard_viewport.scss @@ -23,3 +23,9 @@ .dashboardViewport--screenshotMode .controlsWrapper--empty { display:none } + +.observability-slo { + .dshDashboardViewport-controls { + padding-bottom: $euiSizeXS; + } +} \ No newline at end of file diff --git a/src/plugins/embeddable/public/react_embeddable_system/react_embeddable_renderer.tsx b/src/plugins/embeddable/public/react_embeddable_system/react_embeddable_renderer.tsx index 054949650c343..9e4e42a132e6b 100644 --- a/src/plugins/embeddable/public/react_embeddable_system/react_embeddable_renderer.tsx +++ b/src/plugins/embeddable/public/react_embeddable_system/react_embeddable_renderer.tsx @@ -76,6 +76,7 @@ export const ReactEmbeddableRenderer = < * as it changes. This is **not** expected to change over the lifetime of the component. */ onAnyStateChange?: (state: SerializedPanelState) => void; + className?: string; }) => { const cleanupFunction = useRef<(() => void) | null>(null); const firstLoadCompleteTime = useRef(null); diff --git a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/custom_panels/apm/embeddable_root.tsx b/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/custom_panels/apm/embeddable_root.tsx index c7f95d788e676..67c987fd882f4 100644 --- a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/custom_panels/apm/embeddable_root.tsx +++ b/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/custom_panels/apm/embeddable_root.tsx @@ -84,6 +84,7 @@ export function APMEmbeddableRoot({ type={embeddableId} getParentApi={() => ({ getSerializedStateForChild: () => ({ rawState: input }) })} hidePanelChrome={true} + className="observability-slo" /> ); } diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx index 82781a53612f3..a31dd32d6c816 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx @@ -55,6 +55,7 @@ export function QuickFilters({ return ( { builder.addOptionsListControl( From 67ea6a27dcfd1b41bcf1c3dd6efde724f7f40c42 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Mon, 16 Sep 2024 14:03:41 -0600 Subject: [PATCH 02/19] remove sass changes from controls plugin --- .../public/control_group/control_group.scss | 9 ------- .../options_list/components/options_list.scss | 6 ----- .../components/control_panel.scss | 14 ---------- .../components/options_list.scss | 6 ----- .../viewport/_dashboard_viewport.scss | 6 ----- .../slos/components/common/quick_filters.scss | 26 +++++++++++++++++++ 6 files changed, 26 insertions(+), 41 deletions(-) create mode 100644 x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.scss diff --git a/src/plugins/controls/public/control_group/control_group.scss b/src/plugins/controls/public/control_group/control_group.scss index d22b51b9793eb..e797f3b421297 100644 --- a/src/plugins/controls/public/control_group/control_group.scss +++ b/src/plugins/controls/public/control_group/control_group.scss @@ -213,12 +213,3 @@ $controlMinWidth: $euiSize * 14; } } } - -.observability-slo { - .controlsWrapper { - min-height: $euiSize * 4; - } - .controlsFrame__draggable { - height: $euiButtonHeight; - } -} \ No newline at end of file diff --git a/src/plugins/controls/public/options_list/components/options_list.scss b/src/plugins/controls/public/options_list/components/options_list.scss index 38e840859b044..f7175b74c792e 100644 --- a/src/plugins/controls/public/options_list/components/options_list.scss +++ b/src/plugins/controls/public/options_list/components/options_list.scss @@ -98,9 +98,3 @@ padding: $euiSizeM; } } - -.observability-slo { - .optionsList--filterBtn { - height: $euiButtonHeight; - } -} \ No newline at end of file diff --git a/src/plugins/controls/public/react_controls/control_group/components/control_panel.scss b/src/plugins/controls/public/react_controls/control_group/components/control_panel.scss index ac62f55aa4647..6c25854aa97cc 100644 --- a/src/plugins/controls/public/react_controls/control_group/components/control_panel.scss +++ b/src/plugins/controls/public/react_controls/control_group/components/control_panel.scss @@ -68,18 +68,4 @@ .euiFormControlLayout__prepend { padding-inline-start: $euiSizeXS * .5; // skinny icon } -} - -.observability-slo { - .controlPanel { - height: $euiButtonHeight; - - &--labelWrapper { - height: 100%; - } - - .controlPanel--label { - height: 100%; - } - } } \ No newline at end of file diff --git a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list.scss b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list.scss index b6f572a30f460..029edd5a8a363 100644 --- a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list.scss +++ b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list.scss @@ -88,9 +88,3 @@ padding: $euiSizeM; } } - -.observability-slo { - .optionsList--filterBtn { - height: $euiButtonHeight; - } -} diff --git a/src/plugins/dashboard/public/dashboard_container/component/viewport/_dashboard_viewport.scss b/src/plugins/dashboard/public/dashboard_container/component/viewport/_dashboard_viewport.scss index 8f0639d30d493..f0c51724b551b 100644 --- a/src/plugins/dashboard/public/dashboard_container/component/viewport/_dashboard_viewport.scss +++ b/src/plugins/dashboard/public/dashboard_container/component/viewport/_dashboard_viewport.scss @@ -23,9 +23,3 @@ .dashboardViewport--screenshotMode .controlsWrapper--empty { display:none } - -.observability-slo { - .dshDashboardViewport-controls { - padding-bottom: $euiSizeXS; - } -} \ No newline at end of file diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.scss b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.scss new file mode 100644 index 0000000000000..823b6deccb46f --- /dev/null +++ b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.scss @@ -0,0 +1,26 @@ +.controlsWrapper { + min-height: $euiSize * 4; +} +.controlsFrame__draggable { + height: $euiButtonHeight; +} + +.optionsList--filterBtn { + height: $euiButtonHeight; +} + +.controlPanel { + height: $euiButtonHeight; + + &--labelWrapper { + height: 100%; + } + + .controlPanel--label { + height: 100%; + } +} + +.dshDashboardViewport-controls { + padding-bottom: $euiSizeXS; +} \ No newline at end of file From cf01d44059d8d57ff5200381e402546c0f99c8ec Mon Sep 17 00:00:00 2001 From: rshen91 Date: Mon, 16 Sep 2024 15:23:27 -0600 Subject: [PATCH 03/19] update --- .../external_api/control_group_renderer.tsx | 3 -- .../components/control_group.tsx | 3 -- .../components/control_panel.tsx | 5 +- .../get_control_group_factory.tsx | 3 +- .../components/options_list_control.tsx | 8 +--- .../get_options_list_control_factory.tsx | 8 +--- .../components/range_slider_control.tsx | 4 +- .../components/time_slider_anchored_range.tsx | 3 +- .../time_slider_sliding_window_range.tsx | 3 +- .../public/react_controls/controls/types.ts | 1 - .../react_embeddable_renderer.tsx | 1 - .../custom_panels/apm/embeddable_root.tsx | 1 - .../slos/components/common/quick_filters.scss | 48 ++++++++++++++++--- .../slos/components/common/quick_filters.tsx | 1 - 14 files changed, 50 insertions(+), 42 deletions(-) diff --git a/src/plugins/controls/public/control_group/external_api/control_group_renderer.tsx b/src/plugins/controls/public/control_group/external_api/control_group_renderer.tsx index 5bde276a9f095..1a5e01ff9ab07 100644 --- a/src/plugins/controls/public/control_group/external_api/control_group_renderer.tsx +++ b/src/plugins/controls/public/control_group/external_api/control_group_renderer.tsx @@ -40,7 +40,6 @@ export interface ControlGroupRendererProps { timeRange?: TimeRange; query?: Query; dataLoading?: boolean; - className?: string; } export const ControlGroupRenderer = ({ @@ -51,7 +50,6 @@ export const ControlGroupRenderer = ({ query, viewMode, dataLoading, - className, }: ControlGroupRendererProps) => { const id = useMemo(() => uuidv4(), []); const [regenerateId, setRegenerateId] = useState(uuidv4()); @@ -189,7 +187,6 @@ export const ControlGroupRenderer = ({ }} hidePanelChrome panelProps={{ hideLoader: true }} - className={className} /> ); }; diff --git a/src/plugins/controls/public/react_controls/control_group/components/control_group.tsx b/src/plugins/controls/public/react_controls/control_group/components/control_group.tsx index 5fb9250997053..f6259ddc95149 100644 --- a/src/plugins/controls/public/react_controls/control_group/components/control_group.tsx +++ b/src/plugins/controls/public/react_controls/control_group/components/control_group.tsx @@ -46,7 +46,6 @@ interface Props { }; hasUnappliedSelections: boolean; labelPosition: ControlStyle; - className?: string; } export function ControlGroup({ @@ -55,7 +54,6 @@ export function ControlGroup({ controlsManager, labelPosition, hasUnappliedSelections, - className, }: Props) { const [isInitialized, setIsInitialized] = useState(false); const [autoApplySelections, controlsInOrder] = useBatchedPublishingSubjects( @@ -156,7 +154,6 @@ export function ControlGroup({ controlsManager.setControlApi(id, controlApi); }} isControlGroupInitialized={isInitialized} - className={className} /> ))} diff --git a/src/plugins/controls/public/react_controls/control_group/components/control_panel.tsx b/src/plugins/controls/public/react_controls/control_group/components/control_panel.tsx index 538895c785cc3..d435817fdd844 100644 --- a/src/plugins/controls/public/react_controls/control_group/components/control_panel.tsx +++ b/src/plugins/controls/public/react_controls/control_group/components/control_panel.tsx @@ -61,7 +61,6 @@ const DragHandle = ({ export const ControlPanel = ({ Component, uuid, - className, }: ControlPanelProps) => { const [api, setApi] = useState(null); const { @@ -158,12 +157,11 @@ export const ControlPanel = } + compressed > <> {blockingError && ( diff --git a/src/plugins/controls/public/react_controls/control_group/get_control_group_factory.tsx b/src/plugins/controls/public/react_controls/control_group/get_control_group_factory.tsx index 0c187dbbcc3a6..bc3fde2ebe829 100644 --- a/src/plugins/controls/public/react_controls/control_group/get_control_group_factory.tsx +++ b/src/plugins/controls/public/react_controls/control_group/get_control_group_factory.tsx @@ -76,7 +76,7 @@ export const getControlGroupEmbeddableFactory = (services: { autoApplySelections, ignoreParentSettings, } = initialRuntimeState; - const isObservabilitySLO = await services.core.application.capabilities.apm; + const autoApplySelections$ = new BehaviorSubject(autoApplySelections); const defaultDataViewId = await services.dataViews.getDefaultId(); const lastSavedControlsState$ = new BehaviorSubject( @@ -298,7 +298,6 @@ export const getControlGroupEmbeddableFactory = (services: { controlsManager={controlsManager} hasUnappliedSelections={hasUnappliedSelections} labelPosition={labelPosition} - className={isObservabilitySLO ? 'observability-slo' : undefined} /> ); }, diff --git a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list_control.tsx b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list_control.tsx index 2a1a85f8481ad..b82258cb510c4 100644 --- a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list_control.tsx +++ b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list_control.tsx @@ -35,10 +35,8 @@ import './options_list.scss'; export const OptionsListControl = ({ controlPanelClassName, - className, }: { controlPanelClassName: string; - className?: string; }) => { const popoverId = useMemo(() => htmlIdGenerator()(), []); const { api, stateManager, displaySettings } = useOptionsListContext(); @@ -176,11 +174,7 @@ export const OptionsListControl = ({ ); return ( - + - + ); }, diff --git a/src/plugins/controls/public/react_controls/controls/data_controls/range_slider/components/range_slider_control.tsx b/src/plugins/controls/public/react_controls/controls/data_controls/range_slider/components/range_slider_control.tsx index b958c050b2a0a..16c7ad967e8df 100644 --- a/src/plugins/controls/public/react_controls/controls/data_controls/range_slider/components/range_slider_control.tsx +++ b/src/plugins/controls/public/react_controls/controls/data_controls/range_slider/components/range_slider_control.tsx @@ -33,7 +33,6 @@ interface Props { value: RangeValue | undefined; uuid: string; controlPanelClassName?: string; - className?: string; } export const RangeSliderControl: FC = ({ @@ -47,7 +46,6 @@ export const RangeSliderControl: FC = ({ value, uuid, controlPanelClassName, - className, }: Props) => { const rangeSliderRef = useRef(null); @@ -196,7 +194,7 @@ export const RangeSliderControl: FC = ({ min={displayedMin} max={displayedMax} isLoading={isLoading} - compressed={className === 'observability-slo' ? false : true} + compressed inputPopoverProps={{ className: controlPanelClassName, panelMinWidth: MIN_POPOVER_WIDTH, diff --git a/src/plugins/controls/public/react_controls/controls/timeslider_control/components/time_slider_anchored_range.tsx b/src/plugins/controls/public/react_controls/controls/timeslider_control/components/time_slider_anchored_range.tsx index 01d3b3dd9d0f3..0ab4a467e8694 100644 --- a/src/plugins/controls/public/react_controls/controls/timeslider_control/components/time_slider_anchored_range.tsx +++ b/src/plugins/controls/public/react_controls/controls/timeslider_control/components/time_slider_anchored_range.tsx @@ -19,7 +19,6 @@ interface Props { ticks: EuiRangeTick[]; timeRangeMin: number; timeRangeMax: number; - className?: string; } export function TimeSliderAnchoredRange(props: Props) { @@ -41,7 +40,7 @@ export function TimeSliderAnchoredRange(props: Props) { max={props.timeRangeMax} step={props.stepSize} ticks={props.ticks} - compressed={props.className !== 'observability-slo' ? false : true} + compressed /> ); } diff --git a/src/plugins/controls/public/react_controls/controls/timeslider_control/components/time_slider_sliding_window_range.tsx b/src/plugins/controls/public/react_controls/controls/timeslider_control/components/time_slider_sliding_window_range.tsx index 103199814bd8b..aa699a3082ebd 100644 --- a/src/plugins/controls/public/react_controls/controls/timeslider_control/components/time_slider_sliding_window_range.tsx +++ b/src/plugins/controls/public/react_controls/controls/timeslider_control/components/time_slider_sliding_window_range.tsx @@ -18,7 +18,6 @@ interface Props { ticks: EuiRangeTick[]; timeRangeMin: number; timeRangeMax: number; - className?: string; } export function TimeSliderSlidingWindowRange(props: Props) { @@ -37,7 +36,7 @@ export function TimeSliderSlidingWindowRange(props: Props) { step={props.stepSize} ticks={props.ticks} isDraggable - compressed={props.className !== 'observability-slo' ? true : false} + compressed /> ); } diff --git a/src/plugins/controls/public/react_controls/controls/types.ts b/src/plugins/controls/public/react_controls/controls/types.ts index d55f629703715..e45f0c0be7d98 100644 --- a/src/plugins/controls/public/react_controls/controls/types.ts +++ b/src/plugins/controls/public/react_controls/controls/types.ts @@ -96,5 +96,4 @@ export interface ControlPanelProps< > { uuid: string; Component: PanelCompatibleComponent; - className?: string; } diff --git a/src/plugins/embeddable/public/react_embeddable_system/react_embeddable_renderer.tsx b/src/plugins/embeddable/public/react_embeddable_system/react_embeddable_renderer.tsx index 9e4e42a132e6b..054949650c343 100644 --- a/src/plugins/embeddable/public/react_embeddable_system/react_embeddable_renderer.tsx +++ b/src/plugins/embeddable/public/react_embeddable_system/react_embeddable_renderer.tsx @@ -76,7 +76,6 @@ export const ReactEmbeddableRenderer = < * as it changes. This is **not** expected to change over the lifetime of the component. */ onAnyStateChange?: (state: SerializedPanelState) => void; - className?: string; }) => { const cleanupFunction = useRef<(() => void) | null>(null); const firstLoadCompleteTime = useRef(null); diff --git a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/custom_panels/apm/embeddable_root.tsx b/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/custom_panels/apm/embeddable_root.tsx index 67c987fd882f4..c7f95d788e676 100644 --- a/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/custom_panels/apm/embeddable_root.tsx +++ b/x-pack/plugins/observability_solution/slo/public/components/slo/burn_rate/alert_details/components/custom_panels/apm/embeddable_root.tsx @@ -84,7 +84,6 @@ export function APMEmbeddableRoot({ type={embeddableId} getParentApi={() => ({ getSerializedStateForChild: () => ({ rawState: input }) })} hidePanelChrome={true} - className="observability-slo" /> ); } diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.scss b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.scss index 823b6deccb46f..d939cadd60189 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.scss +++ b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.scss @@ -1,26 +1,60 @@ .controlsWrapper { min-height: $euiSize * 4; } + .controlsFrame__draggable { - height: $euiButtonHeight; + height: $euiButtonHeight !important; } -.optionsList--filterBtn { - height: $euiButtonHeight; +.optionsList--filterBtn, .euiFilterButton { + height: $euiButtonHeight !important; +} + +.euiFilterGroup { + height: $euiButtonHeight !important; + border-radius: $euiFormControlBorderRadius !important; } .controlPanel { - height: $euiButtonHeight; + height: $euiButtonHeight !important; + + .euiDualRange, .euiRange { + height: $euiButtonHeight !important; + } &--labelWrapper { - height: 100%; + height: 100% !important; } .controlPanel--label { - height: 100%; + height: 100% !important; } } .dshDashboardViewport-controls { padding-bottom: $euiSizeXS; -} \ No newline at end of file +} + +.euiFlexGroup { + height: $euiButtonHeight; +} + +.euiFormControlLayout, .euiFormControlLayout--group, .controlFrame__formControlLayout, .optionsListControl { + height: $euiButtonHeight !important; +} + +.optionsListControl { + height: $euiButtonHeight !important; +} + +.--group { + height: $euiButtonHeight !important; +} + +.controlFrame__formControlLayout { + height: $euiButtonHeight !important; +} + +&.-compresed { + height: $euiButtonHeight !important; +} diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx index a31dd32d6c816..82781a53612f3 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx @@ -55,7 +55,6 @@ export function QuickFilters({ return ( { builder.addOptionsListControl( From c9d3ffebc0fe124251363bbfe23971b587794eb4 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Tue, 17 Sep 2024 10:24:23 -0600 Subject: [PATCH 04/19] fix --- .../components/control_panel.tsx | 1 - .../slos/components/common/quick_filters.scss | 38 +++++-------------- .../slos/components/common/quick_filters.tsx | 1 + 3 files changed, 10 insertions(+), 30 deletions(-) diff --git a/src/plugins/controls/public/react_controls/control_group/components/control_panel.tsx b/src/plugins/controls/public/react_controls/control_group/components/control_panel.tsx index d435817fdd844..b5a09c6396527 100644 --- a/src/plugins/controls/public/react_controls/control_group/components/control_panel.tsx +++ b/src/plugins/controls/public/react_controls/control_group/components/control_panel.tsx @@ -157,7 +157,6 @@ export const ControlPanel = label { + height: $euiFormControlHeight !important; + line-height: 3 !important; } .optionsListControl { - height: $euiButtonHeight !important; -} - -.--group { - height: $euiButtonHeight !important; + height: $euiFormControlHeight !important; } .controlFrame__formControlLayout { - height: $euiButtonHeight !important; -} - -&.-compresed { - height: $euiButtonHeight !important; + block-size: $euiFormControlHeight !important; } diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx index 82781a53612f3..5835eb58a43cb 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx @@ -14,6 +14,7 @@ import styled from 'styled-components'; import { Filter } from '@kbn/es-query'; import { isEmpty } from 'lodash'; import { SearchState } from '../../hooks/use_url_search_state'; +import './quick_filters.scss'; interface Props { initialState: SearchState; From 8c45a2a286557497617f6e9781f46de5948395b7 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Wed, 18 Sep 2024 15:36:21 -0600 Subject: [PATCH 05/19] code review --- .../control_group/components/control_renderer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/controls/public/react_controls/control_group/components/control_renderer.tsx b/src/plugins/controls/public/react_controls/control_group/components/control_renderer.tsx index 3e260cbf9a04e..b0de855f493e6 100644 --- a/src/plugins/controls/public/react_controls/control_group/components/control_renderer.tsx +++ b/src/plugins/controls/public/react_controls/control_group/components/control_renderer.tsx @@ -137,7 +137,7 @@ export const ControlRenderer = < return component && isControlGroupInitialized ? ( // @ts-expect-error - Component={component} uuid={uuid} className={className} /> + Component={component} uuid={uuid} /> ) : // Control group will not display controls until all controls are initialized null; }; From caa0bf2507980ad19f8d159ecbd698273ba7fff5 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Fri, 20 Sep 2024 12:51:04 -0600 Subject: [PATCH 06/19] code review sass clean up --- .../components/control_renderer.tsx | 4 +-- .../slos/components/common/quick_filters.scss | 31 ++----------------- 2 files changed, 3 insertions(+), 32 deletions(-) diff --git a/src/plugins/controls/public/react_controls/control_group/components/control_renderer.tsx b/src/plugins/controls/public/react_controls/control_group/components/control_renderer.tsx index 3e260cbf9a04e..e2a09012c7df2 100644 --- a/src/plugins/controls/public/react_controls/control_group/components/control_renderer.tsx +++ b/src/plugins/controls/public/react_controls/control_group/components/control_renderer.tsx @@ -31,14 +31,12 @@ export const ControlRenderer = < getParentApi, onApiAvailable, isControlGroupInitialized, - className, }: { type: string; uuid: string; getParentApi: () => ControlGroupApi; onApiAvailable?: (api: ApiType) => void; isControlGroupInitialized: boolean; - className?: string; }) => { const cleanupFunction = useRef<(() => void) | null>(null); @@ -137,7 +135,7 @@ export const ControlRenderer = < return component && isControlGroupInitialized ? ( // @ts-expect-error - Component={component} uuid={uuid} className={className} /> + Component={component} uuid={uuid} /> ) : // Control group will not display controls until all controls are initialized null; }; diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.scss b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.scss index 859197410d776..3e984b4eeebaa 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.scss +++ b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.scss @@ -1,30 +1,3 @@ -.controlsWrapper { - min-height: $euiSize * 4; -} - -.optionsList--filterBtn, .euiFilterButton { - height: $euiFormControlHeight !important; -} - -.euiFilterGroup { - height: $euiFormControlHeight !important; - border-radius: $euiFormControlBorderRadius !important; -} - -.controlPanel { - - .euiDualRange, .euiRange { - height: $euiFormControlHeight !important; - } - - .controlPanel--label { - height: $euiFormControlHeight !important; - } -} - -.dshDashboardViewport-controls { - padding-bottom: $euiSizeXS; -} .controlPanel--labelWrapper > label { height: $euiFormControlHeight !important; @@ -35,6 +8,6 @@ height: $euiFormControlHeight !important; } -.controlFrame__formControlLayout { - block-size: $euiFormControlHeight !important; +.optionsList--selectionText { + padding-top: 5px; } From a722e872709346ec06b31b687f3b735bcf7a01b3 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Mon, 30 Sep 2024 12:31:03 -0600 Subject: [PATCH 07/19] wip refactor --- .../control_group_renderer/control_group_renderer.tsx | 4 ++++ .../public/control_group/control_group_renderer/types.ts | 6 +++++- .../public/control_group/get_control_group_factory.tsx | 2 ++ src/plugins/controls/public/control_group/types.ts | 1 + 4 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/plugins/controls/public/control_group/control_group_renderer/control_group_renderer.tsx b/src/plugins/controls/public/control_group/control_group_renderer/control_group_renderer.tsx index 728c8ca551a28..9711ffecac304 100644 --- a/src/plugins/controls/public/control_group/control_group_renderer/control_group_renderer.tsx +++ b/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,10 +173,12 @@ export const ControlGroupRenderer = ({ getRuntimeStateForChild: () => { return runtimeState$.getValue(); }, + compressed, })} onApiAvailable={(controlGroupApi) => { const controlGroupRendererApi: ControlGroupRendererApi = { ...controlGroupApi, + compressed: compressed ?? true, reload: () => reload$.next(), updateInput: (newInput) => { updateInput(newInput); diff --git a/src/plugins/controls/public/control_group/control_group_renderer/types.ts b/src/plugins/controls/public/control_group/control_group_renderer/types.ts index 80457c2c64b14..d9cd8cfb5bc34 100644 --- a/src/plugins/controls/public/control_group/control_group_renderer/types.ts +++ b/src/plugins/controls/public/control_group/control_group_renderer/types.ts @@ -13,7 +13,11 @@ import type { ControlGroupApi } from '../..'; export type ControlGroupRendererApi = ControlGroupApi & { reload: () => void; - + /** + * Passes the ability for styling to be compressed or not. + * @default true. + */ + compressed: boolean; /** * @deprecated * Calling `updateInput` will cause the entire control group to be re-initialized. diff --git a/src/plugins/controls/public/control_group/get_control_group_factory.tsx b/src/plugins/controls/public/control_group/get_control_group_factory.tsx index 62af1d1f868a9..7776f1a9ea88c 100644 --- a/src/plugins/controls/public/control_group/get_control_group_factory.tsx +++ b/src/plugins/controls/public/control_group/get_control_group_factory.tsx @@ -199,6 +199,8 @@ export const getControlGroupEmbeddableFactory = () => { references, }; }, + compressed: + parentApi && typeof parentApi.compressed === 'boolean' ? parentApi.compressed : true, dataViews, labelPosition: labelPosition$, saveNotification$: apiHasSaveNotification(parentApi) diff --git a/src/plugins/controls/public/control_group/types.ts b/src/plugins/controls/public/control_group/types.ts index 7a2bf74b5a27d..44817311816bb 100644 --- a/src/plugins/controls/public/control_group/types.ts +++ b/src/plugins/controls/public/control_group/types.ts @@ -57,6 +57,7 @@ export type ControlGroupApi = PresentationContainer & PublishesTimeslice & PublishesDisabledActionIds & Partial & HasSaveNotification & PublishesReload> & { + compressed: boolean; allowExpensiveQueries$: PublishingSubject; autoApplySelections$: PublishingSubject; ignoreParentSettings$: PublishingSubject; From 913f0ff2d9f5d0827dfc843d98c6edfa3e07a531 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Mon, 30 Sep 2024 14:15:30 -0600 Subject: [PATCH 08/19] revert some changes --- .../control_group_renderer.tsx | 2 +- .../pages/slos/components/common/quick_filters.scss | 13 ------------- .../pages/slos/components/common/quick_filters.tsx | 2 +- 3 files changed, 2 insertions(+), 15 deletions(-) delete mode 100644 x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.scss diff --git a/src/plugins/controls/public/control_group/control_group_renderer/control_group_renderer.tsx b/src/plugins/controls/public/control_group/control_group_renderer/control_group_renderer.tsx index 9711ffecac304..7967cbf4ac0a5 100644 --- a/src/plugins/controls/public/control_group/control_group_renderer/control_group_renderer.tsx +++ b/src/plugins/controls/public/control_group/control_group_renderer/control_group_renderer.tsx @@ -173,7 +173,7 @@ export const ControlGroupRenderer = ({ getRuntimeStateForChild: () => { return runtimeState$.getValue(); }, - compressed, + compressed: compressed ?? true, })} onApiAvailable={(controlGroupApi) => { const controlGroupRendererApi: ControlGroupRendererApi = { diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.scss b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.scss deleted file mode 100644 index 3e984b4eeebaa..0000000000000 --- a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.scss +++ /dev/null @@ -1,13 +0,0 @@ - -.controlPanel--labelWrapper > label { - height: $euiFormControlHeight !important; - line-height: 3 !important; -} - -.optionsListControl { - height: $euiFormControlHeight !important; -} - -.optionsList--selectionText { - padding-top: 5px; -} diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx index 5835eb58a43cb..ad350a3d17fbe 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx @@ -14,7 +14,6 @@ import styled from 'styled-components'; import { Filter } from '@kbn/es-query'; import { isEmpty } from 'lodash'; import { SearchState } from '../../hooks/use_url_search_state'; -import './quick_filters.scss'; interface Props { initialState: SearchState; @@ -93,6 +92,7 @@ export function QuickFilters({ }; }} timeRange={{ from: 'now-24h', to: 'now' }} + compressed={false} /> ); From 451d33c5024e554d3dead1899f0b4f2afede86c0 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Mon, 30 Sep 2024 14:19:07 -0600 Subject: [PATCH 09/19] remove from controls api --- .../controls/public/control_group/get_control_group_factory.tsx | 2 -- src/plugins/controls/public/control_group/types.ts | 1 - 2 files changed, 3 deletions(-) diff --git a/src/plugins/controls/public/control_group/get_control_group_factory.tsx b/src/plugins/controls/public/control_group/get_control_group_factory.tsx index 7776f1a9ea88c..62af1d1f868a9 100644 --- a/src/plugins/controls/public/control_group/get_control_group_factory.tsx +++ b/src/plugins/controls/public/control_group/get_control_group_factory.tsx @@ -199,8 +199,6 @@ export const getControlGroupEmbeddableFactory = () => { references, }; }, - compressed: - parentApi && typeof parentApi.compressed === 'boolean' ? parentApi.compressed : true, dataViews, labelPosition: labelPosition$, saveNotification$: apiHasSaveNotification(parentApi) diff --git a/src/plugins/controls/public/control_group/types.ts b/src/plugins/controls/public/control_group/types.ts index 44817311816bb..7a2bf74b5a27d 100644 --- a/src/plugins/controls/public/control_group/types.ts +++ b/src/plugins/controls/public/control_group/types.ts @@ -57,7 +57,6 @@ export type ControlGroupApi = PresentationContainer & PublishesTimeslice & PublishesDisabledActionIds & Partial & HasSaveNotification & PublishesReload> & { - compressed: boolean; allowExpensiveQueries$: PublishingSubject; autoApplySelections$: PublishingSubject; ignoreParentSettings$: PublishingSubject; From c9a2d591bdeeb1af03ace857b5336a3e8bed3267 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Mon, 30 Sep 2024 14:52:09 -0600 Subject: [PATCH 10/19] fix --- .../public/control_group/components/control_panel.tsx | 2 +- .../control_group_renderer/control_group_renderer.tsx | 1 - .../public/control_group/control_group_renderer/types.ts | 5 ----- .../components/options_list_control.tsx | 6 +++++- 4 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/plugins/controls/public/control_group/components/control_panel.tsx b/src/plugins/controls/public/control_group/components/control_panel.tsx index 0ada860fc47a9..1641aacd10570 100644 --- a/src/plugins/controls/public/control_group/components/control_panel.tsx +++ b/src/plugins/controls/public/control_group/components/control_panel.tsx @@ -189,7 +189,7 @@ export const ControlPanel = } - compressed + compressed={api?.parentApi.parentApi.compressed ?? true} > <> {blockingError && ( diff --git a/src/plugins/controls/public/control_group/control_group_renderer/control_group_renderer.tsx b/src/plugins/controls/public/control_group/control_group_renderer/control_group_renderer.tsx index 7967cbf4ac0a5..6a50c60c4e597 100644 --- a/src/plugins/controls/public/control_group/control_group_renderer/control_group_renderer.tsx +++ b/src/plugins/controls/public/control_group/control_group_renderer/control_group_renderer.tsx @@ -178,7 +178,6 @@ export const ControlGroupRenderer = ({ onApiAvailable={(controlGroupApi) => { const controlGroupRendererApi: ControlGroupRendererApi = { ...controlGroupApi, - compressed: compressed ?? true, reload: () => reload$.next(), updateInput: (newInput) => { updateInput(newInput); diff --git a/src/plugins/controls/public/control_group/control_group_renderer/types.ts b/src/plugins/controls/public/control_group/control_group_renderer/types.ts index d9cd8cfb5bc34..684a0c4dd0a40 100644 --- a/src/plugins/controls/public/control_group/control_group_renderer/types.ts +++ b/src/plugins/controls/public/control_group/control_group_renderer/types.ts @@ -13,11 +13,6 @@ import type { ControlGroupApi } from '../..'; export type ControlGroupRendererApi = ControlGroupApi & { reload: () => void; - /** - * Passes the ability for styling to be compressed or not. - * @default true. - */ - compressed: boolean; /** * @deprecated * Calling `updateInput` will cause the entire control group to be re-initialized. diff --git a/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx b/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx index da9aa000dcef0..0720834995ea5 100644 --- a/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx +++ b/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx @@ -174,7 +174,11 @@ export const OptionsListControl = ({ ); return ( - + Date: Mon, 30 Sep 2024 16:27:39 -0600 Subject: [PATCH 11/19] fix --- .../components/options_list_control.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx b/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx index 0720834995ea5..c705213cf01e1 100644 --- a/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx +++ b/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx @@ -66,6 +66,11 @@ export const OptionsListControl = ({ const delimiter = useMemo(() => OptionsListStrings.control.getSeparator(field?.type), [field]); + const isCompressed = + api.parentApi.parentApi && api.parentApi.parentApi.compressed + ? api.parentApi.parentApi.compressed + : true; + const { hasSelections, selectionDisplayNode, selectedOptionsCount } = useMemo(() => { return { hasSelections: !isEmpty(selectedOptions), @@ -174,11 +179,7 @@ export const OptionsListControl = ({ ); return ( - + Date: Tue, 1 Oct 2024 08:28:30 -0600 Subject: [PATCH 12/19] fix --- .../public/control_group/components/control_panel.tsx | 2 +- .../options_list_control/components/options_list_control.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/plugins/controls/public/control_group/components/control_panel.tsx b/src/plugins/controls/public/control_group/components/control_panel.tsx index 1641aacd10570..2fe177a46f8d3 100644 --- a/src/plugins/controls/public/control_group/components/control_panel.tsx +++ b/src/plugins/controls/public/control_group/components/control_panel.tsx @@ -189,7 +189,7 @@ export const ControlPanel = } - compressed={api?.parentApi.parentApi.compressed ?? true} + compressed={api?.parentApi?.parentApi?.compressed ?? true} > <> {blockingError && ( diff --git a/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx b/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx index c705213cf01e1..a383c1d5d9a53 100644 --- a/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx +++ b/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx @@ -67,8 +67,8 @@ export const OptionsListControl = ({ const delimiter = useMemo(() => OptionsListStrings.control.getSeparator(field?.type), [field]); const isCompressed = - api.parentApi.parentApi && api.parentApi.parentApi.compressed - ? api.parentApi.parentApi.compressed + api.parentApi?.parentApi && api.parentApi?.parentApi?.compressed + ? api.parentApi?.parentApi?.compressed : true; const { hasSelections, selectionDisplayNode, selectedOptionsCount } = useMemo(() => { From 02f6a671bf44848eb08e621e2e88d69872498fad Mon Sep 17 00:00:00 2001 From: rshen91 Date: Tue, 1 Oct 2024 11:31:09 -0600 Subject: [PATCH 13/19] cleaner --- .../presentation_publishing/index.ts | 1 + .../interfaces/has_compressed.ts | 19 ++++++++++++++ .../components/control_panel.tsx | 3 ++- .../control_group_renderer/types.ts | 1 + .../control_group/utils/is_compressed.ts | 26 +++++++++++++++++++ .../components/options_list_control.tsx | 8 ++---- 6 files changed, 51 insertions(+), 7 deletions(-) create mode 100644 packages/presentation/presentation_publishing/interfaces/has_compressed.ts create mode 100644 src/plugins/controls/public/control_group/utils/is_compressed.ts diff --git a/packages/presentation/presentation_publishing/index.ts b/packages/presentation/presentation_publishing/index.ts index ab5e396e65727..069abab4c05b5 100644 --- a/packages/presentation/presentation_publishing/index.ts +++ b/packages/presentation/presentation_publishing/index.ts @@ -84,6 +84,7 @@ export { type HasTypeDisplayName, } from './interfaces/has_type'; export { apiHasUniqueId, type HasUniqueId } from './interfaces/has_uuid'; +export { apiHasCompressed, type HasCompressed } from './interfaces/has_compressed'; export { apiPublishesBlockingError, hasBlockingError, diff --git a/packages/presentation/presentation_publishing/interfaces/has_compressed.ts b/packages/presentation/presentation_publishing/interfaces/has_compressed.ts new file mode 100644 index 0000000000000..0ca7e12180b22 --- /dev/null +++ b/packages/presentation/presentation_publishing/interfaces/has_compressed.ts @@ -0,0 +1,19 @@ +/* + * 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". + */ + +export interface HasCompressed { + compressed: boolean; +} + +export const apiHasCompressed = (unknownApi: unknown): unknownApi is HasCompressed => { + return ( + (unknownApi as HasCompressed).compressed !== undefined && + typeof (unknownApi as HasCompressed).compressed === 'function' + ); +}; diff --git a/src/plugins/controls/public/control_group/components/control_panel.tsx b/src/plugins/controls/public/control_group/components/control_panel.tsx index 2fe177a46f8d3..92e63defd9c01 100644 --- a/src/plugins/controls/public/control_group/components/control_panel.tsx +++ b/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, @@ -189,7 +190,7 @@ export const ControlPanel = } - compressed={api?.parentApi?.parentApi?.compressed ?? true} + compressed={isCompressed(api)} > <> {blockingError && ( diff --git a/src/plugins/controls/public/control_group/control_group_renderer/types.ts b/src/plugins/controls/public/control_group/control_group_renderer/types.ts index 684a0c4dd0a40..80457c2c64b14 100644 --- a/src/plugins/controls/public/control_group/control_group_renderer/types.ts +++ b/src/plugins/controls/public/control_group/control_group_renderer/types.ts @@ -13,6 +13,7 @@ import type { ControlGroupApi } from '../..'; export type ControlGroupRendererApi = ControlGroupApi & { reload: () => void; + /** * @deprecated * Calling `updateInput` will cause the entire control group to be re-initialized. diff --git a/src/plugins/controls/public/control_group/utils/is_compressed.ts b/src/plugins/controls/public/control_group/utils/is_compressed.ts new file mode 100644 index 0000000000000..be35893591383 --- /dev/null +++ b/src/plugins/controls/public/control_group/utils/is_compressed.ts @@ -0,0 +1,26 @@ +/* + * 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 { + apiHasCompressed, + apiHasParentApi, + type HasCompressed, + type HasParentApi, +} from '@kbn/presentation-publishing'; +import type { DefaultControlApi } from '../../controls/types'; + +export const isCompressed = ( + api: DefaultControlApi | HasParentApi | HasCompressed | null | unknown +): boolean => { + if (apiHasCompressed(api)) { + if (api?.compressed) return api.compressed; + else if (apiHasParentApi(api)) return isCompressed(api.parentApi); + } + return true; +}; diff --git a/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx b/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx index a383c1d5d9a53..ebb5458478531 100644 --- a/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx +++ b/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'; @@ -66,11 +67,6 @@ export const OptionsListControl = ({ const delimiter = useMemo(() => OptionsListStrings.control.getSeparator(field?.type), [field]); - const isCompressed = - api.parentApi?.parentApi && api.parentApi?.parentApi?.compressed - ? api.parentApi?.parentApi?.compressed - : true; - const { hasSelections, selectionDisplayNode, selectedOptionsCount } = useMemo(() => { return { hasSelections: !isEmpty(selectedOptions), @@ -179,7 +175,7 @@ export const OptionsListControl = ({ ); return ( - + Date: Tue, 1 Oct 2024 11:36:37 -0600 Subject: [PATCH 14/19] fix typeguard type --- .../presentation_publishing/interfaces/has_compressed.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/presentation/presentation_publishing/interfaces/has_compressed.ts b/packages/presentation/presentation_publishing/interfaces/has_compressed.ts index 0ca7e12180b22..a38805804d661 100644 --- a/packages/presentation/presentation_publishing/interfaces/has_compressed.ts +++ b/packages/presentation/presentation_publishing/interfaces/has_compressed.ts @@ -14,6 +14,6 @@ export interface HasCompressed { export const apiHasCompressed = (unknownApi: unknown): unknownApi is HasCompressed => { return ( (unknownApi as HasCompressed).compressed !== undefined && - typeof (unknownApi as HasCompressed).compressed === 'function' + typeof (unknownApi as HasCompressed).compressed === 'boolean' ); }; From ad6ee2c669e2267097a33d5dc767a9b89a333c5d Mon Sep 17 00:00:00 2001 From: rshen91 Date: Tue, 1 Oct 2024 11:51:23 -0600 Subject: [PATCH 15/19] fix --- .../public/control_group/components/control_panel.tsx | 1 - .../controls/public/control_group/utils/is_compressed.ts | 7 +++---- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/plugins/controls/public/control_group/components/control_panel.tsx b/src/plugins/controls/public/control_group/components/control_panel.tsx index 92e63defd9c01..acff284eeba1f 100644 --- a/src/plugins/controls/public/control_group/components/control_panel.tsx +++ b/src/plugins/controls/public/control_group/components/control_panel.tsx @@ -123,7 +123,6 @@ export const ControlPanel = { - if (apiHasCompressed(api)) { - if (api?.compressed) return api.compressed; - else if (apiHasParentApi(api)) return isCompressed(api.parentApi); - } + if (api === null) return true; + if (apiHasCompressed(api)) return api.compressed; + else if (apiHasParentApi(api)) return isCompressed(api.parentApi); return true; }; From 899b248b07306e3bf4836371e963c5010c77e4e0 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Tue, 1 Oct 2024 11:57:10 -0600 Subject: [PATCH 16/19] code review --- .../presentation_publishing/index.ts | 1 - .../control_group/utils}/has_compressed.ts | 0 .../control_group/utils/is_compressed.ts | 18 +++++------------- 3 files changed, 5 insertions(+), 14 deletions(-) rename {packages/presentation/presentation_publishing/interfaces => src/plugins/controls/public/control_group/utils}/has_compressed.ts (100%) diff --git a/packages/presentation/presentation_publishing/index.ts b/packages/presentation/presentation_publishing/index.ts index 069abab4c05b5..ab5e396e65727 100644 --- a/packages/presentation/presentation_publishing/index.ts +++ b/packages/presentation/presentation_publishing/index.ts @@ -84,7 +84,6 @@ export { type HasTypeDisplayName, } from './interfaces/has_type'; export { apiHasUniqueId, type HasUniqueId } from './interfaces/has_uuid'; -export { apiHasCompressed, type HasCompressed } from './interfaces/has_compressed'; export { apiPublishesBlockingError, hasBlockingError, diff --git a/packages/presentation/presentation_publishing/interfaces/has_compressed.ts b/src/plugins/controls/public/control_group/utils/has_compressed.ts similarity index 100% rename from packages/presentation/presentation_publishing/interfaces/has_compressed.ts rename to src/plugins/controls/public/control_group/utils/has_compressed.ts diff --git a/src/plugins/controls/public/control_group/utils/is_compressed.ts b/src/plugins/controls/public/control_group/utils/is_compressed.ts index bbda878b278d4..1b2e289cc59f0 100644 --- a/src/plugins/controls/public/control_group/utils/is_compressed.ts +++ b/src/plugins/controls/public/control_group/utils/is_compressed.ts @@ -7,19 +7,11 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { - apiHasCompressed, - apiHasParentApi, - type HasCompressed, - type HasParentApi, -} from '@kbn/presentation-publishing'; -import type { DefaultControlApi } from '../../controls/types'; +import { apiHasParentApi } from '@kbn/presentation-publishing'; +import { apiHasCompressed } from './has_compressed'; -export const isCompressed = ( - api: DefaultControlApi | HasParentApi | HasCompressed | null | unknown -): boolean => { +export function isCompressed(api: unknown): boolean { if (api === null) return true; if (apiHasCompressed(api)) return api.compressed; - else if (apiHasParentApi(api)) return isCompressed(api.parentApi); - return true; -}; + return apiHasParentApi(api) ? isCompressed(api.parentApi) : true; +} From adc18465361641150c7adea475a68268ddc18b07 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Tue, 1 Oct 2024 13:00:19 -0600 Subject: [PATCH 17/19] code review --- .../control_group/utils/has_compressed.ts | 19 ------------------- .../control_group/utils/is_compressed.ts | 10 ++++++++-- 2 files changed, 8 insertions(+), 21 deletions(-) delete mode 100644 src/plugins/controls/public/control_group/utils/has_compressed.ts diff --git a/src/plugins/controls/public/control_group/utils/has_compressed.ts b/src/plugins/controls/public/control_group/utils/has_compressed.ts deleted file mode 100644 index a38805804d661..0000000000000 --- a/src/plugins/controls/public/control_group/utils/has_compressed.ts +++ /dev/null @@ -1,19 +0,0 @@ -/* - * 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". - */ - -export interface HasCompressed { - compressed: boolean; -} - -export const apiHasCompressed = (unknownApi: unknown): unknownApi is HasCompressed => { - return ( - (unknownApi as HasCompressed).compressed !== undefined && - typeof (unknownApi as HasCompressed).compressed === 'boolean' - ); -}; diff --git a/src/plugins/controls/public/control_group/utils/is_compressed.ts b/src/plugins/controls/public/control_group/utils/is_compressed.ts index 1b2e289cc59f0..331305c4934e6 100644 --- a/src/plugins/controls/public/control_group/utils/is_compressed.ts +++ b/src/plugins/controls/public/control_group/utils/is_compressed.ts @@ -8,10 +8,16 @@ */ import { apiHasParentApi } from '@kbn/presentation-publishing'; -import { apiHasCompressed } from './has_compressed'; + +export interface HasCompressed { + compressed: boolean; +} + +export const apiHasCompressed = (unknownApi: unknown): unknownApi is HasCompressed => { + return Boolean(unknownApi) && typeof (unknownApi as HasCompressed).compressed === 'boolean'; +}; export function isCompressed(api: unknown): boolean { - if (api === null) return true; if (apiHasCompressed(api)) return api.compressed; return apiHasParentApi(api) ? isCompressed(api.parentApi) : true; } From bb77b0d3204fbb46136e69ae03e3630ec1a9939f Mon Sep 17 00:00:00 2001 From: rshen91 Date: Tue, 1 Oct 2024 13:36:12 -0600 Subject: [PATCH 18/19] code review --- .../controls/public/control_group/utils/is_compressed.ts | 4 ++-- .../range_slider/components/range_slider_control.tsx | 4 +++- .../range_slider/get_range_slider_control_factory.tsx | 2 ++ .../components/time_slider_anchored_range.tsx | 3 ++- .../components/time_slider_popover_content.tsx | 3 +++ .../components/time_slider_sliding_window_range.tsx | 3 ++- .../timeslider_control/get_timeslider_control_factory.tsx | 2 ++ 7 files changed, 16 insertions(+), 5 deletions(-) diff --git a/src/plugins/controls/public/control_group/utils/is_compressed.ts b/src/plugins/controls/public/control_group/utils/is_compressed.ts index 331305c4934e6..46f7f27b66251 100644 --- a/src/plugins/controls/public/control_group/utils/is_compressed.ts +++ b/src/plugins/controls/public/control_group/utils/is_compressed.ts @@ -9,11 +9,11 @@ import { apiHasParentApi } from '@kbn/presentation-publishing'; -export interface HasCompressed { +interface HasCompressed { compressed: boolean; } -export const apiHasCompressed = (unknownApi: unknown): unknownApi is HasCompressed => { +const apiHasCompressed = (unknownApi: unknown): unknownApi is HasCompressed => { return Boolean(unknownApi) && typeof (unknownApi as HasCompressed).compressed === 'boolean'; }; diff --git a/src/plugins/controls/public/controls/data_controls/range_slider/components/range_slider_control.tsx b/src/plugins/controls/public/controls/data_controls/range_slider/components/range_slider_control.tsx index 16c7ad967e8df..a05957d083086 100644 --- a/src/plugins/controls/public/controls/data_controls/range_slider/components/range_slider_control.tsx +++ b/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 = ({ @@ -46,6 +47,7 @@ export const RangeSliderControl: FC = ({ value, uuid, controlPanelClassName, + compressed, }: Props) => { const rangeSliderRef = useRef(null); @@ -194,7 +196,7 @@ export const RangeSliderControl: FC = ({ min={displayedMin} max={displayedMax} isLoading={isLoading} - compressed + compressed={compressed} inputPopoverProps={{ className: controlPanelClassName, panelMinWidth: MIN_POPOVER_WIDTH, diff --git a/src/plugins/controls/public/controls/data_controls/range_slider/get_range_slider_control_factory.tsx b/src/plugins/controls/public/controls/data_controls/range_slider/get_range_slider_control_factory.tsx index 0605fe4586abb..3d0fa52c6a113 100644 --- a/src/plugins/controls/public/controls/data_controls/range_slider/get_range_slider_control_factory.tsx +++ b/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)} /> ); }, diff --git a/src/plugins/controls/public/controls/timeslider_control/components/time_slider_anchored_range.tsx b/src/plugins/controls/public/controls/timeslider_control/components/time_slider_anchored_range.tsx index 0ab4a467e8694..88cd7fb1f1034 100644 --- a/src/plugins/controls/public/controls/timeslider_control/components/time_slider_anchored_range.tsx +++ b/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} /> ); } diff --git a/src/plugins/controls/public/controls/timeslider_control/components/time_slider_popover_content.tsx b/src/plugins/controls/public/controls/timeslider_control/components/time_slider_popover_content.tsx index 0d45797d42799..fc4d050d71d59 100644 --- a/src/plugins/controls/public/controls/timeslider_control/components/time_slider_popover_content.tsx +++ b/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} /> ) : ( ); const anchorStartToggleButtonLabel = props.isAnchored diff --git a/src/plugins/controls/public/controls/timeslider_control/components/time_slider_sliding_window_range.tsx b/src/plugins/controls/public/controls/timeslider_control/components/time_slider_sliding_window_range.tsx index aa699a3082ebd..f1b93ccfb57a8 100644 --- a/src/plugins/controls/public/controls/timeslider_control/components/time_slider_sliding_window_range.tsx +++ b/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} /> ); } diff --git a/src/plugins/controls/public/controls/timeslider_control/get_timeslider_control_factory.tsx b/src/plugins/controls/public/controls/timeslider_control/get_timeslider_control_factory.tsx index b7d5b6f077080..a0c6c237ace00 100644 --- a/src/plugins/controls/public/controls/timeslider_control/get_timeslider_control_factory.tsx +++ b/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)} /> ); From b21f593aa0e10a2dacadd04b4f82cbe98e391547 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Tue, 1 Oct 2024 15:18:27 -0600 Subject: [PATCH 19/19] unit tests --- .../control_group/utils/is_compressed.test.ts | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 src/plugins/controls/public/control_group/utils/is_compressed.test.ts diff --git a/src/plugins/controls/public/control_group/utils/is_compressed.test.ts b/src/plugins/controls/public/control_group/utils/is_compressed.test.ts new file mode 100644 index 0000000000000..e17fced5831bf --- /dev/null +++ b/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); + }); +});