components: chonkify alert

[JonasBa]

This is the first PR that takes care of converting the Alert component to a Chonky look. The PR implements a bulk of visual changes, but it is not final - I will follow up with minor tweaks and exceptions to the styles, but it will be easier to follow them as separate pull requests.

[codecov]

Bundle Report

Changes will increase total bundle size by 3.59kB (0.01%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
app-webpack-bundle-array-push	33.15MB	3.59kB (0.01%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: app-webpack-bundle-array-push

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
chunks/vendors-node_modules_emotion_styled_dist_emotion-styled_browser_esm_js-node_modules_color_ind-1ca72f.*.js (New)	1.56MB	1.56MB	100.0% 🚀
chunks/app_bootstrap_initializeApp_tsx-app_components_avatar_actorAvatar_tsx-app_components_avatar_a-7c38cc.*.js	153 bytes	1.43MB	0.01%
chunks/app_actionCreators_redirectToProject_tsx-app_bootstrap_commonInitialization_tsx-app_bootstrap-f231df.*.js (New)	434.91kB	434.91kB	100.0% 🚀
chunks/app_actionCreators_preferences_tsx-app_components_avatar_actorAvatar_tsx-app_components_chevr-594660.*.js	141 bytes	324.34kB	0.04%
chunks/app_components_core_alert_stories_tsx.*.js	-1.13kB	104.62kB	-1.06%
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_projectDetail_index_tsx.8bad7b34756376f336f5.js (New)	101.16kB	101.16kB	100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_performance_transactionSummary-51d702.2bbc9c040b99e7ffb013.js (New)	37.35kB	37.35kB	100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_insights_common_components_cha-d2aaf9.9a15766c47d3a879fe17.js (New)	31.68kB	31.68kB	100.0% 🚀
chunks/app_components_charts_eventsRequest_tsx-app_components_feedback_widget_us*kWidget_tsx--fbb1b9.c245472caa372e826fa0.js (New)	31.18kB	31.18kB	100.0% 🚀
chunks/app_views_explore_logs_index_tsx-node_modules_echarts_lib_chart_scatter_js-node_modules_echar-5988f7.*.js	23 bytes	25.5kB	0.09%
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-feae7d.82e05d42339902ce3f0a.js (New)	24.18kB	24.18kB	100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_utils_discover_discoverQuery_tsx-app-c5fefe.2211e73dc2ebd19a7506.js (New)	17.3kB	17.3kB	100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_gridEditable_sortLink_tsx-d372f4.cdfa8045d9945e8aa7c7.js (New)	16.21kB	16.21kB	100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-f61270.6bf34cbe4116afbd46c1.js (New)	13.36kB	13.36kB	100.0% 🚀
chunks/app_components_charts_lineChart_tsx-app_components_feedback_widget_us*kWidget_tsx-app_-26fc43.1723d57ed93679e8aa4a.js (New)	12.33kB	12.33kB	100.0% 🚀
chunks/vendors-node_modules_emotion_styled_base_dist_emotion-styled-base_browser_esm_js-node_modules-0f7219.*.js (Deleted)	-1.56MB	0 bytes	-100.0% 🗑️
chunks/app_actionCreators_redirectToProject_tsx-app_bootstrap_commonInitialization_tsx-app_bootstrap-eebb3f.*.js (Deleted)	-432.03kB	0 bytes	-100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_projectDetail_index_tsx.a1c4d44360236f99638c.js (Deleted)	-101.16kB	0 bytes	-100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_performance_transactionSummary-51d702.be98cc4d0d53ceda5f27.js (Deleted)	-37.35kB	0 bytes	-100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_insights_common_components_cha-d2aaf9.7421757bedc90635022a.js (Deleted)	-31.68kB	0 bytes	-100.0% 🗑️
chunks/app_components_charts_eventsRequest_tsx-app_components_feedback_widget_us*kWidget_tsx--fbb1b9.80e13529411b45ad6740.js (Deleted)	-31.18kB	0 bytes	-100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-feae7d.1b8187763795840335b6.js (Deleted)	-24.18kB	0 bytes	-100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_utils_discover_discoverQuery_tsx-app-c5fefe.3c3526168fec754e5247.js (Deleted)	-17.3kB	0 bytes	-100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_gridEditable_sortLink_tsx-d372f4.9f35223b1569028e985d.js (Deleted)	-16.21kB	0 bytes	-100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-f61270.ed4bf680c25aba3f1112.js (Deleted)	-13.36kB	0 bytes	-100.0% 🗑️
chunks/app_components_charts_lineChart_tsx-app_components_feedback_widget_us*kWidget_tsx-app_-26fc43.069bca948a389f8a16f4.js (Deleted)	-12.33kB	0 bytes	-100.0% 🗑️

Files in chunks/app_bootstrap_initializeApp_tsx-app_components_avatar_actorAvatar_tsx-app_components_avatar_a-7c38cc.*.js:

• ./app/components/core/alert.tsx → Total Size: 124.49kB

Files in chunks/app_actionCreators_redirectToProject_tsx-app_bootstrap_commonInitialization_tsx-app_bootstrap-f231df.*.js:

• ./app/components/core/alert.chonk.tsx → Total Size: 24.98kB

• ./app/utils/theme/withChonk.tsx → Total Size: 1.21kB

• ./app/utils/unreachable.tsx → Total Size: 542 bytes

• ./app/utils/theme/theme.chonk.tsx → Total Size: 22.77kB

Files in chunks/app_actionCreators_preferences_tsx-app_components_avatar_actorAvatar_tsx-app_components_chevr-594660.*.js:

• ./app/components/core/alert.tsx → Total Size: 124.49kB

[natemoo-re]

LGTM nice work! Very awesome to see the ball start rolling here. 🙌

[natemoo-re]

Seems like a useful pattern, should this be added to the utils directory instead?

[JonasBa]

Yup, we have like 5 other instances of it, so let me move it to utils and add a comment

[codecov]

❌ 1 Tests Failed:

Tests completed	Failed	Passed	Skipped
8639	1	8638	3

View the full list of 1 ❄️ flaky tests

AutofixRootCause can view a relevant code snippet

Flake rate in main: 19.23% (Passed 21 times, Failed 5 times)

Stack Traces | 0.11s run time

TestingLibraryElementError: Unable to find an element with the text: This is the code snippet and analysis of a root cause.. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
...
    at Object.getElementError (.../sentry/sentry/node_modules/@.../dom/dist/config.js:37:19)
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:76:38
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:52:17
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:95:19
    at Object.<anonymous> (.../events/autofix/autofixRootCause.spec.tsx:32:40)

To view more test analytics, go to the Test Analytics Dashboard
_{📋 Got 3 mins? Take this short survey to help us improve Test Analytics.}