diff --git a/plugins/airbrake/dev/index.tsx b/plugins/airbrake/dev/index.tsx
index 67de050404..a76b80a4e3 100644
--- a/plugins/airbrake/dev/index.tsx
+++ b/plugins/airbrake/dev/index.tsx
@@ -15,12 +15,35 @@
*/
import React from 'react';
import { createDevApp } from '@backstage/dev-utils';
-import { airbrakePlugin, AirbrakePage } from '../src/plugin';
+import { AirbrakePage, airbrakePlugin } from '../src/plugin';
+import {
+ Content,
+ ContentHeader,
+ Header,
+ HeaderLabel,
+ Page,
+ SupportButton,
+} from '@backstage/core-components';
createDevApp()
.registerPlugin(airbrakePlugin)
.addPage({
- element: ,
+ element: (
+
+
+
+
+
+ A description of your plugin goes here.
+
+
+
+
+
+ ),
title: 'Root Page',
path: '/airbrake',
})
diff --git a/plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.test.tsx b/plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.test.tsx
index e568ea526d..470064ed10 100644
--- a/plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.test.tsx
+++ b/plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.test.tsx
@@ -31,7 +31,7 @@ describe('AirbrakeWidget', () => {
expect(exampleData.groups.length).toBeGreaterThan(0);
for (const group of exampleData.groups) {
expect(
- await table.findByText(group.errors[0].message),
+ await table.getByText(group.errors[0].message),
).toBeInTheDocument();
}
});
diff --git a/plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.tsx b/plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.tsx
index c7f1e1b626..1bceb9c7e1 100644
--- a/plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.tsx
+++ b/plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.tsx
@@ -14,42 +14,35 @@
* limitations under the License.
*/
import React from 'react';
-import { Typography, Grid } from '@material-ui/core';
-import {
- InfoCard,
- Header,
- Page,
- Content,
- ContentHeader,
- HeaderLabel,
- SupportButton,
-} from '@backstage/core-components';
+import { Grid, Typography } from '@material-ui/core';
+import { InfoCard } from '@backstage/core-components';
import exampleData from './ExampleData';
import hash from 'object-hash';
+import { makeStyles } from '@material-ui/core/styles';
+import { BackstageTheme } from '@backstage/theme';
+
+const useStyles = makeStyles(() => ({
+ multilineText: {
+ whiteSpace: 'pre-wrap',
+ },
+}));
export const AirbrakeWidget = () => {
+ const classes = useStyles();
+
return (
-
-
-
-
- A description of your plugin goes here.
-
-
- {exampleData.groups.map(group => (
-
- {group.errors.map(error => (
-
- {error.message}
-
- ))}
-
+
+ {exampleData.groups.map(group => (
+
+ {group.errors.map(error => (
+
+
+ {error.message}
+
+
))}
-
-
+ ))}
+
);
};
diff --git a/plugins/airbrake/src/components/AirbrakeWidget/ExampleData.ts b/plugins/airbrake/src/components/AirbrakeWidget/ExampleData.ts
index d1d2394ee6..3d4793c011 100644
--- a/plugins/airbrake/src/components/AirbrakeWidget/ExampleData.ts
+++ b/plugins/airbrake/src/components/AirbrakeWidget/ExampleData.ts
@@ -65,8 +65,7 @@ export default {
errors: [
{
type: 'ChunkLoadError',
- message:
- 'Loading chunk 7764 failed.\n(error: https://example.com/static/react-syntax-highlighter/lowlight-import.9ac339f2.chunk.js)',
+ message: 'Loading chunk 7764 failed.',
backtrace: [
{
file: '/PROJECT_ROOT/static/runtime.069c874d.js',