[8.7] [Security Solution] Get rid of rule description's fade in/out effect (#150998) (#151683)

# Backport This will backport the following commits from `main` to `8.7`: - [[Security Solution] Get rid of rule description's fade in/out effect (#150998)](https://github.com/elastic/kibana/pull/150998)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Maxim Palenov <maxim.palenov@elastic.co>
2025-04-24 17:59:23 -04:00 · 2023-02-21 07:29:37 -05:00 · 2023-02-21 07:29:37 -05:00 · afa799b6ec
commit afa799b6ec
parent a6b8d62bdb
2 changed files with 74 additions and 38 deletions
--- a/x-pack/plugins/security_solution/public/detections/components/rules/step_about_rule_details/index.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/rules/step_about_rule_details/index.tsx
@ -17,9 +17,10 @@ import {
  EuiResizeObserver,
 } from '@elastic/eui';
 import { isEmpty } from 'lodash';
+import type { PropsWithChildren } from 'react';
 import React, { memo, useCallback, useMemo, useState } from 'react';
-import styled from 'styled-components';

+import { css } from '@emotion/react';
 import { HeaderSection } from '../../../../common/components/header_section';
 import { MarkdownRenderer } from '../../../../common/components/markdown_editor';
 import type {
@ -28,28 +29,7 @@ import type {
 } from '../../../pages/detection_engine/rules/types';
 import * as i18n from './translations';
 import { StepAboutRule } from '../step_about_rule';
-
-const MyPanel = styled(EuiPanel)`
-  position: relative;
-`;
-
-const FlexGroupFullHeight = styled(EuiFlexGroup)`
-  height: 100%;
-`;
-
-const VerticalOverflowContainer = styled.div((props: { maxHeight: number }) => ({
-  'max-height': `${props.maxHeight}px`,
-  'overflow-y': 'hidden',
-  'word-break': 'break-word',
-}));
-
-const VerticalOverflowContent = styled.div((props: { maxHeight: number }) => ({
-  'max-height': `${props.maxHeight}px`,
-}));
-
-const AboutContent = styled.div`
-  height: 100%;
-`;
+import { fullHeight } from './styles';

 const detailsOption: EuiButtonGroupOptionProps = {
  id: 'details',
@ -99,7 +79,12 @@ const StepAboutRuleToggleDetailsComponent: React.FC<StepPanelProps> = ({
  }, [stepDataDetails]);

  return (
-    <MyPanel hasBorder>
+    <EuiPanel
+      hasBorder
+      css={css`
+        position: 'relative';
+      `}
+    >
      {loading && (
        <>
          <EuiProgress size="xs" color="accent" position="absolute" />
@ -107,7 +92,7 @@ const StepAboutRuleToggleDetailsComponent: React.FC<StepPanelProps> = ({
        </>
      )}
      {stepData != null && stepDataDetails != null && (
-        <FlexGroupFullHeight gutterSize="xs" direction="column">
+        <EuiFlexGroup gutterSize="xs" direction="column" css={fullHeight}>
          <EuiFlexItem grow={false} key="header">
            <HeaderSection title={i18n.ABOUT_TEXT}>
              {toggleOptions.length > 0 && (
@ -127,9 +112,9 @@ const StepAboutRuleToggleDetailsComponent: React.FC<StepPanelProps> = ({
            {selectedToggleOption === 'details' && (
              <EuiResizeObserver data-test-subj="stepAboutDetailsContent" onResize={onResize}>
                {(resizeRef) => (
-                  <AboutContent ref={resizeRef}>
+                  <div ref={resizeRef} css={fullHeight}>
                    <VerticalOverflowContainer maxHeight={120}>
-                      <VerticalOverflowContent maxHeight={120} className="eui-yScrollWithShadows">
+                      <VerticalOverflowContent maxHeight={120}>
                        <EuiText
                          size="s"
                          data-test-subj="stepAboutRuleDetailsToggleDescriptionText"
@ -145,7 +130,7 @@ const StepAboutRuleToggleDetailsComponent: React.FC<StepPanelProps> = ({
                      isLoading={false}
                      defaultValues={stepData}
                    />
-                  </AboutContent>
+                  </div>
                )}
              </EuiResizeObserver>
            )}
@ -154,10 +139,7 @@ const StepAboutRuleToggleDetailsComponent: React.FC<StepPanelProps> = ({
                data-test-subj="stepAboutDetailsNoteContent"
                maxHeight={aboutPanelHeight}
              >
-                <VerticalOverflowContent
-                  maxHeight={aboutPanelHeight}
-                  className="eui-yScrollWithShadows"
-                >
+                <VerticalOverflowContent maxHeight={aboutPanelHeight}>
                  <MarkdownRenderer>{stepDataDetails.note}</MarkdownRenderer>
                </VerticalOverflowContent>
              </VerticalOverflowContainer>
@ -167,19 +149,61 @@ const StepAboutRuleToggleDetailsComponent: React.FC<StepPanelProps> = ({
                data-test-subj="stepAboutDetailsSetupContent"
                maxHeight={aboutPanelHeight}
              >
-                <VerticalOverflowContent
-                  maxHeight={aboutPanelHeight}
-                  className="eui-yScrollWithShadows"
-                >
+                <VerticalOverflowContent maxHeight={aboutPanelHeight}>
                  <MarkdownRenderer>{stepDataDetails.setup}</MarkdownRenderer>
                </VerticalOverflowContent>
              </VerticalOverflowContainer>
            )}
          </EuiFlexItem>
-        </FlexGroupFullHeight>
+        </EuiFlexGroup>
      )}
-    </MyPanel>
+    </EuiPanel>
  );
 };

 export const StepAboutRuleToggleDetails = memo(StepAboutRuleToggleDetailsComponent);
+
+interface VerticalOverflowContainerProps {
+  maxHeight: number;
+  'data-test-subj'?: string;
+}
+
+function VerticalOverflowContainer({
+  maxHeight,
+  'data-test-subj': dataTestSubject,
+  children,
+}: PropsWithChildren<VerticalOverflowContainerProps>): JSX.Element {
+  return (
+    <div
+      css={css`
+        max-height: ${maxHeight};
+        overflow-y: 'hidden';
+        word-break: 'break-word';
+      `}
+      data-test-subj={dataTestSubject}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface VerticalOverflowContentProps {
+  maxHeight: number;
+}
+
+function VerticalOverflowContent({
+  maxHeight,
+
+  children,
+}: PropsWithChildren<VerticalOverflowContentProps>): JSX.Element {
+  return (
+    <div
+      className="eui-yScroll"
+      css={css`
+        max-height: ${maxHeight};
+      `}
+    >
+      {children}
+    </div>
+  );
+}
--- a/x-pack/plugins/security_solution/public/detections/components/rules/step_about_rule_details/styles.ts
+++ b/x-pack/plugins/security_solution/public/detections/components/rules/step_about_rule_details/styles.ts
@ -0,0 +1,12 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { css } from '@emotion/react';
+
+export const fullHeight = css`
+  height: 100%;
+`;