From e770305eedd10c5fc032be2645f7e8e46e2f0d9d Mon Sep 17 00:00:00 2001
From: Claire Lin <claire@dagsterlabs.com>
Date: Thu, 7 Mar 2024 10:58:34 -0800
Subject: [PATCH] [ui] Fix z-indexing for custom alert provider (#20192)

Previously, in certain situations, error dialogs display underneath
their corresponding editor modals.

This PR fixes this issue.
---
 .../packages/ui-components/src/components/Dialog.tsx     | 4 ++--
 .../dagster-ui/packages/ui-core/src/app/AppProvider.tsx  | 3 ++-
 .../packages/ui-core/src/app/CustomAlertProvider.tsx     | 9 ++++++++-
 3 files changed, 12 insertions(+), 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
index 50fc3231b38e5..ca29d32db8d7a 100644
--- 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
index 510db5bc772c0..95bc0e56a595e 100644
--- 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
index b6937b65ff985..c5e1c194f0902 100644
--- 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';
@@ -73,6 +73,7 @@ export const CustomAlertProvider = () => {
       onClose={() => setCustomAlert(null)}
       style={{width: 'auto', maxWidth: '80vw'}}
       isOpen={!!alert}
+      portalClassName="custom-alert-portal"
     >
       {alert ? (
         <DialogBody data-testid={testId('alert-body')}>
@@ -96,3 +97,9 @@ const Body = styled.div`
   font-family: ${FontFamily.monospace};
   font-size: 16px;
 `;
+
+export const GlobalCustomAlertPortalStyle = createGlobalStyle`
+  .custom-alert-portal {
+    z-index: 1000;
+  }
+`;