fix: User proper state to handle notification-banner vs tooltip

Author: peter-sanderson

Diff for: packages/suite/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@trezor/suite",
-    "suiteVersion": "0.0.0",
+    "suiteVersion": "24.11.0",
     "version": "1.0.0",
     "private": true,
     "scripts": {

Diff for: packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/QuickActions/QuickActions.tsx

@@ -20,9 +20,13 @@ const ActionsContainer = styled.div`
     }
 `;
 
-export const QuickActions = () => (
+type QuickActionsProps = {
+    showUpdateBannerNotification: boolean;
+};
+
+export const QuickActions = ({ showUpdateBannerNotification }: QuickActionsProps) => (
     <ActionsContainer>
-        <UpdateStatusActionBarIcon />
+        <UpdateStatusActionBarIcon showUpdateBannerNotification={showUpdateBannerNotification} />
         <DebugAndExperimental />
         <CustomBackend />
         <Tor />

Diff for: packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/QuickActions/Update/UpdateStatusActionBarIcon.tsx

@@ -139,11 +139,16 @@ const SuiteUpdateIcon = ({ iconSize, updateStatus, variant }: SuiteUpdateIconPro
     );
 };
 
-export const UpdateStatusActionBarIcon = () => {
+type UpdateStatusActionBarIconProps = {
+    showUpdateBannerNotification: boolean;
+};
+
+export const UpdateStatusActionBarIcon = ({
+    showUpdateBannerNotification,
+}: UpdateStatusActionBarIconProps) => {
     const theme = useTheme();
 
-    const { updateStatus, updateStatusDevice, updateStatusSuite, showBannerNotification } =
-        useUpdateStatus();
+    const { updateStatus, updateStatusDevice, updateStatusSuite } = useUpdateStatus();
 
     const { device } = useDevice();
     const dispatch = useDispatch();
@@ -173,7 +178,7 @@ export const UpdateStatusActionBarIcon = () => {
         <div>
             <QuickActionButton
                 tooltip={
-                    !showBannerNotification && (
+                    !showUpdateBannerNotification && (
                         <UpdateTooltip
                             updateStatusDevice={updateStatusDevice}
                             updateStatusSuite={updateStatusSuite}

Diff for: packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/QuickActions/Update/useUpdateStatus.ts

@@ -1,5 +1,3 @@
-import { useState } from 'react';
-
 import { useDevice, useSelector } from '../../../../../../../hooks/suite';
 import {
     DesktopUpdateState,
@@ -11,10 +9,6 @@ type UpdateStatusData = {
     updateStatus: UpdateStatus;
     updateStatusDevice: UpdateStatusDevice;
     updateStatusSuite: UpdateStatusSuite;
-
-    showBannerNotification: boolean;
-    setClosedNotificationSuite: (value: boolean) => void;
-    setClosedNotificationDevice: (value: boolean) => void;
 };
 
 type GetSuiteUpdateStatusArgs = {
@@ -50,9 +44,6 @@ const getSuiteUpdateStatus = ({ desktopUpdate }: GetSuiteUpdateStatusArgs): Upda
 };
 
 export const useUpdateStatus = (): UpdateStatusData => {
-    const [closedNotificationDevice, setClosedNotificationDevice] = useState(false);
-    const [closedNotificationSuite, setClosedNotificationSuite] = useState(false);
-
     const { device } = useDevice();
     const { desktopUpdate } = useSelector(state => state);
 
@@ -70,16 +61,9 @@ export const useUpdateStatus = (): UpdateStatusData => {
     const updateStatusDevice =
         isFirmwareOutdated && !isSuiteUpdateInProgress ? 'update-available' : 'up-to-date';
 
-    const showBannerNotification =
-        (updateStatusSuite !== 'up-to-date' && !closedNotificationSuite) ||
-        (updateStatusDevice !== 'up-to-date' && !closedNotificationDevice);
-
     const common: Omit<UpdateStatusData, 'updateStatus'> = {
         updateStatusDevice,
         updateStatusSuite,
-        showBannerNotification,
-        setClosedNotificationDevice,
-        setClosedNotificationSuite,
     };
 
     if (

Diff for: packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/Sidebar.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import { DeviceSelector } from '../DeviceSelector/DeviceSelector';
 import { Navigation } from './Navigation';
@@ -31,15 +31,11 @@ const Content = styled.div`
 `;
 
 export const Sidebar = () => {
-    const { elevation } = useElevation();
+    const [closedNotificationDevice, setClosedNotificationDevice] = useState(false);
+    const [closedNotificationSuite, setClosedNotificationSuite] = useState(false);
 
-    const {
-        updateStatusDevice,
-        updateStatusSuite,
-        showBannerNotification,
-        setClosedNotificationDevice,
-        setClosedNotificationSuite,
-    } = useUpdateStatus();
+    const { elevation } = useElevation();
+    const { updateStatusDevice, updateStatusSuite } = useUpdateStatus();
 
     const sidebarWidth = useSelector(state => state.suite.settings.sidebarWidth);
     const { setSidebarWidth } = useActions({
@@ -55,6 +51,10 @@ export const Sidebar = () => {
         }
     };
 
+    const showUpdateBannerNotification =
+        (updateStatusSuite !== 'up-to-date' && !closedNotificationSuite) ||
+        (updateStatusDevice !== 'up-to-date' && !closedNotificationDevice);
+
     return (
         <Wrapper>
             <ResizableBox
@@ -74,15 +74,17 @@ export const Sidebar = () => {
                                 <Navigation />
                                 <AccountsMenu />
 
-                                {showBannerNotification && (
+                                {showUpdateBannerNotification && (
                                     <UpdateNotificationBanner
                                         updateStatusDevice={updateStatusDevice}
                                         updateStatusSuite={updateStatusSuite}
                                         onClose={onNotificationBannerClosed}
                                     />
                                 )}
 
-                                <QuickActions />
+                                <QuickActions
+                                    showUpdateBannerNotification={showUpdateBannerNotification}
+                                />
                             </Content>
                         </TrafficLightOffset>
                     </ElevationUp>