fix(app, components): Fix display suspending when idle time set to "n…

…ever" (#17180)

Closes RQA-3813

app/src/App/OnDeviceDisplayApp.tsx

@@ -9,7 +9,6 @@ import {
   COLORS,
   OVERFLOW_AUTO,
   POSITION_RELATIVE,
-  useIdle,
   useScrolling,
 } from '@opentrons/components'
 import { ApiHostProvider } from '@opentrons/react-api-client'
@@ -52,7 +51,7 @@ import {
   updateConfigValue,
 } from '/app/redux/config'
 import { updateBrightness } from '/app/redux/shell'
-import { SLEEP_NEVER_MS } from '/app/local-resources/config'
+import { useScreenIdle, SLEEP_NEVER_MS } from '/app/local-resources/dom-utils'
 import { useProtocolReceiptToast, useSoftwareUpdatePoll } from './hooks'
 import { ODDTopLevelRedirects } from './ODDTopLevelRedirects'
 import { ReactQueryDevtools } from '/app/App/tools'
@@ -166,7 +165,7 @@ export const OnDeviceDisplayApp = (): JSX.Element => {
     initialState: false,
   }
   const dispatch = useDispatch<Dispatch>()
-  const isIdle = useIdle(sleepTime, options)
+  const isIdle = useScreenIdle(sleepTime, options)
 
   useEffect(() => {
     if (isIdle) {

app/src/local-resources/dom-utils/constants.ts

@@ -0,0 +1,2 @@
+// See RQA-3813 and associated PR. We are stuck using this hardcoded number to mean "never" or migrate the on-filesystem value.
+export const SLEEP_NEVER_MS = 604800000

components/src/hooks/__tests__/useIdle.test.ts → app/src/local-resources/dom-utils/hooks/__tests__/useScreenIdle.test.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { renderHook } from '@testing-library/react'
-import { useIdle } from '../useIdle'
+import { useScreenIdle } from '../useScreenIdle'
+import { SLEEP_NEVER_MS } from '/app/local-resources/dom-utils'
 
 const MOCK_EVENTS: Array<keyof DocumentEventMap> = [
   'mousedown',
@@ -20,19 +21,19 @@ describe('useIdle', () => {
 
   it('should return the default initialState', () => {
     const mockTime = 1000
-    const { result } = renderHook(() => useIdle(mockTime))
+    const { result } = renderHook(() => useScreenIdle(mockTime))
     expect(result.current).toBe(true)
   })
 
   it('should return the given initialState', () => {
     const mockTime = 1000
-    const { result } = renderHook(() => useIdle(mockTime, MOCK_OPTIONS))
+    const { result } = renderHook(() => useScreenIdle(mockTime, MOCK_OPTIONS))
     expect(result.current).toBe(false)
   })
 
   it('should return true after 1000ms', () => {
     const mockTime = 1000
-    const { result } = renderHook(() => useIdle(mockTime, MOCK_OPTIONS))
+    const { result } = renderHook(() => useScreenIdle(mockTime, MOCK_OPTIONS))
     expect(result.current).toBe(false)
     setTimeout(() => {
       expect(result.current).toBe(true)
@@ -41,7 +42,7 @@ describe('useIdle', () => {
 
   it('should return true after 180,000ms - 3min', () => {
     const mockTime = 60 * 1000 * 3
-    const { result } = renderHook(() => useIdle(mockTime, MOCK_OPTIONS))
+    const { result } = renderHook(() => useScreenIdle(mockTime, MOCK_OPTIONS))
     expect(result.current).toBe(false)
     setTimeout(() => {
       expect(result.current).toBe(true)
@@ -50,7 +51,7 @@ describe('useIdle', () => {
 
   it('should return true after 180,0000ms - 30min', () => {
     const mockTime = 60 * 1000 * 30
-    const { result } = renderHook(() => useIdle(mockTime, MOCK_OPTIONS))
+    const { result } = renderHook(() => useScreenIdle(mockTime, MOCK_OPTIONS))
     expect(result.current).toBe(false)
     setTimeout(() => {
       expect(result.current).toBe(true)
@@ -59,10 +60,19 @@ describe('useIdle', () => {
 
   it('should return true after 3,600,000ms - 1 hour', () => {
     const mockTime = 60 * 1000 * 60
-    const { result } = renderHook(() => useIdle(mockTime, MOCK_OPTIONS))
+    const { result } = renderHook(() => useScreenIdle(mockTime, MOCK_OPTIONS))
     expect(result.current).toBe(false)
     setTimeout(() => {
       expect(result.current).toBe(true)
     }, 3600001)
   })
+
+  it(`should always return false if the idle time is exactly ${SLEEP_NEVER_MS}`, () => {
+    const mockTime = SLEEP_NEVER_MS
+    const { result } = renderHook(() => useScreenIdle(mockTime, MOCK_OPTIONS))
+    expect(result.current).toBe(false)
+    setTimeout(() => {
+      expect(result.current).toBe(false)
+    }, 604800001)
+  })
 })

app/src/local-resources/dom-utils/hooks/index.ts

@@ -1 +1,2 @@
 export * from './useScrollPosition'
+export * from './useScreenIdle'

components/src/hooks/useIdle.ts → app/src/local-resources/dom-utils/hooks/useScreenIdle.ts

@@ -1,4 +1,5 @@
 import { useState, useEffect, useRef } from 'react'
+import { SLEEP_NEVER_MS } from '/app/local-resources/dom-utils'
 
 const USER_EVENTS: Array<keyof DocumentEventMap> = [
   'click',
@@ -29,7 +30,7 @@ const DEFAULT_OPTIONS = {
  * @param {object} options (events that the app need to check, initialState: initial state true => idle)
  * @returns {boolean}
  */
-export function useIdle(
+export function useScreenIdle(
   idleTime: number,
   options?: Partial<{
     events: Array<keyof DocumentEventMap>
@@ -48,9 +49,12 @@ export function useIdle(
         window.clearTimeout(idleTimer.current)
       }
 
-      idleTimer.current = window.setTimeout(() => {
-        setIdle(true)
-      }, idleTime)
+      // See RQA-3813 and associated PR.
+      if (idleTime !== SLEEP_NEVER_MS) {
+        idleTimer.current = window.setTimeout(() => {
+          setIdle(true)
+        }, idleTime)
+      }
     }
 
     events.forEach(event => {

app/src/local-resources/dom-utils/index.ts

@@ -1 +1,2 @@
 export * from './hooks'
+export * from './constants'

app/src/organisms/ODD/RobotSettingsDashboard/TouchScreenSleep.tsx

@@ -14,7 +14,7 @@ import {
   getOnDeviceDisplaySettings,
   updateConfigValue,
 } from '/app/redux/config'
-import { SLEEP_NEVER_MS } from '/app/local-resources/config'
+import { SLEEP_NEVER_MS } from '/app/local-resources/dom-utils'
 
 import type { ChangeEvent } from 'react'
 import type { Dispatch } from '/app/redux/types'

app/src/redux/config/selectors.ts

@@ -1,5 +1,5 @@
 import { createSelector } from 'reselect'
-import { SLEEP_NEVER_MS } from '/app/local-resources/config'
+import { SLEEP_NEVER_MS } from '/app/local-resources/dom-utils'
 import type { State } from '../types'
 import type {
   Config,

components/src/hooks/index.ts

@@ -2,7 +2,6 @@
 
 export * from './useConditionalConfirm'
 export * from './useDrag'
-export * from './useIdle'
 export * from './useInterval'
 export * from './useLongPress'
 export * from './useMountEffect'