Skip to content

[Security Assistant] Responsive design for welcome screen#226062

Merged
stephmilovic merged 5 commits intoelastic:mainfrom
stephmilovic:response_welcome_screen
Jul 2, 2025
Merged

[Security Assistant] Responsive design for welcome screen#226062
stephmilovic merged 5 commits intoelastic:mainfrom
stephmilovic:response_welcome_screen

Conversation

@stephmilovic
Copy link
Contributor

@stephmilovic stephmilovic commented Jul 1, 2025

Summary

Implements a responsive design for the Security Assistant welcome screen based on the available vertical space.

Tall vertical space

Screenshot 2025-07-01 at 3 36 36 PM

Short vertical space

Screenshot 2025-07-01 at 3 36 25 PM

Transition

Screen.Recording.2025-07-01.at.3.36.45.PM.mov

@stephmilovic stephmilovic requested a review from a team as a code owner July 1, 2025 17:26
@stephmilovic stephmilovic added release_note:skip Skip the PR/issue when compiling release notes Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Security Generative AI Security Generative AI backport:version Backport to applied version labels v9.1.0 v8.19.0 v9.2.0 labels Jul 1, 2025
@elasticmachine
Copy link
Contributor

Pinging @elastic/security-solution (Team: SecuritySolution)

Copy link
Contributor

@e40pud e40pud left a comment

Choose a reason for hiding this comment

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

Thanks for the improvement! Tested locally and it works great 🚀
LGTM


export type VerticalBreakpoint = 'short' | 'medium' | 'tall';

export function useVerticalBreakpoint(): VerticalBreakpoint {
Copy link
Contributor

Choose a reason for hiding this comment

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

Not relevant to these changes, just a general question:

Do we have any guidelines on using classic function declaration vs arrow function? I see we mix both notations in kibana and assistant code base, but was wondering whether we have a preferred way.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

to quote ElasticGPT "The codebase and documentation show that both notations are used interchangeably, and there is no current enforcement of one style over the other."

const handleResizeRef = useRef<((event: UIEvent) => void) & { cancel: () => void }>();

useEffect(() => {
const handleResize = debounce(() => {
Copy link
Contributor

Choose a reason for hiding this comment

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

I wonder if using useRafState will be better here https://www.reactuse.com/state/userafstate? Looks like it could help to get rid of both debounce and handleResizeRef.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks, didn't know about that one

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
automaticImport 759 763 +4
elasticAssistant 414 418 +4
securitySolution 7778 7782 +4
total +12

Async chunks

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

id before after diff
securitySolution 9.8MB 9.8MB -3.0B

Page load bundle

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

id before after diff
elasticAssistant 261.2KB 262.3KB +1.2KB

@stephmilovic stephmilovic merged commit 128d6fc into elastic:main Jul 2, 2025
10 checks passed
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.19, 9.1

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

@kibanamachine
Copy link
Contributor

💔 Some backports could not be created

Status Branch Result
8.19 Backport failed because of merge conflicts
9.1

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

Manual backport

To create the backport manually run:

node scripts/backport --pr 226062

Questions ?

Please refer to the Backport tool documentation

@stephmilovic
Copy link
Contributor Author

💚 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

stephmilovic added a commit to stephmilovic/kibana that referenced this pull request Jul 2, 2025
…6062)

(cherry picked from commit 128d6fc)

# Conflicts:
#	x-pack/platform/plugins/private/translations/translations/zh-CN.json
kibanamachine added a commit that referenced this pull request Jul 2, 2025
) (#226270)

# Backport

This will backport the following commits from `main` to `9.1`:
- [[Security Assistant] Responsive design for welcome screen
(#226062)](#226062)

<!--- Backport version: 9.6.6 -->

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

<!--BACKPORT [{"author":{"name":"Steph
Milovic","email":"stephanie.milovic@elastic.co"},"sourceCommit":{"committedDate":"2025-07-02T16:21:59Z","message":"[Security
Assistant] Responsive design for welcome screen
(#226062)","sha":"128d6fc7735cca837e887a989a0a945cf5503396","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:
SecuritySolution","Team:Security Generative
AI","backport:version","v9.1.0","v8.19.0","v9.2.0"],"title":"[Security
Assistant] Responsive design for welcome
screen","number":226062,"url":"https://github.com/elastic/kibana/pull/226062","mergeCommit":{"message":"[Security
Assistant] Responsive design for welcome screen
(#226062)","sha":"128d6fc7735cca837e887a989a0a945cf5503396"}},"sourceBranch":"main","suggestedTargetBranches":["9.1","8.19"],"targetPullRequestStates":[{"branch":"9.1","label":"v9.1.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/226062","number":226062,"mergeCommit":{"message":"[Security
Assistant] Responsive design for welcome screen
(#226062)","sha":"128d6fc7735cca837e887a989a0a945cf5503396"}}]}]
BACKPORT-->

Co-authored-by: Steph Milovic <stephanie.milovic@elastic.co>
stephmilovic added a commit that referenced this pull request Jul 2, 2025
…6062) (#226273)

# Backport

This will backport the following commits from `main` to `8.19`:
- [[Security Assistant] Responsive design for welcome screen
(#226062)](#226062)

<!--- Backport version: 10.0.1 -->

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

<!--BACKPORT [{"author":{"name":"Steph
Milovic","email":"stephanie.milovic@elastic.co"},"sourceCommit":{"committedDate":"2025-07-02T16:21:59Z","message":"[Security
Assistant] Responsive design for welcome screen
(#226062)","sha":"128d6fc7735cca837e887a989a0a945cf5503396","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:
SecuritySolution","Team:Security Generative
AI","backport:version","v9.1.0","v8.19.0","v9.2.0"],"title":"[Security
Assistant] Responsive design for welcome
screen","number":226062,"url":"https://github.com/elastic/kibana/pull/226062","mergeCommit":{"message":"[Security
Assistant] Responsive design for welcome screen
(#226062)","sha":"128d6fc7735cca837e887a989a0a945cf5503396"}},"sourceBranch":"main","suggestedTargetBranches":["8.19"],"targetPullRequestStates":[{"branch":"9.1","label":"v9.1.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/226270","number":226270,"state":"OPEN"},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/226062","number":226062,"mergeCommit":{"message":"[Security
Assistant] Responsive design for welcome screen
(#226062)","sha":"128d6fc7735cca837e887a989a0a945cf5503396"}}]}]
BACKPORT-->
kertal pushed a commit to kertal/kibana that referenced this pull request Jul 25, 2025
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 release_note:skip Skip the PR/issue when compiling release notes Team:Security Generative AI Security Generative AI Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. v8.19.0 v9.1.0 v9.2.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants