fix alert issues (#20416)

openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx

@@ -31,12 +31,19 @@ const AlertBar = ({
     return getIconAndClassName(type);
   }, [type]);
 
+  const fullWidthAlert = expanded ? 'full-width-alert' : '';
+
   return (
     <Alert
       closable
       showIcon
       afterClose={resetAlert}
-      className={classNames('alert-container', className, animationClass)}
+      className={classNames(
+        'alert-container',
+        className,
+        animationClass,
+        fullWidthAlert
+      )}
       closeIcon={
         <CrossIcon
           className="alert-close-icon"

openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less

@@ -75,13 +75,17 @@
     display: flex;
     align-items: center;
     border-radius: 12px;
-    margin: 0 16px;
+    margin: 0 18px;
   }
 
   &.hide-alert {
     animation: resize-hide-animation 0.2s ease-in-out forwards;
   }
 
+  &.full-width-alert {
+    margin: 0px;
+  }
+
   &.info {
     background-color: @alert-info-bg;
     border-color: @alert-info;

openmetadata-ui/src/main/resources/ui/src/components/PageLayoutV1/PageLayoutV1.tsx

@@ -21,6 +21,7 @@ import React, {
   ReactNode,
   useEffect,
   useMemo,
+  useState,
 } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useAlertStore } from '../../hooks/useAlertStore';
@@ -60,8 +61,9 @@ const PageLayoutV1: FC<PageLayoutProp> = ({
   mainContainerClassName = '',
   pageContainerStyle = {},
 }: PageLayoutProp) => {
-  const { alert, resetAlert } = useAlertStore();
+  const { alert, resetAlert, isErrorTimeOut } = useAlertStore();
   const location = useLocation();
+  const [prevPath, setPrevPath] = useState<string | undefined>();
 
   const contentWidth = useMemo(() => {
     if (leftPanel && rightPanel) {
@@ -76,12 +78,18 @@ const PageLayoutV1: FC<PageLayoutProp> = ({
   }, [leftPanel, rightPanel, leftPanelWidth, rightPanelWidth]);
 
   useEffect(() => {
-    if (alert && alert.type === 'error') {
+    if (prevPath !== location.pathname) {
-      setTimeout(() => {
+      if (isErrorTimeOut) {
         resetAlert();
-      }, 3000);
+      }
     }
-  }, [location.pathname, resetAlert]);
+  }, [location.pathname, resetAlert, isErrorTimeOut]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setPrevPath(location.pathname);
+    }, 3000);
+  }, [location.pathname]);
 
   return (
     <Fragment>

openmetadata-ui/src/main/resources/ui/src/hooks/useAlertStore.ts

@@ -21,6 +21,7 @@ export type AlertType = {
 interface AlertStore {
   alert: AlertType | undefined;
   timeoutId: ReturnType<typeof setTimeout> | null;
+  isErrorTimeOut: boolean;
   animationClass: string;
   addAlert: (alert: AlertType, timer?: number) => void;
   resetAlert: VoidFunction;
@@ -30,9 +31,15 @@ export const useAlertStore = create<AlertStore>()((set, get) => ({
   alert: undefined,
   animationClass: '',
   timeoutId: null,
+  isErrorTimeOut: false,
   addAlert: (alert: AlertType, timer?: number) => {
     const { timeoutId } = get();
     set({ alert, animationClass: 'show-alert' });
+    if (alert.type === 'error') {
+      setTimeout(() => {
+        set({ isErrorTimeOut: true });
+      }, 5000);
+    }
 
     if (timeoutId) {
       clearTimeout(timeoutId);
@@ -49,6 +56,6 @@ export const useAlertStore = create<AlertStore>()((set, get) => ({
     }
   },
   resetAlert: () => {
-    set({ alert: undefined });
+    set({ alert: undefined, isErrorTimeOut: false });
   },
 }));