[8.15] [Infra] Fix react query closing x in a non development env (#1…

…91276) (#191281)

# Backport

This will backport the following commits from `main` to `8.15`:
- [[Infra] Fix react query closing x in a non development env
(#191276)](#191276)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"jennypavlova","email":"dzheni.pavlova@elastic.co"},"sourceCommit":{"committedDate":"2024-08-26T14:36:30Z","message":"[Infra]
Fix react query closing x in a non development env (#191276)\n\nCloses
[#190220](https://github.com/elastic/kibana/issues/190220)\r\n\r\n##
Summary\r\n\r\nThis PR removes the `x` icon used to close the react
query dev tools\r\nwhich appeared in a non-development environment by
restricting it to\r\nappear only in development mode.\r\n\r\n| before |
after |\r\n|-------|-------|\r\n| <img width=\"1907\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/28e68139-8f8b-4f13-aea3-76f9971b1ac0\">\r\n|
<img width=\"1902\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/7649f310-c531-4a01-aae4-c423c811cc48\">\r\n|\r\n\r\nIn
a development environment, the icon stays and works as before:
\r\n\r\n<img width=\"1890\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/a7cd7479-f1cd-4504-812d-b3ade903dfb7\">","sha":"746662e52d5b983d5279bc51d11a0387ae68fcee","branchLabelMapping":{"^v8.16.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","ci:project-deploy-observability","Team:obs-ux-infra_services","v8.15.0","v8.16.0","v8.15.1","backport:version"],"title":"[Infra]
Fix react query closing x in a non development
env","number":191276,"url":"https://github.com/elastic/kibana/pull/191276","mergeCommit":{"message":"[Infra]
Fix react query closing x in a non development env (#191276)\n\nCloses
[#190220](https://github.com/elastic/kibana/issues/190220)\r\n\r\n##
Summary\r\n\r\nThis PR removes the `x` icon used to close the react
query dev tools\r\nwhich appeared in a non-development environment by
restricting it to\r\nappear only in development mode.\r\n\r\n| before |
after |\r\n|-------|-------|\r\n| <img width=\"1907\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/28e68139-8f8b-4f13-aea3-76f9971b1ac0\">\r\n|
<img width=\"1902\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/7649f310-c531-4a01-aae4-c423c811cc48\">\r\n|\r\n\r\nIn
a development environment, the icon stays and works as before:
\r\n\r\n<img width=\"1890\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/a7cd7479-f1cd-4504-812d-b3ade903dfb7\">","sha":"746662e52d5b983d5279bc51d11a0387ae68fcee"}},"sourceBranch":"main","suggestedTargetBranches":["8.15"],"targetPullRequestStates":[{"branch":"8.15","label":"v8.15.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/191276","number":191276,"mergeCommit":{"message":"[Infra]
Fix react query closing x in a non development env (#191276)\n\nCloses
[#190220](https://github.com/elastic/kibana/issues/190220)\r\n\r\n##
Summary\r\n\r\nThis PR removes the `x` icon used to close the react
query dev tools\r\nwhich appeared in a non-development environment by
restricting it to\r\nappear only in development mode.\r\n\r\n| before |
after |\r\n|-------|-------|\r\n| <img width=\"1907\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/28e68139-8f8b-4f13-aea3-76f9971b1ac0\">\r\n|
<img width=\"1902\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/7649f310-c531-4a01-aae4-c423c811cc48\">\r\n|\r\n\r\nIn
a development environment, the icon stays and works as before:
\r\n\r\n<img width=\"1890\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/a7cd7479-f1cd-4504-812d-b3ade903dfb7\">","sha":"746662e52d5b983d5279bc51d11a0387ae68fcee"}}]}]
BACKPORT-->

Co-authored-by: jennypavlova <dzheni.pavlova@elastic.co>

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,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>