From 5b53a8e9d9b60d58bc29021e809fd2d1665ce0b3 Mon Sep 17 00:00:00 2001 From: Nicolas Chaulet Date: Thu, 22 Dec 2022 13:19:25 -0500 Subject: [PATCH 1/4] [Fleet] Validate pagination in fleet agents API (#148002) --- .../server/types/rest_spec/agent.test.ts | 27 +++++++++++++++++ .../fleet/server/types/rest_spec/agent.ts | 29 +++++++++++++------ 2 files changed, 47 insertions(+), 9 deletions(-) create mode 100644 x-pack/plugins/fleet/server/types/rest_spec/agent.test.ts diff --git a/x-pack/plugins/fleet/server/types/rest_spec/agent.test.ts b/x-pack/plugins/fleet/server/types/rest_spec/agent.test.ts new file mode 100644 index 0000000000000..a978c2ffe9479 --- /dev/null +++ b/x-pack/plugins/fleet/server/types/rest_spec/agent.test.ts @@ -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 { GetAgentsRequestSchema } from './agent'; + +describe('GetAgentsRequestSchema', () => { + it('should allow pagination with less than 10000 agents', () => { + expect(() => + GetAgentsRequestSchema.query.validate({ + page: 500, + perPage: 20, + }) + ).not.toThrow(); + }); + it('should not allow pagination to go over 10000 agents', () => { + expect(() => + GetAgentsRequestSchema.query.validate({ + page: 501, + perPage: 20, + }) + ).toThrowError(/You cannot use page and perPage page over 10000 agents/); + }); +}); diff --git a/x-pack/plugins/fleet/server/types/rest_spec/agent.ts b/x-pack/plugins/fleet/server/types/rest_spec/agent.ts index 709e8e8d27159..305b6f16f90d6 100644 --- a/x-pack/plugins/fleet/server/types/rest_spec/agent.ts +++ b/x-pack/plugins/fleet/server/types/rest_spec/agent.ts @@ -9,18 +9,29 @@ import { schema } from '@kbn/config-schema'; import moment from 'moment'; import semverIsValid from 'semver/functions/valid'; +import { SO_SEARCH_LIMIT } from '../../constants'; + import { NewAgentActionSchema } from '../models'; export const GetAgentsRequestSchema = { - query: schema.object({ - page: schema.number({ defaultValue: 1 }), - perPage: schema.number({ defaultValue: 20 }), - kuery: schema.maybe(schema.string()), - showInactive: schema.boolean({ defaultValue: false }), - showUpgradeable: schema.boolean({ defaultValue: false }), - sortField: schema.maybe(schema.string()), - sortOrder: schema.maybe(schema.oneOf([schema.literal('asc'), schema.literal('desc')])), - }), + query: schema.object( + { + page: schema.number({ defaultValue: 1 }), + perPage: schema.number({ defaultValue: 20 }), + kuery: schema.maybe(schema.string()), + showInactive: schema.boolean({ defaultValue: false }), + showUpgradeable: schema.boolean({ defaultValue: false }), + sortField: schema.maybe(schema.string()), + sortOrder: schema.maybe(schema.oneOf([schema.literal('asc'), schema.literal('desc')])), + }, + { + validate: (request) => { + if (request.page * request.perPage > SO_SEARCH_LIMIT) { + return `You cannot use page and perPage page over ${SO_SEARCH_LIMIT} agents`; + } + }, + } + ), }; export const GetOneAgentRequestSchema = { From 3a5f5626b2c3631eb2646782937171d2f87ce525 Mon Sep 17 00:00:00 2001 From: Aleh Zasypkin Date: Thu, 22 Dec 2022 19:44:11 +0100 Subject: [PATCH 2/4] Ensure that API keys are rendered before performing bulk delete in functional tests. (#148013) --- .../api_keys_grid/api_keys_grid_page.test.tsx | 2 +- .../api_keys_grid/api_keys_grid_page.tsx | 2 +- .../test/functional/apps/api_keys/home_page.ts | 18 ++++++++++++++++-- .../functional/page_objects/api_keys_page.ts | 6 +++++- 4 files changed, 23 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_keys_grid_page.test.tsx b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_keys_grid_page.test.tsx index f442c464ff0b2..0f20e4a5cfe96 100644 --- a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_keys_grid_page.test.tsx +++ b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_keys_grid_page.test.tsx @@ -116,7 +116,7 @@ describe('APIKeysGridPage', () => { const secondKey = getByText(/second-api-key/).closest('td'); const secondKeyEuiLink = secondKey!.querySelector('button'); expect(secondKeyEuiLink).not.toBeNull(); - expect(secondKeyEuiLink!.getAttribute('data-test-subj')).toBe('roleRowName-second-api-key'); + expect(secondKeyEuiLink!.getAttribute('data-test-subj')).toBe('apiKeyRowName-second-api-key'); }); afterAll(() => { diff --git a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_keys_grid_page.tsx b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_keys_grid_page.tsx index 0993e88e7ab16..49b606c7b34cd 100644 --- a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_keys_grid_page.tsx +++ b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_keys_grid_page.tsx @@ -518,7 +518,7 @@ export class APIKeysGridPage extends Component { return ( { this.setState({ selectedApiKey: recordAP, isUpdateFlyoutVisible: true }); }} diff --git a/x-pack/test/functional/apps/api_keys/home_page.ts b/x-pack/test/functional/apps/api_keys/home_page.ts index c984f58dc6cc1..dee8f2af4a58a 100644 --- a/x-pack/test/functional/apps/api_keys/home_page.ts +++ b/x-pack/test/functional/apps/api_keys/home_page.ts @@ -17,6 +17,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { const testSubjects = getService('testSubjects'); const find = getService('find'); const browser = getService('browser'); + const retry = getService('retry'); const testRoles: Record = { viewer: { @@ -37,8 +38,17 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { }, }; - // Failing: See https://github.com/elastic/kibana/issues/141868 - describe.skip('Home page', function () { + async function ensureApiKeysExist(apiKeysNames: string[]) { + await retry.try(async () => { + for (const apiKeyName of apiKeysNames) { + log.debug(`Checking if API key ("${apiKeyName}") exists.`); + await pageObjects.apiKeys.ensureApiKeyExists(apiKeyName); + log.debug(`API key ("${apiKeyName}") exists.`); + } + }); + } + + describe('Home page', function () { before(async () => { await clearAllApiKeys(es, log); await security.testUser.setRoles(['kibana_admin']); @@ -392,6 +402,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { await pageObjects.apiKeys.clickOnPromptCreateApiKey(); await pageObjects.apiKeys.setApiKeyName('api key 1'); await pageObjects.apiKeys.clickSubmitButtonOnApiKeyFlyout(); + await ensureApiKeysExist(['api key 1']); }); it('one by one', async () => { @@ -406,6 +417,9 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { await pageObjects.apiKeys.setApiKeyName('api key 2'); await pageObjects.apiKeys.clickSubmitButtonOnApiKeyFlyout(); + // Make sure all API keys we want to delete are created and rendered. + await ensureApiKeysExist(['api key 1', 'api key 2']); + await pageObjects.apiKeys.bulkDeleteApiKeys(); expect(await pageObjects.apiKeys.getApiKeysFirstPromptTitle()).to.be( 'Create your first API key' diff --git a/x-pack/test/functional/page_objects/api_keys_page.ts b/x-pack/test/functional/page_objects/api_keys_page.ts index 6f5bfb5078133..85e8188ee747a 100644 --- a/x-pack/test/functional/page_objects/api_keys_page.ts +++ b/x-pack/test/functional/page_objects/api_keys_page.ts @@ -103,7 +103,11 @@ export function ApiKeysPageProvider({ getService }: FtrProviderContext) { }, async clickExistingApiKeyToOpenFlyout(apiKeyName: string) { - await testSubjects.click(`roleRowName-${apiKeyName}`); + await testSubjects.click(`apiKeyRowName-${apiKeyName}`); + }, + + async ensureApiKeyExists(apiKeyName: string) { + await testSubjects.existOrFail(`apiKeyRowName-${apiKeyName}`); }, async getMetadataSwitch() { From 602b6d645a9668a6c48a5478fd27ff248bb78a32 Mon Sep 17 00:00:00 2001 From: "Quynh Nguyen (Quinn)" <43350163+qn895@users.noreply.github.com> Date: Thu, 22 Dec 2022 13:57:09 -0600 Subject: [PATCH 3/4] [ML] Add responsive layout to Index data visualizer, fix doc count chart margin (#147137) ## Summary This PR addresses https://github.com/elastic/kibana/issues/137257 and better handles the layout when the screen width decreases. Changes include: - The css is now updating based on the body content width (which window's width - side bar navigation's width). - The link cards are shown in the bottom instead of on the right side when the content width is smaller - Refresh button will only show the refresh icon when the size is small - Fix the doc count chart margin too big causing the chart - Fix wide time range display with sparse data For reviewers: - **kibana-design**: 2 `.scss` files were deleted Before After Screen Shot 2022-12-06 at 14 31 27 ### Checklist Delete any items that are not applicable to this PR. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [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 - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] 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) ### Risk Matrix Delete this section if it is not applicable to this PR. Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release. When forming the risk matrix, consider some of the following examples and how they may potentially impact the change: | Risk | Probability | Severity | Mitigation/Notes | |---------------------------|-------------|----------|-------------------------| | Multiple Spaces—unexpected behavior in non-default Kibana Space. | Low | High | Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces. | | Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks. | High | Low | Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure. | | Code should gracefully handle cases when feature X or plugin Y are disabled. | Medium | High | Unit tests will verify that any feature flag or plugin combination still results in our service operational. | | [See more potential risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) | ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../date_picker_wrapper.tsx | 24 +- .../document_count_chart.tsx | 17 +- .../field_count_panel/field_count_panel.tsx | 1 + .../fields_stats_grid/fields_stats_grid.tsx | 1 + .../common/components/link_card/link_card.tsx | 9 +- .../multi_select_picker.tsx | 35 ++- .../components/field_count_stats/_index.scss | 2 +- .../data_visualizer_stats_table.tsx | 6 +- .../stats_table/hooks/use_color_range.ts | 15 +- .../hooks/use_data_viz_chart_theme.ts | 4 +- .../common/components/stats_table/utils.ts | 2 +- .../common/hooks/use_current_eui_theme.ts | 19 ++ .../actions_panel/actions_panel.tsx | 39 ++- .../index_data_visualizer_view/_index.scss | 1 - .../_index_data_visualizer_view.scss | 14 - .../index_data_visualizer_view.tsx | 256 +++++++++--------- .../search_panel/field_type_filter.tsx | 8 + .../components/search_panel/search_panel.scss | 3 +- .../components/search_panel/search_panel.tsx | 22 +- .../index_data_visualizer.tsx | 49 +++- .../requests/get_document_stats.ts | 52 +--- 21 files changed, 300 insertions(+), 279 deletions(-) create mode 100644 x-pack/plugins/data_visualizer/public/application/common/hooks/use_current_eui_theme.ts delete mode 100644 x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/_index.scss delete mode 100644 x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/_index_data_visualizer_view.scss diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/date_picker_wrapper/date_picker_wrapper.tsx b/x-pack/plugins/data_visualizer/public/application/common/components/date_picker_wrapper/date_picker_wrapper.tsx index a3f5dbfffe517..e0dba00ec95ee 100644 --- a/x-pack/plugins/data_visualizer/public/application/common/components/date_picker_wrapper/date_picker_wrapper.tsx +++ b/x-pack/plugins/data_visualizer/public/application/common/components/date_picker_wrapper/date_picker_wrapper.tsx @@ -34,6 +34,7 @@ import { dataVisualizerRefresh$ } from '../../../index_data_visualizer/services/ import { useUrlState } from '../../util/url_state'; const DEFAULT_REFRESH_INTERVAL_MS = 5000; +const DATE_PICKER_MAX_WIDTH = 540; interface TimePickerQuickRange { from: string; @@ -69,10 +70,11 @@ function updateLastRefresh(timeRange?: OnRefreshProps) { } // FIXME: Consolidate this component with ML and AIOps's component -export const DatePickerWrapper: FC<{ isAutoRefreshOnly?: boolean; showRefresh?: boolean }> = ({ - isAutoRefreshOnly, - showRefresh, -}) => { +export const DatePickerWrapper: FC<{ + isAutoRefreshOnly?: boolean; + showRefresh?: boolean; + compact?: boolean; +}> = ({ isAutoRefreshOnly, showRefresh, compact = false }) => { const { services, notifications: { toasts }, @@ -242,9 +244,18 @@ export const DatePickerWrapper: FC<{ isAutoRefreshOnly?: boolean; showRefresh?: - + diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/document_count_content/document_count_chart/document_count_chart.tsx b/x-pack/plugins/data_visualizer/public/application/common/components/document_count_content/document_count_chart/document_count_chart.tsx index 9b802fa768bff..9e71561f051a3 100644 --- a/x-pack/plugins/data_visualizer/public/application/common/components/document_count_content/document_count_chart/document_count_chart.tsx +++ b/x-pack/plugins/data_visualizer/public/application/common/components/document_count_content/document_count_chart/document_count_chart.tsx @@ -9,7 +9,7 @@ import React, { FC, useCallback, useMemo } from 'react'; import { i18n } from '@kbn/i18n'; import { Axis, - BarSeries, + HistogramBarSeries, BrushEndListener, Chart, ElementClickListener, @@ -22,7 +22,7 @@ import { import moment from 'moment'; import { IUiSettingsClient } from '@kbn/core/public'; import { MULTILAYER_TIME_AXIS_STYLE } from '@kbn/charts-plugin/common'; -import { EuiLoadingSpinner, EuiFlexItem } from '@elastic/eui'; +import { EuiFlexGroup, EuiLoadingSpinner, EuiFlexItem } from '@elastic/eui'; import { useDataVisualizerKibana } from '../../../../kibana_context'; export interface DocumentCountChartPoint { @@ -137,8 +137,9 @@ export const DocumentCountChart: FC = ({ const timeZone = getTimezone(uiSettings); return ( -
{loading ? ( @@ -147,6 +148,7 @@ export const DocumentCountChart: FC = ({ = ({ position={Position.Bottom} showOverlappingTicks={true} tickFormat={(value) => xAxisFormatter.convert(value)} + // temporary fix to reduce horizontal chart margin until fixed in Elastic Charts itself + labelFormat={useLegacyTimeAxis ? undefined : () => ''} timeAxisLayerCount={useLegacyTimeAxis ? 0 : 2} style={useLegacyTimeAxis ? {} : MULTILAYER_TIME_AXIS_STYLE} /> - = ({ yAccessors={['value']} data={adjustedChartPoints} timeZone={timeZone} + yNice /> )} -
+ ); }; diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/field_count_panel/field_count_panel.tsx b/x-pack/plugins/data_visualizer/public/application/common/components/field_count_panel/field_count_panel.tsx index 66db0afb8f895..c5343e4a304c3 100644 --- a/x-pack/plugins/data_visualizer/public/application/common/components/field_count_panel/field_count_panel.tsx +++ b/x-pack/plugins/data_visualizer/public/application/common/components/field_count_panel/field_count_panel.tsx @@ -31,6 +31,7 @@ export const FieldCountPanel: FC = ({ data-test-subj="dataVisualizerFieldCountPanel" responsive={false} className="dvFieldCount__panel" + wrap > diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/fields_stats_grid/fields_stats_grid.tsx b/x-pack/plugins/data_visualizer/public/application/common/components/fields_stats_grid/fields_stats_grid.tsx index 09fbc24f11764..a244aa795cc11 100644 --- a/x-pack/plugins/data_visualizer/public/application/common/components/fields_stats_grid/fields_stats_grid.tsx +++ b/x-pack/plugins/data_visualizer/public/application/common/components/fields_stats_grid/fields_stats_grid.tsx @@ -85,6 +85,7 @@ export const FieldsStatsGrid: FC = ({ results }) => { gutterSize="xs" style={{ marginLeft: 4 }} data-test-subj="dataVisualizerFieldCountPanel" + responsive={true} > diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/link_card/link_card.tsx b/x-pack/plugins/data_visualizer/public/application/common/components/link_card/link_card.tsx index 855465eeab0c8..746bcf6c5eae0 100644 --- a/x-pack/plugins/data_visualizer/public/application/common/components/link_card/link_card.tsx +++ b/x-pack/plugins/data_visualizer/public/application/common/components/link_card/link_card.tsx @@ -17,6 +17,7 @@ import { EuiPanel, EuiLink, } from '@elastic/eui'; +import { useCurrentEuiTheme } from '../../hooks/use_current_eui_theme'; export interface LinkCardProps { icon: IconType; @@ -41,6 +42,8 @@ export const LinkCard: FC = ({ isDisabled, 'data-test-subj': dataTestSubj, }) => { + const euiTheme = useCurrentEuiTheme(); + const linkHrefAndOnClickProps = { ...(href ? { href } : {}), ...(onClick ? { onClick } : {}), @@ -62,10 +65,10 @@ export const LinkCard: FC = ({ color="subdued" {...linkHrefAndOnClickProps} > - - + + {typeof icon === 'string' ? ( - + ) : ( icon )} diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/multi_select_picker/multi_select_picker.tsx b/x-pack/plugins/data_visualizer/public/application/common/components/multi_select_picker/multi_select_picker.tsx index 741706a9f45b9..ee737d25591d6 100644 --- a/x-pack/plugins/data_visualizer/public/application/common/components/multi_select_picker/multi_select_picker.tsx +++ b/x-pack/plugins/data_visualizer/public/application/common/components/multi_select_picker/multi_select_picker.tsx @@ -15,10 +15,11 @@ import { EuiPopoverTitle, EuiSpacer, } from '@elastic/eui'; -import React, { FC, ReactNode, useEffect, useMemo, useState } from 'react'; +import React, { FC, ReactNode, useEffect, useState } from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; -import { euiDarkVars as euiThemeDark, euiLightVars as euiThemeLight } from '@kbn/ui-theme'; -import { useDataVisualizerKibana } from '../../../kibana_context'; +import type { SerializedStyles } from '@emotion/react'; +import { css } from '@emotion/react'; +import { useCurrentEuiTheme } from '../../hooks/use_current_eui_theme'; export interface Option { name?: string | ReactNode; @@ -27,6 +28,8 @@ export interface Option { disabled?: boolean; } +const SELECT_PICKER_HEIGHT = '250px'; + const NoFilterItems = () => { return (
@@ -44,15 +47,10 @@ const NoFilterItems = () => { ); }; -export function useCurrentEuiTheme() { - const { services } = useDataVisualizerKibana(); - const uiSettings = services.uiSettings; - return useMemo( - () => (uiSettings.get('theme:darkMode') ? euiThemeDark : euiThemeLight), - [uiSettings] - ); +interface MultiSelectPickerStyles { + filterGroup?: SerializedStyles; + filterItemContainer?: SerializedStyles; } - export const MultiSelectPicker: FC<{ options: Option[]; onChange?: (items: string[]) => void; @@ -60,7 +58,8 @@ export const MultiSelectPicker: FC<{ checkedOptions: string[]; dataTestSubj: string; postfix?: React.ReactElement; -}> = ({ options, onChange, title, checkedOptions, dataTestSubj, postfix }) => { + cssStyles?: MultiSelectPickerStyles; +}> = ({ options, onChange, title, checkedOptions, dataTestSubj, postfix, cssStyles }) => { const euiTheme = useCurrentEuiTheme(); const [items, setItems] = useState(options); @@ -114,7 +113,7 @@ export const MultiSelectPicker: FC<{ ); return ( - + -
+
{Array.isArray(items) && items.length > 0 ? ( items.map((item, index) => { const checked = diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_count_stats/_index.scss b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_count_stats/_index.scss index 0774cb198ea90..f3c6eed07781b 100644 --- a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_count_stats/_index.scss +++ b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/field_count_stats/_index.scss @@ -8,5 +8,5 @@ .dvFieldCount__item { max-width: 300px; - min-width: 300px; + min-width: 200px; } diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/data_visualizer_stats_table.tsx b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/data_visualizer_stats_table.tsx index 081c062979f7a..7e13e981781dd 100644 --- a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/data_visualizer_stats_table.tsx +++ b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/data_visualizer_stats_table.tsx @@ -88,7 +88,6 @@ export const DataVisualizerTable = ({ ); const [showDistributions, setShowDistributions] = useState(showPreviewByDefault ?? true); const [dimensions, setDimensions] = useState(calculateTableColumnsDimensions()); - const [tableWidth, setTableWidth] = useState(1400); const toggleExpandAll = useCallback( (shouldExpandAll: boolean) => { @@ -109,10 +108,9 @@ export const DataVisualizerTable = ({ throttle((e: { width: number; height: number }) => { // When window or table is resized, // update the column widths and other settings accordingly - setTableWidth(e.width); setDimensions(calculateTableColumnsDimensions(e.width)); }, 500), - [tableWidth] + [] ); const toggleShowDistribution = useCallback(() => { @@ -138,6 +136,8 @@ export const DataVisualizerTable = ({ const columns = useMemo(() => { const expanderColumn: EuiTableComputedColumnType = { name: + // EUI will automatically show an expander button when table is mobile view (where width <700) + // so we need to not render any addition button dimensions.breakPoint !== 'small' ? ( { - const { euiTheme } = useCurrentEuiTheme(); + const euiTheme = useCurrentEuiTheme(); const colorRanges: Record = { [COLOR_RANGE.BLUE]: [ @@ -197,13 +196,3 @@ export const useColorRange = ( }; export type EuiThemeType = typeof euiThemeLight | typeof euiThemeDark; - -export function useCurrentEuiTheme() { - const { - services: { uiSettings }, - } = useDataVisualizerKibana(); - return useMemo( - () => ({ euiTheme: uiSettings.get('theme:darkMode') ? euiThemeDark : euiThemeLight }), - [uiSettings] - ); -} diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/hooks/use_data_viz_chart_theme.ts b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/hooks/use_data_viz_chart_theme.ts index 56b5049786aca..9e21884b6cb4d 100644 --- a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/hooks/use_data_viz_chart_theme.ts +++ b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/hooks/use_data_viz_chart_theme.ts @@ -7,9 +7,9 @@ import type { PartialTheme } from '@elastic/charts'; import { useMemo } from 'react'; -import { useCurrentEuiTheme } from './use_color_range'; +import { useCurrentEuiTheme } from '../../../hooks/use_current_eui_theme'; export const useDataVizChartTheme = (): PartialTheme => { - const { euiTheme } = useCurrentEuiTheme(); + const euiTheme = useCurrentEuiTheme(); const chartTheme = useMemo(() => { const AREA_SERIES_COLOR = euiTheme.euiColorVis0; return { diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/utils.ts b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/utils.ts index 8e2c80c307906..eeb611af477f7 100644 --- a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/utils.ts +++ b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/utils.ts @@ -40,7 +40,7 @@ export const getTFPercentage = (config: FileBasedFieldVisConfig) => { // Map of DataVisualizerTable breakpoints specific to the table component // Note that the table width is not always the full width of the browser window const TABLE_BREAKPOINTS = { - small: 600, + small: 700, medium: 1000, large: Infinity, // default }; diff --git a/x-pack/plugins/data_visualizer/public/application/common/hooks/use_current_eui_theme.ts b/x-pack/plugins/data_visualizer/public/application/common/hooks/use_current_eui_theme.ts new file mode 100644 index 0000000000000..06ad27ccb21b9 --- /dev/null +++ b/x-pack/plugins/data_visualizer/public/application/common/hooks/use_current_eui_theme.ts @@ -0,0 +1,19 @@ +/* + * 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 { useMemo } from 'react'; +import { euiDarkVars as euiThemeDark, euiLightVars as euiThemeLight } from '@kbn/ui-theme'; +import { useDataVisualizerKibana } from '../../kibana_context'; + +export function useCurrentEuiTheme() { + const { services } = useDataVisualizerKibana(); + const uiSettings = services.uiSettings; + return useMemo( + () => (uiSettings.get('theme:darkMode') ? euiThemeDark : euiThemeLight), + [uiSettings] + ); +} diff --git a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/actions_panel/actions_panel.tsx b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/actions_panel/actions_panel.tsx index 27c9bc2948336..b7eb35e24ba52 100644 --- a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/actions_panel/actions_panel.tsx +++ b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/actions_panel/actions_panel.tsx @@ -11,6 +11,7 @@ import { FormattedMessage } from '@kbn/i18n-react'; import { i18n } from '@kbn/i18n'; import { EuiSpacer, EuiTitle } from '@elastic/eui'; import { DataView } from '@kbn/data-views-plugin/public'; +import { css } from '@emotion/react'; import { flatten } from 'lodash'; import { LinkCardProps } from '../../../common/components/link_card/link_card'; import { useDataVisualizerKibana } from '../../../kibana_context'; @@ -24,13 +25,17 @@ interface Props { searchString?: string | { [key: string]: any }; searchQueryLanguage?: string; getAdditionalLinks?: GetAdditionalLinks; + compact?: boolean; } +const ACTIONS_PANEL_WIDTH = '240px'; + export const ActionsPanel: FC = ({ dataView, searchString, searchQueryLanguage, getAdditionalLinks, + compact, }) => { const [globalState] = useUrlState('_g'); @@ -112,23 +117,33 @@ export const ActionsPanel: FC = ({ data.query, getAdditionalLinks, ]); + const showActionsPanel = + discoverLink || (Array.isArray(asyncHrefCards) && asyncHrefCards.length > 0); // Note we use display:none for the DataRecognizer section as it needs to be // passed the recognizerResults object, and then run the recognizer check which // controls whether the recognizer section is ultimately displayed. - return ( -
+ return showActionsPanel ? ( +
+ +

+ +

+ + {discoverLink && ( <> - -

- -

- - = ({ ))}
- ); + ) : null; }; diff --git a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/_index.scss b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/_index.scss deleted file mode 100644 index c9b1d78320aee..0000000000000 --- a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'index_data_visualizer_view'; diff --git a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/_index_data_visualizer_view.scss b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/_index_data_visualizer_view.scss deleted file mode 100644 index 2a9488da966ea..0000000000000 --- a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/_index_data_visualizer_view.scss +++ /dev/null @@ -1,14 +0,0 @@ -.dataViewTitleHeader { - min-width: 300px; - padding: $euiSizeS 0; - display: flex; - flex-direction: row; - align-items: center; -} - -@include euiBreakpoint('xs', 's', 'm', 'l') { - .dataVisualizerPageHeader { - flex-direction: column; - align-items: flex-start; - } -} diff --git a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx index bb9095bc6f269..238ceb960de36 100644 --- a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx +++ b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { FC, Fragment, useEffect, useMemo, useState, useCallback, useRef } from 'react'; +import React, { FC, useEffect, useMemo, useState, useCallback, useRef } from 'react'; import { EuiFlexGroup, EuiFlexItem, @@ -23,6 +23,7 @@ import { i18n } from '@kbn/i18n'; import { Filter, FilterStateStore, Query } from '@kbn/es-query'; import { generateFilters } from '@kbn/data-plugin/public'; import { DataView, DataViewField } from '@kbn/data-views-plugin/public'; +import { useCurrentEuiTheme } from '../../../common/hooks/use_current_eui_theme'; import { DV_RANDOM_SAMPLER_PREFERENCE, useStorage } from '../../hooks/use_storage'; import { FullTimeRangeSelector } from '../full_time_range_selector'; import { usePageUrlState, useUrlState } from '../../../common/util/url_state'; @@ -46,14 +47,11 @@ import { kbnTypeToJobType } from '../../../common/util/field_types_utils'; import { SearchPanel } from '../search_panel'; import { ActionsPanel } from '../actions_panel'; import { DatePickerWrapper } from '../../../common/components/date_picker_wrapper'; -import { HelpMenu } from '../../../common/components/help_menu'; import { createMergedEsQuery } from '../../utils/saved_search_utils'; import { DataVisualizerDataViewManagement } from '../data_view_management'; import { GetAdditionalLinks } from '../../../common/components/results_links'; import { useDataVisualizerGridData } from '../../hooks/use_data_visualizer_grid_data'; import { DataVisualizerGridInput } from '../../embeddables/grid_embeddable/grid_embeddable'; -// TODO port to `@emotion/react` once `useEuiBreakpoint` is available https://github.com/elastic/eui/pull/6057 -import './_index.scss'; import { RANDOM_SAMPLER_OPTION, RandomSamplerOption } from '../../constants/random_sampler'; interface DataVisualizerPageState { @@ -116,9 +114,12 @@ export interface IndexDataVisualizerViewProps { currentSavedSearch: SavedSearchSavedObject | null; currentSessionId?: string; getAdditionalLinks?: GetAdditionalLinks; + compact?: boolean; } export const IndexDataVisualizerView: FC = (dataVisualizerProps) => { + const euiTheme = useCurrentEuiTheme(); + const [savedRandomSamplerPreference, saveRandomSamplerPreference] = useStorage( DV_RANDOM_SAMPLER_PREFERENCE, @@ -136,7 +137,7 @@ export const IndexDataVisualizerView: FC = (dataVi ); const { services } = useDataVisualizerKibana(); - const { docLinks, notifications, uiSettings, data } = services; + const { notifications, uiSettings, data } = services; const { toasts } = notifications; const [dataVisualizerListState, setDataVisualizerListState] = usePageUrlState( @@ -149,7 +150,7 @@ export const IndexDataVisualizerView: FC = (dataVi dataVisualizerProps.currentSavedSearch ); - const { currentDataView, currentSessionId, getAdditionalLinks } = dataVisualizerProps; + const { currentDataView, currentSessionId, getAdditionalLinks, compact } = dataVisualizerProps; useEffect(() => { if (dataVisualizerProps?.currentSavedSearch !== undefined) { @@ -200,7 +201,7 @@ export const IndexDataVisualizerView: FC = (dataVi queryLanguage: SearchQueryLanguage; filters: Filter[]; }) => { - // When the user loads saved search and then clear or modify the query + // When the user loads saved search and then clears or modifies the query // we should remove the saved search and replace it with the index pattern id if (currentSavedSearch !== null) { setCurrentSavedSearch(null); @@ -217,12 +218,6 @@ export const IndexDataVisualizerView: FC = (dataVi [currentSavedSearch, dataVisualizerListState, setDataVisualizerListState] ); - const samplerShardSize = - dataVisualizerListState.samplerShardSize ?? restorableDefaults.samplerShardSize; - const setSamplerShardSize = (value: number) => { - setDataVisualizerListState({ ...dataVisualizerListState, samplerShardSize: value }); - }; - const visibleFieldTypes = dataVisualizerListState.visibleFieldTypes ?? restorableDefaults.visibleFieldTypes; const setVisibleFieldTypes = (values: string[]) => { @@ -386,8 +381,6 @@ export const IndexDataVisualizerView: FC = (dataVi ] ); - const wizardPanelWidth = '280px'; - const fieldsCountStats: TotalFieldsStats | undefined = useMemo(() => { let _visibleFieldsCount = 0; let _totalFieldsCount = 0; @@ -454,131 +447,136 @@ export const IndexDataVisualizerView: FC = (dataVi () => currentDataView.timeFieldName !== undefined && currentDataView.timeFieldName !== '', [currentDataView.timeFieldName] ); - const helpLink = docLinks.links.ml.guide; - return ( - - - - - - -
- -

{currentDataView.getName()}

- - -
- - + + + + + - {hasValidTimeField ? ( - - - - ) : null} + +

{currentDataView.getName()}

+ + + + + + {compact ? : null} + + {hasValidTimeField ? ( - - - - - - - - - - - + - - {overallStats?.totalCount !== undefined && ( - <> - - - - - - )} - - - - - - items={configs} - pageState={dataVisualizerListState} - updatePageState={setDataVisualizerListState} - getItemIdToExpandedRowMap={getItemIdToExpandedRowMap} - extendedColumns={extendedColumns} - loading={progress < 100} - overallStatsRunning={overallStatsProgress.isRunning} - showPreviewByDefault={dataVisualizerListState.showDistributions ?? true} - onChange={setDataVisualizerListState} - totalCount={overallStats.totalCount} - /> - - - - + + + + + + + + + + - - - - - - + {overallStats?.totalCount !== undefined && ( + <> + + + + + + )} + + + + + + items={configs} + pageState={dataVisualizerListState} + updatePageState={setDataVisualizerListState} + getItemIdToExpandedRowMap={getItemIdToExpandedRowMap} + extendedColumns={extendedColumns} + loading={progress < 100} + overallStatsRunning={overallStatsProgress.isRunning} + showPreviewByDefault={dataVisualizerListState.showDistributions ?? true} + onChange={setDataVisualizerListState} + totalCount={overallStats.totalCount} + /> + + + {compact ? : null} + + + + + + ); }; diff --git a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/field_type_filter.tsx b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/field_type_filter.tsx index f438780e8dbe4..697aecf2bb2f6 100644 --- a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/field_type_filter.tsx +++ b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/field_type_filter.tsx @@ -8,6 +8,8 @@ import React, { FC, useMemo } from 'react'; import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; +import { css } from '@emotion/react'; +import { useCurrentEuiTheme } from '../../../common/hooks/use_current_eui_theme'; import { FieldTypesHelpPopover } from '../../../common/components/field_types_filter/field_types_help_popover'; import type { SupportedFieldType } from '../../../../../common/types'; import { FieldTypeIcon } from '../../../common/components/field_type_icon'; @@ -19,6 +21,7 @@ export const DataVisualizerFieldTypeFilter: FC<{ setVisibleFieldTypes(q: string[]): void; visibleFieldTypes: string[]; }> = ({ indexedFieldTypes, setVisibleFieldTypes, visibleFieldTypes }) => { + const euiTheme = useCurrentEuiTheme(); const options: Option[] = useMemo(() => { return indexedFieldTypes.map((indexedFieldName) => { const label = jobTypeLabels[indexedFieldName] ?? ''; @@ -55,6 +58,11 @@ export const DataVisualizerFieldTypeFilter: FC<{ checkedOptions={visibleFieldTypes} dataTestSubj={'dataVisualizerFieldTypeSelect'} postfix={} + cssStyles={{ + filterGroup: css` + margin-left: ${euiTheme.euiSizeS}; + `, + }} /> ); diff --git a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/search_panel.scss b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/search_panel.scss index 6b0624fae2757..699e76a9c58fb 100644 --- a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/search_panel.scss +++ b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/search_panel.scss @@ -1,6 +1,5 @@ .dvSearchPanel__controls { flex-direction: row; - padding: $euiSizeS; } .dvSearchPanel__container { @@ -12,7 +11,7 @@ flex-direction: column; } .dvSearchBar { - min-width: #{'max(100%, 500px)'}; + min-width: #{'max(100%, 300px)'}; } .dvSearchPanel__controls { padding: 0; diff --git a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/search_panel.tsx b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/search_panel.tsx index 5b47bb820b9ab..df11ab8dd5cd1 100644 --- a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/search_panel.tsx +++ b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/search_panel.tsx @@ -6,12 +6,11 @@ */ import React, { FC, useEffect, useState } from 'react'; -import { EuiFlexItem, EuiFlexGroup } from '@elastic/eui'; +import { EuiFlexItem, EuiFlexGroup, EuiSpacer } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { Query, Filter } from '@kbn/es-query'; import type { TimeRange } from '@kbn/es-query'; import { DataView, DataViewField } from '@kbn/data-views-plugin/public'; -import { css } from '@emotion/react'; import { isDefined } from '../../../common/util/is_defined'; import { DataVisualizerFieldNamesFilter } from './field_name_filter'; import { DataVisualizerFieldTypeFilter } from './field_type_filter'; @@ -26,8 +25,6 @@ interface Props { searchString: Query['query']; searchQuery: Query['query']; searchQueryLanguage: SearchQueryLanguage; - samplerShardSize: number; - setSamplerShardSize(s: number): void; overallStats: OverallStats; indexedFieldTypes: SupportedFieldType[]; setVisibleFieldTypes(q: string[]): void; @@ -47,14 +44,13 @@ interface Props { }): void; showEmptyFields: boolean; onAddFilter?: (field: DataViewField | string, value: string, type: '+' | '-') => void; + compact?: boolean; } export const SearchPanel: FC = ({ dataView, searchString, searchQueryLanguage, - samplerShardSize, - setSamplerShardSize, overallStats, indexedFieldTypes, setVisibleFieldTypes, @@ -63,6 +59,7 @@ export const SearchPanel: FC = ({ visibleFieldNames, setSearchParams, showEmptyFields, + compact, }) => { const { services: { @@ -120,7 +117,7 @@ export const SearchPanel: FC = ({ return ( = ({ /> + {compact ? : null} ; getAdditionalLinks?: GetAdditionalLinks; } @@ -70,9 +71,10 @@ export const getLocatorParams = (params: { return locatorParams; }; -export const DataVisualizerUrlStateContextProvider: FC< - DataVisualizerUrlStateContextProviderProps -> = ({ IndexDataVisualizerComponent, getAdditionalLinks }) => { +export const DataVisualizerStateContextProvider: FC = ({ + IndexDataVisualizerComponent, + getAdditionalLinks, +}) => { const { services } = useDataVisualizerKibana(); const { data: { dataViews, search }, @@ -240,15 +242,36 @@ export const DataVisualizerUrlStateContextProvider: FC< [history, urlSearchString] ); + const [panelWidth, setPanelWidth] = useState(1600); + + // eslint-disable-next-line react-hooks/exhaustive-deps + const resizeHandler = useCallback( + throttle((e: { width: number; height: number }) => { + // When window or table is resized, + // update the page body width + setPanelWidth(e.width); + }, 500), + [] + ); + const compact = useMemo(() => panelWidth <= 1024, [panelWidth]); + return ( {currentDataView ? ( - + // Needs ResizeObserver to measure window width - side bar navigation + + {(resizeRef) => ( +
+ +
+ )} + ) : (
)} @@ -293,7 +316,7 @@ export const IndexDataVisualizer: FC<{ return ( - diff --git a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/search_strategy/requests/get_document_stats.ts b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/search_strategy/requests/get_document_stats.ts index 7607dc30c8130..f74a8800d2bd0 100644 --- a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/search_strategy/requests/get_document_stats.ts +++ b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/search_strategy/requests/get_document_stats.ts @@ -21,52 +21,6 @@ import type { const MINIMUM_RANDOM_SAMPLER_DOC_COUNT = 100000; const DEFAULT_INITIAL_RANDOM_SAMPLER_PROBABILITY = 0.000001; -export const getDocumentCountStatsRequest = (params: OverallStatsSearchStrategyParams) => { - const { - index, - timeFieldName, - earliest: earliestMs, - latest: latestMs, - runtimeFieldMap, - searchQuery, - intervalMs, - fieldsToFetch, - } = params; - - const size = 0; - const filterCriteria = buildBaseFilterCriteria(timeFieldName, earliestMs, latestMs, searchQuery); - - // Don't use the sampler aggregation as this can lead to some potentially - // confusing date histogram results depending on the date range of data amongst shards. - const aggs = { - eventRate: { - date_histogram: { - field: timeFieldName, - fixed_interval: `${intervalMs}ms`, - min_doc_count: 1, - }, - }, - }; - - const searchBody = { - query: { - bool: { - filter: filterCriteria, - }, - }, - ...(!fieldsToFetch && timeFieldName !== undefined && intervalMs !== undefined && intervalMs > 0 - ? { aggs } - : {}), - ...(isPopulatedObject(runtimeFieldMap) ? { runtime_mappings: runtimeFieldMap } : {}), - track_total_hits: true, - size, - }; - return { - index, - body: searchBody, - }; -}; - export const getDocumentCountStats = async ( search: DataPublicPluginStart['search'], params: OverallStatsSearchStrategyParams, @@ -104,7 +58,11 @@ export const getDocumentCountStats = async ( date_histogram: { field: timeFieldName, fixed_interval: `${intervalMs}ms`, - min_doc_count: 1, + min_doc_count: 0, + extended_bounds: { + min: earliestMs, + max: latestMs, + }, }, }, }; From 251bdcec6c013dc70d85489220bf9923bb7a053d Mon Sep 17 00:00:00 2001 From: Cee Chen <549407+cee-chen@users.noreply.github.com> Date: Thu, 22 Dec 2022 12:41:18 -0800 Subject: [PATCH 4/4] Upgrade EUI to v72.0.0 (#147888) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary `eui@71.0.0` ⏩ `eui@72.0.0` --- ## [`72.0.0`](https://github.com/elastic/eui/tree/v72.0.0) - Added the `customQuickSelectRender` render prop to `EuiSuperDatePicker`, which allows customizing the Quick Select popover ([#6382](https://github.com/elastic/eui/pull/6382)) - `EuiFilePicker` styles have been updated to look more like an interactive element. ([#6479](https://github.com/elastic/eui/pull/6479)) - Added a third argument to `EuiSelectable`'s `onChange` callback. The single `option` object that triggered the `onChange` event is now also passed to consumers with its most recent `checked` state ([#6487](https://github.com/elastic/eui/pull/6487)) **Bug fixes** - `EuiTabs` now passes `size` and `expand` to all children using a React context provider. ([#6478](https://github.com/elastic/eui/pull/6478)) - Fixed security warnings caused by `trim@0.0.1` sub-dependency ([#6482](https://github.com/elastic/eui/pull/6482)) **Breaking changes** - Removed `size` and `expand` props from `EuiTab` ([#6478](https://github.com/elastic/eui/pull/6478)) ## [`71.1.0`](https://github.com/elastic/eui/tree/v71.1.0) **Deprecations** - Renamed `EuiPageSideBarProps` to `EuiPageSideBarProps_Deprecated`, to reduce usage/confusion with `EuiPageSidebar` ([#6468](https://github.com/elastic/eui/pull/6468)) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- package.json | 2 +- .../__snapshots__/i18n_service.test.tsx.snap | 1 + .../src/i18n_eui_mapping.tsx | 3 ++ src/dev/license_checker/config.ts | 2 +- .../page_template/with_solution_nav.tsx | 2 +- .../dataview_picker/dataview_list.test.tsx | 3 +- .../text_languages_list.test.tsx | 3 +- .../field_manager/field_manager.test.tsx | 3 +- .../form_based/layerpanel.test.tsx | 3 +- .../upload_license.test.tsx.snap | 5 +++ .../__snapshots__/index.test.tsx.snap | 1 + .../__snapshots__/chart_wrapper.test.tsx.snap | 8 ++--- yarn.lock | 31 ++++++++++++++++--- 13 files changed, 51 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 751f8417340cf..6fc8d8aec7eb9 100644 --- a/package.json +++ b/package.json @@ -107,7 +107,7 @@ "@elastic/datemath": "5.0.3", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.5.0-canary.1", "@elastic/ems-client": "8.3.3", - "@elastic/eui": "71.0.0", + "@elastic/eui": "72.0.0", "@elastic/filesaver": "1.1.2", "@elastic/node-crypto": "1.2.1", "@elastic/numeral": "^2.5.1", diff --git a/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap b/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap index 19bdd11212924..087b5db023ef5 100644 --- a/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap +++ b/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap @@ -265,6 +265,7 @@ exports[`#start() returns \`Context\` component 1`] = ` "euiQuickSelect.tenseLabel": "Time tense", "euiQuickSelect.unitLabel": "Time unit", "euiQuickSelect.valueLabel": "Time value", + "euiQuickSelectPopover.buttonLabel": "Date quick select", "euiRecentlyUsed.legend": "Recently used date ranges", "euiRefreshInterval.fullDescriptionOff": [Function], "euiRefreshInterval.fullDescriptionOn": [Function], diff --git a/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx b/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx index c5237b50c2f08..143da92aae897 100644 --- a/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx +++ b/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx @@ -1323,6 +1323,9 @@ export const getEuiContextMapping = (): EuiTokensObject => { 'euiQuickSelect.valueLabel': i18n.translate('core.euiQuickSelect.valueLabel', { defaultMessage: 'Time value', }), + 'euiQuickSelectPopover.buttonLabel': i18n.translate('core.euiQuickSelectPopover.buttonLabel', { + defaultMessage: 'Date quick select', + }), 'euiRecentlyUsed.legend': i18n.translate('core.euiRecentlyUsed.legend', { defaultMessage: 'Recently used date ranges', }), diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts index 45b605d824b63..fd3b925fc3f18 100644 --- a/src/dev/license_checker/config.ts +++ b/src/dev/license_checker/config.ts @@ -84,6 +84,6 @@ export const LICENSE_OVERRIDES = { 'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint '@elastic/ems-client@8.3.3': ['Elastic License 2.0'], - '@elastic/eui@71.0.0': ['SSPL-1.0 OR Elastic License 2.0'], + '@elastic/eui@72.0.0': ['SSPL-1.0 OR Elastic License 2.0'], 'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry }; diff --git a/src/plugins/kibana_react/public/page_template/with_solution_nav.tsx b/src/plugins/kibana_react/public/page_template/with_solution_nav.tsx index c4fa5363461ba..842573b9d8de4 100644 --- a/src/plugins/kibana_react/public/page_template/with_solution_nav.tsx +++ b/src/plugins/kibana_react/public/page_template/with_solution_nav.tsx @@ -9,7 +9,7 @@ import React, { ComponentType, useState } from 'react'; import classNames from 'classnames'; import { useIsWithinBreakpoints } from '@elastic/eui'; -import { EuiPageSideBarProps } from '@elastic/eui/src/components/page/page_side_bar'; +import { EuiPageSideBarProps_Deprecated as EuiPageSideBarProps } from '@elastic/eui/src/components/page/page_side_bar'; import { KibanaPageTemplateSolutionNav, KibanaPageTemplateSolutionNavProps } from './solution_nav'; import { KibanaPageTemplateProps } from '.'; diff --git a/src/plugins/unified_search/public/dataview_picker/dataview_list.test.tsx b/src/plugins/unified_search/public/dataview_picker/dataview_list.test.tsx index fe6601b90d79c..af30a7650c6ca 100644 --- a/src/plugins/unified_search/public/dataview_picker/dataview_list.test.tsx +++ b/src/plugins/unified_search/public/dataview_picker/dataview_list.test.tsx @@ -30,7 +30,8 @@ function selectDataViewPickerOption(instance: ShallowWrapper, selectedLabel: str ? { ...option, checked: 'on' } : { ...option, checked: undefined } ); - return getDataViewPickerList(instance).prop('onChange')!(options, event); + const selectedOption = { label: selectedLabel }; + return getDataViewPickerList(instance).prop('onChange')!(options, event, selectedOption); } describe('DataView list component', () => { diff --git a/src/plugins/unified_search/public/dataview_picker/text_languages_list.test.tsx b/src/plugins/unified_search/public/dataview_picker/text_languages_list.test.tsx index 21b77534f90a4..1624eefac36e0 100644 --- a/src/plugins/unified_search/public/dataview_picker/text_languages_list.test.tsx +++ b/src/plugins/unified_search/public/dataview_picker/text_languages_list.test.tsx @@ -31,7 +31,8 @@ function selectTextLanguagePickerOption(instance: ShallowWrapper, selectedLabel: ? { ...option, checked: 'on' } : { ...option, checked: undefined } ); - return getTextLanguagesPickerList(instance).prop('onChange')!(options, event); + const selectedOption = { label: selectedLabel }; + return getTextLanguagesPickerList(instance).prop('onChange')!(options, event, selectedOption); } describe('Text based languages list component', () => { diff --git a/x-pack/plugins/graph/public/components/field_manager/field_manager.test.tsx b/x-pack/plugins/graph/public/components/field_manager/field_manager.test.tsx index 61682f0a8cc8c..f84822129c7c3 100644 --- a/x-pack/plugins/graph/public/components/field_manager/field_manager.test.tsx +++ b/x-pack/plugins/graph/public/components/field_manager/field_manager.test.tsx @@ -111,7 +111,8 @@ describe('field_manager', () => { act(() => { getInstance().find(FieldPicker).dive().find(EuiSelectable).prop('onChange')!( [{ checked: 'on', label: 'field3' }], - event + event, + { checked: 'on', label: 'field3' } ); }); diff --git a/x-pack/plugins/lens/public/datasources/form_based/layerpanel.test.tsx b/x-pack/plugins/lens/public/datasources/form_based/layerpanel.test.tsx index 86fd5490f383b..2b4fc7f740524 100644 --- a/x-pack/plugins/lens/public/datasources/form_based/layerpanel.test.tsx +++ b/x-pack/plugins/lens/public/datasources/form_based/layerpanel.test.tsx @@ -236,7 +236,8 @@ describe('Layer Data Panel', () => { ? { ...option, checked: 'on' } : { ...option, checked: undefined } ); - return getIndexPatternPickerList(instance).prop('onChange')!(options, event); + const selectedOption = { label: selectedLabel }; + return getIndexPatternPickerList(instance).prop('onChange')!(options, event, selectedOption); } function getIndexPatternPickerOptions(instance: ShallowWrapper) { diff --git a/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap b/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap index c3b0dc07f67ab..f58b60de5fb02 100644 --- a/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap +++ b/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap @@ -53,6 +53,7 @@ exports[`UploadLicense should display a modal when license requires acknowledgem