fix(ui): validate token expiry on tab focus (#10011)

* fix(ui): validate token expiry on tab focus

* show toast message if token is expired

openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx

@@ -19,7 +19,9 @@ import { observer } from 'mobx-react';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useHistory, useLocation, useRouteMatch } from 'react-router-dom';
+import { toast } from 'react-toastify';
 import { getVersion } from 'rest/miscAPI';
+import { extractDetailsFromToken } from 'utils/AuthProvider.util';
 import appState from '../../AppState';
 import {
   getExplorePathWithSearch,
@@ -336,6 +338,28 @@ const Appbar: React.FC = (): JSX.Element => {
     }
   }, [appState.userDetails, isAuthDisabled]);
 
+  useEffect(() => {
+    const handleDocumentVisibilityChange = () => {
+      if (
+        isProtectedRoute(location.pathname) &&
+        isTourRoute(location.pathname)
+      ) {
+        return;
+      }
+      const { isExpired, exp } = extractDetailsFromToken();
+      if (!document.hidden && isExpired) {
+        exp && toast.info(t('message.session-expired'));
+        onLogoutHandler();
+      }
+    };
+
+    addEventListener('focus', handleDocumentVisibilityChange);
+
+    return () => {
+      removeEventListener('focus', handleDocumentVisibilityChange);
+    };
+  }, []);
+
   return (
     <>
       {isProtectedRoute(location.pathname) &&

openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json

@@ -788,6 +788,7 @@
     "select-team": "Please select a team type",
     "select-token-expiration": "Select Token Expiration",
     "service-created-entity-description": "The <Service Name> has been created successfully. Visit the newly created service to take a look at the details. {{entity}}",
+    "session-expired": "Your session has timed out! Please sign in again to access OpenMetadata.",
     "something-went-wrong": "Something went wrong",
     "special-character-not-allowed": "Special characters are not allowed.",
     "sql-query-tooltip": "Queries returning one or more rows will result in the test failing.",