circleci: switch to use LogViewer

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

.changeset/rich-carrots-relax.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-circleci': patch
+---
+
+Switch to using `LogViewer` component from `@backstage/core-components` to display action output.

plugins/circleci/package.json

@@ -44,7 +44,6 @@
     "humanize-duration": "^3.27.0",
     "lodash": "^4.17.21",
     "luxon": "^2.0.2",
-    "react-lazylog": "^4.5.2",
     "react-router": "6.0.0-beta.0",
     "react-router-dom": "6.0.0-beta.0",
     "react-use": "^17.2.4"
@@ -63,7 +62,6 @@
     "@types/humanize-duration": "^3.25.1",
     "@types/jest": "^26.0.7",
     "@types/node": "^14.14.32",
-    "@types/react-lazylog": "^4.5.0",
     "cross-fetch": "^3.0.6",
     "msw": "^0.35.0"
   },

plugins/circleci/src/components/BuildWithStepsPage/lib/ActionOutput/ActionOutput.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Progress } from '@backstage/core-components';
+import { LogViewer } from '@backstage/core-components';
 import {
   Accordion,
   AccordionDetails,
@@ -24,10 +24,9 @@ import {
 import { makeStyles } from '@material-ui/core/styles';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { BuildStepAction } from 'circleci-api';
-import React, { Suspense, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { durationHumanized } from '../../../../util';
 
-const LazyLog = React.lazy(() => import('react-lazylog/build/LazyLog'));
 const useStyles = makeStyles({
   accordionDetails: {
     padding: 0,
@@ -85,11 +84,9 @@ export const ActionOutput = ({
         {messages.length === 0 ? (
           'Nothing here...'
         ) : (
-          <Suspense fallback={<Progress />}>
-            <div style={{ height: '20vh', width: '100%' }}>
-              <LazyLog text={messages.join('\n')} extraLines={1} enableSearch />
-            </div>
-          </Suspense>
+          <div style={{ height: '20vh', width: '100%' }}>
+            <LogViewer text={messages.join('\n')} />
+          </div>
         )}
       </AccordionDetails>
     </Accordion>