[EuiProvider/ResponseOps] Remove usage of deprecated React rendering utilities #180098

tsullivan · 2024-04-04T22:53:24Z

Summary

Partially addresses https://github.com/elastic/kibana-team/issues/805

These changes come up from searching in the code and finding where certain kinds of deprecated AppEx-SharedUX modules are imported. Reviewers: Please interact with critical paths through the UI components touched in this PR, ESPECIALLY in terms of testing dark mode and i18n.

Started with focusing on code owned by ResponseOps.
Stack Management changes trickled into this PR because ResponseOps needs the theme field from ManagementAppMountParams
Security changes trickled into this PR, in its test code, because of the Stack Management changes.

Checklist

Delete any items that are not applicable to this PR.

Unit or functional tests were updated or added to match the most common scenarios
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

tsullivan · 2024-04-04T23:56:03Z

src/plugins/management/public/components/management_app/management_app.tsx

@@ -114,30 +108,28 @@ export const ManagementApp = ({
  };

  return (
-    <RedirectAppLinks coreStart={dependencies.coreStart}>
-      <I18nProvider>
+    <KibanaRenderContextProvider i18n={coreStart.i18n} theme={coreStart.theme}>


I placed KibanaRenderContextProvider above other context providers, in all changes, for consistency

tsullivan · 2024-04-04T23:57:15Z

x-pack/plugins/alerting/public/application/maintenance_windows.tsx

@@ -93,16 +93,12 @@ export const renderApp = ({
        }}
      >
        <Router history={history}>
-          <EuiThemeProvider darkMode={isDarkMode}>
-            <i18nCore.Context>


The i18n context provider is not explicitly needed since KibnaRenderContextProvider provides it

tsullivan · 2024-04-04T23:58:16Z

x-pack/plugins/cases/public/components/visualizations/actions/action_wrapper.tsx

@@ -30,16 +29,15 @@ const ActionWrapperWithContext: React.FC<PropsWithChildren<Props>> = ({
  caseContextProps,
  currentAppId,
 }) => {
-  const { application } = useKibana().services;
-  const isDarkTheme = useIsDarkTheme();


useIsDarkTheme seems to just be passing through the dark theme setting from core, which isn't explicitly needed with KibanaRenderContextProvider

tsullivan · 2024-04-04T23:58:49Z

x-pack/plugins/triggers_actions_ui/public/application/alerts_app.tsx


  setDataViewsService(dataViews);
  return (
-    <I18nProvider>


The i18n context provider is not explicitly needed since KibnaRenderContextProvider provides it

tsullivan · 2024-04-04T23:59:25Z

x-pack/plugins/triggers_actions_ui/public/application/alerts_app.tsx

@@ -29,23 +27,18 @@ export const renderApp = (deps: TriggersAndActionsUiServices) => {
 };

 export const App = ({ deps }: { deps: TriggersAndActionsUiServices }) => {
-  const { dataViews, theme, theme$ } = deps;
-  const isDarkMode = theme.getTheme().darkMode;


This is just passing through the dark mode setting from Core, which isn't explicitly needed with KibanaRenderContextProvider

tsullivan · 2024-04-04T23:59:33Z

x-pack/plugins/triggers_actions_ui/public/application/app.tsx


  const sectionsRegex = sections.join('|');
  setDataViewsService(dataViews);
  return (
-    <I18nProvider>


The i18n context provider is not explicitly needed since KibnaRenderContextProvider provides it

tsullivan · 2024-04-05T00:00:33Z

...ctions_ui/public/application/sections/alerts_table/toolbar/components/inspect/modal.test.tsx

    return render(<ModalInspectQuery {...defaultProps} />, {
-      wrapper: ({ children }) => <EuiThemeProvider>{children}</EuiThemeProvider>,
+      wrapper: ({ children }) => (
+        <KibanaThemeProvider theme={theme}>{children}</KibanaThemeProvider>


Not using KibanaRenderContextProvider here since this is a test file

… consumers

…fix'

tsullivan · 2024-04-06T01:12:31Z

/ci

…fix'

tsullivan · 2024-04-06T01:17:07Z

...ins/triggers_actions_ui/public/application/sections/rule_details/components/rule_details.tsx

  bulkDisableRules,
  bulkEnableRules,
  bulkDeleteRules,
-  snoozeRule,
-  unsnoozeRule,


removed unused variables to eliminate warnings seen in the editor

tsullivan · 2024-04-06T03:36:33Z

x-pack/plugins/cases/public/components/visualizations/actions/mocks.ts

@@ -76,8 +69,8 @@ export const getMockApplications$ = () =>

 export const getMockCaseUiActionProps = () => {
  const core = {
+    ...coreStart,


This was done to add i18n to the context

kibana-ci · 2024-04-08T17:03:12Z

💚 Build Succeeded

Buildkite Build
Commit: 492dc19

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`alerting`	164	174	+10
`cases`	714	717	+3
`management`	117	127	+10
`triggersActionsUi`	699	713	+14
total			+37

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
`management`	43	44	+1
`triggersActionsUi`	566	567	+1
total			+2

Async chunks

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

id	before	after	diff
`alerting`	90.7KB	91.5KB	+917.0B
`cases`	447.5KB	446.5KB	-1.0KB
`management`	43.5KB	44.5KB	+1019.0B
`triggersActionsUi`	1.6MB	1.6MB	+11.7KB
total			+12.6KB

Page load bundle

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

id	before	after	diff
`alerting`	23.7KB	23.6KB	-17.0B
`cases`	147.7KB	148.9KB	+1.1KB
`triggersActionsUi`	116.6KB	116.7KB	+120.0B
total			+1.2KB

Unknown metric groups

API count

id	before	after	diff
`management`	43	44	+1
`triggersActionsUi`	592	593	+1
total			+2

References to deprecated APIs

id	before	after	diff
`alerting`	119	116	-3
`cases`	19	14	-5
`cloudDataMigration`	3	4	+1
`crossClusterReplication`	5	6	+1
`indexLifecycleManagement`	5	6	+1
`indexManagement`	6	7	+1
`ingestPipelines`	4	5	+1
`licenseManagement`	5	6	+1
`logstash`	5	6	+1
`management`	4	1	-3
`remoteClusters`	2	3	+1
`reporting`	34	35	+1
`rollup`	5	6	+1
`savedObjectsTagging`	45	46	+1
`security`	66	70	+4
`snapshotRestore`	5	6	+1
`spaces`	22	23	+1
`triggersActionsUi`	53	26	-27
`upgradeAssistant`	9	10	+1
`watcher`	6	7	+1
total			-19

History

💚 Build #201605 succeeded cbe06c8961bcbe97b1844894da87f5ff8f10e1f3
💔 Build #201601 failed 5c69f2c
💔 Build #201533 failed ae1f294c44fd9dc70a364c72ae340a6b6a6ca6c5
💔 Build #201506 failed 4ec82c3430ab33ba5296b75a0b19ccd9b818b7d5
💔 Build #201290 failed 5f562169ff0e1532c5822cd8516775fb78e05d35

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

cnasikas · 2024-04-09T09:00:41Z

x-pack/plugins/cases/public/common/use_cases_toast.tsx

@@ -106,7 +106,8 @@ const getErrorMessage = (error: Error | ServerError): string => {

 export const useCasesToast = () => {
  const { appId } = useApplication();
-  const { getUrlForApp, navigateToUrl } = useKibana().services.application;
+  const { application, i18n, theme } = useKibana().services;


Are these services available to all plugins? I am asking because Cases are used in a lot of places across Kibana.

@cnasikas these services are available to all plugins as part of the CoreStart contract. They are coming from this useKibana() hook as they are provided to its context provider here.

Nice, thanks!

azasypkin

Changes in Security plugin tests LGTM, thanks!

XavierM

Code looks better ;) and I tested it locally and everything ~~seem to work~~ is working as expected

ElenaStoeva

Management changes LGTM

…180521) ## Summary Partially addresses elastic/kibana-team#805 Follows #180098 These changes come up from searching in the code and finding where certain kinds of deprecated AppEx-SharedUX modules are imported. **Reviewers: Please interact with critical paths through the UI components touched in this PR, ESPECIALLY in terms of testing dark mode and i18n.** This focuses on code within Response Ops. <img width="1107" alt="image" src="https://github.com/elastic/kibana/assets/908371/c0d2ce08-ac35-45a7-8192-0b2256fceb0e"> ### Checklist Delete any items that are not applicable to this PR. - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --------- Co-authored-by: kibanamachine <[email protected]>

tsullivan force-pushed the sharedux/cleanup-tomountpoint-deprecations-ii branch 2 times, most recently from 6584509 to df6aa4d Compare April 4, 2024 23:54

tsullivan commented Apr 4, 2024

View reviewed changes

tsullivan commented Apr 5, 2024

View reviewed changes

tsullivan force-pushed the sharedux/cleanup-tomountpoint-deprecations-ii branch 2 times, most recently from 39699cf to 95376ef Compare April 5, 2024 20:20

tsullivan and others added 5 commits April 5, 2024 16:48

Remove usage of deprecated React rendering utilities from ResponseOps…

16b07c3

… consumers

[CI] Auto-commit changed files from 'node scripts/lint_ts_projects --…

1aa01cb

…fix'

fix jest test_utils and mocks

3213e37

[CI] Auto-commit changed files from 'node scripts/lint_ts_projects --…

53edd51

…fix'

Cases-visualizations test fixes

5c69f2c

tsullivan force-pushed the sharedux/cleanup-tomountpoint-deprecations-ii branch from 4d5e7d0 to 5c69f2c Compare April 5, 2024 23:48

[CI] Auto-commit changed files from 'node scripts/lint_ts_projects --…

2578f8d

…fix'

tsullivan commented Apr 6, 2024

View reviewed changes

tsullivan force-pushed the sharedux/cleanup-tomountpoint-deprecations-ii branch from cbe06c8 to 2578f8d Compare April 6, 2024 03:27

tsullivan marked this pull request as ready for review April 6, 2024 03:27

tsullivan requested review from a team as code owners April 6, 2024 03:27

tsullivan added technical debt Improvement of the software architecture and operational architecture release_note:skip Skip the PR/issue when compiling release notes labels Apr 6, 2024

tsullivan commented Apr 6, 2024

View reviewed changes

Merge branch 'main' into sharedux/cleanup-tomountpoint-deprecations-ii

492dc19

tsullivan self-assigned this Apr 9, 2024

cnasikas reviewed Apr 9, 2024

View reviewed changes

azasypkin approved these changes Apr 9, 2024

View reviewed changes

ElenaStoeva self-requested a review April 9, 2024 09:49

XavierM approved these changes Apr 9, 2024

View reviewed changes

ElenaStoeva approved these changes Apr 9, 2024

View reviewed changes

tsullivan merged commit 09228a3 into elastic:main Apr 9, 2024
36 checks passed

kibanamachine added v8.14.0 backport:skip This commit does not require backporting labels Apr 9, 2024

tsullivan deleted the sharedux/cleanup-tomountpoint-deprecations-ii branch April 9, 2024 16:31

tsullivan mentioned this pull request Apr 10, 2024

[EuiProvider/ResponseOps] Remove usage of deprecated React rendering utilities #180521

Merged

3 tasks

tsullivan changed the title ~~[ResponseOps] Remove usage of deprecated React rendering utilities~~ [EuiProvider/ResponseOps] Remove usage of deprecated React rendering utilities Jul 20, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiProvider/ResponseOps] Remove usage of deprecated React rendering utilities #180098

[EuiProvider/ResponseOps] Remove usage of deprecated React rendering utilities #180098

tsullivan commented Apr 4, 2024 •

edited

Loading

tsullivan Apr 4, 2024

tsullivan Apr 4, 2024

tsullivan Apr 4, 2024

tsullivan Apr 4, 2024

tsullivan Apr 4, 2024

tsullivan Apr 4, 2024

tsullivan Apr 5, 2024

tsullivan commented Apr 6, 2024

tsullivan Apr 6, 2024 •

edited

Loading

tsullivan Apr 6, 2024

kibana-ci commented Apr 8, 2024

API count

References to deprecated APIs

cnasikas Apr 9, 2024

tsullivan Apr 9, 2024

cnasikas Apr 9, 2024

azasypkin left a comment

XavierM left a comment •

edited

Loading

ElenaStoeva left a comment

[EuiProvider/ResponseOps] Remove usage of deprecated React rendering utilities #180098

[EuiProvider/ResponseOps] Remove usage of deprecated React rendering utilities #180098

Conversation

tsullivan commented Apr 4, 2024 • edited Loading

Summary

Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tsullivan commented Apr 6, 2024

tsullivan Apr 6, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kibana-ci commented Apr 8, 2024

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Page load bundle

API count

References to deprecated APIs

History

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

azasypkin left a comment

Choose a reason for hiding this comment

XavierM left a comment • edited Loading

Choose a reason for hiding this comment

ElenaStoeva left a comment

Choose a reason for hiding this comment

tsullivan commented Apr 4, 2024 •

edited

Loading

tsullivan Apr 6, 2024 •

edited

Loading

XavierM left a comment •

edited

Loading