Fix request inspector text display (#110647)
In #110116 I added the `RedirectAppLinks` component, which makes it so links outside the app automatically do not cause a page reload. This component inserts a div into the DOM. Apparently this also caused the text areas in the request and response tabs of the request inspector to be collapsed to zero height. Remove `RedirectAppLinks` and handle the navigation with an `onClick` callback instead.
This commit is contained in:
Nathan L Smith
GitHub
parent
0ae7455377
commit
6509fb31e4
|
|
@ -34,45 +34,7 @@ exports[`InspectorPanel should render as expected 1`] = `
|
|||
"closed": false,
|
||||
"hasError": false,
|
||||
"isStopped": false,
|
||||
"observers": Array [
|
||||
Subscriber {
|
||||
"_parentOrParents": null,
|
||||
"_subscriptions": Array [
|
||||
SubjectSubscription {
|
||||
"_parentOrParents": [Circular],
|
||||
"_subscriptions": null,
|
||||
"closed": false,
|
||||
"subject": [Circular],
|
||||
"subscriber": [Circular],
|
||||
},
|
||||
],
|
||||
"closed": false,
|
||||
"destination": SafeSubscriber {
|
||||
"_complete": undefined,
|
||||
"_context": [Circular],
|
||||
"_error": undefined,
|
||||
"_next": [Function],
|
||||
"_parentOrParents": null,
|
||||
"_parentSubscriber": [Circular],
|
||||
"_subscriptions": null,
|
||||
"closed": false,
|
||||
"destination": Object {
|
||||
"closed": true,
|
||||
"complete": [Function],
|
||||
"error": [Function],
|
||||
"next": [Function],
|
||||
},
|
||||
"isStopped": false,
|
||||
"syncErrorThrowable": false,
|
||||
"syncErrorThrown": false,
|
||||
"syncErrorValue": null,
|
||||
},
|
||||
"isStopped": false,
|
||||
"syncErrorThrowable": true,
|
||||
"syncErrorThrown": false,
|
||||
"syncErrorValue": null,
|
||||
},
|
||||
],
|
||||
"observers": Array [],
|
||||
"thrownError": null,
|
||||
},
|
||||
},
|
||||
|
|
@ -235,45 +197,7 @@ exports[`InspectorPanel should render as expected 1`] = `
|
|||
"closed": false,
|
||||
"hasError": false,
|
||||
"isStopped": false,
|
||||
"observers": Array [
|
||||
Subscriber {
|
||||
"_parentOrParents": null,
|
||||
"_subscriptions": Array [
|
||||
SubjectSubscription {
|
||||
"_parentOrParents": [Circular],
|
||||
"_subscriptions": null,
|
||||
"closed": false,
|
||||
"subject": [Circular],
|
||||
"subscriber": [Circular],
|
||||
},
|
||||
],
|
||||
"closed": false,
|
||||
"destination": SafeSubscriber {
|
||||
"_complete": undefined,
|
||||
"_context": [Circular],
|
||||
"_error": undefined,
|
||||
"_next": [Function],
|
||||
"_parentOrParents": null,
|
||||
"_parentSubscriber": [Circular],
|
||||
"_subscriptions": null,
|
||||
"closed": false,
|
||||
"destination": Object {
|
||||
"closed": true,
|
||||
"complete": [Function],
|
||||
"error": [Function],
|
||||
"next": [Function],
|
||||
},
|
||||
"isStopped": false,
|
||||
"syncErrorThrowable": false,
|
||||
"syncErrorThrown": false,
|
||||
"syncErrorValue": null,
|
||||
},
|
||||
"isStopped": false,
|
||||
"syncErrorThrowable": true,
|
||||
"syncErrorThrown": false,
|
||||
"syncErrorValue": null,
|
||||
},
|
||||
],
|
||||
"observers": Array [],
|
||||
"thrownError": null,
|
||||
},
|
||||
},
|
||||
|
|
@ -474,102 +398,25 @@ exports[`InspectorPanel should render as expected 1`] = `
|
|||
<div
|
||||
className="euiFlyoutBody__overflowContent"
|
||||
>
|
||||
<RedirectAppLinks
|
||||
application={
|
||||
Object {
|
||||
"applications$": BehaviorSubject {
|
||||
"_isScalar": false,
|
||||
"_value": Map {},
|
||||
"closed": false,
|
||||
"hasError": false,
|
||||
"isStopped": false,
|
||||
"observers": Array [],
|
||||
"thrownError": null,
|
||||
},
|
||||
"capabilities": Object {
|
||||
"catalogue": Object {},
|
||||
"management": Object {},
|
||||
"navLinks": Object {},
|
||||
},
|
||||
"currentAppId$": Observable {
|
||||
"_isScalar": false,
|
||||
"source": Subject {
|
||||
"_isScalar": false,
|
||||
"closed": false,
|
||||
"hasError": false,
|
||||
"isStopped": false,
|
||||
"observers": Array [
|
||||
Subscriber {
|
||||
"_parentOrParents": null,
|
||||
"_subscriptions": Array [
|
||||
SubjectSubscription {
|
||||
"_parentOrParents": [Circular],
|
||||
"_subscriptions": null,
|
||||
"closed": false,
|
||||
"subject": [Circular],
|
||||
"subscriber": [Circular],
|
||||
},
|
||||
],
|
||||
"closed": false,
|
||||
"destination": SafeSubscriber {
|
||||
"_complete": undefined,
|
||||
"_context": [Circular],
|
||||
"_error": undefined,
|
||||
"_next": [Function],
|
||||
"_parentOrParents": null,
|
||||
"_parentSubscriber": [Circular],
|
||||
"_subscriptions": null,
|
||||
"closed": false,
|
||||
"destination": Object {
|
||||
"closed": true,
|
||||
"complete": [Function],
|
||||
"error": [Function],
|
||||
"next": [Function],
|
||||
},
|
||||
"isStopped": false,
|
||||
"syncErrorThrowable": false,
|
||||
"syncErrorThrown": false,
|
||||
"syncErrorValue": null,
|
||||
},
|
||||
"isStopped": false,
|
||||
"syncErrorThrowable": true,
|
||||
"syncErrorThrown": false,
|
||||
"syncErrorValue": null,
|
||||
},
|
||||
],
|
||||
"thrownError": null,
|
||||
},
|
||||
},
|
||||
"getUrlForApp": [MockFunction],
|
||||
"navigateToApp": [MockFunction],
|
||||
"navigateToUrl": [MockFunction],
|
||||
}
|
||||
}
|
||||
<Suspense
|
||||
fallback={<EuiLoadingSpinner />}
|
||||
>
|
||||
<div
|
||||
className="kbnRedirectCrossAppLinks"
|
||||
<component
|
||||
adapters={
|
||||
Object {
|
||||
"bardapter": Object {},
|
||||
"foodapter": Object {
|
||||
"foo": [Function],
|
||||
},
|
||||
}
|
||||
}
|
||||
title="Inspector"
|
||||
>
|
||||
<Suspense
|
||||
fallback={<EuiLoadingSpinner />}
|
||||
>
|
||||
<component
|
||||
adapters={
|
||||
Object {
|
||||
"bardapter": Object {},
|
||||
"foodapter": Object {
|
||||
"foo": [Function],
|
||||
},
|
||||
}
|
||||
}
|
||||
title="Inspector"
|
||||
>
|
||||
<h1>
|
||||
View 1
|
||||
</h1>
|
||||
</component>
|
||||
</Suspense>
|
||||
</div>
|
||||
</RedirectAppLinks>
|
||||
<h1>
|
||||
View 1
|
||||
</h1>
|
||||
</component>
|
||||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ import { ApplicationStart, HttpStart, IUiSettingsClient } from 'kibana/public';
|
|||
import { InspectorViewDescription } from '../types';
|
||||
import { Adapters } from '../../common';
|
||||
import { InspectorViewChooser } from './inspector_view_chooser';
|
||||
import { KibanaContextProvider, RedirectAppLinks } from '../../../kibana_react/public';
|
||||
import { KibanaContextProvider } from '../../../kibana_react/public';
|
||||
import { SharePluginStart } from '../../../share/public';
|
||||
|
||||
function hasAdaptersChanged(oldAdapters: Adapters, newAdapters: Adapters) {
|
||||
|
|
@ -135,9 +135,7 @@ export class InspectorPanel extends Component<InspectorPanelProps, InspectorPane
|
|||
</EuiFlexGroup>
|
||||
</EuiFlyoutHeader>
|
||||
<EuiFlyoutBody className="insInspectorPanel__flyoutBody">
|
||||
<RedirectAppLinks application={dependencies.application}>
|
||||
{this.renderSelectedPanel()}
|
||||
</RedirectAppLinks>
|
||||
{this.renderSelectedPanel()}
|
||||
</EuiFlyoutBody>
|
||||
</KibanaContextProvider>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,11 +6,16 @@
|
|||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
// We want to allow both right-clicking to open in a new tab and clicking through
|
||||
// the "Open in Console" link. We could use `RedirectAppLinks` at the top level
|
||||
// but that inserts a div which messes up the layout of the inspector.
|
||||
/* eslint-disable @elastic/eui/href-or-on-click */
|
||||
|
||||
import { EuiButtonEmpty, EuiCopy, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { XJsonLang } from '@kbn/monaco';
|
||||
import { compressToEncodedURIComponent } from 'lz-string';
|
||||
import React from 'react';
|
||||
import React, { useCallback } from 'react';
|
||||
import { CodeEditor, useKibana } from '../../../../../../kibana_react/public';
|
||||
import { InspectorPluginStartDeps } from '../../../../plugin';
|
||||
|
||||
|
|
@ -23,8 +28,8 @@ const copyToClipboardLabel = i18n.translate('inspector.requests.copyToClipboardL
|
|||
defaultMessage: 'Copy to clipboard',
|
||||
});
|
||||
|
||||
const openInDevToolsLabel = i18n.translate('inspector.requests.openInDevToolsLabel', {
|
||||
defaultMessage: 'Open in Dev Tools',
|
||||
const openInConsoleLabel = i18n.translate('inspector.requests.openInConsoleLabel', {
|
||||
defaultMessage: 'Open in Console',
|
||||
});
|
||||
|
||||
/**
|
||||
|
|
@ -32,12 +37,18 @@ const openInDevToolsLabel = i18n.translate('inspector.requests.openInDevToolsLab
|
|||
*/
|
||||
export const RequestCodeViewer = ({ indexPattern, json }: RequestCodeViewerProps) => {
|
||||
const { services } = useKibana<InspectorPluginStartDeps>();
|
||||
|
||||
const navigateToUrl = services.application?.navigateToUrl;
|
||||
const canShowDevTools = services.application?.capabilities?.dev_tools.show;
|
||||
const devToolsDataUri = compressToEncodedURIComponent(`GET ${indexPattern}/_search\n${json}`);
|
||||
const devToolsHref = services.share.url.locators
|
||||
.get('CONSOLE_APP_LOCATOR')
|
||||
?.useUrl({ loadFrom: `data:text/plain,${devToolsDataUri}` });
|
||||
const shouldShowDevToolsLink = !!(indexPattern && canShowDevTools);
|
||||
const handleDevToolsLinkClick = useCallback(
|
||||
() => devToolsHref && navigateToUrl && navigateToUrl(devToolsHref),
|
||||
[devToolsHref, navigateToUrl]
|
||||
);
|
||||
|
||||
return (
|
||||
<EuiFlexGroup
|
||||
|
|
@ -69,9 +80,10 @@ export const RequestCodeViewer = ({ indexPattern, json }: RequestCodeViewerProps
|
|||
flush="right"
|
||||
iconType="wrench"
|
||||
href={devToolsHref}
|
||||
data-test-subj="inspectorRequestOpenInDevToolsButton"
|
||||
onClick={handleDevToolsLinkClick}
|
||||
data-test-subj="inspectorRequestOpenInConsoleButton"
|
||||
>
|
||||
{openInDevToolsLabel}
|
||||
{openInConsoleLabel}
|
||||
</EuiButtonEmpty>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue