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.

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

Resolve false positives with eslint no color rule #204848

Conversation

eokoneyo
Copy link
Contributor

@eokoneyo eokoneyo commented Dec 18, 2024

Summary

Fixes error in lint rule that resulted in false positives, also added a test case to ascertain the issue has been fixed. For context the error happens in instances where specific CSS declarations that are derivatives of shorthand declarations that can apply color to the HTML element or text nodes where found, because the check we had simply checked if we got a string back instead of asserting that it was a falsy value.

Before

Screenshot 2024-12-17 at 10 27 18 PM

Screenshot 2024-12-17 at 8 03 33 PM

After

Screenshot 2024-12-19 at 10 25 41 Screenshot 2024-12-19 at 10 23 33

@eokoneyo eokoneyo self-assigned this Dec 18, 2024
@eokoneyo eokoneyo requested a review from a team as a code owner December 18, 2024 23:39
@eokoneyo eokoneyo added the Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience) label Dec 18, 2024
@elasticmachine
Copy link
Contributor

Pinging @elastic/appex-sharedux (Team:SharedUX)

@eokoneyo eokoneyo added release_note:skip Skip the PR/issue when compiling release notes backport:prev-minor Backport to (8.x) the previous minor version (i.e. one version back from main) labels Dec 18, 2024
Comment on lines +250 to +253
<EuiCode css={css\`
border-top: none;
border-radius: 0 0 6px 6px;
\`}>This is a test</EuiCode>
Copy link
Contributor Author

@eokoneyo eokoneyo Dec 18, 2024

Choose a reason for hiding this comment

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

Previously code like this would throw an error because of how we check if properties that set colors are provided hardcoded values, please read the PR description for further explanation.

@eokoneyo eokoneyo changed the title fixes issue that resulted in false positives Resolve false positives with eslint no color rule Dec 18, 2024
@eokoneyo eokoneyo force-pushed the chore/fix-issue-causing-false-positive-in-eslint-rule branch from 4973823 to 4922aad Compare December 19, 2024 00:05
@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

✅ unchanged

History

cc @eokoneyo

@eokoneyo eokoneyo merged commit 7cbd9b0 into elastic:main Dec 19, 2024
8 checks passed
@eokoneyo eokoneyo deleted the chore/fix-issue-causing-false-positive-in-eslint-rule branch December 19, 2024 10:26
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/12410835202

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Dec 19, 2024
## Summary

Fixes error in lint rule that resulted in false positives, also added a
test case to ascertain the issue has been fixed. For context the error
happens in instances where specific CSS declarations that are
derivatives of shorthand declarations that can apply color to the HTML
element or text nodes where found, because the check we had simply
checked if we got a string back instead of asserting that it was a falsy
value.

## Before
![Screenshot 2024-12-17 at 10 27
18 PM](https://github.com/user-attachments/assets/b0918d37-22f6-4778-a6d0-2cafe11b18e1)

![Screenshot 2024-12-17 at 8 03
33 PM](https://github.com/user-attachments/assets/d70c733d-e88f-42d6-956a-e266d53724f9)

## After

<img width="755" alt="Screenshot 2024-12-19 at 10 25 41"
src="https://github.com/user-attachments/assets/3e334785-d657-46ac-86c7-59d37f176c86"
/>

<img width="915" alt="Screenshot 2024-12-19 at 10 23 33"
src="https://github.com/user-attachments/assets/87860189-92c5-4807-b5b0-2520b9e75778"
/>

<!--
### Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

- [ ] 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
- [ ] 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 was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

### Identify risks

Does this PR introduce any risks? For example, consider risks like hard
to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified
risk. Invite stakeholders and evaluate how to proceed before merging.

- [ ] [See some risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)
- [ ] ...

-->

(cherry picked from commit 7cbd9b0)
@kibanamachine
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

kibanamachine added a commit that referenced this pull request Dec 19, 2024
…04906)

# Backport

This will backport the following commits from `main` to `8.x`:
- [Resolve false positives with eslint no color rule
(#204848)](#204848)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Eyo O.
Eyo","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-12-19T10:26:48Z","message":"Resolve
false positives with eslint no color rule (#204848)\n\n##
Summary\r\n\r\nFixes error in lint rule that resulted in false
positives, also added a\r\ntest case to ascertain the issue has been
fixed. For context the error\r\nhappens in instances where specific CSS
declarations that are\r\nderivatives of shorthand declarations that can
apply color to the HTML\r\nelement or text nodes where found, because
the check we had simply\r\nchecked if we got a string back instead of
asserting that it was a falsy\r\nvalue.\r\n\r\n## Before\r\n![Screenshot
2024-12-17 at 10
27\r\n18 PM](https://github.com/user-attachments/assets/b0918d37-22f6-4778-a6d0-2cafe11b18e1)\r\n\r\n![Screenshot
2024-12-17 at 8
03\r\n33 PM](https://github.com/user-attachments/assets/d70c733d-e88f-42d6-956a-e266d53724f9)\r\n\r\n##
After\r\n\r\n<img width=\"755\" alt=\"Screenshot 2024-12-19 at 10 25
41\"\r\nsrc=\"https://github.com/user-attachments/assets/3e334785-d657-46ac-86c7-59d37f176c86\"\r\n/>\r\n\r\n\r\n<img
width=\"915\" alt=\"Screenshot 2024-12-19 at 10 23
33\"\r\nsrc=\"https://github.com/user-attachments/assets/87860189-92c5-4807-b5b0-2520b9e75778\"\r\n/>\r\n\r\n<!--\r\n###
Checklist\r\n\r\nCheck the PR satisfies following conditions.
\r\n\r\nReviewers should verify this PR satisfies this list as
well.\r\n\r\n- [ ] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[
]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials\r\n- [ ] [Unit
or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [ ] If a plugin
configuration key changed, check if it needs to be\r\nallowlisted in the
cloud and added to the
[docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\r\n-
[ ] This was checked for breaking HTTP API changes, and any
breaking\r\nchanges have been approved by the breaking-change committee.
The\r\n`release_note:breaking` label should be applied in these
situations.\r\n- [ ] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [ ] The PR description includes
the appropriate Release Notes section,\r\nand the correct
`release_note:*` label is applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n###
Identify risks\r\n\r\nDoes this PR introduce any risks? For example,
consider risks like hard\r\nto test bugs, performance regression,
potential of data loss.\r\n\r\nDescribe the risk, its severity, and
mitigation for each identified\r\nrisk. Invite stakeholders and evaluate
how to proceed before merging.\r\n\r\n- [ ] [See some
risk\r\nexamples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)\r\n-
[ ]
...\r\n\r\n\r\n-->","sha":"7cbd9b0c1d19358470ad4c8a36dcc0a02b46f532","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:SharedUX","backport:prev-minor"],"title":"Resolve
false positives with eslint no color rule
","number":204848,"url":"https://github.com/elastic/kibana/pull/204848","mergeCommit":{"message":"Resolve
false positives with eslint no color rule (#204848)\n\n##
Summary\r\n\r\nFixes error in lint rule that resulted in false
positives, also added a\r\ntest case to ascertain the issue has been
fixed. For context the error\r\nhappens in instances where specific CSS
declarations that are\r\nderivatives of shorthand declarations that can
apply color to the HTML\r\nelement or text nodes where found, because
the check we had simply\r\nchecked if we got a string back instead of
asserting that it was a falsy\r\nvalue.\r\n\r\n## Before\r\n![Screenshot
2024-12-17 at 10
27\r\n18 PM](https://github.com/user-attachments/assets/b0918d37-22f6-4778-a6d0-2cafe11b18e1)\r\n\r\n![Screenshot
2024-12-17 at 8
03\r\n33 PM](https://github.com/user-attachments/assets/d70c733d-e88f-42d6-956a-e266d53724f9)\r\n\r\n##
After\r\n\r\n<img width=\"755\" alt=\"Screenshot 2024-12-19 at 10 25
41\"\r\nsrc=\"https://github.com/user-attachments/assets/3e334785-d657-46ac-86c7-59d37f176c86\"\r\n/>\r\n\r\n\r\n<img
width=\"915\" alt=\"Screenshot 2024-12-19 at 10 23
33\"\r\nsrc=\"https://github.com/user-attachments/assets/87860189-92c5-4807-b5b0-2520b9e75778\"\r\n/>\r\n\r\n<!--\r\n###
Checklist\r\n\r\nCheck the PR satisfies following conditions.
\r\n\r\nReviewers should verify this PR satisfies this list as
well.\r\n\r\n- [ ] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[
]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials\r\n- [ ] [Unit
or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [ ] If a plugin
configuration key changed, check if it needs to be\r\nallowlisted in the
cloud and added to the
[docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\r\n-
[ ] This was checked for breaking HTTP API changes, and any
breaking\r\nchanges have been approved by the breaking-change committee.
The\r\n`release_note:breaking` label should be applied in these
situations.\r\n- [ ] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [ ] The PR description includes
the appropriate Release Notes section,\r\nand the correct
`release_note:*` label is applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n###
Identify risks\r\n\r\nDoes this PR introduce any risks? For example,
consider risks like hard\r\nto test bugs, performance regression,
potential of data loss.\r\n\r\nDescribe the risk, its severity, and
mitigation for each identified\r\nrisk. Invite stakeholders and evaluate
how to proceed before merging.\r\n\r\n- [ ] [See some
risk\r\nexamples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)\r\n-
[ ]
...\r\n\r\n\r\n-->","sha":"7cbd9b0c1d19358470ad4c8a36dcc0a02b46f532"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/204848","number":204848,"mergeCommit":{"message":"Resolve
false positives with eslint no color rule (#204848)\n\n##
Summary\r\n\r\nFixes error in lint rule that resulted in false
positives, also added a\r\ntest case to ascertain the issue has been
fixed. For context the error\r\nhappens in instances where specific CSS
declarations that are\r\nderivatives of shorthand declarations that can
apply color to the HTML\r\nelement or text nodes where found, because
the check we had simply\r\nchecked if we got a string back instead of
asserting that it was a falsy\r\nvalue.\r\n\r\n## Before\r\n![Screenshot
2024-12-17 at 10
27\r\n18 PM](https://github.com/user-attachments/assets/b0918d37-22f6-4778-a6d0-2cafe11b18e1)\r\n\r\n![Screenshot
2024-12-17 at 8
03\r\n33 PM](https://github.com/user-attachments/assets/d70c733d-e88f-42d6-956a-e266d53724f9)\r\n\r\n##
After\r\n\r\n<img width=\"755\" alt=\"Screenshot 2024-12-19 at 10 25
41\"\r\nsrc=\"https://github.com/user-attachments/assets/3e334785-d657-46ac-86c7-59d37f176c86\"\r\n/>\r\n\r\n\r\n<img
width=\"915\" alt=\"Screenshot 2024-12-19 at 10 23
33\"\r\nsrc=\"https://github.com/user-attachments/assets/87860189-92c5-4807-b5b0-2520b9e75778\"\r\n/>\r\n\r\n<!--\r\n###
Checklist\r\n\r\nCheck the PR satisfies following conditions.
\r\n\r\nReviewers should verify this PR satisfies this list as
well.\r\n\r\n- [ ] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[
]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials\r\n- [ ] [Unit
or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [ ] If a plugin
configuration key changed, check if it needs to be\r\nallowlisted in the
cloud and added to the
[docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\r\n-
[ ] This was checked for breaking HTTP API changes, and any
breaking\r\nchanges have been approved by the breaking-change committee.
The\r\n`release_note:breaking` label should be applied in these
situations.\r\n- [ ] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [ ] The PR description includes
the appropriate Release Notes section,\r\nand the correct
`release_note:*` label is applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n###
Identify risks\r\n\r\nDoes this PR introduce any risks? For example,
consider risks like hard\r\nto test bugs, performance regression,
potential of data loss.\r\n\r\nDescribe the risk, its severity, and
mitigation for each identified\r\nrisk. Invite stakeholders and evaluate
how to proceed before merging.\r\n\r\n- [ ] [See some
risk\r\nexamples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)\r\n-
[ ]
...\r\n\r\n\r\n-->","sha":"7cbd9b0c1d19358470ad4c8a36dcc0a02b46f532"}}]}]
BACKPORT-->

Co-authored-by: Eyo O. Eyo <[email protected]>
JoseLuisGJ pushed a commit to JoseLuisGJ/kibana that referenced this pull request Dec 19, 2024
## Summary

Fixes error in lint rule that resulted in false positives, also added a
test case to ascertain the issue has been fixed. For context the error
happens in instances where specific CSS declarations that are
derivatives of shorthand declarations that can apply color to the HTML
element or text nodes where found, because the check we had simply
checked if we got a string back instead of asserting that it was a falsy
value.

## Before
![Screenshot 2024-12-17 at 10 27
18 PM](https://github.com/user-attachments/assets/b0918d37-22f6-4778-a6d0-2cafe11b18e1)

![Screenshot 2024-12-17 at 8 03
33 PM](https://github.com/user-attachments/assets/d70c733d-e88f-42d6-956a-e266d53724f9)

## After

<img width="755" alt="Screenshot 2024-12-19 at 10 25 41"
src="https://github.com/user-attachments/assets/3e334785-d657-46ac-86c7-59d37f176c86"
/>


<img width="915" alt="Screenshot 2024-12-19 at 10 23 33"
src="https://github.com/user-attachments/assets/87860189-92c5-4807-b5b0-2520b9e75778"
/>

<!--
### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [ ] 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
- [ ] 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 was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

### Identify risks

Does this PR introduce any risks? For example, consider risks like hard
to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified
risk. Invite stakeholders and evaluate how to proceed before merging.

- [ ] [See some risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)
- [ ] ...


-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport:prev-minor Backport to (8.x) the previous minor version (i.e. one version back from main) release_note:skip Skip the PR/issue when compiling release notes Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience) v8.18.0 v9.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants