Repository navigation
[APM] Divide "Actions menu" into sections to improve readability - #56623
Conversation
dgieselaar
left a comment
There was a problem hiding this comment.
Looking great, just a few suggestions/qs.
d5fbaac to
af1123e
Compare
|
jenkins, retest this please |
|
retest |
💔 Build Failed
Test FailuresKibana Pipeline / x-pack-intake-agent / X-Pack Jest Tests.x-pack/legacy/plugins/apm/public/components/shared/TransactionActionMenu/__test__.Transaction action menu shows required sections onlyStandard OutStack TraceKibana Pipeline / x-pack-intake-agent / X-Pack Jest Tests.x-pack/legacy/plugins/apm/public/components/shared/TransactionActionMenu/__test__.Transaction action menu shows pod and required sections onlyStandard OutStack TraceKibana Pipeline / x-pack-intake-agent / X-Pack Jest Tests.x-pack/legacy/plugins/apm/public/components/shared/TransactionActionMenu/__test__.Transaction action menu shows host and required sections onlyStandard OutStack TraceHistory
To update your PR or re-run it, just comment with: |
💔 Build Failed
Test FailuresKibana Pipeline / x-pack-intake-agent / X-Pack Jest Tests.x-pack/legacy/plugins/apm/public/components/shared/TransactionActionMenu/__test__.Transaction action menu shows required sections onlyStandard OutStack TraceKibana Pipeline / x-pack-intake-agent / X-Pack Jest Tests.x-pack/legacy/plugins/apm/public/components/shared/TransactionActionMenu/__test__.Transaction action menu shows pod and required sections onlyStandard OutStack TraceKibana Pipeline / x-pack-intake-agent / X-Pack Jest Tests.x-pack/legacy/plugins/apm/public/components/shared/TransactionActionMenu/__test__.Transaction action menu shows host and required sections onlyStandard OutStack TraceHistory
To update your PR or re-run it, just comment with: |
💚 Build Succeeded
History
To update your PR or re-run it, just comment with: |
dgieselaar
left a comment
There was a problem hiding this comment.
(forgot to submit this comment)
There was a problem hiding this comment.
Ideally you would use the callback form of setState, see https://reactjs.org/docs/react-component.html#setstate
There was a problem hiding this comment.
@dgieselaar even in a function component?
|
@elasticmachine merge upstream |
29071a6 to
2293acf
Compare
There was a problem hiding this comment.
No need to add a marginBottom here, should just use the <SectionSpacer /> component https://github.com/elastic/kibana/blob/master/x-pack/plugins/observability/public/components/action_menu.tsx#L46
There was a problem hiding this comment.
Thanks for your feedback @phillipb, I added the marginBottom property because I thought the Section component should automatically handle the space between sections for me. Then with CSS I remove the space from the last item.
There was a problem hiding this comment.
ah, I see. That makes sense. What do you think about defaulting the marginBottom in the Section component, so others don't need to think about it?
There was a problem hiding this comment.
They don't have to worry about it, the property is optional if it is missing it will use 0.
There was a problem hiding this comment.
I just meant so that they get this behavior by default. This feels like the desired behavior to me, or is this APM specific?
There was a problem hiding this comment.
I think the following is more readable:
<Section key={item.key}>
!isLast && <SectionSpacer />Although using css is more performant... 🤔
There was a problem hiding this comment.
In the javascript approach it's clear that we add a space after every section except the last one. That's not possible to see from:
<Section key={item.key} marginBottom={px(units.plus)}>There was a problem hiding this comment.
I don't have strong feelings about one approach over the other. I just think if we go with the css approach it should all be handled internally in the Section component. A marginBottom prop feels like an afterthought. Some future person will wonder why it's there and what they should set it to. I'd rather keep the api clean for consistency.
There was a problem hiding this comment.
IMO, I expect the Service Component to handle that. Otherwise, what's the benefit that I have by using it? In the end, it just shows the children. Now if I start using it in other parts of the UI, every time I'd have to check if I'm in the last item of the list to not show the space. I agreed with @phillipb that we could add the margin-bottom by default in order to have a clear API. WDYT?
There was a problem hiding this comment.
we could add the margin-bottom by default in order to have a clear API
👍
381ec95 to
0ffd9a2
Compare
💚 Build SucceededHistory
To update your PR or re-run it, just comment with: |
) (#57907) * transaction actions menu * transaction actions menu * fixing pr comments * fixing pr comments * fixing pr comments * fixing pr comments * fixing unit test * fixing unit test * using moment to calculate the timestamp * renaming labels * Changing section subtitle * fixing unit tests * replacing div for react fragment * refactoring * removing marginbottom property * div is needed to remove the margin from the correct element Co-authored-by: Cauê Marcondes <55978943+cauemarcondes@users.noreply.github.com>
…stic#56623) * transaction actions menu * transaction actions menu * fixing pr comments * fixing pr comments * fixing pr comments * fixing pr comments * fixing unit test * fixing unit test * using moment to calculate the timestamp * renaming labels * Changing section subtitle * fixing unit tests * replacing div for react fragment * refactoring * removing marginbottom property * div is needed to remove the margin from the correct element
closes #53588