[triggersActionsUi] Reduce page load bundle to under 100kB

[YulNaumenko]

Resolves #95871

Summary

Current PR resolves the first part of the scope defined for the #95871:

1. changed all SVG files to be lazy loaded as a React components. Use the tool which is recommended by EUI team.
2. did the next minor code improvements:
   • moved shared components props definitions to the x-pack/plugins/triggers_actions_ui/public/types.ts ;
   • removed the usage duplication for x-pack/plugins/triggers_actions_ui/public/common/get_add_alert_flyout.tsx, x-pack/plugins/triggers_actions_ui/public/common/get_add_connector_flyout.tsx, x-pack/plugins/triggers_actions_ui/public/common/get_edit_alert_flyout.tsx, x-pack/plugins/triggers_actions_ui/public/common/get_edit_connector_flyout.tsx;
   • replaced <Fragment></Fragment> with shorter version <></>;
   • renamed some labels path to match the naming convention in Kibana translations

[elasticmachine]

Pinging @elastic/kibana-alerting-services (Team:Alerting Services)

[tylersmalley]

LGTM, thanks!

[ymao1]

Great changes! The bundle size is looking great! A few things I noticed:

The JIRA logo is super small now

It used to look like this:

When creating a new rule, I see this in the browser console:

react.development.js:167 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `AlertForm`. See https://fb.me/react-warning-keys for more information.
    in Fragment (created by AlertForm)
    in AlertForm (created by AlertAdd)
    in div (created by EuiFlyoutBody)
    in div (created by EuiFlyoutBody)
    in div (created by EuiFlyoutBody)
    in EuiFlyoutBody (created by AlertAdd)
    in HealthCheck (created by AlertAdd)
    in HealthContextProvider (created by AlertAdd)
    in div (created by EuiFlyout)
    in div (created by ForwardRef)
    in ForwardRef (created by ForwardRef)
    in ForwardRef (created by ForwardRef)
    in ForwardRef (created by ForwardRef)
    in ForwardRef (created by EuiFocusTrap)
    in EuiFocusTrap (created by EuiFlyout)
    in EuiFlyout (created by AlertAdd)
    in EuiPortal (created by AlertAdd)
    in AlertAdd

[ymao1]

Should we add guidance in the README about using React components for logos instead of directly importing SVGs?

[YulNaumenko]

I will add this

[ymao1]

Getting some more browser errors:

After creating a rule when the rules list loads:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `TypeFilter`. See https://fb.me/react-warning-keys for more information.
    in Fragment (created by TypeFilter)
    in TypeFilter (created by AlertsList)
    in div (created by EuiFlexItem)
    in EuiFlexItem (created by AlertsList)
    in div (created by EuiFlexGroup)
    in EuiFlexGroup (created by AlertsList)
    in div (created by EuiFlexItem)
    in EuiFlexItem (created by AlertsList)
    in div (created by EuiFlexGroup)
    in EuiFlexGroup (created by AlertsList)
    in section (created by AlertsList)
    in AlertsList
    in Suspense
    in Unknown (created by Context.Consumer)
    in Route (created by TriggersActionsUIHome)
    in Switch (created by TriggersActionsUIHome)
    in HealthCheck (created by TriggersActionsUIHome)
    in HealthContextProvider (created by TriggersActionsUIHome)
    in div (created by EuiPanel)
    in EuiPanel (created by EuiPageContent)
    in EuiPageContent (created by TriggersActionsUIHome)
    in main (created by EuiPageBody)
    in EuiPageBody (created by TriggersActionsUIHome)
    in TriggersActionsUIHome

When creating an index threshold rule:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `ThresholdExpression`. See https://fb.me/react-warning-keys for more information.
    in Fragment (created by ThresholdExpression)
    in ThresholdExpression
    in Suspense
    in Unknown (created by IndexThresholdAlertTypeExpression)
    in IndexThresholdAlertTypeExpression (created by AlertForm)
    in Suspense (created by AlertForm)
    in EuiErrorBoundary (created by AlertForm)
    in div (created by EuiForm)
    in EuiForm (created by AlertForm)
    in AlertForm (created by AlertAdd)
    in div (created by EuiFlyoutBody)
    in div (created by EuiFlyoutBody)
    in div (created by EuiFlyoutBody)
    in EuiFlyoutBody (created by AlertAdd)
    in HealthCheck (created by AlertAdd)
    in HealthContextProvider (created by AlertAdd)
    in div (created by EuiFlyout)
    in div (created by ForwardRef)
    in ForwardRef (created by ForwardRef)
    in ForwardRef (created by ForwardRef)
    in ForwardRef (created by ForwardRef)
    in ForwardRef (created by EuiFocusTrap)
    in EuiFocusTrap (created by EuiFlyout)
    in EuiFlyout (created by AlertAdd)
    in EuiPortal (created by AlertAdd)
    in AlertAdd

[YulNaumenko]

Getting some more browser errors:

After creating a rule when the rules list loads:

Warning: Each child in a list should have a unique "key" prop.

When creating an index threshold rule:

Warning: Each child in a list should have a unique "key" prop.

Thank you for catching this, @ymao1 ! Fixed in the commit.

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 9b85dfc
• Storybooks Preview

Metrics [docs]

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
triggersActionsUi	236	232	-4

Async chunks

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

id	before	after	diff
triggersActionsUi	1.5MB	1.6MB	+92.0KB

Page load bundle

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

id	before	after	diff
triggersActionsUi	105.7KB	96.7KB	-9.1KB

Unknown metric groups

API count

id	before	after	diff
triggersActionsUi	245	241	-4

async chunk count

id	before	after	diff
triggersActionsUi	41	50	+9

miscellaneous assets size

id	before	after	diff
triggersActionsUi	37.7KB	0.0B	-37.7KB

References to deprecated APIs

id	before	after	diff
crossClusterReplication	8	6	-2
globalSearch	4	2	-2
indexManagement	12	7	-5
infra	261	149	-112
lens	67	45	-22
licensing	18	15	-3
total			-146

History

• 💚 Build #127007 succeeded a80b8da
• 💚 Build #126923 succeeded 3c32024
• 💔 Build #126837 failed 08e1948
• 💔 Build #126831 failed 41c25e8
• 💔 Build #126830 failed 92f71be

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

cc @YulNaumenko

[ymao1]

LGTM! Nice job!