Skip to content

Commit

Permalink
[Infra] Fix react query closing x in a non development env (elastic#1…
Browse files Browse the repository at this point in the history
…91276)

Closes [elastic#190220](elastic#190220)

## Summary

This PR removes the `x` icon used to close the react query dev tools
which appeared in a non-development environment by restricting it to
appear only in development mode.

| before | after |
|-------|-------|
| <img width="1907" alt="image"
src="https://github.com/user-attachments/assets/28e68139-8f8b-4f13-aea3-76f9971b1ac0">
| <img width="1902" alt="image"
src="https://github.com/user-attachments/assets/7649f310-c531-4a01-aae4-c423c811cc48">
|

In a development environment, the icon stays and works as before:

<img width="1890" alt="image"
src="https://github.com/user-attachments/assets/a7cd7479-f1cd-4504-812d-b3ade903dfb7">

(cherry picked from commit 746662e)
  • Loading branch information
jennypavlova committed Aug 26, 2024
1 parent 0ca8fb9 commit ef27b1c
Showing 1 changed file with 6 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
*/

import React, { useState } from 'react';
import { i18n } from '@kbn/i18n';
import { QueryClient, QueryClientConfig, QueryClientProvider } from '@tanstack/react-query';
import merge from 'lodash/merge';
import { EuiButtonIcon } from '@elastic/eui';
Expand Down Expand Up @@ -36,15 +37,18 @@ export function ReactQueryProvider({ children, config = {} }: ProviderProps) {
function HideableReactQueryDevTools() {
const [isHidden, setIsHidden] = useState(false);

return !isHidden ? (
return !isHidden && process.env.NODE_ENV === 'development' ? (
<div>
<EuiButtonIcon
data-test-subj="infraHideableReactQueryDevToolsButton"
iconType="cross"
color="primary"
style={{ zIndex: 99999, position: 'fixed', bottom: '40px', left: '40px' }}
onClick={() => setIsHidden(!isHidden)}
aria-label="Disable React Query Dev Tools"
aria-label={i18n.translate(
'xpack.infra.hideableReactQueryDevTools.euiButtonIcon.disableReactQueryDevLabel',
{ defaultMessage: 'Disable React Query Dev Tools' }
)}
/>
<ReactQueryDevtools initialIsOpen={false} />
</div>
Expand Down

0 comments on commit ef27b1c

Please sign in to comment.