Merge pull request #192 from ahmed-deriv/ahmed/DAPI-516/fix--resolve-…

…site-down-api-deriv

Ahmed/dapi 516/fix  resolve site down api deriv

i18n/en/code.json

@@ -1115,5 +1115,8 @@
   },
   "Clear response": {
     "message": "Clear response"
+  },
+  "The server is currently unable to handle the request due to a temporary overload or maintenance of the server. Please try again later.": {
+    "message": "The server is currently unable to handle the request due to a temporary overload or maintenance of the server. Please try again later."
   }
 }

i18n/fr/code.json

@@ -1115,5 +1115,8 @@
   },
   "Clear response": {
     "message": "Effacer la réponse"
+  },
+  "The server is currently unable to handle the request due to a temporary overload or maintenance of the server. Please try again later.": {
+    "message": "Le serveur est actuellement incapable de traiter la requête en raison d'une surcharge temporaire ou d'une maintenance du serveur. Veuillez réessayer plus tard."
   }
 }

src/components/CustomTooltip/custom-tooltip.scss

@@ -1,6 +1,6 @@
 .tooltip_content {
   border-radius: 4px;
-  padding: 8px 4px;
+  padding: 12px;
   font-size: 12px;
   line-height: 14px;
   color: var(--ifm-color-emphasis-100);
@@ -10,10 +10,14 @@
   animation-duration: 400ms;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
   will-change: transform, opacity;
-  max-width: 96px;
+  max-width: 200px;
   text-align: center;
 }
 
 .tooltip_arrow {
   fill: var(--ifm-color-emphasis-700);
 }
+
+div[data-radix-popper-content-wrapper] {
+  z-index: 9999 !important;
+}

src/components/UserNavbarItem/__tests__/item.desktop.test.tsx

@@ -10,6 +10,7 @@ const mockUseAuthContext = useAuthContext as jest.MockedFunction<() => Partial<I
 
 mockUseAuthContext.mockImplementation(() => ({
   is_logged_in: true,
+  siteActive: true,
 }));
 
 describe('User Navbar Desktop Item', () => {

src/components/UserNavbarItem/item.desktop.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
-import Translate from '@docusaurus/Translate';
+import Translate, { translate } from '@docusaurus/Translate';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import { Button } from '@deriv-com/quill-ui';
 import {
@@ -14,13 +14,21 @@ import { IUserNavbarItemProps } from './item.types';
 import styles from './UserNavbarItem.module.scss';
 import Cookies from 'js-cookie';
 import { useHandleLogin } from '@site/src/hooks/useHandleLogin';
+import useAuthContext from '@site/src/hooks/useAuthContext';
+import CustomTooltip from '../CustomTooltip';
 
 interface IActionProps {
   handleClick: () => void;
   isDesktop: boolean;
+  siteActive: boolean;
 }
 
-const DashboardActions: React.FC<IActionProps> = ({ handleClick, isDesktop }) => {
+const siteDownErrMsg = translate({
+  message:
+    'The server is currently unable to handle the request due to a temporary overload or maintenance of the server. Please try again later.',
+});
+
+const DashboardActions: React.FC<IActionProps> = ({ handleClick, isDesktop, siteActive }) => {
   const {
     i18n: { currentLocale },
   } = useDocusaurusContext();
@@ -31,72 +39,105 @@ const DashboardActions: React.FC<IActionProps> = ({ handleClick, isDesktop }) =>
     location.assign(pathInfo);
   };
 
-  return (
-    <React.Fragment>
-      <Button
-        onClick={onClickDashboard}
-        type='button'
-        className={styles.dashboardButton}
-        variant='tertiary'
-        color='black'
-        icon={<LabelPairedGridLgRegularIcon />}
-        data-testid='da_login'
-      >
-        <Translate>Dashboard</Translate>
-      </Button>
-      {isDesktop && (
+  const renderDashboardBtn = () => {
+    return (
+      <React.Fragment>
         <Button
-          onClick={handleClick}
+          onClick={onClickDashboard}
           type='button'
+          className={styles.dashboardButton}
           variant='tertiary'
           color='black'
-          className={styles.logoutButton}
-          icon={<StandaloneRightFromBracketBoldIcon />}
-          data-testid='da_logout'
+          icon={<LabelPairedGridLgRegularIcon />}
+          data-testid='da_login'
+          disabled={!siteActive}
         >
-          <Translate>Log out</Translate>
+          <Translate>Dashboard</Translate>
         </Button>
+        {isDesktop && (
+          <Button
+            onClick={handleClick}
+            type='button'
+            variant='tertiary'
+            color='black'
+            className={styles.logoutButton}
+            icon={<StandaloneRightFromBracketBoldIcon />}
+            data-testid='da_logout'
+            disabled={!siteActive}
+          >
+            <Translate>Log out</Translate>
+          </Button>
+        )}
+      </React.Fragment>
+    );
+  };
+
+  return (
+    <React.Fragment>
+      {siteActive ? (
+        renderDashboardBtn()
+      ) : (
+        <CustomTooltip text={siteDownErrMsg}>
+          <span>{renderDashboardBtn()}</span>
+        </CustomTooltip>
       )}
     </React.Fragment>
   );
 };
 
-const SignedInActions: React.FC<IActionProps> = ({ handleClick, isDesktop }) => {
+const SignedInActions: React.FC<IActionProps> = ({ handleClick, isDesktop, siteActive }) => {
   const signedInButtonClasses = clsx('navbar__item', styles.UserNavbarItem, styles.SignedInButton);
 
   const { handleLogin } = useHandleLogin({
     onClickLogin: handleClick,
   });
 
-  return (
-    <nav className='right-navigation'>
-      <Button
-        variant='secondary'
-        color='black'
-        onClick={handleLogin}
-        className={signedInButtonClasses}
-        data-testid='sa_login'
-      >
-        <Translate>Log in</Translate>
-      </Button>
-      {isDesktop && (
+  const renderSignupBtn = () => {
+    return (
+      <nav className='right-navigation'>
         <Button
-          variant='primary'
-          onClick={() => location.assign('https://deriv.com/signup/')}
+          variant='secondary'
+          color='black'
+          onClick={handleLogin}
           className={signedInButtonClasses}
-          data-testid='sa_signup'
+          data-testid='sa_login'
+          disabled={!siteActive}
         >
-          <Translate>Sign up</Translate>
+          <Translate>Log in</Translate>
         </Button>
+        {isDesktop && (
+          <Button
+            variant='primary'
+            onClick={() => location.assign('https://deriv.com/signup/')}
+            className={signedInButtonClasses}
+            data-testid='sa_signup'
+            disabled={!siteActive}
+          >
+            <Translate>Sign up</Translate>
+          </Button>
+        )}
+      </nav>
+    );
+  };
+
+  return (
+    <React.Fragment>
+      {siteActive ? (
+        renderSignupBtn()
+      ) : (
+        <CustomTooltip text={siteDownErrMsg}>
+          <span>{renderSignupBtn()}</span>
+        </CustomTooltip>
       )}
-    </nav>
+    </React.Fragment>
   );
 };
 
 const UserNavbarDesktopItem = ({ authUrl, is_logged_in }: IUserNavbarItemProps) => {
   const { deviceType } = useDeviceType();
   const isDesktop = deviceType === 'desktop';
-
+  const { siteActive } = useAuthContext();
+
   const handleClick = () => {
     location.assign(authUrl);
   };
@@ -130,9 +171,9 @@ const UserNavbarDesktopItem = ({ authUrl, is_logged_in }: IUserNavbarItemProps)
   }, [isOAuth2Enabled, loggedState, logout, handleLogin, isLoginAccountsPopulated]);
 
   return is_logged_in ? (
-    <DashboardActions handleClick={logout} isDesktop={isDesktop} />
+    <DashboardActions handleClick={logout} isDesktop={isDesktop} siteActive={siteActive} />
   ) : (
-    <SignedInActions handleClick={handleClick} isDesktop={isDesktop} />
+    <SignedInActions handleClick={handleClick} isDesktop={isDesktop} siteActive={siteActive} />
   );
 };
 

src/contexts/auth/auth.context.tsx

@@ -19,6 +19,7 @@ export interface IAuthContext {
   updateCurrentLoginAccount: (userAccount: IUserLoginAccount, isValidateAccount?: boolean) => void;
   userAccounts: IUserAccounts;
   user: IUser;
+  siteActive: boolean;
 }
 
 export const AuthContext = React.createContext<IAuthContext | null>(null);

src/contexts/auth/auth.provider.tsx

@@ -10,6 +10,7 @@ import {
   USER_SESSION_STORAGE_KEY,
 } from '@site/src/utils/constants';
 import { findVirtualAccount, getIsBrowser } from '@site/src/utils';
+import useServerInfo from '@site/src/hooks/useServerInfo';
 
 type TAuthProviderProps = {
   children: ReactNode;
@@ -24,6 +25,7 @@ const AuthProvider = ({ children }: TAuthProviderProps) => {
   const [is_authorized, setIsAuthorized] = useState(false);
   const [is_switching_account, setisSwitchingAccount] = useState(false);
   const [is_connected, setIsConnected] = useState(true);
+  const { siteActive } = useServerInfo();
 
   const [loginAccounts, setLoginAccounts] = useSessionStorage<IUserLoginAccount[]>(
     LOGIN_ACCOUNTS_SESSION_STORAGE_KEY,
@@ -67,7 +69,6 @@ const AuthProvider = ({ children }: TAuthProviderProps) => {
 
   const updateLoginAccounts = useCallback(
     (loginAccounts: IUserLoginAccount[], updateCurrentAccount = true) => {
-
       setLoginAccounts(loginAccounts);
       if (!updateCurrentAccount) return;
 
@@ -113,6 +114,7 @@ const AuthProvider = ({ children }: TAuthProviderProps) => {
       updateCurrentLoginAccount,
       userAccounts,
       user,
+      siteActive,
     };
   }, [
     currentLoginAccount,
@@ -124,6 +126,7 @@ const AuthProvider = ({ children }: TAuthProviderProps) => {
     updateLoginAccounts,
     userAccounts,
     user,
+    siteActive,
   ]);
 
   return <AuthContext.Provider value={context_object}>{children}</AuthContext.Provider>;

src/features/Apiexplorer/__tests__/ApiExplorer.test.tsx

@@ -1,6 +1,6 @@
 import React, { act } from 'react';
 import '@testing-library/jest-dom';
-import ApiExplorerFeatures from '..';
+import ApiExplorerFeatures from '../explorer';
 import userEvent from '@testing-library/user-event';
 import useWS from '@site/src/hooks/useWs';
 import useAuthContext from '@site/src/hooks/useAuthContext';