elastic / elastic/eui

[ESLint] Resolve deprecation warnings

Open
#8,350 4 comments 0 reactions 0 assignees View on GitHub
help wanted low hanging fruit tech debt
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

## Description

This issue is a follow-up to [this PR](https://github.com/elastic/eui/pull/8198).

After implementing [eslint-plugin-deprecation](https://www.npmjs.com/package/eslint-plugin-deprecation) there are linting warnings left around deprecated code.
We want to replace the deprecated usages with the expected alternatives **where already possible** to reduce the warnings.

>[!NOTE]
The are warnings around `EuiSelectFilterItem` being deprecated. For `EuiComboBox` this will be handled by updating it with `EuiSelectable` in [this separate issue](https://github.com/elastic/eui/issues/2841).

Guidance for picking up this task:
- Address the smaller deprecations, that can be cleaned up now, in a straightforward way.
- Anything larger that would take substantial effort is moved to a separate task.

## Additional insight

### ESLint output

```
eui/packages/eui/src/components/breadcrumbs/_breadcrumb_content.tsx
44:3 warning 'color' is deprecated. - if a custom color is wanted, use the `css` prop to pass custom css deprecation/deprecation
150:7 warning 'color' is deprecated. - if a custom color is wanted, use the `css` prop to pass custom css deprecation/deprecation

eui/packages/eui/src/components/button/button_group/button_group.tsx
154:3 warning 'name' is deprecated. No longer needed. You can safely remove this prop entirely deprecation/deprecation

eui/packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
205:8 warning 'EuiFilterSelectItem' is deprecated. - Use EuiSelectable instead deprecation/deprecation

eui/packages/eui/src/components/datagrid/controls/data_grid_toolbar.stories.tsx
269:41 warning 'PlayFunctionContext' is deprecated. Use {@link StoryContext } instead deprecation/deprecation
290:41 warning 'PlayFunctionContext' is deprecated. Use {@link StoryContext } instead deprecation/deprecation
316:35 warning 'PlayFunctionContext' is deprecated. Use {@link StoryContext } instead deprecation/deprecation
328:41 warning 'PlayFunctionContext' is deprecated. Use {@link StoryContext } instead deprecation/deprecation
348:35 warning 'PlayFunctionContext' is deprecated. Use {@link StoryContext } instead deprecation/deprecation

eui/packages/eui/src/components/datagrid/controls/full_screen_selector.stories.tsx
60:35 warning 'PlayFunctionContext' is deprecated. Use {@link StoryContext } instead deprecation/deprecation

eui/packages/eui/src/components/datagrid/data_grid.stories.tsx
153:35 warning 'PlayFunctionContext' is deprecated. Use {@link StoryContext } instead deprecation/deprecation
208:35 warning 'PlayFunctionContext' is deprecated. Use {@link StoryContext } instead deprecation/deprecation

eui/packages/eui/src/components/drag_and_drop/drag_drop_context.stories.tsx
117:35 warning 'PlayFunctionContext' is deprecated. Use {@link StoryContext } instead deprecation/deprecation

eui/packages/eui/src/components/filter_group/filter_select_item.test.tsx
17:29 warning 'EuiFilterSelectItem' is deprecated. - Use EuiSelectable instead deprecation/deprecation
20:35 warning 'EuiFilterSelectItem' is deprecated. - Use EuiSelectable instead deprecation/deprecation

eui/packages/eui/src/components/filter_group/filter_select_item.tsx
192:3 warning 'EuiFilterSelectItemClass' is deprecated. - Use EuiSelectable instead deprecation/deprecation

eui/packages/eui/src/components/filter_group/index.ts
19:10 warning 'EuiFilterSelectItem' is deprecated. - Use EuiSelectable instead deprecation/deprecation
19:10 warning 'EuiFilterSelectItem' is deprecated. - Use EuiSelectable instead deprecation/deprecation

eui/packages/eui/src/components/markdown_editor/markdown_actions.ts
271:35 warning 'execCommand' is deprecated. deprecation/deprecation

eui/packages/eui/src/components/markdown_editor/markdown_editor.test.tsx
286:14 warning 'execCommand' is deprecated. deprecation/deprecation

eui/packages/eui/src/components/popover/popover.tsx
638:7 warning 'hasDragDrop' is deprecated. - use `usePortal` prop on children `EuiDraggable` components instead deprecation/deprecation

eui/packages/eui/src/services/color_picker/index.ts
10:31 warning 'useColorStopsState' is deprecated. deprecation/deprecation
10:31 warning 'useColorStopsState' is deprecated. deprecation/deprecation

eui/packages/eui/src/services/copy/copy_to_clipboard.ts
42:17 warning 'execCommand' is deprecated. deprecation/deprecation

eui/packages/eui/src/services/index.ts
66:31 warning 'useColorStopsState' is deprecated. deprecation/deprecation
66:31 warning 'useColorStopsState' is deprecated. deprecation/deprecation

✖ 29 problems (0 errors, 29 warnings)
```

### "`'color'` is deprecated" warning

Looks like `color` can be safely removed (no uses in Kibana or cloud). No mention in the https://github.com/elastic/eui/issues/1469. Verify the impact.

### `PlayFunctionContext` warning

Replace with `StoryContext`. Drop-in replacement.

### "Use `EuiSelectable` instead" warning

These warnings can only be removed with refactoring components to use `EuiSelectable`:

- `EuiComboBox` - https://github.com/elastic/eui/issues/2841
- `EuiFilterGroup` - requires a task

Skip for now.

### "`hasDragDrop` is deprecated" warning

Looks like `hasDragDrop` can be safely removed (no uses in Kibana or cloud). It is mentioned in https://github.com/elastic/eui/issues/1469.

### "`execCommand` is deprecated" warning

There is no clear, drop-in replacement to `execCommand` but it's recommended to move away from it if possible because the support can be dropped at any time ([MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand)).

Functionalities needed and their replacements:

- `insertText` (`EuiMarkdown`)- alternative is [Selection API](https://developer.mozilla.org/en-US/docs/Web/API/Selection) and [Range API](https://developer.mozilla.org/en-US/docs/Web/API/Range)
- `copy` (`copy_to_clipboard.ts`)- alternative is [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API)

Requires separate tasks to refactor the code and verify the functionality is working as expected.

### "`useColorStopsState` is deprecated" warning

Looks like `useColorStopsState` can be safely removed (no uses in Kibana or cloud). No mention in the https://github.com/elastic/eui/issues/1469. Verify the impact before removing.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.