diff --git a/.changeset/kind-ways-nail.md b/.changeset/kind-ways-nail.md
new file mode 100644
index 0000000000..14821e4f44
--- /dev/null
+++ b/.changeset/kind-ways-nail.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Switch to using `LogViewer` component from `@backstage/core-components` to display build logs.
diff --git a/plugins/techdocs/package.json b/plugins/techdocs/package.json
index b048761e1c..50cabace51 100644
--- a/plugins/techdocs/package.json
+++ b/plugins/techdocs/package.json
@@ -51,7 +51,6 @@
"event-source-polyfill": "^1.0.25",
"git-url-parse": "^11.6.0",
"lodash": "^4.17.21",
- "react-lazylog": "^4.5.2",
"react-router": "6.0.0-beta.0",
"react-router-dom": "6.0.0-beta.0",
"react-text-truncate": "^0.16.0",
diff --git a/plugins/techdocs/src/reader/components/TechDocsBuildLogs.test.tsx b/plugins/techdocs/src/reader/components/TechDocsBuildLogs.test.tsx
index fa82527282..ea24a3627f 100644
--- a/plugins/techdocs/src/reader/components/TechDocsBuildLogs.test.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsBuildLogs.test.tsx
@@ -14,32 +14,30 @@
* limitations under the License.
*/
-import { render } from '@testing-library/react';
-import React from 'react';
+import React, { ReactNode } from 'react';
+import { renderInTestApp } from '@backstage/test-utils';
import {
TechDocsBuildLogs,
TechDocsBuildLogsDrawerContent,
} from './TechDocsBuildLogs';
-// react-lazylog is based on a react-virtualized component which doesn't
-// write the content to the dom, so we mock it.
-jest.mock('react-lazylog/build/LazyLog', () => {
- return {
- default: ({ text }: { text: string }) => {
- return
{text}
;
- },
- };
-});
+// The inside needs mocking to render in jsdom
+jest.mock('react-virtualized-auto-sizer', () => ({
+ __esModule: true,
+ default: (props: {
+ children: (size: { width: number; height: number }) => ReactNode;
+ }) => <>{props.children({ width: 400, height: 200 })}>,
+}));
describe('', () => {
- it('should render with button', () => {
- const rendered = render();
+ it('should render with button', async () => {
+ const rendered = await renderInTestApp();
expect(rendered.getByText(/Show Build Logs/i)).toBeInTheDocument();
expect(rendered.queryByText(/Build Details/i)).not.toBeInTheDocument();
});
- it('should open drawer', () => {
- const rendered = render();
+ it('should open drawer', async () => {
+ const rendered = await renderInTestApp();
rendered.getByText(/Show Build Logs/i).click();
expect(rendered.getByText(/Build Details/i)).toBeInTheDocument();
});
@@ -48,7 +46,7 @@ describe('', () => {
describe('', () => {
it('should render with empty log', async () => {
const onClose = jest.fn();
- const rendered = render(
+ const rendered = await renderInTestApp(
,
);
expect(rendered.getByText(/Build Details/i)).toBeInTheDocument();
@@ -61,7 +59,7 @@ describe('', () => {
it('should render logs', async () => {
const onClose = jest.fn();
- const rendered = render(
+ const rendered = await renderInTestApp(
', () => {
expect(onClose).toBeCalledTimes(0);
});
- it('should call onClose', () => {
+ it('should call onClose', async () => {
const onClose = jest.fn();
- const rendered = render(
+ const rendered = await renderInTestApp(
,
);
rendered.getByTitle('Close the drawer').click();
diff --git a/plugins/techdocs/src/reader/components/TechDocsBuildLogs.tsx b/plugins/techdocs/src/reader/components/TechDocsBuildLogs.tsx
index 8c739a9bcf..e49d486ab8 100644
--- a/plugins/techdocs/src/reader/components/TechDocsBuildLogs.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsBuildLogs.tsx
@@ -14,7 +14,7 @@
* limitations under the License.
*/
-import { Progress } from '@backstage/core-components';
+import { LogViewer } from '@backstage/core-components';
import {
Button,
createStyles,
@@ -26,9 +26,7 @@ import {
Typography,
} from '@material-ui/core';
import Close from '@material-ui/icons/Close';
-import React, { Suspense, useState } from 'react';
-
-const LazyLog = React.lazy(() => import('react-lazylog/build/LazyLog'));
+import React, { useState } from 'react';
const useDrawerStyles = makeStyles((theme: Theme) =>
createStyles({
@@ -46,6 +44,9 @@ const useDrawerStyles = makeStyles((theme: Theme) =>
height: '100%',
overflow: 'hidden',
},
+ logs: {
+ background: theme.palette.background.default,
+ },
}),
);
@@ -57,6 +58,8 @@ export const TechDocsBuildLogsDrawerContent = ({
onClose: () => void;
}) => {
const classes = useDrawerStyles();
+ const logText =
+ buildLog.length === 0 ? 'Waiting for logs...' : buildLog.join('\n');
return (
-
- }>
-
-
+
);
};