fix(sidebar): rework the update notification [EE-4119] (#7575)

app/portainer/hooks/UIStateProvider.tsx

@@ -5,6 +5,7 @@ import { useLocalStorage } from '@/portainer/hooks/useLocalStorage';
 interface UIState {
   dismissedInfoPanels: Record<string, string>;
   dismissedInfoHash: string;
+  dismissedUpdateVersion: string;
 }
 
 type UIStateService = [UIState, (state: UIState) => void];

app/portainer/services/stateManager.js

@@ -26,6 +26,7 @@ function StateManagerFactory(
       dismissedInfoPanels: {},
       dismissedInfoHash: '',
       timesPasswordChangeSkipped: {},
+      dismissedUpdateVersion: '',
     },
   };
 

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;
 }

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 (
-    <div className={styles.updateNotification}>
-      <a
-        target="_blank"
-        href={`https://github.com/portainer/portainer/releases/tag/${LatestVersion}`}
-        style={{ color: '#091e5d' }}
-        rel="noreferrer"
-      >
-        <i className="fa-lg fas fa-cloud-download-alt space-right" />A new
-        version is available
-      </a>
+    <div
+      className={clsx(
+        styles.root,
+        'rounded border py-2',
+        'bg-blue-11 th-dark:bg-gray-warm-11',
+        'border-blue-9 th-dark:border-gray-warm-9'
+      )}
+    >
+      <div className={clsx(styles.dismissTitle, 'vertical-center')}>
+        <Icon icon="download-cloud" mode="primary" feather size="md" />
+        <span className="space-left">
+          New version available {LatestVersion}
+        </span>
+      </div>
+
+      <div className={clsx(styles.actions)}>
+        <button
+          type="button"
+          className={clsx(styles.dismissBtn, 'space-right')}
+          onClick={() => onDismiss(LatestVersion)}
+        >
+          Dismiss
+        </button>
+        <a
+          className="hyperlink space-left"
+          target="_blank"
+          href={`https://github.com/portainer/portainer/releases/tag/${LatestVersion}`}
+          rel="noreferrer"
+        >
+          See what&apos;s new
+        </a>
+      </div>
     </div>
   );
+
+  function onDismiss(version: string) {
+    setUIState({
+      ...uiState,
+      dismissedUpdateVersion: version,
+    });
+  }
 }
 
 function useUpdateNotification() {