techdocs: switch to using LogViewer

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.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.

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",

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 <p>{text}</p>;
-    },
-  };
-});
+// The <AutoSizer> inside <LogViewer> 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('<TechDocsBuildLogs />', () => {
-  it('should render with button', () => {
-    const rendered = render(<TechDocsBuildLogs buildLog={[]} />);
+  it('should render with button', async () => {
+    const rendered = await renderInTestApp(<TechDocsBuildLogs buildLog={[]} />);
     expect(rendered.getByText(/Show Build Logs/i)).toBeInTheDocument();
     expect(rendered.queryByText(/Build Details/i)).not.toBeInTheDocument();
   });
 
-  it('should open drawer', () => {
-    const rendered = render(<TechDocsBuildLogs buildLog={[]} />);
+  it('should open drawer', async () => {
+    const rendered = await renderInTestApp(<TechDocsBuildLogs buildLog={[]} />);
     rendered.getByText(/Show Build Logs/i).click();
     expect(rendered.getByText(/Build Details/i)).toBeInTheDocument();
   });
@@ -48,7 +46,7 @@ describe('<TechDocsBuildLogs />', () => {
 describe('<TechDocsBuildLogsDrawerContent />', () => {
   it('should render with empty log', async () => {
     const onClose = jest.fn();
-    const rendered = render(
+    const rendered = await renderInTestApp(
       <TechDocsBuildLogsDrawerContent buildLog={[]} onClose={onClose} />,
     );
     expect(rendered.getByText(/Build Details/i)).toBeInTheDocument();
@@ -61,7 +59,7 @@ describe('<TechDocsBuildLogsDrawerContent />', () => {
 
   it('should render logs', async () => {
     const onClose = jest.fn();
-    const rendered = render(
+    const rendered = await renderInTestApp(
       <TechDocsBuildLogsDrawerContent
         buildLog={['Line 1', 'Line 2']}
         onClose={onClose}
@@ -74,9 +72,9 @@ describe('<TechDocsBuildLogsDrawerContent />', () => {
     expect(onClose).toBeCalledTimes(0);
   });
 
-  it('should call onClose', () => {
+  it('should call onClose', async () => {
     const onClose = jest.fn();
-    const rendered = render(
+    const rendered = await renderInTestApp(
       <TechDocsBuildLogsDrawerContent buildLog={[]} onClose={onClose} />,
     );
     rendered.getByTitle('Close the drawer').click();

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 (
     <Grid
       container
@@ -83,18 +86,7 @@ export const TechDocsBuildLogsDrawerContent = ({
           <Close />
         </IconButton>
       </Grid>
-
-      <Suspense fallback={<Progress />}>
-        <LazyLog
-          text={
-            buildLog.length === 0 ? 'Waiting for logs...' : buildLog.join('\n')
-          }
-          extraLines={1}
-          follow
-          selectableLines
-          enableSearch
-        />
-      </Suspense>
+      <LogViewer text={logText} className={classes.logs} />
     </Grid>
   );
 };