diff --git a/package-lock.json b/package-lock.json index 3ad0bfb..9d7f8af 100644 --- a/package-lock.json +++ b/package-lock.json @@ -48,6 +48,7 @@ "redux-saga": "^1.1.3", "styled-components": "^5.3.5", "tailwindcss": "^3.0.23", + "ts-md5": "^1.3.1", "typesafe-actions": "^5.1.0", "typescript": "^4.6.4", "web-vitals": "^2.1.4" @@ -15508,6 +15509,14 @@ "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz", "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==" }, + "node_modules/ts-md5": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/ts-md5/-/ts-md5-1.3.1.tgz", + "integrity": "sha512-DiwiXfwvcTeZ5wCE0z+2A9EseZsztaiZtGrtSaY5JOD7ekPnR/GoIVD5gXZAlK9Na9Kvpo9Waz5rW64WKAWApg==", + "engines": { + "node": ">=12" + } + }, "node_modules/tsconfig-paths": { "version": "3.14.1", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz", @@ -27799,6 +27808,11 @@ "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz", "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==" }, + "ts-md5": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/ts-md5/-/ts-md5-1.3.1.tgz", + "integrity": "sha512-DiwiXfwvcTeZ5wCE0z+2A9EseZsztaiZtGrtSaY5JOD7ekPnR/GoIVD5gXZAlK9Na9Kvpo9Waz5rW64WKAWApg==" + }, "tsconfig-paths": { "version": "3.14.1", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz", diff --git a/package.json b/package.json index 9cb04a0..deb41f6 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "redux-saga": "^1.1.3", "styled-components": "^5.3.5", "tailwindcss": "^3.0.23", + "ts-md5": "^1.3.1", "typesafe-actions": "^5.1.0", "typescript": "^4.6.4", "web-vitals": "^2.1.4" diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx index ef1efa5..dd2c975 100644 --- a/src/components/Banner.tsx +++ b/src/components/Banner.tsx @@ -1,16 +1,24 @@ -import { useState } from "react"; +import {useEffect, useState} from "react"; import {Button, Col, Row, Space, Typography} from "antd"; import { CloseOutlined } from '@ant-design/icons'; +import {Md5} from "ts-md5"; const { Text } = Typography const Banner = () => { - const [show, setShow] = useState(true); + const [show, setShow] = useState(false); + const banner_md5_key = 'banner_md5' + const banner_closed_key = 'banner_closed' const dismiss = () => { setShow(false); + localStorage.setItem(banner_closed_key,'true'); }; + const announcement = "New Release! Access private networks with the Network Routes feature." + + const announcement_md5 = Md5.hashStr(announcement) + const linkLearnMore = () => { return ( { ) } + useEffect(()=>{ + let store_banner_md5 = localStorage.getItem(banner_md5_key); + let stored_banner_closed = localStorage.getItem(banner_closed_key); + + if((!stored_banner_closed || stored_banner_closed !== 'true') || + (!store_banner_md5 || store_banner_md5 !== announcement_md5)) { + setShow(true); + localStorage.setItem(banner_md5_key,announcement_md5); + localStorage.setItem(banner_closed_key,'false'); + } + },[]) + return show ? (
- New Release! Access private networks with the Network Routes feature. + {announcement} @@ -38,7 +58,7 @@ const Banner = () => { - New Release! Access private networks with the Network Routes feature. + {announcement} {linkLearnMore()}