refactor(Notification): use Ant Design notifications for toasts

superset-frontend/packages/superset-ui-core/src/components/index.ts

@@ -161,7 +161,6 @@ export {
 export { Image, type ImageProps } from './Image';
 export { Popconfirm, type PopconfirmProps } from './Popconfirm';
 export { Upload, type UploadFile, type UploadChangeParam } from './Upload';
-// Add these to your index.ts
 export * from './Menu';
 export * from './Popover';
 export * from './Radio';

superset-frontend/spec/helpers/testing-library.tsx

@@ -44,6 +44,7 @@ import { configureStore, Store } from '@reduxjs/toolkit';
 import { api } from 'src/hooks/apiResources/queryApi';
 import userEvent from '@testing-library/user-event';
 import { ExtensionsProvider } from 'src/extensions/ExtensionsContext';
+import { NotificationProvider } from 'src/components/MessageToasts/NotificationProvider';
 
 type Options = Omit<RenderOptions, 'queries'> & {
   useRedux?: boolean;
@@ -87,7 +88,9 @@ export function createWrapper(options?: Options) {
   return ({ children }: { children?: ReactNode }) => {
     let result = (
       <ThemeProvider theme={supersetTheme}>
-        <ExtensionsProvider>{children}</ExtensionsProvider>
+        <ExtensionsProvider>
+          <NotificationProvider>{children}</NotificationProvider>
+        </ExtensionsProvider>
       </ThemeProvider>
     );
 

superset-frontend/src/components/MessageToasts/NotificationProvider.tsx

@@ -0,0 +1,96 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { notification as antdNotification } from 'antd';
+import { createContext, useContext, useMemo, ReactNode } from 'react';
+import type { NotificationInstance } from 'antd/es/notification/interface';
+
+export type NotificationType = 'success' | 'info' | 'warning' | 'error';
+
+export type NotificationPlacement =
+  | 'top'
+  | 'topLeft'
+  | 'topRight'
+  | 'bottom'
+  | 'bottomLeft'
+  | 'bottomRight';
+
+export interface NotificationArgsProps {
+  message: ReactNode;
+  description?: ReactNode;
+  btn?: ReactNode;
+  key?: string;
+  onClose?: () => void;
+  duration?: number | null;
+  icon?: ReactNode;
+  placement?: NotificationPlacement;
+  className?: string;
+  onClick?: () => void;
+  closeIcon?: boolean | ReactNode;
+  role?: 'alert' | 'status';
+}
+
+export type NotificationApi = NotificationInstance;
+
+export interface NotificationContextType {
+  api: NotificationApi;
+  success: (args: NotificationArgsProps) => void;
+  error: (args: NotificationArgsProps) => void;
+  warning: (args: NotificationArgsProps) => void;
+  info: (args: NotificationArgsProps) => void;
+  open: (args: NotificationArgsProps & { type?: NotificationType }) => void;
+  destroy: (key?: string) => void;
+}
+
+const NotificationContext = createContext<NotificationContextType | undefined>(
+  undefined,
+);
+
+export const NotificationProvider = ({ children }: { children: ReactNode }) => {
+  const [api, contextHolder] = antdNotification.useNotification();
+
+  const value = useMemo<NotificationContextType>(
+    () => ({
+      api,
+      success: args => api.success(args),
+      error: args => api.error(args),
+      warning: args => api.warning(args),
+      info: args => api.info(args),
+      open: args => api.open(args),
+      destroy: (key?: string) => api.destroy(key),
+    }),
+    [api],
+  );
+
+  return (
+    <NotificationContext.Provider value={value}>
+      {contextHolder}
+      {children}
+    </NotificationContext.Provider>
+  );
+};
+
+export const useNotification = (): NotificationContextType => {
+  const context = useContext(NotificationContext);
+  if (!context) {
+    throw new Error(
+      'useNotification must be used within a NotificationProvider',
+    );
+  }
+  return context;
+};