From fd3f2a2a7862706ac5bc92d2186ed1e03fb19e6c Mon Sep 17 00:00:00 2001
From: Sweta Agarwalla <105535990+sweta1308@users.noreply.github.com>
Date: Wed, 26 Mar 2025 00:11:59 +0530
Subject: [PATCH] fix alert issues (#20416)

---
 .../ui/src/components/AlertBar/AlertBar.tsx    |  9 ++++++++-
 .../components/AlertBar/alert-bar.style.less   |  6 +++++-
 .../components/PageLayoutV1/PageLayoutV1.tsx   | 18 +++++++++++++-----
 .../resources/ui/src/hooks/useAlertStore.ts    |  9 ++++++++-
 4 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx
index 9349d0a6421..2a8ac4fb1b3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx
+++ b/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"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less b/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less
index 157cdd153db..18e4c87dabc 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less
+++ b/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;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/PageLayoutV1/PageLayoutV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/PageLayoutV1/PageLayoutV1.tsx
index e536df1d66f..6ce99b26828 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/PageLayoutV1/PageLayoutV1.tsx
+++ b/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') {
-      setTimeout(() => {
+    if (prevPath !== location.pathname) {
+      if (isErrorTimeOut) {
         resetAlert();
-      }, 3000);
+      }
     }
-  }, [location.pathname, resetAlert]);
+  }, [location.pathname, resetAlert, isErrorTimeOut]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setPrevPath(location.pathname);
+    }, 3000);
+  }, [location.pathname]);
 
   return (
     <Fragment>
diff --git a/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertStore.ts b/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertStore.ts
index 49a8526098b..a82f123a64f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/hooks/useAlertStore.ts
+++ b/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 });
   },
 }));