-
Notifications
You must be signed in to change notification settings - Fork 8.2k
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
[SIEM] Sets page titles to the current page you are on #42157
Conversation
Pinging @elastic/secops |
💔 Build Failed |
💚 Build Succeeded |
const { title, ...rest } = props; | ||
useEffect(() => { | ||
document.title = `${title} - Kibana`; | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice effect!
You're going to want to avoid multiple re-rendering whenever you do things such as resize the window. With this current implementation it will call useEffect
and set the title ~7 times on an initial page load and it will do it multiple times when you resize your window if you put a console.log statement to test it:
The fix is simple, which is to pass an empty array to the useEffect
as a second argument. That will cause the hook to operate like a componenetDidMount
useEffect(() => {
document.title = `${title} - Kibana`;
}, []);
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good catch @FrankHassanabad 👍 , I passed title as the second param, so it should do the effect only when title changed. I think it does the same thing as passing []
as the second paraam, it just I think put title here would be clearer to express the idea that this effect acts when title changed.
useEffect(() => {
document.title = `${title} - Kibana`;
}, [title]);
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That works as well and adds a better degree of safety! I like it much more. 👍
<PageRoute | ||
{...props} | ||
component={Hosts} | ||
title={i18n.translate('xpack.siem.pages.Hosts.HostsTitle', { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For the most part our translation keys have been lower case separated by dots:
Examples:
xpack.siem.hosts.kqlPlaceholder
xpack.siem.navigation.overview
Should these just be xpack.siem.pages.hosts.hostsTitle
with camel case?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, thanks for pointing this out.
<PageRoute | ||
{...props} | ||
component={Network} | ||
title={i18n.translate('xpack.siem.pages.Network.NetworkTitle', { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For the most part our translation keys have been lower case separated by dots:
Examples:
xpack.siem.hosts.kqlPlaceholder
xpack.siem.navigation.overview
Should these just be xpack.siem.pages.network.networkTitle
with camel case?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
💚 Build Succeeded |
💚 Build Succeeded |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Checked this out, tested it, left feedback and overall details like this are going to bring us closer to GA!
Appreciate the neat hook usage and the tests for this.
* add page route * add unit test * rename file path * set document title only when document changed * update i18n keys * update i18n keys
…-or-edit-existing-rollup-job * 'master' of github.com:elastic/kibana: (114 commits) [ML] Fixing empty index pattern list (elastic#42299) [Markdown] Shim new platform - cleanup plugin (elastic#41760) [Code] Enable hierarchicalDocumentSymbolSupport for java language server (elastic#42233) Add New Platform mocks for data plugin (elastic#42261) Http server route handler implementation (elastic#41894) [SR] Allow custom index pattern to be used instead of selectable list when choosing indices to restore (elastic#41534) [Code] distributed Code abstraction (elastic#41374) [SIEM] Sets page titles to the current page you are on (elastic#42157) Saved Objects export API stable type order (elastic#42310) cancellation of interpreter execution (elastic#40238) [SIEM] Fixes a crash when Machine Learning influencers is an undefined value (elastic#42198) Changed the job to work with a dedicated index (elastic#42297) FTR: fix testSubjects.missingOrFail (elastic#42290) Increase retry timeout to prevent flaky tests (elastic#42291) Spaces - make space a hidden saved object type (elastic#41688) Allow applications to register feature privileges which are excluded from the base privileges (elastic#41300) Disable flaky log column reorder test (elastic#42285) Fixing add element in element reducer (elastic#42276) Fix infinite loop (elastic#42228) [Maps][File upload] Remove geojson deep clone logic, handle on maps side (elastic#41835) ...
Summary
This PR is to fix https://github.com/elastic/ingest-dev/issues/610,
setting titles for each page.
Checklist
Use
strikethroughsto remove checklist items you don't feel are applicable to this PR.[ ] Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support[ ] Documentation was added for features that require explanation or tutorials[ ] This was checked for keyboard-only and screenreader accessibilityFor maintainers
[ ] This was checked for breaking API changes and was labeled appropriately[ ] This includes a feature addition or change that requires a release note and was labeled appropriately