mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 17:28:26 -04:00
[EuiProvider] Fix Obs-Ux-Logs code (#183877)
## Summary
Fixes needed for getting CI to pass when EUI throws an error if
attempting to render a component without the EuiProvider in the render
tree.
## Detailed description
In https://github.com/elastic/kibana/pull/180819, I will deliver a
change that will cause EUI components to throw an error if the
EuiProvider context is missing. This PR comes in as part of the final
work to get all functional tests passing in an environment where EUI
will throw the error. The tied to the ["Fix 'dark mode' inconsistencies
in Kibana" Epic](https://github.com/elastic/kibana-team/issues/805) has
so far been in preparation for this.
**Reviewers: Please interact with critical paths through the UI
components touched in this PR, ESPECIALLY in terms of testing dark mode
and i18n.**
<img width="1107" alt="image"
src="c0d2ce08
-ac35-45a7-8192-0b2256fceb0e">
### Checklist
Delete any items that are not applicable to this PR.
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
This commit is contained in:
parent
c1846c34b8
commit
e221be3cde
5 changed files with 78 additions and 48 deletions
|
@ -27,7 +27,8 @@ import { useKibanaContextForPlugin } from '../../utils/use_kibana';
|
|||
|
||||
export const ObservabilityLogsExplorerMainRoute = () => {
|
||||
const { services } = useKibanaContextForPlugin();
|
||||
const { logsExplorer, serverless, chrome, notifications, appParams } = services;
|
||||
const { logsExplorer, serverless, chrome, notifications, appParams, analytics, i18n, theme } =
|
||||
services;
|
||||
const { history } = appParams;
|
||||
|
||||
useBreadcrumbs(noBreadcrumbs, chrome, serverless);
|
||||
|
@ -52,7 +53,13 @@ export const ObservabilityLogsExplorerMainRoute = () => {
|
|||
analytics={services.analytics}
|
||||
>
|
||||
<LogsExplorerTopNavMenu />
|
||||
<LazyOriginInterpreter history={history} toasts={notifications.toasts} />
|
||||
<LazyOriginInterpreter
|
||||
history={history}
|
||||
toasts={notifications.toasts}
|
||||
analytics={analytics}
|
||||
i18n={i18n}
|
||||
theme={theme}
|
||||
/>
|
||||
<ConnectedContent />
|
||||
</ObservabilityLogsExplorerPageStateProvider>
|
||||
);
|
||||
|
|
|
@ -15,12 +15,14 @@ import {
|
|||
export const OriginInterpreter: React.FC<OriginInterpreterStateMachineDependencies> = ({
|
||||
history,
|
||||
toasts,
|
||||
...startServices
|
||||
}) => {
|
||||
useInterpret(
|
||||
() =>
|
||||
createOriginInterpreterStateMachine({
|
||||
history,
|
||||
toasts,
|
||||
...startServices,
|
||||
}),
|
||||
{ devTools: isDevMode() }
|
||||
);
|
||||
|
|
|
@ -5,49 +5,53 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { IToasts } from '@kbn/core-notifications-browser';
|
||||
import { mountReactNode } from '@kbn/core-mount-utils-browser-internal';
|
||||
import React from 'react';
|
||||
|
||||
import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
|
||||
import { toMountPoint } from '@kbn/react-kibana-mount';
|
||||
import type { IToasts } from '@kbn/core-notifications-browser';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { LOGS_ONBOARDING_FEEDBACK_LINK } from '@kbn/observability-shared-plugin/common';
|
||||
import React from 'react';
|
||||
import { ObservabilityLogsExplorerStartServices } from '../../../types';
|
||||
import { FEEDBACK_TOAST_LIFETIME_MS } from './constants';
|
||||
|
||||
export const createRequestFeedbackNotifier = (toasts: IToasts) => () => {
|
||||
toasts.addInfo(
|
||||
{
|
||||
title: i18n.translate('xpack.observabilityLogsExplorer.feedbackToast.title', {
|
||||
defaultMessage: 'Tell us what you think!',
|
||||
}),
|
||||
text: mountReactNode(
|
||||
<>
|
||||
<p>
|
||||
{i18n.translate('xpack.observabilityLogsExplorer.feedbackToast.text', {
|
||||
defaultMessage: 'Share with us your onboarding experience and help us improve it.',
|
||||
})}
|
||||
</p>
|
||||
export const createRequestFeedbackNotifier =
|
||||
(toasts: IToasts, startServices: ObservabilityLogsExplorerStartServices) => () => {
|
||||
toasts.addInfo(
|
||||
{
|
||||
title: i18n.translate('xpack.observabilityLogsExplorer.feedbackToast.title', {
|
||||
defaultMessage: 'Tell us what you think!',
|
||||
}),
|
||||
text: toMountPoint(
|
||||
<>
|
||||
<p>
|
||||
{i18n.translate('xpack.observabilityLogsExplorer.feedbackToast.text', {
|
||||
defaultMessage: 'Share with us your onboarding experience and help us improve it.',
|
||||
})}
|
||||
</p>
|
||||
|
||||
<EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButton
|
||||
data-test-subj="observabilityLogsExplorerFeedbackToastButton"
|
||||
href={LOGS_ONBOARDING_FEEDBACK_LINK}
|
||||
size="s"
|
||||
target="_blank"
|
||||
color="primary"
|
||||
>
|
||||
{i18n.translate('xpack.observabilityLogsExplorer.feedbackToast.buttonText', {
|
||||
defaultMessage: 'Take a quick survey',
|
||||
})}
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</>
|
||||
),
|
||||
iconType: 'editorComment',
|
||||
},
|
||||
{
|
||||
toastLifeTimeMs: FEEDBACK_TOAST_LIFETIME_MS,
|
||||
}
|
||||
);
|
||||
};
|
||||
<EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButton
|
||||
data-test-subj="observabilityLogsExplorerFeedbackToastButton"
|
||||
href={LOGS_ONBOARDING_FEEDBACK_LINK}
|
||||
size="s"
|
||||
target="_blank"
|
||||
color="primary"
|
||||
>
|
||||
{i18n.translate('xpack.observabilityLogsExplorer.feedbackToast.buttonText', {
|
||||
defaultMessage: 'Take a quick survey',
|
||||
})}
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</>,
|
||||
startServices
|
||||
),
|
||||
iconType: 'editorComment',
|
||||
},
|
||||
{
|
||||
toastLifeTimeMs: FEEDBACK_TOAST_LIFETIME_MS,
|
||||
}
|
||||
);
|
||||
};
|
||||
|
|
|
@ -5,14 +5,17 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { IToasts } from '@kbn/core-notifications-browser';
|
||||
import type { IToasts } from '@kbn/core-notifications-browser';
|
||||
import { createMachine, InterpreterFrom } from 'xstate';
|
||||
import { ObservabilityLogsExplorerHistory } from '../../../types';
|
||||
import type {
|
||||
ObservabilityLogsExplorerHistory,
|
||||
ObservabilityLogsExplorerStartServices,
|
||||
} from '../../../types';
|
||||
import { FEEDBACK_DELAY_MS } from './constants';
|
||||
import { DEFAULT_CONTEXT } from './defaults';
|
||||
import { initializeFromLocationState } from './location_state_service';
|
||||
import { createRequestFeedbackNotifier } from './notifications';
|
||||
import {
|
||||
import type {
|
||||
OriginInterpreterContext,
|
||||
OriginInterpreterEvent,
|
||||
OriginInterpreterTypeState,
|
||||
|
@ -65,7 +68,8 @@ export const createPureOriginInterpreterStateMachine = (initialContext: OriginIn
|
|||
}
|
||||
);
|
||||
|
||||
export interface OriginInterpreterStateMachineDependencies {
|
||||
export interface OriginInterpreterStateMachineDependencies
|
||||
extends ObservabilityLogsExplorerStartServices {
|
||||
initialContext?: OriginInterpreterContext;
|
||||
history: ObservabilityLogsExplorerHistory;
|
||||
toasts: IToasts;
|
||||
|
@ -75,10 +79,11 @@ export const createOriginInterpreterStateMachine = ({
|
|||
initialContext = DEFAULT_CONTEXT,
|
||||
history,
|
||||
toasts,
|
||||
...startServices
|
||||
}: OriginInterpreterStateMachineDependencies) =>
|
||||
createPureOriginInterpreterStateMachine(initialContext).withConfig({
|
||||
actions: {
|
||||
requestFeedback: createRequestFeedbackNotifier(toasts),
|
||||
requestFeedback: createRequestFeedbackNotifier(toasts, startServices),
|
||||
},
|
||||
services: {
|
||||
initializeFromLocationState: initializeFromLocationState({ history }),
|
||||
|
|
|
@ -11,7 +11,13 @@ import { DiscoverSetup, DiscoverStart } from '@kbn/discover-plugin/public';
|
|||
import { ObservabilitySharedPluginStart } from '@kbn/observability-shared-plugin/public';
|
||||
import { ServerlessPluginStart } from '@kbn/serverless/public';
|
||||
import { SharePluginSetup, SharePluginStart } from '@kbn/share-plugin/public';
|
||||
import { AppMountParameters, ScopedHistory } from '@kbn/core/public';
|
||||
import type {
|
||||
AppMountParameters,
|
||||
ScopedHistory,
|
||||
AnalyticsServiceStart,
|
||||
I18nStart,
|
||||
ThemeServiceStart,
|
||||
} from '@kbn/core/public';
|
||||
import { LogsSharedClientStartExports } from '@kbn/logs-shared-plugin/public';
|
||||
import { ObservabilityAIAssistantPublicStart } from '@kbn/observability-ai-assistant-plugin/public';
|
||||
import { TriggersAndActionsUIPublicPluginStart } from '@kbn/triggers-actions-ui-plugin/public';
|
||||
|
@ -59,3 +65,9 @@ export type ObservabilityLogsExplorerHistory =
|
|||
ScopedHistory<ObservabilityLogsExplorerLocationState>;
|
||||
export type ObservabilityLogsExplorerAppMountParameters =
|
||||
AppMountParameters<ObservabilityLogsExplorerLocationState>;
|
||||
|
||||
export interface ObservabilityLogsExplorerStartServices {
|
||||
analytics: AnalyticsServiceStart;
|
||||
i18n: I18nStart;
|
||||
theme: ThemeServiceStart;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue