diff --git a/app/portainer/hooks/UIStateProvider.tsx b/app/portainer/hooks/UIStateProvider.tsx index b0209dca2..03f3cb900 100644 --- a/app/portainer/hooks/UIStateProvider.tsx +++ b/app/portainer/hooks/UIStateProvider.tsx @@ -5,6 +5,7 @@ import { useLocalStorage } from '@/portainer/hooks/useLocalStorage'; interface UIState { dismissedInfoPanels: Record; dismissedInfoHash: string; + dismissedUpdateVersion: string; } type UIStateService = [UIState, (state: UIState) => void]; diff --git a/app/portainer/services/stateManager.js b/app/portainer/services/stateManager.js index e878e074a..bb68aeec1 100644 --- a/app/portainer/services/stateManager.js +++ b/app/portainer/services/stateManager.js @@ -26,6 +26,7 @@ function StateManagerFactory( dismissedInfoPanels: {}, dismissedInfoHash: '', timesPasswordChangeSkipped: {}, + dismissedUpdateVersion: '', }, }; diff --git a/app/react/sidebar/Footer/UpdateNotifications.module.css b/app/react/sidebar/Footer/UpdateNotifications.module.css index e83bd4768..7f1fdcf43 100644 --- a/app/react/sidebar/Footer/UpdateNotifications.module.css +++ b/app/react/sidebar/Footer/UpdateNotifications.module.css @@ -1,7 +1,19 @@ -.update-notification { - font-size: 14px; +.root { padding: 12px; - border-radius: 2px; - background-color: #ff851b; - margin-bottom: 5px; + margin-bottom: 20px; + text-align: left; +} + +.dismissTitle { + color: var(--white-color); +} + +.dismissBtn { + border: none; + background: none; + color: var(--text-muted-color); +} + +.actions { + padding-left: 26px; } diff --git a/app/react/sidebar/Footer/UpdateNotifications.tsx b/app/react/sidebar/Footer/UpdateNotifications.tsx index cc2edd80c..50a2fffdd 100644 --- a/app/react/sidebar/Footer/UpdateNotifications.tsx +++ b/app/react/sidebar/Footer/UpdateNotifications.tsx @@ -1,10 +1,15 @@ import { useQuery } from 'react-query'; +import clsx from 'clsx'; import { getVersionStatus } from '@/portainer/services/api/status.service'; +import { useUIState } from '@/portainer/hooks/UIStateProvider'; + +import { Icon } from '@@/Icon'; import styles from './UpdateNotifications.module.css'; export function UpdateNotification() { + const [uiState, setUIState] = useUIState(); const query = useUpdateNotification(); if (!query.data || !query.data.UpdateAvailable) { @@ -13,19 +18,56 @@ export function UpdateNotification() { const { LatestVersion } = query.data; + if ( + uiState?.dismissedUpdateVersion?.length > 0 && + LatestVersion?.length > 0 && + uiState?.dismissedUpdateVersion === LatestVersion + ) { + return null; + } + return ( -
- - A new - version is available - +
+
+ + + New version available {LatestVersion} + +
+ +
+ + + See what's new + +
); + + function onDismiss(version: string) { + setUIState({ + ...uiState, + dismissedUpdateVersion: version, + }); + } } function useUpdateNotification() {