[Timeline] Show cases create flyout with timeline open (elastic#110811)…

… (elastic#110846)
kibanamachine · Sep 1, 2021 · 99540ab · 99540ab
1 parent 278028f
commit 99540ab
Showing 1 changed file with 35 additions and 11 deletions.
diff --git a/x-pack/plugins/timelines/public/components/actions/timeline/cases/create/flyout.tsx b/x-pack/plugins/timelines/public/components/actions/timeline/cases/create/flyout.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { memo, useMemo } from 'react';
-import styled from 'styled-components';
+import styled, { createGlobalStyle } from 'styled-components';
 import { EuiFlyout, EuiFlyoutHeader, EuiTitle, EuiFlyoutBody } from '@elastic/eui';
 
 import * as i18n from '../translations';
@@ -28,6 +28,23 @@ const StyledFlyout = styled(EuiFlyout)`
     z-index: ${theme.eui.euiZModal};
   `}
 `;
+
+const maskOverlayClassName = 'create-case-flyout-mask-overlay';
+
+/**
+ * We need to target the mask overlay which is a parent element
+ * of the flyout.
+ * A global style is needed to target a parent element.
+ */
+
+const GlobalStyle = createGlobalStyle<{ theme: { eui: { euiZModal: number } } }>`
+  .${maskOverlayClassName} {
+    ${({ theme }) => `
+    z-index: ${theme.eui.euiZModal};
+  `}
+  }
+`;
+
 // Adding bottom padding because timeline's
 // bottom bar gonna hide the submit button.
 const StyledEuiFlyoutBody = styled(EuiFlyoutBody)`
@@ -68,16 +85,23 @@ const CreateCaseFlyoutComponent: React.FC<CreateCaseModalProps> = ({
     };
   }, [afterCaseCreated, onCloseFlyout, onSuccess, appId, disableAlerts]);
   return (
-    <StyledFlyout onClose={onCloseFlyout} data-test-subj="create-case-flyout">
-      <EuiFlyoutHeader hasBorder>
-        <EuiTitle size="m">
-          <h2>{i18n.CREATE_TITLE}</h2>
-        </EuiTitle>
-      </EuiFlyoutHeader>
-      <StyledEuiFlyoutBody>
-        <FormWrapper>{cases.getCreateCase(createCaseProps)}</FormWrapper>
-      </StyledEuiFlyoutBody>
-    </StyledFlyout>
+    <>
+      <GlobalStyle />
+      <StyledFlyout
+        onClose={onCloseFlyout}
+        data-test-subj="create-case-flyout"
+        maskProps={{ className: maskOverlayClassName }}
+      >
+        <EuiFlyoutHeader hasBorder>
+          <EuiTitle size="m">
+            <h2>{i18n.CREATE_TITLE}</h2>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+        <StyledEuiFlyoutBody>
+          <FormWrapper>{cases.getCreateCase(createCaseProps)}</FormWrapper>
+        </StyledEuiFlyoutBody>
+      </StyledFlyout>
+    </>
   );
 };