diff --git a/app/Base/components/Init/index.tsx b/app/Base/components/Init/index.tsx index 9892aa547a..b7c5b8130e 100644 --- a/app/Base/components/Init/index.tsx +++ b/app/Base/components/Init/index.tsx @@ -1,11 +1,23 @@ -import React, { useContext, useState, useMemo } from 'react'; +import React, { + useContext, + useState, + useCallback, + useMemo, + useEffect, +} from 'react'; import { useQuery, gql } from '@apollo/client'; import { removeNull } from '@togglecorp/toggle-form'; +import { + useAlert, + QuickActionButton, +} from '@the-deep/deep-ui'; +import { IoClose } from 'react-icons/io5'; import { UserContext } from '#base/context/UserContext'; import PreloadMessage from '#base/components/PreloadMessage'; import { checkErrorCode } from '#base/utils/apollo'; import localforageInstance from '#base/configs/localforage'; +import useLocalStorage from '#hooks/useLocalStorage'; import { ProjectContext, @@ -18,6 +30,8 @@ import { LAST_ACTIVE_PROJECT_FRAGMENT } from '#gqlFragments'; import { MeQuery } from '#generated/types'; +import styles from './styles.css'; + const ME = gql` ${LAST_ACTIVE_PROJECT_FRAGMENT} query Me { @@ -49,6 +63,55 @@ function Init(props: Props) { const [ready, setReady] = useState(false); const [errored, setErrored] = useState(false); const [project, setProject] = useState(undefined); + const alert = useAlert(); + const [ + seenIncompatibleBrowserAlert, + setSeenIncompatibleBrowserAlert, + ] = useLocalStorage('incompatible-browser-alert', undefined); + + const handleRemoveAlert = useCallback(() => { + alert.hide('incompatible-browser-alert'); + setSeenIncompatibleBrowserAlert('true'); + }, [ + alert, + setSeenIncompatibleBrowserAlert, + ]); + + useEffect(() => { + if (seenIncompatibleBrowserAlert === 'true') { + return; + } + const isChrome = navigator.userAgent.toLowerCase().includes('chrome'); + if (!isChrome) { + alert.show( + ( +
+ The DEEP platform is optimized for Google Chrome. For the + best experience and to ensure all + features work as intended, please switch to Chrome. + + + +
+ ), + { + name: 'incompatible-browser-alert', + variant: 'info', + duration: Infinity, + nonDismissable: true, + }, + ); + } + }, [ + seenIncompatibleBrowserAlert, + alert, + handleRemoveAlert, + ]); const { setUser, diff --git a/app/Base/components/Init/styles.css b/app/Base/components/Init/styles.css new file mode 100644 index 0000000000..e2ca4a8a1d --- /dev/null +++ b/app/Base/components/Init/styles.css @@ -0,0 +1,8 @@ +.alert-content { + display: flex; + align-items: flex-start; + + .close-button { + flex-shrink: 0; + } +}