From 85ee184e689a80b5871bc03cb45b176fb5045e81 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Thu, 9 Dec 2021 12:02:09 +0100
Subject: [PATCH] core-components: LogViewer prop className -> classes

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 packages/core-components/api-report.md                   | 4 +++-
 .../src/components/LogViewer/LogViewer.tsx               | 6 ++++--
 .../src/components/LogViewer/RealLogViewer.tsx           | 9 +++------
 .../src/components/WorkflowRunLogs/WorkflowRunLogs.tsx   | 4 ++--
 .../techdocs/src/reader/components/TechDocsBuildLogs.tsx | 2 +-
 5 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md
index e74cd28433..d098403113 100644
--- a/packages/core-components/api-report.md
+++ b/packages/core-components/api-report.md
@@ -647,7 +647,9 @@ export type LogViewerClassKey =
 
 // @public
 export interface LogViewerProps {
-  className?: string;
+  classes?: {
+    root?: string;
+  };
   text: string;
 }
 
diff --git a/packages/core-components/src/components/LogViewer/LogViewer.tsx b/packages/core-components/src/components/LogViewer/LogViewer.tsx
index 643d2ba9f8..bdb3973015 100644
--- a/packages/core-components/src/components/LogViewer/LogViewer.tsx
+++ b/packages/core-components/src/components/LogViewer/LogViewer.tsx
@@ -34,9 +34,11 @@ export interface LogViewerProps {
    */
   text: string;
   /**
-   * The className to apply to the root LogViewer element inside the auto sizer.
+   * Styling overrides for classes within the LogViewer component.
    */
-  className?: string;
+  classes?: {
+    root?: string;
+  };
 }
 
 /**
diff --git a/packages/core-components/src/components/LogViewer/RealLogViewer.tsx b/packages/core-components/src/components/LogViewer/RealLogViewer.tsx
index 2f33abcd1e..cd30e96c92 100644
--- a/packages/core-components/src/components/LogViewer/RealLogViewer.tsx
+++ b/packages/core-components/src/components/LogViewer/RealLogViewer.tsx
@@ -29,11 +29,11 @@ import { useLogViewerSelection } from './useLogViewerSelection';
 
 export interface RealLogViewerProps {
   text: string;
-  className?: string;
+  classes?: { root?: string };
 }
 
 export function RealLogViewer(props: RealLogViewerProps) {
-  const classes = useStyles();
+  const classes = useStyles({ classes: props.classes });
   const listRef = useRef<FixedSizeList | null>(null);
 
   // The processor keeps state that optimizes appending to the text
@@ -60,10 +60,7 @@ export function RealLogViewer(props: RealLogViewerProps) {
   return (
     <AutoSizer>
       {({ height, width }) => (
-        <div
-          style={{ width, height }}
-          className={classnames(classes.root, props.className)}
-        >
+        <div style={{ width, height }} className={classes.root}>
           <div className={classes.header}>
             <LogViewerControls {...search} />
           </div>
diff --git a/plugins/github-actions/src/components/WorkflowRunLogs/WorkflowRunLogs.tsx b/plugins/github-actions/src/components/WorkflowRunLogs/WorkflowRunLogs.tsx
index 509e404194..0f1670bbbc 100644
--- a/plugins/github-actions/src/components/WorkflowRunLogs/WorkflowRunLogs.tsx
+++ b/plugins/github-actions/src/components/WorkflowRunLogs/WorkflowRunLogs.tsx
@@ -133,7 +133,7 @@ export const WorkflowRunLogs = ({
             <div className={classes.modalLogContainer}>
               <LogViewer
                 text={logText ?? 'No Values Found'}
-                className={classes.log}
+                classes={{ root: classes.log }}
               />
             </div>
           </Fade>
@@ -141,7 +141,7 @@ export const WorkflowRunLogs = ({
       </AccordionSummary>
       {logText && (
         <div className={classes.normalLogContainer}>
-          <LogViewer text={logText} className={classes.log} />
+          <LogViewer text={logText} classes={{ root: classes.log }} />
         </div>
       )}
     </Accordion>
diff --git a/plugins/techdocs/src/reader/components/TechDocsBuildLogs.tsx b/plugins/techdocs/src/reader/components/TechDocsBuildLogs.tsx
index e49d486ab8..dc446a55d8 100644
--- a/plugins/techdocs/src/reader/components/TechDocsBuildLogs.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsBuildLogs.tsx
@@ -86,7 +86,7 @@ export const TechDocsBuildLogsDrawerContent = ({
           <Close />
         </IconButton>
       </Grid>
-      <LogViewer text={logText} className={classes.logs} />
+      <LogViewer text={logText} classes={{ root: classes.logs }} />
     </Grid>
   );
 };