fix(devtools): do not show disabled label for inactive queries and make statusColor match statusLabel (TanStack#2687)

Author: TkDodo

src/devtools/devtools.tsx

@@ -595,72 +595,78 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
                 flex: '1',
               }}
             >
-              {queries.map((query, i) => (
-                <div
-                  key={query.queryHash || i}
-                  role="button"
-                  aria-label={`Open query details for ${query.queryHash}`}
-                  onClick={() =>
-                    setActiveQueryHash(
-                      activeQueryHash === query.queryHash ? '' : query.queryHash
-                    )
-                  }
-                  style={{
-                    display: 'flex',
-                    borderBottom: `solid 1px ${theme.grayAlt}`,
-                    cursor: 'pointer',
-                    background:
-                      query === activeQuery
-                        ? 'rgba(255,255,255,.1)'
-                        : undefined,
-                  }}
-                >
+              {queries.map((query, i) => {
+                const isDisabled =
+                  query.getObserversCount() > 0 && !query.isActive()
+                return (
                   <div
+                    key={query.queryHash || i}
+                    role="button"
+                    aria-label={`Open query details for ${query.queryHash}`}
+                    onClick={() =>
+                      setActiveQueryHash(
+                        activeQueryHash === query.queryHash
+                          ? ''
+                          : query.queryHash
+                      )
+                    }
                     style={{
-                      flex: '0 0 auto',
-                      width: '2rem',
-                      height: '2rem',
-                      background: getQueryStatusColor(query, theme),
                       display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      fontWeight: 'bold',
-                      textShadow:
-                        getQueryStatusLabel(query) === 'stale'
-                          ? '0'
-                          : '0 0 10px black',
-                      color:
-                        getQueryStatusLabel(query) === 'stale'
-                          ? 'black'
-                          : 'white',
+                      borderBottom: `solid 1px ${theme.grayAlt}`,
+                      cursor: 'pointer',
+                      background:
+                        query === activeQuery
+                          ? 'rgba(255,255,255,.1)'
+                          : undefined,
                     }}
                   >
-                    {query.getObserversCount()}
-                  </div>
-                  {query.isActive() ? null : (
                     <div
                       style={{
                         flex: '0 0 auto',
+                        width: '2rem',
                         height: '2rem',
-                        background: theme.gray,
+                        background: getQueryStatusColor(query, theme),
                         display: 'flex',
                         alignItems: 'center',
+                        justifyContent: 'center',
                         fontWeight: 'bold',
-                        padding: '0 0.5rem',
+                        textShadow:
+                          getQueryStatusLabel(query) === 'stale'
+                            ? '0'
+                            : '0 0 10px black',
+                        color:
+                          getQueryStatusLabel(query) === 'stale'
+                            ? 'black'
+                            : 'white',
                       }}
                     >
-                      disabled
+                      {query.getObserversCount()}
                     </div>
-                  )}
-                  <Code
-                    style={{
-                      padding: '.5rem',
-                    }}
-                  >
-                    {`${query.queryHash}`}
-                  </Code>
-                </div>
-              ))}
+                    {isDisabled ? (
+                      <div
+                        style={{
+                          flex: '0 0 auto',
+                          height: '2rem',
+                          background: theme.gray,
+                          display: 'flex',
+                          alignItems: 'center',
+                          fontWeight: 'bold',
+                          padding: '0 0.5rem',
+                        }}
+                      >
+                        disabled
+                      </div>
+                    ) : null}
+                    <Code
+                      style={{
+                        padding: '.5rem',
+                      }}
+                    >
+                      {`${query.queryHash}`}
+                    </Code>
+                  </div>
+                )
+              })}
             </div>
           </div>
           {activeQuery ? (

src/devtools/tests/devtools.test.tsx

@@ -260,6 +260,43 @@ describe('ReactQueryDevtools', () => {
     expect(screen.queryByText(/disabled/i)).not.toBeInTheDocument()
   })
 
+  it('should not show a disabled label for inactive queries', async () => {
+    const { queryClient } = createQueryClient()
+
+    function Page() {
+      const { data } = useQuery('key', () => Promise.resolve('test'), {
+        enabled: false,
+      })
+
+      return (
+        <div>
+          <h1>{data}</h1>
+        </div>
+      )
+    }
+
+    function App() {
+      const [visible, setVisible] = React.useState(true)
+
+      return (
+        <div>
+          {visible ? <Page /> : null}
+          <button onClick={() => setVisible(false)}>Hide Query</button>
+        </div>
+      )
+    }
+
+    renderWithClient(queryClient, <App />, { initialIsOpen: true })
+
+    await screen.findByText(/disabled/i)
+
+    await act(async () => {
+      fireEvent.click(await screen.findByText(/hide query/i))
+    })
+
+    expect(screen.queryByText(/disabled/i)).not.toBeInTheDocument()
+  })
+
   it('should sort the queries according to the sorting filter', async () => {
     const { queryClient, queryCache } = createQueryClient()
 

src/devtools/utils.ts

@@ -10,10 +10,10 @@ export const isServer = typeof window === 'undefined'
 export function getQueryStatusColor(query, theme) {
   return query.state.isFetching
     ? theme.active
-    : query.isStale()
-    ? theme.warning
     : !query.getObserversCount()
     ? theme.gray
+    : query.isStale()
+    ? theme.warning
     : theme.success
 }