diff --git a/frontend/src/constants/localStorage.ts b/frontend/src/constants/localStorage.ts index eccdc175ba..cf9d71a0a1 100644 --- a/frontend/src/constants/localStorage.ts +++ b/frontend/src/constants/localStorage.ts @@ -28,5 +28,6 @@ export enum LOCALSTORAGE { DONT_SHOW_SLOW_API_WARNING = 'DONT_SHOW_SLOW_API_WARNING', METRICS_LIST_OPTIONS = 'METRICS_LIST_OPTIONS', SHOW_EXCEPTIONS_QUICK_FILTERS = 'SHOW_EXCEPTIONS_QUICK_FILTERS', + BANNER_DISMISSED = 'BANNER_DISMISSED', QUICK_FILTERS_SETTINGS_ANNOUNCEMENT = 'QUICK_FILTERS_SETTINGS_ANNOUNCEMENT', } diff --git a/frontend/src/container/Home/Home.styles.scss b/frontend/src/container/Home/Home.styles.scss index c86e4a96ea..f27d93137e 100644 --- a/frontend/src/container/Home/Home.styles.scss +++ b/frontend/src/container/Home/Home.styles.scss @@ -25,6 +25,51 @@ background: var(--bg-slate-500); } + .home-container-banner { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + padding: 8px 12px; + width: 100%; + background-color: var(--bg-robin-500); + + .home-container-banner-close { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + color: var(--bg-vanilla-100); + + position: absolute; + right: 12px; + } + + .home-container-banner-content { + display: flex; + align-items: center; + justify-content: center; + gap: 4px; + color: var(--bg-vanilla-100); + font-family: Inter; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 20px; + + .home-container-banner-link { + color: var(--bg-vanilla-100); + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 20px; + letter-spacing: -0.07px; + text-decoration: underline; + } + } + } + .home-header-left { display: flex; align-items: center; diff --git a/frontend/src/container/Home/Home.tsx b/frontend/src/container/Home/Home.tsx index abbe2747f5..58446801a7 100644 --- a/frontend/src/container/Home/Home.tsx +++ b/frontend/src/container/Home/Home.tsx @@ -10,6 +10,7 @@ import getAllUserPreferences from 'api/preferences/getAllUserPreference'; import updateUserPreferenceAPI from 'api/preferences/updateUserPreference'; import Header from 'components/Header/Header'; import { DEFAULT_ENTITY_VERSION } from 'constants/app'; +import { LOCALSTORAGE } from 'constants/localStorage'; import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder'; import { REACT_QUERY_KEY } from 'constants/reactQueryKeys'; import ROUTES from 'constants/routes'; @@ -20,7 +21,7 @@ import { useGetK8sPodsList } from 'hooks/infraMonitoring/useGetK8sPodsList'; import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange'; import history from 'lib/history'; import cloneDeep from 'lodash-es/cloneDeep'; -import { CompassIcon, DotIcon, HomeIcon, Plus, Wrench } from 'lucide-react'; +import { CompassIcon, DotIcon, HomeIcon, Plus, Wrench, X } from 'lucide-react'; import { AnimatePresence } from 'motion/react'; import * as motion from 'motion/react-client'; import Card from 'periscope/components/Card/Card'; @@ -61,6 +62,13 @@ export default function Home(): JSX.Element { false, ); + const [isBannerDismissed, setIsBannerDismissed] = useState(false); + + useEffect(() => { + const bannerDismissed = localStorage.getItem(LOCALSTORAGE.BANNER_DISMISSED); + setIsBannerDismissed(bannerDismissed === 'true'); + }, []); + useEffect(() => { const now = new Date(); const startTime = new Date(now.getTime() - homeInterval); @@ -310,9 +318,35 @@ export default function Home(): JSX.Element { logEvent('Homepage: Visited', {}); }, []); + const hideBanner = (): void => { + localStorage.setItem(LOCALSTORAGE.BANNER_DISMISSED, 'true'); + setIsBannerDismissed(true); + }; + return (