[Security Solution] Get rid of rule description's fade in/out effect (#…

…150998) **Addresses:** #150997 ## Summary It removed rule details description's fade in and out effect which was added by scrolling EUI styles. *Before:* ![Screenshot 2023-02-13 at 13 30 02](https://user-images.githubusercontent.com/3775283/218459498-28dd50ce-94eb-427f-865c-279f611b4049.png) ![Screenshot 2023-02-13 at 13 30 11](https://user-images.githubusercontent.com/3775283/218459532-56072024-8e8b-4ee1-89be-ffece60d31a7.png) *After:* ![Screenshot 2023-02-13 at 13 27 49](https://user-images.githubusercontent.com/3775283/218459699-8da6f5c3-e05d-4c9f-8122-392f3bfd6846.png) ![Screenshot 2023-02-13 at 13 28 00](https://user-images.githubusercontent.com/3775283/218459735-1c522e19-573f-47c4-9490-5828373ac5ac.png)
elastic · Feb 21, 2023 · de97462 · de97462
1 parent a841cf8
commit de97462
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 38 deletions.
diff --git a/...ns/security_solution/public/detections/components/rules/step_about_rule_details/index.tsx b/...ns/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,15 +79,20 @@ const StepAboutRuleToggleDetailsComponent: React.FC<StepPanelProps> = ({
   }, [stepDataDetails]);
 
   return (
-    <MyPanel hasBorder>
+    <EuiPanel
+      hasBorder
+      css={css`
+        position: 'relative';
+      `}
+    >
       {loading && (
         <>
           <EuiProgress size="xs" color="accent" position="absolute" />
           <HeaderSection title={i18n.ABOUT_TEXT} />
         </>
       )}
       {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>
+  );
+}
diff --git a/...ns/security_solution/public/detections/components/rules/step_about_rule_details/styles.ts b/...ns/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%;
+`;