Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ML] Fixes dark mode in flyouts and modals #164399

Merged
merged 18 commits into from
Aug 23, 2023
+249 −306
Merged

[ML] Fixes dark mode in flyouts and modals #164399

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
f17265d
[ML] Fixing dark mode in flyouts
jgowdyelastic Aug 22, 2023
064267b
[CI] Auto-commit changed files from 'node scripts/lint_ts_projects --…
kibanamachine Aug 22, 2023
6dd6cd9
fixing deprecated prop for DatePickerContextProvider
jgowdyelastic Aug 22, 2023
10d2422
non flyout changes
jgowdyelastic Aug 22, 2023
9b8e1e6
updating datepicker component
jgowdyelastic Aug 22, 2023
e57f2fe
updating test
jgowdyelastic Aug 22, 2023
4961e0b
[CI] Auto-commit changed files from 'node scripts/lint_ts_projects --…
kibanamachine Aug 22, 2023
63e83ee
Merge branch 'fixing-dark-mode-in-flyouts' of github.com:jgowdyelasti…
jgowdyelastic Aug 22, 2023
9ad81fc
Update x-pack/packages/ml/date_picker/src/hooks/use_date_picker_conte…
jgowdyelastic Aug 22, 2023
35d4b33
Merge branch 'main' into fixing-dark-mode-in-flyouts
jgowdyelastic Aug 22, 2023
e0f84ef
Merge branch 'fixing-dark-mode-in-flyouts' of github.com:jgowdyelasti…
jgowdyelastic Aug 22, 2023
e8c7c85
fixing date picker dependencies
jgowdyelastic Aug 22, 2023
4674f27
fixing types
jgowdyelastic Aug 22, 2023
56e64b3
type fixes
jgowdyelastic Aug 22, 2023
f503336
fixing transform types
jgowdyelastic Aug 22, 2023
bd0e624
fixing infra types
jgowdyelastic Aug 22, 2023
30603d7
Merge branch 'main' into fixing-dark-mode-in-flyouts
jgowdyelastic Aug 22, 2023
bf31d1e
Merge branch 'main' into fixing-dark-mode-in-flyouts
jgowdyelastic Aug 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 24 additions & 27 deletions x-pack/plugins/aiops/public/components/log_categorization/show_flyout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,8 @@ import { pick } from 'lodash';
import type { CoreStart } from '@kbn/core/public';
import { Storage } from '@kbn/kibana-utils-plugin/public';

import {
toMountPoint,
wrapWithTheme,
KibanaContextProvider,
} from '@kbn/kibana-react-plugin/public';
import { wrapWithTheme, KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
import { wrapWithTheme, KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wrapWithTheme is still needed as it needs to be passed to the DatePickerContextProvider component.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's no longer needed after this change 9b8e1e6

import { toMountPoint } from '@kbn/react-kibana-mount';
import type { DataViewField, DataView } from '@kbn/data-views-plugin/common';
import { UI_SETTINGS } from '@kbn/data-plugin/public';
import { DatePickerContextProvider } from '@kbn/ml-date-picker';
Expand All @@ -34,7 +31,7 @@ export async function showCategorizeFlyout(
coreStart: CoreStart,
plugins: AiopsPluginStartDeps
): Promise<void> {
const { http, theme, overlays, application, notifications, uiSettings } = coreStart;
const { http, theme, overlays, application, notifications, uiSettings, i18n } = coreStart;

return new Promise(async (resolve, reject) => {
try {
Expand All @@ -60,27 +57,27 @@ export async function showCategorizeFlyout(

const flyoutSession = overlays.openFlyout(
toMountPoint(
wrapWithTheme(
<KibanaContextProvider
services={{
...coreStart,
}}
>
<AiopsAppContext.Provider value={appDependencies}>
<DatePickerContextProvider {...datePickerDeps}>
<StorageContextProvider storage={localStorage} storageKeys={AIOPS_STORAGE_KEYS}>
<LogCategorizationFlyout
dataView={dataView}
savedSearch={null}
selectedField={field}
onClose={onFlyoutClose}
/>
</StorageContextProvider>
</DatePickerContextProvider>
</AiopsAppContext.Provider>
</KibanaContextProvider>,
theme.theme$
)
<KibanaContextProvider
services={{
...coreStart,
}}
>
<AiopsAppContext.Provider value={appDependencies}>
{/* @ts-expect-error toMountPoint in DatePickerDependencies uses deprecated version */}
<DatePickerContextProvider {...datePickerDeps}>
<StorageContextProvider storage={localStorage} storageKeys={AIOPS_STORAGE_KEYS}>
<LogCategorizationFlyout
dataView={dataView}
savedSearch={null}
selectedField={field}
onClose={onFlyoutClose}
/>
</StorageContextProvider>
</DatePickerContextProvider>
</AiopsAppContext.Provider>
</KibanaContextProvider>,

{ theme, i18n }
),
{
'data-test-subj': 'aiopsCategorizeFlyout',
Expand Down
40 changes: 17 additions & 23 deletions x-pack/plugins/ml/public/embeddables/common/resolve_job_selection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,11 @@ import moment from 'moment';
import { takeUntil, distinctUntilChanged, skip } from 'rxjs/operators';
import { from } from 'rxjs';
import React from 'react';
import {
KibanaContextProvider,
toMountPoint,
wrapWithTheme,
} from '@kbn/kibana-react-plugin/public';
import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
import { toMountPoint } from '@kbn/react-kibana-mount';
import { getInitialGroupsMap } from '../../application/components/job_selector/job_selector';
import { getMlGlobalServices } from '../../application/app';
import { JobId } from '../../../common/types/anomaly_detection_jobs';
import type { JobId } from '../../../common/types/anomaly_detection_jobs';
import { JobSelectorFlyout } from './components/job_selector_flyout';

/**
Expand All @@ -35,6 +32,7 @@ export async function resolveJobSelection(
http,
uiSettings,
theme,
i18n,
application: { currentAppId$ },
} = coreStart;

Expand Down Expand Up @@ -71,23 +69,19 @@ export async function resolveJobSelection(

const flyoutSession = coreStart.overlays.openFlyout(
toMountPoint(
wrapWithTheme(
<KibanaContextProvider
services={{ ...coreStart, mlServices: getMlGlobalServices(http) }}
>
<JobSelectorFlyout
selectedIds={selectedJobIds}
withTimeRangeSelector={false}
dateFormatTz={dateFormatTz}
singleSelection={false}
timeseriesOnly={true}
onFlyoutClose={onFlyoutClose}
onSelectionConfirmed={onSelectionConfirmed}
maps={maps}
/>
</KibanaContextProvider>,
theme.theme$
)
<KibanaContextProvider services={{ ...coreStart, mlServices: getMlGlobalServices(http) }}>
<JobSelectorFlyout
selectedIds={selectedJobIds}
withTimeRangeSelector={false}
dateFormatTz={dateFormatTz}
singleSelection={false}
timeseriesOnly={true}
onFlyoutClose={onFlyoutClose}
onSelectionConfirmed={onSelectionConfirmed}
maps={maps}
/>
</KibanaContextProvider>,
{ theme, i18n }
),
{
'data-test-subj': 'mlFlyoutJobSelector',
Expand Down
48 changes: 22 additions & 26 deletions x-pack/plugins/ml/public/embeddables/job_creation/common/create_flyout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,8 @@
import React from 'react';
import { takeUntil, distinctUntilChanged, skip } from 'rxjs/operators';
import { from } from 'rxjs';
import {
toMountPoint,
wrapWithTheme,
KibanaContextProvider,
} from '@kbn/kibana-react-plugin/public';
import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
import { toMountPoint } from '@kbn/react-kibana-mount';
import type { SharePluginStart } from '@kbn/share-plugin/public';
import type { DataPublicPluginStart } from '@kbn/data-plugin/public';
import type { CoreStart } from '@kbn/core/public';
Expand All @@ -34,7 +31,8 @@ export function createFlyout(
): Promise<void> {
const {
http,
theme: { theme$ },
theme,
i18n,
overlays,
application: { currentAppId$ },
} = coreStart;
Expand All @@ -48,27 +46,25 @@ export function createFlyout(

const flyoutSession = overlays.openFlyout(
toMountPoint(
wrapWithTheme(
<KibanaContextProvider
services={{
...coreStart,
share,
data,
lens,
dashboardService,
mlServices: getMlGlobalServices(http),
<KibanaContextProvider
services={{
...coreStart,
share,
data,
lens,
dashboardService,
mlServices: getMlGlobalServices(http),
}}
>
<FlyoutComponent
embeddable={embeddable}
onClose={() => {
onFlyoutClose();
resolve();
}}
>
<FlyoutComponent
embeddable={embeddable}
onClose={() => {
onFlyoutClose();
resolve();
}}
/>
</KibanaContextProvider>,
theme$
)
/>
</KibanaContextProvider>,
{ theme, i18n }
),
{
'data-test-subj': 'mlFlyoutLayerSelector',
Expand Down
4 changes: 1 addition & 3 deletions ...lugins/ml/public/embeddables/job_creation/lens/lens_vis_layer_selection_flyout/flyout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import {
EuiTitle,
EuiSpacer,
EuiText,
useEuiTheme,
} from '@elastic/eui';

import { Layer } from './layer';
Expand All @@ -32,7 +31,6 @@ interface Props {
}

export const LensLayerSelectionFlyout: FC<Props> = ({ onClose, embeddable }) => {
const { euiTheme } = useEuiTheme();
const {
services: { data, lens },
} = useMlFromLensKibanaContext();
Expand Down Expand Up @@ -72,7 +70,7 @@ export const LensLayerSelectionFlyout: FC<Props> = ({ onClose, embeddable }) =>
/>
</EuiText>
</EuiFlyoutHeader>
<EuiFlyoutBody css={{ backgroundColor: euiTheme.colors.lightestShade }}>
<EuiFlyoutBody>
{layerResults.map((layer, i) => (
<Layer layer={layer} layerIndex={i} key={layer.id} embeddable={embeddable} />
))}
Expand Down
1 change: 1 addition & 0 deletions x-pack/plugins/ml/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,5 +103,6 @@
"@kbn/content-management-plugin",
"@kbn/ml-in-memory-table",
"@kbn/presentation-util-plugin",
"@kbn/react-kibana-mount",
],
}