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

Jump to bottom

Bumping EUI to 71.0.0 #147142

Merged
merged 20 commits into from
Dec 19, 2022
Merged

Bumping EUI to 71.0.0 #147142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
89c139a
Upgrade EUI to version 71.0.0
breehall Dec 6, 2022
996c31a
Remove EuiRangeLevel color overrides
cee-chen Dec 6, 2022
5a99109
[EuiRange] Fix multiple type imports to point to top-level EUI package
cee-chen Dec 6, 2022
5fffc5c
[EuiDualRange] Update typing to account for now-required `min/max` props
cee-chen Dec 6, 2022
6f1dfd2
[EuiRange] Fix `onChange` typing
cee-chen Dec 6, 2022
5c575f9
[EuiDualRange] Fix typing of EuiDualRange's `ref` usage
cee-chen Dec 6, 2022
4578f14
[EuiRange] Updated EuiRange snapshots as it was recently converted to…
breehall Dec 7, 2022
107bc37
[EuiBreadcrumb] Updated EuiBreadcrumb snapshots as the data-test-subj…
breehall Dec 7, 2022
45e329b
[Elastic Charts] Updated snapshots for donut color charts
breehall Dec 7, 2022
408a33d
[EuiText] There was no visual or functional change. There was a chang…
breehall Dec 7, 2022
0ea2bd9
[EuiText] There was no visual or functional change. There was a chang…
breehall Dec 13, 2022
4c1ef08
[EuiRange] Update onChange simulation to use currentTarget to obtain …
breehall Dec 13, 2022
50e5962
Merge main and resolve merge conflicts
breehall Dec 13, 2022
6c73e40
Removed conditional causing incorrect form state
breehall Dec 13, 2022
d950d8e
Merge branch 'main' into eui-71.0.0
kibanamachine Dec 14, 2022
978c60a
[ScatterPlot] Correct tolerance percentage on scatterPlotMatrixColors…
breehall Dec 14, 2022
56e45b1
Merge branch 'eui-71.0.0' of https://github.com/elastic/kibana into e…
breehall Dec 14, 2022
21eaba4
Merge branch 'main' into eui-71.0.0
stratoula Dec 15, 2022
cd832e6
Merge branch 'main' into eui-71.0.0
kibanamachine Dec 19, 2022
985f451
Remove reference to removed EUI var
cee-chen Dec 19, 2022
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
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@
"@elastic/datemath": "5.0.3",
"@elastic/elasticsearch": "npm:@elastic/[email protected]",
"@elastic/ems-client": "8.3.3",
"@elastic/eui": "70.4.0",
"@elastic/eui": "71.0.0",
"@elastic/filesaver": "1.1.2",
"@elastic/node-crypto": "1.2.1",
"@elastic/numeral": "^2.5.1",
Expand Down
1 change: 1 addition & 0 deletions ...core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 8 additions & 0 deletions ...core-chrome-browser-internal/src/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 8 additions & 0 deletions ...olution-exception-list-components/src/list_header/__snapshots__/list_header.test.tsx.snap
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/dev/license_checker/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,6 @@ export const LICENSE_OVERRIDES = {
'[email protected]': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
'@mapbox/[email protected]': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
'@elastic/[email protected]': ['Elastic License 2.0'],
'@elastic/eui@70.4.0': ['SSPL-1.0 OR Elastic License 2.0'],
'@elastic/eui@71.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
'[email protected]': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
};
13 changes: 5 additions & 8 deletions src/plugins/controls/public/range_slider/components/range_slider_control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,20 +15,19 @@ import {
EuiLoadingSpinner,
EuiFlexGroup,
EuiFlexItem,
EuiDualRange,
} from '@elastic/eui';
import { useReduxEmbeddableContext } from '@kbn/presentation-util-plugin/public';

import { rangeSliderReducers } from '../range_slider_reducers';
import { RangeSliderReduxState } from '../types';
import { RangeSliderPopover } from './range_slider_popover';
import { RangeSliderPopover, EuiDualRangeRef } from './range_slider_popover';

import './range_slider.scss';

const INVALID_CLASS = 'rangeSliderAnchor__fieldNumber--invalid';

export const RangeSliderControl: FC = () => {
const rangeRef = useRef<EuiDualRange | null>(null);
const rangeRef = useRef<EuiDualRangeRef>(null);
const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);

// Controls Services Context
Expand Down Expand Up @@ -143,13 +142,11 @@ export const RangeSliderControl: FC = () => {
anchorPosition="downCenter"
attachToAnchor={false}
disableFocusTrap
onPanelResize={() => {
if (rangeRef?.current) {
rangeRef.current.onResize();
}
onPanelResize={(width) => {
rangeRef.current?.onResize(width);
}}
>
<RangeSliderPopover />
<RangeSliderPopover rangeRef={rangeRef} />
</EuiInputPopover>
);
};
13 changes: 8 additions & 5 deletions src/plugins/controls/public/range_slider/components/range_slider_popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
* Side Public License, v 1.
*/

import React, { FC, useEffect, useRef, useState } from 'react';
import React, { FC, ComponentProps, Ref, useEffect, useState } from 'react';
import useMount from 'react-use/lib/useMount';

import {
Expand All @@ -18,6 +18,7 @@ import {
EuiToolTip,
EuiButtonIcon,
} from '@elastic/eui';
import type { EuiDualRangeClass } from '@elastic/eui/src/components/form/range/dual_range';
import { useReduxEmbeddableContext } from '@kbn/presentation-util-plugin/public';

import { RangeValue } from '../../../common/range_slider/types';
Expand All @@ -26,9 +27,11 @@ import { rangeSliderReducers } from '../range_slider_reducers';
import { RangeSliderReduxState } from '../types';
import { RangeSliderStrings } from './range_slider_strings';

export const RangeSliderPopover: FC = () => {
// Unfortunately, wrapping EuiDualRange in `withEuiTheme` has created this annoying/verbose typing
Copy link
Contributor

Choose a reason for hiding this comment

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

Is there anything we can do on our side to get rid of these complex types? Maybe a forward ref? Or some other way of getting a handle on the class?

Copy link
Member

@cee-chen cee-chen Dec 14, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Honestly? Without knowing exactly why you're calling the internal EuiDualRange's internal onResize class method... my recommendation is to not do that 😅 (which removes the need for the ref entirely, and thus the ref typing shenanigans).

If we ever convert EuiRange/EuiDualRange to functional non-class components as a tech debt item, you'd lose access to this API entirely (it's not something we're deliberately exposing or documenting as a consumer API). I did create a regression test to ensure we continued exposing onResize via ref, just for this specific Kibana usage of it, but honestly, we'd prefer y'all not reach for it at all, or figure out what problem it's solving and have us try to solve it in a less technically hacky way.

I don't have the context as to why that original call was added or what it's doing - but it's definitely a code smell that makes me think either this usage of it is trying to do things EuiDualRange is not meant to do, or is super custom and undoing things EuiDualRange does and then re-doing them later (also not great).

Copy link
Contributor

Choose a reason for hiding this comment

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

If I remember correctly, this usage is due to us not being able to use EuiInputPopover, but still wanting to have the popover to be tied to the width of the input. I can't exactly remember why we couldn't use EuiInputPopover though.

I wonder if we would run into any regressions by removing that call entirely? @cqliu1, do you remember why we had to use EuiPopover?

export type EuiDualRangeRef = EuiDualRangeClass & ComponentProps<typeof EuiDualRange>;

export const RangeSliderPopover: FC<{ rangeRef?: Ref<EuiDualRangeRef> }> = ({ rangeRef }) => {
const [fieldFormatter, setFieldFormatter] = useState(() => (toFormat: string) => toFormat);
const rangeRef = useRef<EuiDualRange | null>(null);

// Controls Services Context
const {
Expand Down Expand Up @@ -143,8 +146,8 @@ export const RangeSliderPopover: FC = () => {
<EuiFlexItem>
<EuiDualRange
id={id}
min={hasAvailableRange ? rangeSliderMin : undefined}
max={hasAvailableRange ? rangeSliderMax : undefined}
min={hasAvailableRange ? rangeSliderMin : 0}
max={hasAvailableRange ? rangeSliderMax : 100}
Copy link
Contributor

Choose a reason for hiding this comment

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

Tested this by getting the range slider control into a no-data state, and it looks the same as it did before. 👌

onChange={([newLowerBound, newUpperBound]) => {
const updatedLowerBound =
typeof newLowerBound === 'number' ? String(newLowerBound) : value[0];
Expand Down
6 changes: 3 additions & 3 deletions src/plugins/controls/public/time_slider/components/time_slider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@
*/

import React, { FC, useRef } from 'react';
import { EuiInputPopover, EuiDualRange } from '@elastic/eui';
import { EuiInputPopover } from '@elastic/eui';
import { useReduxEmbeddableContext } from '@kbn/presentation-util-plugin/public';
import { timeSliderReducers } from '../time_slider_reducers';
import { TimeSliderReduxState } from '../types';
import { TimeSliderPopoverButton } from './time_slider_popover_button';
import { TimeSliderPopoverContent } from './time_slider_popover_content';
import { TimeSliderPopoverContent, EuiDualRangeRef } from './time_slider_popover_content';
import { FROM_INDEX, TO_INDEX } from '../time_utils';
import { getRoundedTimeRangeBounds } from '../time_slider_selectors';

Expand Down Expand Up @@ -46,7 +46,7 @@ export const TimeSlider: FC<Props> = (props: Props) => {
return state.componentState.isOpen;
});

const rangeRef = useRef<EuiDualRange>(null);
const rangeRef = useRef<EuiDualRangeRef>(null);

const onPanelResize = (width?: number) => {
rangeRef.current?.onResize(width);
Expand Down
18 changes: 14 additions & 4 deletions src/plugins/controls/public/time_slider/components/time_slider_popover_content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,19 @@
*/

import { i18n } from '@kbn/i18n';
import React, { Ref } from 'react';
import { EuiButtonIcon, EuiDualRange, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
import { EuiRangeTick } from '@elastic/eui/src/components/form/range/range_ticks';
import React, { Ref, ComponentProps } from 'react';
import {
EuiButtonIcon,
EuiDualRange,
EuiRangeTick,
EuiFlexGroup,
EuiFlexItem,
EuiToolTip,
} from '@elastic/eui';
import type { EuiDualRangeClass } from '@elastic/eui/src/components/form/range/dual_range';

// Unfortunately, wrapping EuiDualRange in `withEuiTheme` has created a super annoying/verbose typing
export type EuiDualRangeRef = EuiDualRangeClass & ComponentProps<typeof EuiDualRange>;

interface Props {
value: [number, number];
Expand All @@ -19,7 +29,7 @@ interface Props {
ticks: EuiRangeTick[];
timeRangeMin: number;
timeRangeMax: number;
rangeRef?: Ref<EuiDualRange>;
rangeRef?: Ref<EuiDualRangeRef>;
}

export function TimeSliderPopoverContent(props: Props) {
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/controls/public/time_slider/time_slider_reducers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

import { PayloadAction } from '@reduxjs/toolkit';
import { WritableDraft } from 'immer/dist/types/types-external';
import { EuiRangeTick } from '@elastic/eui/src/components/form/range/range_ticks';
import { EuiRangeTick } from '@elastic/eui';
import { TimeSliderReduxState } from './types';

export const timeSliderReducers = {
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/controls/public/time_slider/time_utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
*/

import moment from 'moment-timezone';
import { EuiRangeTick } from '@elastic/eui/src/components/form/range/range_ticks';
import { EuiRangeTick } from '@elastic/eui';
import { calcAutoIntervalNear } from '@kbn/data-plugin/common';

const MAX_TICKS = 20; // eui range has hard limit of 20 ticks and throws when exceeded
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/controls/public/time_slider/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
*/

import { ReduxEmbeddableState } from '@kbn/presentation-util-plugin/public';
import { EuiRangeTick } from '@elastic/eui/src/components/form/range/range_ticks';
import { EuiRangeTick } from '@elastic/eui';

import { ControlOutput } from '../types';
import { TimeSliderControlEmbeddableInput } from '../../common/time_slider/types';
Expand Down
10 changes: 4 additions & 6 deletions src/plugins/es_ui_shared/static/forms/components/fields/range_field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
*/

import React, { useCallback } from 'react';
import { EuiFormRow, EuiRange } from '@elastic/eui';
import { EuiFormRow, EuiRange, EuiRangeProps } from '@elastic/eui';

import { FieldHook, getFieldValidityAndErrorMessage } from '../../hook_form_lib';

Expand All @@ -22,11 +22,9 @@ export const RangeField = ({ field, euiFieldProps = {}, idAria, ...rest }: Props
const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
const { onChange: onFieldChange } = field;

const onChange = useCallback(
(e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) => {
const event = { ...e, value: `${e.currentTarget.value}` } as unknown as React.ChangeEvent<{
value: string;
}>;
const onChange: EuiRangeProps['onChange'] = useCallback(
(e) => {
const event = { ...e, value: `${e.currentTarget.value}` };
onFieldChange(event);
},
[onFieldChange]
Expand Down
2 changes: 2 additions & 0 deletions ...plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.tsx.snap
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/plugins/input_control_vis/public/components/vis/range_control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export class RangeControl extends PureComponent<RangeControlProps, RangeControlS

renderControl() {
if (!this.props.control.isEnabled()) {
return <ValidatedDualRange disabled showInput />;
return <ValidatedDualRange disabled showInput min={0} max={100} />;
}

const decimalPlaces = _.get(this.props, 'control.options.decimalPlaces', 0);
Expand Down
7 changes: 2 additions & 5 deletions src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,8 @@

import { i18n } from '@kbn/i18n';
import React, { Component, ReactNode } from 'react';
import { EuiFormRow, EuiDualRange } from '@elastic/eui';
import { EuiFormRow, EuiDualRange, EuiDualRangeProps } from '@elastic/eui';
import { EuiFormRowDisplayKeys } from '@elastic/eui/src/components/form/form_row/form_row';
import { EuiDualRangeProps } from '@elastic/eui/src/components/form/range/dual_range';
import { isRangeValid } from './is_range_valid';

// Wrapper around EuiDualRange that ensures onChange callback is only called when range value
Expand All @@ -19,14 +18,12 @@ import { isRangeValid } from './is_range_valid';
export type Value = EuiDualRangeProps['value'];
export type ValueMember = EuiDualRangeProps['value'][0];

interface Props extends Omit<EuiDualRangeProps, 'value' | 'onChange' | 'min' | 'max'> {
interface Props extends Omit<EuiDualRangeProps, 'value' | 'onChange'> {
value?: Value;
allowEmptyRange?: boolean;
label?: string | ReactNode;
formRowDisplay?: EuiFormRowDisplayKeys;
onChange?: (val: [string, string]) => void;
min?: number;
max?: number;
}

interface State {
Expand Down
4 changes: 1 addition & 3 deletions src/plugins/vis_default_editor/public/components/controls/precision.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,7 @@ function PrecisionParamEditor({ agg, value, setValue }: AggParamEditorProps<numb
min={1}
max={services.uiSettings.get('visualization:tileMap:maxPrecision')}
value={value || ''}
onChange={(ev: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) =>
setValue(Number(ev.currentTarget.value))
}
onChange={(ev) => setValue(Number(ev.currentTarget.value))}
data-test-subj={`visEditorMapPrecision${agg.id}`}
showValue
compressed
Expand Down
Loading