[SIEM] Sets page titles to the current page you are on #42157
[SIEM] Sets page titles to the current page you are on #42157angorayc merged 6 commits intoelastic:masterfrom
Conversation
|
Pinging @elastic/secops |
💔 Build Failed |
💚 Build Succeeded |
| const { title, ...rest } = props; | ||
| useEffect(() => { | ||
| document.title = `${title} - Kibana`; | ||
| }); |
There was a problem hiding this comment.
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.
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.
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.
For the most part our translation keys have been lower case separated by dots:
Examples:
xpack.siem.hosts.kqlPlaceholder
xpack.siem.navigation.overviewShould these just be xpack.siem.pages.hosts.hostsTitle with camel case?
There was a problem hiding this comment.
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.
For the most part our translation keys have been lower case separated by dots:
Examples:
xpack.siem.hosts.kqlPlaceholder
xpack.siem.navigation.overviewShould these just be xpack.siem.pages.network.networkTitle with camel case?
💚 Build Succeeded |
💚 Build Succeeded |
FrankHassanabad
left a comment
There was a problem hiding this comment.
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