claire/fix-z-index-custom-alert-provider

dagster-io · Mar 1, 2024 · 98eed78 · 98eed78
1 parent 497b28e
commit 98eed78
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Dialog.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Dialog.tsx
@@ -24,9 +24,9 @@ export const Dialog = (props: Props) => {
   return (
     <BlueprintDialog
       {...rest}
-      portalClassName="dagster-portal"
+      portalClassName={`dagster-portal${props.portalClassName ? ` ${props.portalClassName}` : ''}`}
       backdropClassName="dagster-backdrop"
-      className="dagster-dialog"
+      className={`dagster-dialog${props.className ? ` ${props.className}` : ''}`}
     >
       {title ? <DialogHeader icon={icon} label={title} /> : null}
       <ErrorBoundary region="dialog">{children}</ErrorBoundary>

diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/AppProvider.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/AppProvider.tsx
@@ -27,7 +27,7 @@ import {createGlobalStyle} from 'styled-components';
 import {SubscriptionClient} from 'subscriptions-transport-ws';
 
 import {AppContext} from './AppContext';
-import {CustomAlertProvider} from './CustomAlertProvider';
+import {CustomAlertProvider, GlobalCustomAlertPortalStyle} from './CustomAlertProvider';
 import {CustomConfirmationProvider} from './CustomConfirmationProvider';
 import {LayoutProvider} from './LayoutProvider';
 import {PermissionsProvider} from './Permissions';
@@ -211,6 +211,7 @@ export const AppProvider = (props: AppProviderProps) => {
         <GlobalTooltipStyle />
         <GlobalPopoverStyle />
         <GlobalDialogStyle />
+        <GlobalCustomAlertPortalStyle />
         <GlobalSuggestStyle />
         <ApolloProvider client={apolloClient}>
           <AssetLiveDataProvider>

diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/CustomAlertProvider.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/CustomAlertProvider.tsx
@@ -1,6 +1,6 @@
 import {Button, Dialog, DialogBody, DialogFooter, FontFamily} from '@dagster-io/ui-components';
 import * as React from 'react';
-import styled from 'styled-components';
+import styled, {createGlobalStyle} from 'styled-components';
 
 import {copyValue} from './DomUtils';
 import {testId} from '../testing/testId';
@@ -62,6 +62,8 @@ export const CustomAlertProvider = () => {
     [copySelector],
   );
 
+  const container = React.useRef<HTMLDivElement | undefined>(undefined);
+
   if (!mounted) {
     return null;
   }
@@ -73,6 +75,8 @@ export const CustomAlertProvider = () => {
       onClose={() => setCustomAlert(null)}
       style={{width: 'auto', maxWidth: '80vw'}}
       isOpen={!!alert}
+      portalContainer={container.current}
+      portalClassName="custom-alert-portal"
     >
       {alert ? (
         <DialogBody data-testid={testId('alert-body')}>
@@ -96,3 +100,9 @@ const Body = styled.div`
   font-family: ${FontFamily.monospace};
   font-size: 16px;
 `;
+
+export const GlobalCustomAlertPortalStyle = createGlobalStyle`
+  .custom-alert-portal {
+    z-index: 1000;
+  }
+`;