Wrap system configuration elements in error boundary. (#10472)

* Wrap configlets in individual error boundaries.

* Typing `ConfigurationsPage`.

* Turning class into functional component.

* Replacing `connect` with `useStore`.

* Adding tests.

* Extending console suppression.

* Adding license header.

* Use `Promise.allSettled` to make sure loaded flag is set in case of rejections.

* Extracting helper components.

graylog2-web-interface/package.json

@@ -85,6 +85,7 @@
     "react-beautiful-dnd": "^13.1.0",
     "react-color": "^2.14.0",
     "react-day-picker": "^7.4.8",
+    "react-error-boundary": "^3.1.1",
     "react-grid-layout": "^0.18.3",
     "react-immutable-proptypes": "^2.1.0",
     "react-isolated-scroll": "^0.1.1",

graylog2-web-interface/src/pages/ConfigurationsPage.test.tsx

@@ -0,0 +1,66 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import * as React from 'react';
+import { render, screen } from 'wrappedTestingLibrary';
+import asMock from 'helpers/mocking/AsMock';
+import suppressConsole from 'helpers/suppressConsole';
+
+import ConfigurationsPage from 'pages/ConfigurationsPage';
+import usePluginEntities from 'views/logic/usePluginEntities';
+import SidecarConfig from 'components/configurations/SidecarConfig';
+
+jest.mock('views/logic/usePluginEntities');
+jest.mock('components/configurations/SearchesConfig', () => () => <span>Search Configuration</span>);
+jest.mock('components/configurations/MessageProcessorsConfig', () => () => <span>Message Processors Configuration</span>);
+jest.mock('components/configurations/SidecarConfig');
+
+const ComponentThrowingError = () => {
+  throw Error('Boom!');
+};
+
+const ComponentWorkingFine = () => (
+  <span>It is all good!</span>
+);
+
+describe('ConfigurationsPage', () => {
+  it('wraps core configuration elements with error boundary', async () => {
+    asMock(usePluginEntities).mockReturnValue([]);
+
+    asMock(SidecarConfig).mockImplementation(ComponentThrowingError);
+
+    await suppressConsole(async () => {
+      render(<ConfigurationsPage />);
+
+      await screen.findByText('Message Processors Configuration');
+      await screen.findByText('Boom!');
+    });
+  });
+
+  it('wraps plugin configuration elements with error boundary', async () => {
+    asMock(usePluginEntities).mockReturnValue([
+      { configType: 'foo', component: ComponentThrowingError },
+      { configType: 'bar', component: ComponentWorkingFine },
+    ]);
+
+    suppressConsole(() => {
+      render(<ConfigurationsPage />);
+    });
+
+    await screen.findByText('It is all good!');
+    await screen.findByText('Boom!');
+  });
+});