From 36578b8deea486fd838ce8ce3c4fac61962ca97f Mon Sep 17 00:00:00 2001 From: muhammad-ahmed Date: Tue, 24 Dec 2024 11:47:50 +0800 Subject: [PATCH 1/2] ahmed/DAPI-516/fix--resolve-site-down-api-deriv --- i18n/en/code.json | 3 + i18n/fr/code.json | 3 + .../CustomTooltip/custom-tooltip.scss | 8 +- .../__tests__/item.desktop.test.tsx | 1 + .../UserNavbarItem/item.desktop.tsx | 125 ++++++++++++------ src/contexts/auth/auth.context.tsx | 1 + src/contexts/auth/auth.provider.tsx | 5 +- .../__tests__/ApiExplorer.test.tsx | 2 +- src/features/Apiexplorer/explorer.tsx | 105 +++++++++++++++ src/features/Apiexplorer/index.tsx | 106 +-------------- src/features/Fallback/Fallback.module.scss | 34 +++++ src/features/Fallback/index.tsx | 21 +++ .../dashboard/__tests__/dashboard.test.tsx | 3 + src/features/dashboard/dashboard.tsx | 4 +- .../hooks/__tests__/useCreateToken.test.tsx | 6 +- .../hooks/__tests__/useDeleteToken.test.tsx | 7 +- .../__tests__/useAppManager.test.tsx | 6 +- .../useLogout/__tests__/useLogout.test.tsx | 5 +- src/hooks/useServerInfo/index.tsx | 28 ++++ src/styles/_mixins.scss | 6 + 20 files changed, 327 insertions(+), 152 deletions(-) create mode 100644 src/features/Apiexplorer/explorer.tsx create mode 100644 src/features/Fallback/Fallback.module.scss create mode 100644 src/features/Fallback/index.tsx create mode 100644 src/hooks/useServerInfo/index.tsx diff --git a/i18n/en/code.json b/i18n/en/code.json index 1787c4a1a..de0955e3b 100644 --- a/i18n/en/code.json +++ b/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." } } diff --git a/i18n/fr/code.json b/i18n/fr/code.json index 4675dfbbe..4e66c8e93 100644 --- a/i18n/fr/code.json +++ b/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." } } diff --git a/src/components/CustomTooltip/custom-tooltip.scss b/src/components/CustomTooltip/custom-tooltip.scss index 7bdfb58ad..21e13a7ad 100644 --- a/src/components/CustomTooltip/custom-tooltip.scss +++ b/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; +} \ No newline at end of file diff --git a/src/components/UserNavbarItem/__tests__/item.desktop.test.tsx b/src/components/UserNavbarItem/__tests__/item.desktop.test.tsx index 10dd5b275..c5a241c2a 100644 --- a/src/components/UserNavbarItem/__tests__/item.desktop.test.tsx +++ b/src/components/UserNavbarItem/__tests__/item.desktop.test.tsx @@ -10,6 +10,7 @@ const mockUseAuthContext = useAuthContext as jest.MockedFunction<() => Partial ({ is_logged_in: true, + siteActive: true, })); describe('User Navbar Desktop Item', () => { diff --git a/src/components/UserNavbarItem/item.desktop.tsx b/src/components/UserNavbarItem/item.desktop.tsx index c0475816d..7d8b0918f 100644 --- a/src/components/UserNavbarItem/item.desktop.tsx +++ b/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 = ({ 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 = ({ handleClick, isDesktop, siteActive }) => { const { i18n: { currentLocale }, } = useDocusaurusContext(); @@ -31,71 +39,106 @@ const DashboardActions: React.FC = ({ handleClick, isDesktop }) => location.assign(pathInfo); }; - return ( - - - {isDesktop && ( + const renderDashboardBtn = () => { + return ( + + {isDesktop && ( + + )} + + ); + }; + + return ( + + {siteActive ? ( + renderDashboardBtn() + ) : ( + + {renderDashboardBtn()} + )} ); }; -const SignedInActions: React.FC = ({ handleClick, isDesktop }) => { +const SignedInActions: React.FC = ({ handleClick, isDesktop, siteActive }) => { const signedInButtonClasses = clsx('navbar__item', styles.UserNavbarItem, styles.SignedInButton); const { handleLogin } = useHandleLogin({ onClickLogin: handleClick, }); - return ( - + ); }; const UserNavbarDesktopItem = ({ authUrl, is_logged_in }: IUserNavbarItemProps) => { const { deviceType } = useDeviceType(); const isDesktop = deviceType === 'desktop'; + const { siteActive } = useAuthContext(); + + console.log(siteActive); const handleClick = () => { location.assign(authUrl); @@ -130,9 +173,9 @@ const UserNavbarDesktopItem = ({ authUrl, is_logged_in }: IUserNavbarItemProps) }, [isOAuth2Enabled, loggedState, logout, handleLogin, isLoginAccountsPopulated]); return is_logged_in ? ( - + ) : ( - + ); }; diff --git a/src/contexts/auth/auth.context.tsx b/src/contexts/auth/auth.context.tsx index 342eed908..fd0c5d8c6 100644 --- a/src/contexts/auth/auth.context.tsx +++ b/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(null); diff --git a/src/contexts/auth/auth.provider.tsx b/src/contexts/auth/auth.provider.tsx index 271ca30a8..6c3ba7486 100644 --- a/src/contexts/auth/auth.provider.tsx +++ b/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( 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 {children}; diff --git a/src/features/Apiexplorer/__tests__/ApiExplorer.test.tsx b/src/features/Apiexplorer/__tests__/ApiExplorer.test.tsx index dcbfa85df..6f066a2c6 100644 --- a/src/features/Apiexplorer/__tests__/ApiExplorer.test.tsx +++ b/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'; diff --git a/src/features/Apiexplorer/explorer.tsx b/src/features/Apiexplorer/explorer.tsx new file mode 100644 index 000000000..32a47cec4 --- /dev/null +++ b/src/features/Apiexplorer/explorer.tsx @@ -0,0 +1,105 @@ +import React from 'react'; +import { Breadcrumbs, Heading } from '@deriv-com/quill-ui'; +import Translate, { translate } from '@docusaurus/Translate'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import useDynamicImportJSON from '@site/src/hooks/useDynamicImportJSON'; +import Footer from '@site/src/components/Footer'; +import { Dropdown } from './Dropdown/Dropdown'; +import SchemaWrapper from './Schema/SchemaWrapper'; +import RequestJSONBox from './RequestJSONBox'; +import styles from './styles.module.scss'; +import AccountSwitcher from '@site/src/components/AccountSwitcher'; +import useAuthContext from '@site/src/hooks/useAuthContext'; + +export default function ApiExplorerFeatures() { + const { + text_data, + selected, + setSelected, + handleSelectChange, + request_info, + response_info, + handleTextAreaInput, + } = useDynamicImportJSON(); + const has_info = Object.keys(request_info).length === 0; + const { + i18n: { currentLocale }, + } = useDocusaurusContext(); + const { is_logged_in } = useAuthContext(); + + const locale_Links = React.useMemo(() => { + const is_en = currentLocale === 'en'; + const get_url = (path: string) => { + const pathInfo = `${!is_en ? `/${currentLocale}` : ''}/${path}`; + return pathInfo; + }; + return { + root: get_url(''), + }; + }, [currentLocale]); + + return ( + <> +
+
+ +
+
+ API Explorer +
+
+
+
+
+ + {is_logged_in && } +
+ +
+ {!has_info && ( +
+
+ +
+
+ +
+
+ )} +
+
+
+
+
+