[ESLINT] eslint-deprecation plugin implementation (#6914) #8198

Cedgo1997 · 2024-12-03T00:56:37Z

Summary

This PR provides:

The implementation of the eslint-plugin-deprecation. for [ESLint] Add a deprecation plugin to warn on deprecated code #6914 issue.
Replacement for every deprecated alias with updated or newer.

This PR doesn't contain:

Fixes to deprecated code marked inside the code with @deprecated decorator.
Fixes to deprecated methods or implementation that may modify the software behavior.

Implementation:

eslint-plugin-deprecation v2.0.0 (v3.0.0 is not compatible)
.eslintrc.js updated with new rule and plugin added to handle deprecation warns:

Replaced/updated code

Replaced Deprecated Aliases:

toBeCalled -> toHaveBeenCalled
toBeCalledTimes -> toHaveBeenCalledTimes
toBeCalledWith -> toHaveBeenCalledWith

Replaced css style declarations:

clip -> clipPath
webkitUserSelect -> userSelect

Replaced deprecated type declarations:

HTMLTableHeaderCellElement -> HTMLTableCellElement

Others replacements:

Replaced createStore with legacy_createStore as adviced.
Replaced ClientRect with DomRect, ClientRect inherits from DOMRect, which is perfectly compatible, but less specific.
Using JSX imported from React instead of global JSX.
Added new ReactChild type declaration in src/components/common.js to handle ReactChild deprecation alternative (Type was extracted by original declaration from react).

Pending deprecate code (Recommended to open a new issue):

color prop from _breadcrumb_content.tsx.
useColorStopsState reported as deprecated.
The document.execCommand is reported as deprecated, however, there isn't a known alternative to it.
hasDragDrop from popover.tsx.
Goal from elastic_charts mark as deprecated by plugin but alternative may require further analysis.
EuiFilterSelectItem and EuiFilterSelectItemClass are reported as deprecated.
PlayFunctionContext from '@storybook/csf' is marked as deprecated.
name prop from button_group.tsx.

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

Browser QA
~~- [ ] Checked in both light and dark modes~~
- [ ] Checked in mobile
- [ ] Checked in Chrome, Safari, Edge, and Firefox
~~- [ ] Checked for accessibility including keyboard-only and screenreader modes~~
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- Checked Code Sandbox works for any docs examples
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately.
- If applicable, added the breaking change issue label (and filled out the breaking change checklist)
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

… errors

… alternatives. - Self declarated deprecated occurrences were not replaced. - Hooks, components, context and sections of the code that can be potentially harmfull if changed were not replaced, but marked as pending on PR.

cla-checker-service · 2024-12-03T00:56:41Z

💚 CLA has been signed

github-actions · 2024-12-03T00:56:48Z

👋 Since this is a community submitted pull request, a Buildkite build has not been started automatically. Would an Elastic organization member please verify the contents of this pull request and kick off a build manually?

Cedgo1997 · 2024-12-03T01:06:00Z

Hello!
I've just created this PR aiming to solve this issue (and many more). I just sign the Contributor Agreement, is there any other thing I need to do before expecting a review?
Thanks in advance!

weronikaolejniczak · 2025-01-16T11:30:12Z

@Cedgo1997 thank you so much for your contribution and for signing the CLA! There is nothing that you have to do more! I'll review your PR soon 💚

weronikaolejniczak · 2025-01-27T16:07:33Z

packages/docusaurus-theme/src/theme/MDXContent/index.tsx

@@ -12,7 +12,7 @@ import type { WrapperProps } from '@docusaurus/types';

 type Props = WrapperProps<typeof MDXContentType>;

-const MDXContent = (props: Props): JSX.Element => (
+const MDXContent = (props: Props): React.JSX.Element => (


@Cedgo1997 how about we import JSX from react as it's done in other files for consistency?

Same in:

packages/website/src/pages/index.tsx

packages/docusaurus-theme/src/theme/PaginatorNavLink/index.tsx

packages/docusaurus-theme/src/theme/TOCCollapsible/CollapseButton/index.tsx

weronikaolejniczak · 2025-01-27T16:12:56Z

packages/eui/src/services/index.ts

@@ -63,6 +63,7 @@ export {
  wcagContrastMin,
 } from './color';
 export type { HSV } from './color';
+// eslint-disable-next-line deprecation/deprecation


@Cedgo1997 because we've set the rule to warn and not error, maybe we can remove this disable comment? That way, it will show up in the list and we will know to address it meaningfully?

Same in: packages/eui/src/services/color_picker/index.ts

weronikaolejniczak · 2025-01-27T16:19:30Z

packages/eui/src-docs/src/store/configure_store.js

@@ -1,4 +1,4 @@
-import { applyMiddleware, createStore, compose } from 'redux';


@Cedgo1997 following the same logic as with the ESLint disable comments, maybe it'd be better to leave createStore warning as is to highlight the need to migrate to Redux Toolkit (that is strongly recommended by the Redux team)?

weronikaolejniczak · 2025-01-27T16:21:42Z

packages/eui/changelogs/upcoming/6914.md

@Cedgo1997 the changes on this PR are purely for development purposes (code quality). They do not contain any bug fixes, functionalities. Consumers don't have to be informed about them through changelog. So we can remove this file and add to the PR skip-changelog label to unblock the CI checks.

weronikaolejniczak · 2025-01-27T16:58:43Z

packages/eui/src/components/common.ts

+/**
+ * Replace deprecated type from React as its marked as
+ * not relevant by eslint deprecation plugin.
+ * @example
+ * ```ts
+ * export function processStringToChildren(
+ *   input: string,
+ *   values: RenderableValues,
+ *   i18nMappingFunc?: (token: string) => string
+ *   ): string | ReactChild[]
+ * ```
+ */
+export type ReactChild =
+  | string
+  | number
+  | ReactElement<any, string | JSXElementConstructor<any>>;


@Cedgo1997 The deprecation note says:

This type is not relevant when using React. Inline the type instead to make the intent clear.

children are commonly typed as ReactNode which is a bit broader type including boolean and null but we can pass anything to children. If there are any type errors because of the change, I'd inline ReactElement | string | number in all the places where previously ReactChild has been used, as suggested by the deprecation note.

weronikaolejniczak · 2025-01-27T17:01:47Z

packages/eui/src/services/copy/copy_to_clipboard.ts

  // used to preserve spaces and line breaks
  textElement.style.whiteSpace = 'pre';
  // do not inherit user-select (it may be `none`)
-  textElement.style.webkitUserSelect = 'text';
+  textElement.style.userSelect = 'text';


@Cedgo1997 userSelect is already defined below on the line 26. We can just remove the whole line.

Cedgo1997 added 3 commits November 29, 2024 19:46

[ESLINT] Implementing deprecation plugin v2.0.0 (elastic#6914)

7e4d476

[ESLINT] Fix: Adjust eslint deprecation rule to warn instead of throw…

4d55f93

… errors

Cedgo1997 requested a review from a team as a code owner December 3, 2024 00:56

github-actions bot added the community contribution label Dec 3, 2024

[ADD] Changelog

11ee9ef

Cedgo1997 mentioned this pull request Dec 15, 2024

[ESLint] Add a deprecation plugin to warn on deprecated code #6914

Open

weronikaolejniczak self-assigned this Jan 16, 2025

weronikaolejniczak reviewed Jan 27, 2025

View reviewed changes

weronikaolejniczak linked an issue Jan 27, 2025 that may be closed by this pull request

[ESLint] Add a deprecation plugin to warn on deprecated code #6914

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ESLINT] eslint-deprecation plugin implementation (#6914) #8198

[ESLINT] eslint-deprecation plugin implementation (#6914) #8198

Cedgo1997 commented Dec 3, 2024 •

edited

Loading

cla-checker-service bot commented Dec 3, 2024 •

edited

Loading

github-actions bot commented Dec 3, 2024

Cedgo1997 commented Dec 3, 2024

weronikaolejniczak commented Jan 16, 2025

weronikaolejniczak Jan 27, 2025 •

edited

Loading

weronikaolejniczak Jan 27, 2025

weronikaolejniczak Jan 27, 2025

weronikaolejniczak Jan 27, 2025

weronikaolejniczak Jan 27, 2025 •

edited

Loading

weronikaolejniczak Jan 27, 2025

		@@ -1,4 +1,4 @@
		import { applyMiddleware, createStore, compose } from 'redux';

[ESLINT] eslint-deprecation plugin implementation (#6914) #8198

Are you sure you want to change the base?

[ESLINT] eslint-deprecation plugin implementation (#6914) #8198

Conversation

Cedgo1997 commented Dec 3, 2024 • edited Loading

Summary

Implementation:

Replaced/updated code

Replaced Deprecated Aliases:

Replaced css style declarations:

Replaced deprecated type declarations:

Others replacements:

Pending deprecate code (Recommended to open a new issue):

QA

General checklist

cla-checker-service bot commented Dec 3, 2024 • edited Loading

github-actions bot commented Dec 3, 2024

Cedgo1997 commented Dec 3, 2024

weronikaolejniczak commented Jan 16, 2025

weronikaolejniczak Jan 27, 2025 • edited Loading

Choose a reason for hiding this comment

weronikaolejniczak Jan 27, 2025

Choose a reason for hiding this comment

weronikaolejniczak Jan 27, 2025

Choose a reason for hiding this comment

weronikaolejniczak Jan 27, 2025

Choose a reason for hiding this comment

weronikaolejniczak Jan 27, 2025 • edited Loading

Choose a reason for hiding this comment

weronikaolejniczak Jan 27, 2025

Choose a reason for hiding this comment

Cedgo1997 commented Dec 3, 2024 •

edited

Loading

cla-checker-service bot commented Dec 3, 2024 •

edited

Loading

weronikaolejniczak Jan 27, 2025 •

edited

Loading

weronikaolejniczak Jan 27, 2025 •

edited

Loading