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 ( = ({ mainContainerClassName = '', pageContainerStyle = {}, }: PageLayoutProp) => { - const { alert, resetAlert } = useAlertStore(); + const { alert, resetAlert, isErrorTimeOut } = useAlertStore(); const location = useLocation(); + const [prevPath, setPrevPath] = useState(); const contentWidth = useMemo(() => { if (leftPanel && rightPanel) { @@ -76,12 +78,18 @@ const PageLayoutV1: FC = ({ }, [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 ( 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 | null; + isErrorTimeOut: boolean; animationClass: string; addAlert: (alert: AlertType, timer?: number) => void; resetAlert: VoidFunction; @@ -30,9 +31,15 @@ export const useAlertStore = create()((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()((set, get) => ({ } }, resetAlert: () => { - set({ alert: undefined }); + set({ alert: undefined, isErrorTimeOut: false }); }, }));