From a602eed54f97a138aaab270e2f0aa1dc1d3fdb36 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Mon, 9 Sep 2024 13:41:54 +0200
Subject: [PATCH] [Security Solution] Fixes mis-alignment in the labels of
 Filter controls on Alerts Page. (#192094)

## Summary

As stated in #192092 , the labels of filter controls were mis-aligned.
This was due to some changes in EUI were conflicting with our custom
styling. This PR removes the custom styling.

### Before


![grafik](https://github.com/user-attachments/assets/f167f909-6fff-442e-9ed8-a9781bb52bd1)

### Issues with Error state

It looks like recent PR #190636 on 03-Sept made the controls compact but
the error state was left out. This PR fixes that. I would request
@elastic/kibana-presentation team to review it once.

<img width="1920" alt="grafik"
src="https://github.com/user-attachments/assets/4025c79f-2602-4221-a136-436b6759096f">


### After

Below video shows fixes in success, loading and error states.
@elastic/response-ops team, Could you please check in other areas as
well where these filters are used. Thanks.



https://github.com/user-attachments/assets/7e0f6035-171c-4a4b-99c6-116ad577a019
---
 .../src/alert_filter_controls/index.scss      | 24 -------------------
 .../src/alert_filter_controls/loading.tsx     |  9 ++-----
 .../components/control_panel.scss             |  1 +
 .../lib/embeddables/error_embeddable.scss     |  3 ++-
 4 files changed, 5 insertions(+), 32 deletions(-)

diff --git a/packages/kbn-alerts-ui-shared/src/alert_filter_controls/index.scss b/packages/kbn-alerts-ui-shared/src/alert_filter_controls/index.scss
index 416a996b9dcaf..dbc1b992c7a6d 100644
--- a/packages/kbn-alerts-ui-shared/src/alert_filter_controls/index.scss
+++ b/packages/kbn-alerts-ui-shared/src/alert_filter_controls/index.scss
@@ -9,27 +9,3 @@
 [id^=control-popover] .euiPopoverTitle {
   display: none
 }
-
-.filter-group__wrapper {
-  .euiPanel.controlsWrapper {
-    min-height: 34px;
-  }
-
-  .euiFormControlLayout.euiFormControlLayout--group.controlFrame__formControlLayout {
-    height: 34px;
-    & .euiFormLabel.controlFrame__formControlLayoutLabel {
-      padding: 8px  !important;
-    }
-
-    .euiButtonEmpty.euiFilterButton {
-      height: 32px;
-    }
-  }
-  .euiText.errorEmbeddableCompact__button {
-    padding: 8px;
-    .euiLink {
-      display:flex;
-      gap: 8px;
-    }
-  }
-}
diff --git a/packages/kbn-alerts-ui-shared/src/alert_filter_controls/loading.tsx b/packages/kbn-alerts-ui-shared/src/alert_filter_controls/loading.tsx
index 72dd89471b150..ada23b3cfb92f 100644
--- a/packages/kbn-alerts-ui-shared/src/alert_filter_controls/loading.tsx
+++ b/packages/kbn-alerts-ui-shared/src/alert_filter_controls/loading.tsx
@@ -9,17 +9,12 @@
 
 import React from 'react';
 import { EuiButton, EuiLoadingChart } from '@elastic/eui';
-import styled from '@emotion/styled';
 import { TEST_IDS } from './constants';
 
-const FilterGroupLoadingButton = styled(EuiButton)`
-  height: 34px;
-`;
-
 export const FilterGroupLoading = () => {
   return (
-    <FilterGroupLoadingButton color="text">
+    <EuiButton color="text" size="s">
       <EuiLoadingChart className="filter-group__loading" data-test-subj={TEST_IDS.FILTER_LOADING} />
-    </FilterGroupLoadingButton>
+    </EuiButton>
   );
 };
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 bb05f663ca42f..4987a58275237 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
@@ -27,6 +27,7 @@
   .controlErrorButton {
     width: 100%;
     border-radius: 0 $euiBorderRadius $euiBorderRadius 0 !important;
+    height: $euiButtonHeightSmall;
 
     &--content {
       justify-content: left;
diff --git a/src/plugins/embeddable/public/lib/embeddables/error_embeddable.scss b/src/plugins/embeddable/public/lib/embeddables/error_embeddable.scss
index 739d6930001e9..bf58bd34511a7 100644
--- a/src/plugins/embeddable/public/lib/embeddables/error_embeddable.scss
+++ b/src/plugins/embeddable/public/lib/embeddables/error_embeddable.scss
@@ -1,10 +1,11 @@
-
 .errorEmbeddableCompact__popover {
   height: 100%;
   max-width: 100%;
 }
 
 .errorEmbeddableCompact__button {
+  height: $euiButtonHeightSmall;
+
   :hover {
     text-decoration: underline;
     text-decoration-color: $euiTextSubduedColor !important;