Tidy

Author: janfaracik

src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogCard.tsx

@@ -9,6 +9,7 @@ import {
 
 import StatusIcon from "../../../common/components/status-icon";
 import { total } from "../../../common/utils/timings";
+import { classNames } from "../../../common/utils/classnames";
 
 const ConsoleLogStream = React.lazy(() => import("./ConsoleLogStream"));
 
@@ -60,10 +61,9 @@ export default function ConsoleLogCard(props: ConsoleLogCardProps) {
     <div className={"pgv-step-detail-group"} key={`step-card-${props.step.id}`}>
       <button
         onClick={handleToggle}
-        className={
-          "pgv-step-detail-header jenkins-button " +
-          (props.isExpanded ? "" : "jenkins-button--tertiary")
-        }
+        className={classNames("pgv-step-detail-header", "jenkins-button", {
+          "jenkins-button--tertiary": !props.isExpanded,
+        })}
         key={`step-action-area-${props.step.id}`}
       >
         <div className="pgv-step-detail-header__content">

src/main/frontend/pipeline-console-view/pipeline-console/main/DataTreeView.tsx

@@ -95,9 +95,9 @@ const TreeNode = React.memo(({ stage, selected, onSelect }: TreeNodeProps) => {
 
         {hasChildren && (
           <button
-            className={`pgv-toggle-icon ${
-              isExpanded ? "pgv-toggle-icon--active" : ""
-            }`}
+            className={classNames("pgv-toggle-icon", {
+              "pgv-toggle-icon--active": isExpanded,
+            })}
             onClick={handleToggleClick}
             aria-label={isExpanded ? "Collapse" : "Expand"}
           >

src/main/frontend/pipeline-console-view/pipeline-console/main/scroll-to-top-bottom.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import "./scroll-to-top-bottom.scss";
+import { classNames } from "../../../common/utils/classnames";
 
 export default function ScrollToTopBottom() {
   const [isAtTop, setIsAtTop] = useState(true);
@@ -56,7 +57,9 @@ export default function ScrollToTopBottom() {
   return (
     <div className="pgv-scroll-to-top-bottom__container">
       <div
-        className={`pgv-scroll-to-top-bottom ${isScrollable ? "pgv-scroll-to-top-bottom--visible" : ""}`}
+        className={classNames(`pgv-scroll-to-top-bottom`, {
+          "pgv-scroll-to-top-bottom--visible": isScrollable,
+        })}
         aria-hidden={!isScrollable}
       >
         <button