github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

Add Hideable React Query Dev Tools (#154817)

Browse source
This commit is contained in:
Coen Warmer 2023-04-12 15:45:45 +02:00 • committed by GitHub
parent 665c9dd690
commit 9ac09b2cf1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

27
x-pack/plugins/observability/public/application/hideable_react_query_dev_tools.tsx Normal file
View file

@ -0,0 +1,27 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React, { useState } from 'react';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { EuiButtonIcon } from '@elastic/eui';
export function HideableReactQueryDevTools() {
const [isHidden, setIsHidden] = useState(false);
return !isHidden ? (
<div>
<EuiButtonIcon
data-test-subj="o11yHideableReactQueryDevToolsButton"
iconType="cross"
color="primary"
style={{ zIndex: 99999, position: 'fixed', bottom: '40px', left: '40px' }}
onClick={() => setIsHidden(!isHidden)}
/>
<ReactQueryDevtools />
</div>
) : null;
}

4
x-pack/plugins/observability/public/application/index.tsx
View file

@ -10,7 +10,6 @@ import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Switch } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { i18n } from '@kbn/i18n';
import { Route } from '@kbn/shared-ux-router';
import { AppMountParameters, APP_WRAPPER_CLASS, CoreStart } from '@kbn/core/public';
@ -28,6 +27,7 @@ import { PluginContext } from '../context/plugin_context';
import { ConfigSchema, ObservabilityPublicPluginsStart } from '../plugin';
import { routes } from '../routes';
import { ObservabilityRuleTypeRegistry } from '../rules/create_observability_rule_type_registry';
import { HideableReactQueryDevTools } from './hideable_react_query_dev_tools';
function App() {
return (
@ -114,7 +114,7 @@ export const renderApp = ({
<HasDataContextProvider>
<App />
</HasDataContextProvider>
<ReactQueryDevtools />
<HideableReactQueryDevTools />
</QueryClientProvider>
</RedirectAppLinks>
</i18nCore.Context>