162224 fix action menu overlaps flyout

[Ruhshan]

Summary

Fixes #162224.

Currently when create custom link button is clicked, though the flyout opens, but action menu persisted over the flyout making the create custom link flyout unusable.

On this PR necessary restructuring and refactoring was done to fix this behavior.

Screencast.from.07-28-2023.01.52.15.AM.webm

Checklist

• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[kibanamachine]

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

[elasticmachine]

Pinging @elastic/apm-ui (Team:APM)

[achyutjhunjhunwala]

buildkite test this

[achyutjhunjhunwala]

@elasticmachine run elasticsearch-ci/docs

[Ruhshan]

@achyutjhunjhunwala thanks for your feedbacks. Will update the pr asap.

[Ruhshan]

Hi @achyutjhunjhunwala ,
I have incorporated your feedback on my last push.

Please have a look at your convenience.

[achyutjhunjhunwala]

Hi @achyutjhunjhunwala , I have incorporated your feedback on my last push.

Please have a look at your convenience.

@Ruhshan Thank you for fixing the review comments. I just saw why the build is failing.

• Since you now added this new property to CustomLinkMenuSection the test started throwing type errors. Can you update the tests as well here to accept this the property openCreateCustomLinkFlyout: () => void

kibana/x-pack/plugins/apm/public/components/shared/transaction_action_menu/custom_link_menu_section/index.test.tsx

Line 48 in 69c5cfe

<CustomLinkMenuSection transaction={transaction} />,

• You can run the following command locally to see if all the typescript errors are gone or not node scripts/type_check.js --project x-pack/plugins/apm/tsconfig.json

[Ruhshan]

Hi @achyutjhunjhunwala , thanks again for your valuable feedback. Tried to incorporate them in the latest commits. Have a look when you can.

[achyutjhunjhunwala]

buildkite test this

[achyutjhunjhunwala]

@elasticmachine run elasticsearch-ci/docs

[achyutjhunjhunwala]

Hi @achyutjhunjhunwala , thanks again for your valuable feedback. Tried to incorporate them in the latest commits. Have a look when you can.

@Ruhshan Thank you so much for fixing the bug. LGTM 👍🏼
I just changed the noop implementation as we already use the lodash library, i imported it from there.

Waiting for build to turn green before merging

[achyutjhunjhunwala]

buildkite test this

[achyutjhunjhunwala]

@elasticmachine run elasticsearch-ci/docs

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 296c439

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
apm	1464	1465	+1

Async chunks

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

id	before	after	diff
apm	3.7MB	3.7MB	+660.0B

History

• 💔 Build #148218 failed 51909c0

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[Ruhshan]

Hi @achyutjhunjhunwala , thanks again for your valuable feedback. Tried to incorporate them in the latest commits. Have a look when you can.

@Ruhshan Thank you so much for fixing the bug. LGTM 👍🏼 I just changed the noop implementation as we already use the lodash library, i imported it from there.

Waiting for build to turn green before merging

Thanks a lot. You are awesome!