Skip to content

[TSVB/SCSS] Migrate _vis_with_splits.scss file#221002

Merged
mariairiartef merged 5 commits intoelastic:mainfrom
mariairiartef:tsvb/scss-js/aplit
May 29, 2025
Merged

[TSVB/SCSS] Migrate _vis_with_splits.scss file#221002
mariairiartef merged 5 commits intoelastic:mainfrom
mariairiartef:tsvb/scss-js/aplit

Conversation

@mariairiartef
Copy link
Contributor

@mariairiartef mariairiartef commented May 20, 2025 •
edited by kibanamachine
Loading

Summary

Part of #220095

Migrates _vis_with_splits.scss file.

Considerations

For details on considerations, read this.

Checklist

  • The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines
@mariairiartef mariairiartef self-assigned this May 20, 2025
@mariairiartef mariairiartef added Feature:TSVB TSVB (Time Series Visual Builder) Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// scss-removal labels May 20, 2025
@mariairiartef mariairiartef requested a review from Copilot May 20, 2025 14:14
Copilot AI reviewed May 20, 2025
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull Request Overview

This PR migrates the styling of the vis_with_splits component from SCSS to Emotion CSS, aligning with the efforts outlined in #220095.

  • Removed the SCSS file import and replaced it with Emotion CSS styles
  • Introduced three style constants (splitVisStyle, splitVisItemStyle, splitVisOneStyle) and applied them within the component rendering
Files not reviewed (1)
  • src/platform/plugins/shared/vis_types/timeseries/public/application/components/_vis_with_splits.scss: Language not supported
Comments suppressed due to low confidence (2)

src/platform/plugins/shared/vis_types/timeseries/public/application/components/vis_with_splits.js:33

  • Ensure that the component using splitVisItemStyle is wrapped with a ThemeProvider, so that euiTheme is always provided. Alternatively, consider defining a default value to prevent potential runtime issues.
export const splitVisItemStyle = ({ euiTheme }) => css`

src/platform/plugins/shared/vis_types/timeseries/public/application/components/vis_with_splits.js:150

  • The css prop is assigned a function that depends on euiTheme. Confirm that the surrounding component context properly supplies this theme via the ThemeProvider to avoid style resolution issues.
<div key={key} className="tvbSplitVis__split" css={splitVisItemStyle}>
@mariairiartef mariairiartef mentioned this pull request May 20, 2025
Closed
16 tasks
@mariairiartef mariairiartef added release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting technical debt Improvement of the software architecture and operational architecture labels May 21, 2025
@mariairiartef mariairiartef added backport:version Backport to applied version labels v9.1.0 v8.19.0 and removed backport:skip This PR does not require backporting labels May 27, 2025
@mariairiartef mariairiartef marked this pull request as ready for review May 27, 2025 09:55
@mariairiartef mariairiartef requested review from a team as code owners May 27, 2025 09:55
@elasticmachine
Copy link
Contributor

elasticmachine commented May 27, 2025

Pinging @elastic/kibana-visualizations (Team:Visualizations)
markov00
markov00 approved these changes May 27, 2025
View reviewed changes
Copy link
Contributor

@markov00 markov00 left a comment

Choose a reason for hiding this comment

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

LGTM, tested locally
@mariairiartef mariairiartef enabled auto-merge (squash) May 29, 2025 10:46
@mariairiartef mariairiartef merged commit c4068fc into elastic:main May 29, 2025
10 checks passed
@kibanamachine
Copy link
Contributor

kibanamachine commented May 29, 2025

Starting backport for target branches: 8.19

https://github.com/elastic/kibana/actions/runs/15324109087
@elasticmachine
Copy link
Contributor

elasticmachine commented May 29, 2025

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
visTypeTimeseries 476 471 -5

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
visTypeTimeseries 450.4KB 449.2KB -1.3KB

cc @mariairiartef
@kibanamachine
Copy link
Contributor

kibanamachine commented May 29, 2025

💔 All backports failed

Status Branch Result
❌ 8.19 Backport failed because of merge conflicts

You might need to backport the following PRs to 8.19:
- [TSVB/SCSS] Migrate _markdown.scss file (#221297)
- [TSVB/SCSS] Migrate _last_value_mode_popover.scss file (#221092)
- [TSVB/SCSS] Migrate _vis_types.scss file (#221095)
- [TSVB/SCSS] Migrate _markdown_editor.scss file (#220903)
- [TSVB/SCSS] Migrate _series_editor.scss file (#220991)
- [TSVB/SCSS] Migrate _annotations_editor.scss file (#220900)
- [Synthetics] Migrate synthetics alerting API tests to deployment agnostic solution (#221139)
- [Discover] Show ES|QL request URL in Inpector flyout (#221816)
- [Streams] Grok UI integration with enrichment page (#219146)
- Add windsurf to gitignore (#221801)

Manual backport

To create the backport manually run:

node scripts/backport --pr 221002

Questions ?

Please refer to the Backport tool documentation
This was referenced May 29, 2025
Merged
Merged
Merged
@kibanamachine kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Jun 2, 2025
@kibanamachine
Copy link
Contributor

kibanamachine commented Jun 2, 2025

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 221002 locally
cc: @mariairiartef
1 similar comment
@kibanamachine
Copy link
Contributor

kibanamachine commented Jun 3, 2025

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 221002 locally
cc: @mariairiartef
mariairiartef added a commit to mariairiartef/kibana that referenced this pull request Jun 3, 2025
@mariairiartef
[TSVB/SCSS] Migrate _vis_with_splits.scss file (elastic#221002)
5b8aa56 
## Summary

Part of elastic#220095

Migrates `_vis_with_splits.scss` file.

### Considerations

For details on considerations, read
[this](elastic#220095 (comment)).

## Checklist

- [ ] 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)

(cherry picked from commit c4068fc)

# Conflicts:
#	src/platform/plugins/private/vis_types/timeseries/public/application/components/_vis_with_splits.scss
@mariairiartef mariairiartef mentioned this pull request Jun 3, 2025
Merged
@mariairiartef
Copy link
Contributor Author

mariairiartef commented Jun 3, 2025

💚 All backports created successfully

Status Branch Result
✅ 8.19

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

Questions ?

Please refer to the Backport tool documentation
mariairiartef added a commit that referenced this pull request Jun 3, 2025
@mariairiartef
[8.19] [TSVB/SCSS] Migrate _vis_with_splits.scss file (#221002) (#2…
57931c9 
…22354)

# Backport

This will backport the following commits from `main` to `8.19`:
- [[TSVB/SCSS] Migrate `_vis_with_splits.scss` file
(#221002)](#221002)

<!--- Backport version: 10.0.0 -->

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

<!--BACKPORT [{"author":{"name":"Maria
Iriarte","email":"106958839+mariairiartef@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-05-29T12:43:22Z","message":"[TSVB/SCSS]
Migrate `_vis_with_splits.scss` file (#221002)\n\n## Summary\n\nPart of
https://github.com/elastic/kibana/issues/220095\n\nMigrates
`_vis_with_splits.scss` file.\n\n### Considerations\n\nFor details on
considerations,
read\n[this](https://github.com/elastic/kibana/issues/220095#issuecomment-2911737679).\n\n##
Checklist\n\n- [ ] The PR description includes the appropriate Release
Notes section,\nand the correct `release_note:*` label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"c4068fcbee9e25887fcd0b4cae5a52df7adbb804","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:TSVB","technical
debt","Team:Visualizations","release_note:skip","backport
missing","backport:version","v9.1.0","v8.19.0","scss-removal"],"title":"[TSVB/SCSS]
Migrate `_vis_with_splits.scss`
file","number":221002,"url":"https://github.com/elastic/kibana/pull/221002","mergeCommit":{"message":"[TSVB/SCSS]
Migrate `_vis_with_splits.scss` file (#221002)\n\n## Summary\n\nPart of
https://github.com/elastic/kibana/issues/220095\n\nMigrates
`_vis_with_splits.scss` file.\n\n### Considerations\n\nFor details on
considerations,
read\n[this](https://github.com/elastic/kibana/issues/220095#issuecomment-2911737679).\n\n##
Checklist\n\n- [ ] The PR description includes the appropriate Release
Notes section,\nand the correct `release_note:*` label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"c4068fcbee9e25887fcd0b4cae5a52df7adbb804"}},"sourceBranch":"main","suggestedTargetBranches":["8.19"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/221002","number":221002,"mergeCommit":{"message":"[TSVB/SCSS]
Migrate `_vis_with_splits.scss` file (#221002)\n\n## Summary\n\nPart of
https://github.com/elastic/kibana/issues/220095\n\nMigrates
`_vis_with_splits.scss` file.\n\n### Considerations\n\nFor details on
considerations,
read\n[this](https://github.com/elastic/kibana/issues/220095#issuecomment-2911737679).\n\n##
Checklist\n\n- [ ] The PR description includes the appropriate Release
Notes section,\nand the correct `release_note:*` label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"c4068fcbee9e25887fcd0b4cae5a52df7adbb804"}},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->
@kibanamachine kibanamachine removed the backport missing Added to PRs automatically when the are determined to be missing a backport. label Jun 3, 2025
zacharyparikh pushed a commit to zacharyparikh/kibana that referenced this pull request Jun 4, 2025
@mariairiartef @zacharyparikh
[TSVB/SCSS] Migrate _vis_with_splits.scss file (elastic#221002)
10f2b44 
## Summary

Part of elastic#220095

Migrates `_vis_with_splits.scss` file.

### Considerations

For details on considerations, read
[this](elastic#220095 (comment)).

## Checklist

- [ ] 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)
nickpeihl pushed a commit to nickpeihl/kibana that referenced this pull request Jun 12, 2025
@mariairiartef @nickpeihl
[TSVB/SCSS] Migrate _vis_with_splits.scss file (elastic#221002)
19019cc 
## Summary

Part of elastic#220095

Migrates `_vis_with_splits.scss` file.

### Considerations

For details on considerations, read
[this](elastic#220095 (comment)).

## Checklist

- [ ] 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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport:version Backport to applied version labels Feature:TSVB TSVB (Time Series Visual Builder) release_note:skip Skip the PR/issue when compiling release notes scss-removal Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// technical debt Improvement of the software architecture and operational architecture v8.19.0 v9.1.0

6 participants

@mariairiartef @elasticmachine @kibanamachine @ryankeairns @markov00