Skip to content

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

Merged
kc13greiner merged 14 commits intoelastic:mainfrom
SiddharthMantri:211652-security-scss-emotion-p2
Sep 29, 2025
Merged

[Platform security] Replace SCSS with CSS in JS (part 2)#233508
kc13greiner merged 14 commits intoelastic:mainfrom
SiddharthMantri:211652-security-scss-emotion-p2

Conversation

@SiddharthMantri
Copy link
Contributor

@SiddharthMantri SiddharthMantri commented Aug 29, 2025

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 Screenshot 2025-05-09 at 10 31 18 Screenshot 2025-05-09 at 10 54 14
Login page Screenshot 2025-05-08 at 17 05 23 Screenshot 2025-05-08 at 18 24 50
Role mapping rule editor

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.

@SiddharthMantri
Copy link
Contributor Author

@elasticmachine merge upstream

@SiddharthMantri
Copy link
Contributor Author

@elasticmachine merge upstream

@SiddharthMantri SiddharthMantri marked this pull request as ready for review September 25, 2025 06:42
@SiddharthMantri SiddharthMantri requested review from a team as code owners September 25, 2025 06:42
@SiddharthMantri SiddharthMantri added Team:Security Platform Security: Auth, Users, Roles, Spaces, Audit Logging, etc t// technical debt Improvement of the software architecture and operational architecture release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting scss-removal labels Sep 25, 2025
@elasticmachine
Copy link
Contributor

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

@SiddharthMantri
Copy link
Contributor Author

@elasticmachine merge upstream

@kc13greiner kc13greiner self-assigned this Sep 25, 2025
Now that <EuiProvider> is the wrapper, this expect is finding the passed in RuleGroupEditor.

No sub-RuleGroupEditors are found though.

We need mount vs shallow here so we can find the AddRuleButton
};
const wrapper = shallowWithIntl(<RuleGroupEditor {...props} />);
expect(wrapper.find(RuleGroupEditor)).toHaveLength(0);
const wrapper = mountWithEuiProvider(<RuleGroupEditor {...props} />);
Copy link
Contributor

Choose a reason for hiding this comment

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

Note: now that it is nested in the EuiProvider, the first assertion is finding the element that was passed in.

So just one is found, no sub RuleGroupEditors

@kc13greiner
Copy link
Contributor

/ci

Now that we are actually rendering it with mount (vs shallow), it needs the `role` prop set
role,
});
},
role: {
Copy link
Contributor

Choose a reason for hiding this comment

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

Note: Thank you @elena-shostak ! (please fact check me here 😅 )

Now that we are actually rendering with mount (instead of using shallow...), the role prop needs to be set on initial render

@kc13greiner
Copy link
Contributor

/ci

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
interactiveSetup 42 29 -13
security 593 548 -45
spaces 237 227 -10
total -68

Async chunks

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

id before after diff
security 505.7KB 481.8KB -23.9KB
spaces 217.1KB 214.8KB -2.3KB
total -26.2KB

Page load bundle

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

id before after diff
interactiveSetup 37.4KB 32.5KB -4.9KB

History

cc @kc13greiner

@legrego legrego added backport:version Backport to applied version labels v9.2.0 v8.18.8 v8.19.5 and removed backport:skip This PR does not require backporting labels Sep 29, 2025
Copy link
Contributor

@kc13greiner kc13greiner left a comment

Choose a reason for hiding this comment

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

LGTM!

@kc13greiner kc13greiner merged commit 589c0b4 into elastic:main Sep 29, 2025
21 checks passed
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.18, 8.19

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

kc13greiner pushed a commit to kc13greiner/kibana that referenced this pull request Sep 30, 2025
)

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
kc13greiner pushed a commit to kc13greiner/kibana that referenced this pull request Sep 30, 2025
)

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
@kc13greiner
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
8.19
8.18

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

Questions ?

Please refer to the Backport tool documentation

@elastic elastic deleted a comment from kibanamachine Sep 30, 2025
niros1 pushed a commit that referenced this pull request Sep 30, 2025
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>
VladimirFilonov pushed a commit to VladimirFilonov/kibana that referenced this pull request Sep 30, 2025
)

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>
@kc13greiner kc13greiner added backport:skip This PR does not require backporting and removed backport:version Backport to applied version labels v8.18.8 v8.19.5 labels Sep 30, 2025
rylnd pushed a commit to rylnd/kibana that referenced this pull request Oct 17, 2025
)

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

Labels

backport:skip This PR does not require backporting release_note:skip Skip the PR/issue when compiling release notes scss-removal Team:Security Platform Security: Auth, Users, Roles, Spaces, Audit Logging, etc t// technical debt Improvement of the software architecture and operational architecture v9.2.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

6 participants