From ef27b1c1f5171be2938db42ba63d98544dbc9c25 Mon Sep 17 00:00:00 2001
From: jennypavlova <dzheni.pavlova@elastic.co>
Date: Mon, 26 Aug 2024 16:36:30 +0200
Subject: [PATCH] [Infra] Fix react query closing x in a non development env
 (#191276)

Closes [#190220](https://github.com/elastic/kibana/issues/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 746662e52d5b983d5279bc51d11a0387ae68fcee)
---
 .../infra/public/containers/react_query_provider.tsx      | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/observability_solution/infra/public/containers/react_query_provider.tsx b/x-pack/plugins/observability_solution/infra/public/containers/react_query_provider.tsx
index ee49e9cd081e0..cc47833ae3217 100644
--- a/x-pack/plugins/observability_solution/infra/public/containers/react_query_provider.tsx
+++ b/x-pack/plugins/observability_solution/infra/public/containers/react_query_provider.tsx
@@ -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';
@@ -36,7 +37,7 @@ 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"
@@ -44,7 +45,10 @@ function HideableReactQueryDevTools() {
         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>