[Platform security] Replace SCSS with CSS in JS (Part 1 - Spaces plugin) by SiddharthMantri · Pull Request #214798 · elastic/kibana

SiddharthMantri · 2025-03-17T15:21:53Z

Summary

Removed most SASS files from the Spaces plugin. (Full checklist on parent issue)

Remaining file:
x-pack/platform/plugins/shared/spaces/public/space_selector/space_selector.scss
This file requires a custom mixin that we'll need to migrate once this PR: https://github.com/elastic/kibana/pull/214729/files lands. It introduces a cssUtils file to ensure consistency in Kibana specific mixins.

How to test

Testing visual regression isn't super straightforward here. For my local testing, i started two instances of Kibana (main and this branch)

On main:

Start es:

yarn es snapshot --license=trial -E http.port=9400

Start kibana with the following config (CLI or kibana.dev.yml)

server.port: 5602
elasticsearch.hosts: ["http://localhost:9400"]

Once started, in a private browsing window, you should have access to Kibana on main on localhost:5602

On this PR:
Start ES and Kibana normally (Kibana should be available on localhost:5601)

This PR contains changes to the following parts of the Spaces plugin:

Copy Saved Objects to Space flyout
Share Saved Objects to Space flyout
Space selector screen
Space editing screen
Space selector drop down menu in Nav Bar

Ideally, you should see no visual regression between the two versions.

Screenshots

Component	Main	PR
Space Edit
Space selector nav bar
Share to space
Copy to Space flyout
Copy to Space confirmation
Space selector

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines

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.

The risk of inexact conversion: verifying this PR requires manual checks to ensure that the conversion has not created any regressions in the style.

elasticmachine · 2025-03-17T17:08:46Z

Pinging @elastic/kibana-security (Team:Security)

…-fix'

MichaelMarcialis

Thanks, @SiddharthMantri. I've left a few comments/questions below for your review. Nothing major, so assuming you're able to address them, I'll go ahead and approve now.

x-pack/platform/plugins/shared/spaces/public/space_selector/components/space_cards.tsx

.../platform/plugins/shared/spaces/public/management/components/section_panel/section_panel.tsx

MichaelMarcialis · 2025-03-18T14:58:23Z

x-pack/platform/plugins/shared/spaces/public/space_selector/space_selector.tsx

+                css={css`
+                  &:focus {
+                    outline: none;
+                    text-decoration: underline;
+                  }
+                `}
+                tabIndex={-1}


Are these styles and tabIndex necessary? If not, I'd suggest removing.

Good question. Tab index is necessary to prevent the header from being selectable via tab. (h1 should not be a keyboard selectable element). As for the focus, i think this is just to replicate behavior from main which toggles the underline on/off focus. Happy to remove it - what do you think?

Prior to your changes, this element was being given tabIndex={0} for some reason (not sure why). If we simply remove any tabIndex attribute and these styles, the h1 should no longer be focusable, right? If so, I say do it.

~~You're right, i think removing it makes sense. The change itself was from a slack thread regarding this PR in #eui.~~

I misspoke! I believe we need tabIndex for this specific functionality: https://github.com/elastic/kibana/blob/main/x-pack/platform/plugins/shared/spaces/public/space_selector/space_selector.tsx#L68

Keeping it at -1 will allow screen readers to announce (programmatic focusing) but will prevent it from keyboard focus.

x-pack/platform/plugins/shared/spaces/public/space_selector/space_selector.tsx

SiddharthMantri · 2025-03-18T18:48:17Z

@elasticmachine merge upstream

SiddharthMantri · 2025-03-19T06:15:38Z

@elasticmachine merge upstream

jeramysoucy

Looks good, Sid! I think the test snapshot for the manage spaces button is wrong.

Nit: I think my only ask would be for more consistency in how the css is applied in each component - sometimes there is a styles object containing all the needed styles, other times it is passed in as a property, and sometimes it is just implemented inline. It would be nice it this was consistent throughout, but it is not necessarily an issue as-is.

jeramysoucy · 2025-03-20T10:36:43Z

...plugins/shared/spaces/public/copy_saved_objects_to_space/components/space_result_details.tsx

  const { objects } = summarizedCopyResult;
+  const { euiTheme } = useEuiTheme();
+
+  const styles = {


Observation/question: Do you think it would be worth moving all of our styles to a common location and referencing them, or keeping them inline?

If we keep them inline, would it be more consistent to keep each style with the component where it is used, rather than passing styles as properties (like with ResolveAllConflicts)?

Great point! Fixed in 4ad9f92

jeramysoucy · 2025-03-20T11:43:10Z

.../platform/plugins/shared/spaces/public/management/components/section_panel/section_panel.tsx

+  const styles = {
+    collapsiblePanelLogo: css({
+      verticalAlign: 'text-bottom',
+      marginRight: euiTheme.size.s,
+    }),
+  };


Q: Is there a reason to use this nested styles object? Is it a convention we are adopting for making sure all styles in a component get defined in one place?

Fixed in: 4ad9f92

.../platform/plugins/shared/spaces/public/management/components/section_panel/section_panel.tsx

jeramysoucy · 2025-03-20T12:26:57Z

...shared/spaces/public/nav_control/components/__snapshots__/manage_spaces_button.test.tsx.snap


-exports[`ManageSpacesButton doesn't render if user profile forbids managing spaces 1`] = `""`;
+exports[`ManageSpacesButton doesn't render if user profile forbids managing spaces 1`] = `
+<ManageSpacesButtonUI


This seems pretty wild. Is this expected?

I believe it's by design. The new component wraps the EUI Theme using the withEuiTheme HOC which inserts all the properties to the component. It's the equivalent of useEuiTheme but for class components. One way to get around the bloated snap could be to convert ManageSpacesButton to a functional component but i couldn't decide if it makes sense to do as part of this PR. What do you think?

If it doesn't cause significant delay to this PR, then I say why not. Otherwise, we can just open an issue to convert it later.

Makes sense! Done in 7488624

SiddharthMantri · 2025-03-20T15:32:42Z

@jeramysoucy

I think my only ask would be for more consistency in how the css is applied in each component

Completely agreed. Fix incoming!

SiddharthMantri · 2025-03-21T09:13:45Z

@elasticmachine merge upstream

elasticmachine · 2025-03-21T13:26:32Z

💚 Build Succeeded

Buildkite Build
Commit: b417332

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`spaces`	300	245	-55

Async chunks

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

id	before	after	diff
`spaces`	234.5KB	208.8KB	-25.7KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`spaces`	28.7KB	28.7KB	+31.0B

History

💚 Build #286010 succeeded 072f6e2
💔 Build #285876 failed 7488624
💔 Build #285807 failed 4ad9f92
💚 Build #285650 succeeded 454a776
💔 Build #285632 failed f1107bc
💚 Build #285234 succeeded f10db6f

jeramysoucy

LGTM!

jeramysoucy · 2025-03-21T16:29:20Z

x-pack/platform/plugins/shared/spaces/public/nav_control/components/manage_spaces_button.tsx

-  public render() {
-    if (!this.props.capabilities.spaces.manage) {
-      return null;
+export const ManageSpacesButton: React.FC<Props> = ({


…in) (elastic#214798) ## Summary Part of elastic#211652 Removed most SASS files from the Spaces plugin. (Full checklist on parent issue) Remaining file: `x-pack/platform/plugins/shared/spaces/public/space_selector/space_selector.scss` This file requires a custom mixin that we'll need to migrate once this PR: https://github.com/elastic/kibana/pull/214729/files lands. It introduces a `cssUtils` file to ensure consistency in Kibana specific mixins. ### How to test Testing visual regression isn't super straightforward here. For my local testing, i started two instances of Kibana (main and this branch) On main: - Start es: ``` yarn es snapshot --license=trial -E http.port=9400 ``` - Start kibana with the following config (CLI or kibana.dev.yml) ``` server.port: 5602 elasticsearch.hosts: ["http://localhost:9400"] ``` Once started, in a private browsing window, you should have access to Kibana on main on `localhost:5602` On this PR: Start ES and Kibana normally (Kibana should be available on localhost:5601) This PR contains changes to the following parts of the Spaces plugin: - Copy Saved Objects to Space flyout - Share Saved Objects to Space flyout - Space selector screen - Space editing screen - Space selector drop down menu in Nav Bar Ideally, you should see no visual regression between the two versions. ## Screenshots | Component | Main | PR | |--------|--------|--------| | Space Edit | <img width="300" alt="space_edit_main" src="https://github.com/user-attachments/assets/786feeb7-5047-443c-bb63-41e90e31a82b" /> | <img width="300" alt="space_edit_pr" src="https://github.com/user-attachments/assets/975cc096-25d7-4bd5-804d-f82f65a908bf" /> | | Space selector nav bar | <img width="300" alt="space_selector_nav_bar_main" src="https://github.com/user-attachments/assets/c6c05d28-3dfa-43c2-9586-b66a24f990d6" /> | <img width="317" alt="Screenshot 2025-03-20 at 09 11 50" src="https://github.com/user-attachments/assets/277d3094-640b-4604-adc7-5c8465aeb21c" /> | | Share to space | <img width="300" alt="share_to_space_main" src="https://github.com/user-attachments/assets/5782a314-66f7-4780-bcfb-b0a85cece035" /> | <img width="300" alt="share_to_space_pr" src="https://github.com/user-attachments/assets/73a48305-7fa7-4637-9856-60461cbad770" /> | | Copy to Space flyout | <img width="300" alt="copy_to_space_pr" src="https://github.com/user-attachments/assets/54342ca2-b2e1-4844-a66f-fae512ff8910" /> | <img width="300" alt="copy_to_space_main" src="https://github.com/user-attachments/assets/a629f12a-75c4-4ba6-a7cf-cdeca1310ef3" /> | | Copy to Space confirmation | <img width="300" alt="copy_to_space_confirmed_main" src="https://github.com/user-attachments/assets/78f93d73-e789-487f-94c1-eebcef7ce183" /> | <img width="300" alt="copy_to_space_confirmed_pr" src="https://github.com/user-attachments/assets/2020e71a-88b4-4107-9b05-ae90bf7d39f1" /> | | Space selector | <img width="300" alt="Space_selector_before" src="https://github.com/user-attachments/assets/b8ed7269-e6f6-4bc0-bb24-1c53ac451083" /> | <img width="300" alt="Space_selector_after" src="https://github.com/user-attachments/assets/770d2141-8642-483f-b72c-bce6d5ebd282" /> | ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] 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. - [x] The risk of inexact conversion: verifying this PR requires manual checks to ensure that the conversion has not created any regressions in the style. --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Closes #211652 ## Summary Part 2 of #211652 and follow up from #214798 Removed most SASS files from all platform security owned code. (Full checklist on parent issue) ### How to test Testing visual regression isn't super straightforward here. For my local testing, i started two instances of Kibana (main and this branch) On main: - Start es: ``` yarn es snapshot --license=trial -E http.port=9400 ``` - Start kibana with the following config (CLI or kibana.dev.yml) ``` server.port: 5602 elasticsearch.hosts: ["http://localhost:9400"] ``` Once started, in a private browsing window, you should have access to Kibana on main on `localhost:5602` On this PR: Start ES and Kibana normally (Kibana should be available on localhost:5601) This PR contains changes to the following parts of the Spaces plugin: - Access agreement page - Login page (see note below regarding testing) - Role mapping rule group editor For testing the full login page with different selectors, etc, you can start kibana with the following changes in the kibana.dev.yml file ``` xpack.security.authc.providers: basic.basic1: order: 0 hint: "Use your corporate username & password" accessAgreement: message: | **You are accessing a system with sensitive information** By logging in, you acknowledge that information system usage pki.pki1: order: 1 token.token1: order: 2 saml.saml1: order: 3 realm: saml1 oidc.oidc1: order: 4 realm: oidc1 ``` Ideally, you should see no visual regression between the two versions. ## Screenshots | Component | Main | PR | |--------|--------|--------| |Access agreement page|<img width="300" alt="Screenshot 2025-05-09 at 10 31 18" src="https://github.com/user-attachments/assets/483d9e47-e4a0-4e01-8282-9d205ba0bf6d" />|<img width="300" alt="Screenshot 2025-05-09 at 10 54 14" src="https://github.com/user-attachments/assets/62965843-5242-4d96-b300-812cdc349864" />| |Login page|<img width="300" alt="Screenshot 2025-05-08 at 17 05 23" src="https://github.com/user-attachments/assets/99536f62-75d8-46e2-ae3a-aba7b990a723" />|<img width="300" alt="Screenshot 2025-05-08 at 18 24 50" src="https://github.com/user-attachments/assets/3c2aadc9-1746-4d7f-9093-a6053916b597" />| |Role mapping rule editor| <img width="300" src="https://github.com/user-attachments/assets/8a14e323-223d-43df-9dfb-edf8f6859c40" />|<img width="300" src="https://github.com/user-attachments/assets/68a9b37d-060d-4060-b2ad-b0b3319de78d" />| ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] 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. - [x] The risk of inexact conversion: verifying this PR requires manual checks to ensure that the conversion has not created any regressions in the style. --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Kurt <kc13greiner@users.noreply.github.com> Co-authored-by: Larry Gregory <larry.gregory@elastic.co>

) Closes elastic#211652 ## Summary Part 2 of elastic#211652 and follow up from elastic#214798 Removed most SASS files from all platform security owned code. (Full checklist on parent issue) ### How to test Testing visual regression isn't super straightforward here. For my local testing, i started two instances of Kibana (main and this branch) On main: - Start es: ``` yarn es snapshot --license=trial -E http.port=9400 ``` - Start kibana with the following config (CLI or kibana.dev.yml) ``` server.port: 5602 elasticsearch.hosts: ["http://localhost:9400"] ``` Once started, in a private browsing window, you should have access to Kibana on main on `localhost:5602` On this PR: Start ES and Kibana normally (Kibana should be available on localhost:5601) This PR contains changes to the following parts of the Spaces plugin: - Access agreement page - Login page (see note below regarding testing) - Role mapping rule group editor For testing the full login page with different selectors, etc, you can start kibana with the following changes in the kibana.dev.yml file ``` xpack.security.authc.providers: basic.basic1: order: 0 hint: "Use your corporate username & password" accessAgreement: message: | **You are accessing a system with sensitive information** By logging in, you acknowledge that information system usage pki.pki1: order: 1 token.token1: order: 2 saml.saml1: order: 3 realm: saml1 oidc.oidc1: order: 4 realm: oidc1 ``` Ideally, you should see no visual regression between the two versions. ## Screenshots | Component | Main | PR | |--------|--------|--------| |Access agreement page|<img width="300" alt="Screenshot 2025-05-09 at 10 31 18" src="https://github.com/user-attachments/assets/483d9e47-e4a0-4e01-8282-9d205ba0bf6d" />|<img width="300" alt="Screenshot 2025-05-09 at 10 54 14" src="https://github.com/user-attachments/assets/62965843-5242-4d96-b300-812cdc349864" />| |Login page|<img width="300" alt="Screenshot 2025-05-08 at 17 05 23" src="https://github.com/user-attachments/assets/99536f62-75d8-46e2-ae3a-aba7b990a723" />|<img width="300" alt="Screenshot 2025-05-08 at 18 24 50" src="https://github.com/user-attachments/assets/3c2aadc9-1746-4d7f-9093-a6053916b597" />| |Role mapping rule editor| <img width="300" src="https://github.com/user-attachments/assets/8a14e323-223d-43df-9dfb-edf8f6859c40" />|<img width="300" src="https://github.com/user-attachments/assets/68a9b37d-060d-4060-b2ad-b0b3319de78d" />| ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] 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. - [x] The risk of inexact conversion: verifying this PR requires manual checks to ensure that the conversion has not created any regressions in the style. --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Kurt <kc13greiner@users.noreply.github.com> Co-authored-by: Larry Gregory <larry.gregory@elastic.co> (cherry picked from commit 589c0b4) # Conflicts: # src/platform/plugins/private/interactive_setup/public/app.scss # src/platform/plugins/private/interactive_setup/public/app.tsx # x-pack/platform/plugins/shared/security/public/authentication/components/authentication_state_page/authentication_state_page.scss # x-pack/platform/plugins/shared/security/public/authentication/components/authentication_state_page/authentication_state_page.test.tsx # x-pack/platform/plugins/shared/security/public/authentication/components/authentication_state_page/authentication_state_page.tsx # x-pack/platform/plugins/shared/security/public/authentication/login/__snapshots__/login_page.test.tsx.snap # x-pack/platform/plugins/shared/security/public/authentication/login/components/login_form/__snapshots__/login_form.test.tsx.snap # x-pack/platform/plugins/shared/security/public/authentication/login/login_page.scss # x-pack/platform/plugins/shared/security/public/authentication/login/login_page.tsx # x-pack/platform/plugins/shared/security/public/authentication/overwritten_session/__snapshots__/overwritten_session_page.test.tsx.snap # x-pack/platform/plugins/shared/security/tsconfig.json

) Closes elastic#211652 ## Summary Part 2 of elastic#211652 and follow up from elastic#214798 Removed most SASS files from all platform security owned code. (Full checklist on parent issue) ### How to test Testing visual regression isn't super straightforward here. For my local testing, i started two instances of Kibana (main and this branch) On main: - Start es: ``` yarn es snapshot --license=trial -E http.port=9400 ``` - Start kibana with the following config (CLI or kibana.dev.yml) ``` server.port: 5602 elasticsearch.hosts: ["http://localhost:9400"] ``` Once started, in a private browsing window, you should have access to Kibana on main on `localhost:5602` On this PR: Start ES and Kibana normally (Kibana should be available on localhost:5601) This PR contains changes to the following parts of the Spaces plugin: - Access agreement page - Login page (see note below regarding testing) - Role mapping rule group editor For testing the full login page with different selectors, etc, you can start kibana with the following changes in the kibana.dev.yml file ``` xpack.security.authc.providers: basic.basic1: order: 0 hint: "Use your corporate username & password" accessAgreement: message: | **You are accessing a system with sensitive information** By logging in, you acknowledge that information system usage pki.pki1: order: 1 token.token1: order: 2 saml.saml1: order: 3 realm: saml1 oidc.oidc1: order: 4 realm: oidc1 ``` Ideally, you should see no visual regression between the two versions. ## Screenshots | Component | Main | PR | |--------|--------|--------| |Access agreement page|<img width="300" alt="Screenshot 2025-05-09 at 10 31 18" src="https://github.com/user-attachments/assets/483d9e47-e4a0-4e01-8282-9d205ba0bf6d" />|<img width="300" alt="Screenshot 2025-05-09 at 10 54 14" src="https://github.com/user-attachments/assets/62965843-5242-4d96-b300-812cdc349864" />| |Login page|<img width="300" alt="Screenshot 2025-05-08 at 17 05 23" src="https://github.com/user-attachments/assets/99536f62-75d8-46e2-ae3a-aba7b990a723" />|<img width="300" alt="Screenshot 2025-05-08 at 18 24 50" src="https://github.com/user-attachments/assets/3c2aadc9-1746-4d7f-9093-a6053916b597" />| |Role mapping rule editor| <img width="300" src="https://github.com/user-attachments/assets/8a14e323-223d-43df-9dfb-edf8f6859c40" />|<img width="300" src="https://github.com/user-attachments/assets/68a9b37d-060d-4060-b2ad-b0b3319de78d" />| ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] 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. - [x] The risk of inexact conversion: verifying this PR requires manual checks to ensure that the conversion has not created any regressions in the style. --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Kurt <kc13greiner@users.noreply.github.com> Co-authored-by: Larry Gregory <larry.gregory@elastic.co> (cherry picked from commit 589c0b4) # Conflicts: # src/platform/plugins/private/interactive_setup/public/app.scss # src/platform/plugins/private/interactive_setup/public/app.tsx # x-pack/platform/plugins/shared/security/public/authentication/components/authentication_state_page/authentication_state_page.scss # x-pack/platform/plugins/shared/security/public/authentication/components/authentication_state_page/authentication_state_page.test.tsx # x-pack/platform/plugins/shared/security/public/authentication/components/authentication_state_page/authentication_state_page.tsx # x-pack/platform/plugins/shared/security/public/authentication/login/__snapshots__/login_page.test.tsx.snap # x-pack/platform/plugins/shared/security/public/authentication/login/components/login_form/__snapshots__/login_form.test.tsx.snap # x-pack/platform/plugins/shared/security/public/authentication/login/components/login_form/login_form.scss # x-pack/platform/plugins/shared/security/public/authentication/login/login_page.scss # x-pack/platform/plugins/shared/security/public/authentication/login/login_page.tsx # x-pack/platform/plugins/shared/security/public/authentication/overwritten_session/__snapshots__/overwritten_session_page.test.tsx.snap # x-pack/platform/plugins/shared/security/tsconfig.json

Closes #211652 ## Summary Part 2 of #211652 and follow up from #214798 Removed most SASS files from all platform security owned code. (Full checklist on parent issue) ### How to test Testing visual regression isn't super straightforward here. For my local testing, i started two instances of Kibana (main and this branch) On main: - Start es: ``` yarn es snapshot --license=trial -E http.port=9400 ``` - Start kibana with the following config (CLI or kibana.dev.yml) ``` server.port: 5602 elasticsearch.hosts: ["http://localhost:9400"] ``` Once started, in a private browsing window, you should have access to Kibana on main on `localhost:5602` On this PR: Start ES and Kibana normally (Kibana should be available on localhost:5601) This PR contains changes to the following parts of the Spaces plugin: - Access agreement page - Login page (see note below regarding testing) - Role mapping rule group editor For testing the full login page with different selectors, etc, you can start kibana with the following changes in the kibana.dev.yml file ``` xpack.security.authc.providers: basic.basic1: order: 0 hint: "Use your corporate username & password" accessAgreement: message: | **You are accessing a system with sensitive information** By logging in, you acknowledge that information system usage pki.pki1: order: 1 token.token1: order: 2 saml.saml1: order: 3 realm: saml1 oidc.oidc1: order: 4 realm: oidc1 ``` Ideally, you should see no visual regression between the two versions. ## Screenshots | Component | Main | PR | |--------|--------|--------| |Access agreement page|<img width="300" alt="Screenshot 2025-05-09 at 10 31 18" src="https://github.com/user-attachments/assets/483d9e47-e4a0-4e01-8282-9d205ba0bf6d" />|<img width="300" alt="Screenshot 2025-05-09 at 10 54 14" src="https://github.com/user-attachments/assets/62965843-5242-4d96-b300-812cdc349864" />| |Login page|<img width="300" alt="Screenshot 2025-05-08 at 17 05 23" src="https://github.com/user-attachments/assets/99536f62-75d8-46e2-ae3a-aba7b990a723" />|<img width="300" alt="Screenshot 2025-05-08 at 18 24 50" src="https://github.com/user-attachments/assets/3c2aadc9-1746-4d7f-9093-a6053916b597" />| |Role mapping rule editor| <img width="300" src="https://github.com/user-attachments/assets/8a14e323-223d-43df-9dfb-edf8f6859c40" />|<img width="300" src="https://github.com/user-attachments/assets/68a9b37d-060d-4060-b2ad-b0b3319de78d" />| ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] 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. - [x] The risk of inexact conversion: verifying this PR requires manual checks to ensure that the conversion has not created any regressions in the style. --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Kurt <kc13greiner@users.noreply.github.com> Co-authored-by: Larry Gregory <larry.gregory@elastic.co>

) Closes elastic#211652 ## Summary Part 2 of elastic#211652 and follow up from elastic#214798 Removed most SASS files from all platform security owned code. (Full checklist on parent issue) ### How to test Testing visual regression isn't super straightforward here. For my local testing, i started two instances of Kibana (main and this branch) On main: - Start es: ``` yarn es snapshot --license=trial -E http.port=9400 ``` - Start kibana with the following config (CLI or kibana.dev.yml) ``` server.port: 5602 elasticsearch.hosts: ["http://localhost:9400"] ``` Once started, in a private browsing window, you should have access to Kibana on main on `localhost:5602` On this PR: Start ES and Kibana normally (Kibana should be available on localhost:5601) This PR contains changes to the following parts of the Spaces plugin: - Access agreement page - Login page (see note below regarding testing) - Role mapping rule group editor For testing the full login page with different selectors, etc, you can start kibana with the following changes in the kibana.dev.yml file ``` xpack.security.authc.providers: basic.basic1: order: 0 hint: "Use your corporate username & password" accessAgreement: message: | **You are accessing a system with sensitive information** By logging in, you acknowledge that information system usage pki.pki1: order: 1 token.token1: order: 2 saml.saml1: order: 3 realm: saml1 oidc.oidc1: order: 4 realm: oidc1 ``` Ideally, you should see no visual regression between the two versions. ## Screenshots | Component | Main | PR | |--------|--------|--------| |Access agreement page|<img width="300" alt="Screenshot 2025-05-09 at 10 31 18" src="https://github.com/user-attachments/assets/483d9e47-e4a0-4e01-8282-9d205ba0bf6d" />|<img width="300" alt="Screenshot 2025-05-09 at 10 54 14" src="https://github.com/user-attachments/assets/62965843-5242-4d96-b300-812cdc349864" />| |Login page|<img width="300" alt="Screenshot 2025-05-08 at 17 05 23" src="https://github.com/user-attachments/assets/99536f62-75d8-46e2-ae3a-aba7b990a723" />|<img width="300" alt="Screenshot 2025-05-08 at 18 24 50" src="https://github.com/user-attachments/assets/3c2aadc9-1746-4d7f-9093-a6053916b597" />| |Role mapping rule editor| <img width="300" src="https://github.com/user-attachments/assets/8a14e323-223d-43df-9dfb-edf8f6859c40" />|<img width="300" src="https://github.com/user-attachments/assets/68a9b37d-060d-4060-b2ad-b0b3319de78d" />| ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] 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. - [x] The risk of inexact conversion: verifying this PR requires manual checks to ensure that the conversion has not created any regressions in the style. --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Kurt <kc13greiner@users.noreply.github.com> Co-authored-by: Larry Gregory <larry.gregory@elastic.co>

[Platform security] Replace SCSS with CSS in JS (Round 1)

808e26d

SiddharthMantri mentioned this pull request Mar 17, 2025

[Platform Security] Replace SCSS with CSS-in-JS #211652

Closed

38 tasks

SiddharthMantri marked this pull request as ready for review March 17, 2025 17:08

SiddharthMantri requested review from a team as code owners March 17, 2025 17:08

SiddharthMantri added the Team:Security Platform Security: Auth, Users, Roles, Spaces, Audit Logging, etc t// label Mar 17, 2025

SiddharthMantri added the release_note:skip Skip the PR/issue when compiling release notes label Mar 17, 2025

kibanamachine and others added 4 commits March 17, 2025 17:32

[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…

67c6710

…-fix'

update space result details

c877c2a

update snapshot

c04d85c

partial update to space selector scss

3518ee2

jeramysoucy self-requested a review March 18, 2025 11:34

SiddharthMantri added 2 commits March 18, 2025 12:35

update space selextor partial

b93487b

fix spaces menu

c814965

SiddharthMantri changed the title ~~[Platform security] Replace SCSS with CSS in JS (Round 1)~~ [Platform security] Replace SCSS with CSS in JS (Part 1 - Spaces plugin) Mar 18, 2025

SiddharthMantri added backport:skip This PR does not require backporting technical debt Improvement of the software architecture and operational architecture labels Mar 18, 2025

update tests

f61750b

MichaelMarcialis approved these changes Mar 18, 2025

View reviewed changes

SiddharthMantri added 2 commits March 18, 2025 16:19

address PR comments

6af67c3

remove unused imports

540225a

Merge branch 'main' into 211652-platform-security-css-in-js

0fadff4

elasticmachine and others added 3 commits March 19, 2025 08:15

Merge branch 'main' into 211652-platform-security-css-in-js

f10db6f

fix manage space button visual regression

f1107bc

update snapshots

454a776

jeramysoucy reviewed Mar 20, 2025

View reviewed changes

SiddharthMantri added 2 commits March 20, 2025 16:52

address PR comments

4ad9f92

convert to function component and fix types

7488624

SiddharthMantri requested a review from jeramysoucy March 20, 2025 18:49

update snaps

fad5b72

elasticmachine and others added 7 commits March 21, 2025 11:13

Merge branch 'main' into 211652-platform-security-css-in-js

2bbc84d

use composable style

072f6e2

remove unused interface

4a9e289

fix style usage

e1942b1

fix style usage

df0b96c

fix style usage

7d8c2f5

fix style usage

b417332

jeramysoucy approved these changes Mar 21, 2025

View reviewed changes

SiddharthMantri merged commit 960caf9 into elastic:main Mar 22, 2025
9 checks passed

kibanamachine added the v9.1.0 label Mar 22, 2025

tsullivan added the scss-removal label Mar 28, 2025

SiddharthMantri mentioned this pull request May 9, 2025

[Platform security] Replace SCSS with CSS in JS (part 2) #220508

Closed

2 tasks

SiddharthMantri mentioned this pull request Aug 29, 2025

[Platform security] Replace SCSS with CSS in JS (part 2) #233508

Merged

2 tasks

Conversation

SiddharthMantri commented Mar 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

How to test

Screenshots

Checklist

Identify risks

Uh oh!

elasticmachine commented Mar 17, 2025

Uh oh!

MichaelMarcialis left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SiddharthMantri Mar 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

SiddharthMantri commented Mar 18, 2025

Uh oh!

SiddharthMantri commented Mar 19, 2025

Uh oh!

jeramysoucy left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SiddharthMantri commented Mar 20, 2025

Uh oh!

SiddharthMantri commented Mar 21, 2025

Uh oh!

elasticmachine commented Mar 21, 2025

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

History

Uh oh!

jeramysoucy left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

SiddharthMantri commented Mar 17, 2025 •

edited

Loading

SiddharthMantri Mar 19, 2025 •

edited

Loading