From 99391df549f8abbcf2596fc72a17e9de5dd348c8 Mon Sep 17 00:00:00 2001
From: Patrik Korytar <patrik.korytar@gmail.com>
Date: Wed, 25 Sep 2024 16:25:00 +0200
Subject: [PATCH 1/2] NCL-8835 Add icon button variant to BuildLogLink
 component

---
 src/components/BuildLogLink/BuildLogLink.tsx | 26 ++++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/BuildLogLink/BuildLogLink.tsx b/src/components/BuildLogLink/BuildLogLink.tsx
index 72b6a887..fd81d22f 100644
--- a/src/components/BuildLogLink/BuildLogLink.tsx
+++ b/src/components/BuildLogLink/BuildLogLink.tsx
@@ -1,12 +1,28 @@
+import { Button } from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+
+import { TooltipWrapper } from 'components/TooltipWrapper/TooltipWrapper';
+
 import * as webConfigService from 'services/webConfigService';
 
 interface IBuildLogLinkProps {
   buildId: string;
+  isIconVariant?: boolean;
   title?: string;
 }
 
-export const BuildLogLink = ({ buildId, title = 'view' }: IBuildLogLinkProps) => (
-  <a target="_blank" rel="noopener noreferrer" href={`${webConfigService.getPncUrl()}/builds/${buildId}/logs/build`}>
-    {title}
-  </a>
-);
+export const BuildLogLink = ({ buildId, isIconVariant = false, title = 'View raw' }: IBuildLogLinkProps) => {
+  const buildLogUrl = `${webConfigService.getPncUrl()}/builds/${buildId}/logs/build`;
+
+  return isIconVariant ? (
+    <TooltipWrapper tooltip={title}>
+      <Button variant="plain" target="_blank" rel="noopener noreferrer" component="a" href={buildLogUrl} style={{ padding: 0 }}>
+        <ExternalLinkAltIcon /> {title}
+      </Button>
+    </TooltipWrapper>
+  ) : (
+    <a target="_blank" rel="noopener noreferrer" href={buildLogUrl}>
+      {title}
+    </a>
+  );
+};

From d538c064e8778a4950323d49db0665f4959ef4dd Mon Sep 17 00:00:00 2001
From: Patrik Korytar <patrik.korytar@gmail.com>
Date: Wed, 25 Sep 2024 16:26:56 +0200
Subject: [PATCH 2/2] NCL-8835 Fix alignment of Log viewer toolbar items

---
 src/components/BuildLogPage/BuildLogPage.tsx |   2 +-
 src/components/LogViewer/LogViewer.tsx       | 107 +++++++++++--------
 2 files changed, 63 insertions(+), 46 deletions(-)

diff --git a/src/components/BuildLogPage/BuildLogPage.tsx b/src/components/BuildLogPage/BuildLogPage.tsx
index a10f5113..b0814247 100644
--- a/src/components/BuildLogPage/BuildLogPage.tsx
+++ b/src/components/BuildLogPage/BuildLogPage.tsx
@@ -44,7 +44,7 @@ export const BuildLogPage = () => {
     { buildId, preventListening: !isBuilding }
   );
 
-  const logActions = [<BuildLogLink key="log-link" buildId={buildId!} />];
+  const logActions = [<BuildLogLink key="log-link" isIconVariant buildId={buildId!} />];
 
   return (
     <>
diff --git a/src/components/LogViewer/LogViewer.tsx b/src/components/LogViewer/LogViewer.tsx
index 79ed7040..e0a0043a 100644
--- a/src/components/LogViewer/LogViewer.tsx
+++ b/src/components/LogViewer/LogViewer.tsx
@@ -1,4 +1,4 @@
-import { Button, Switch, Toolbar, ToolbarContent, ToolbarItem } from '@patternfly/react-core';
+import { Button, Checkbox, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@patternfly/react-core';
 import { LongArrowAltDownIcon, LongArrowAltUpIcon, OutlinedPlayCircleIcon } from '@patternfly/react-icons';
 import { LogViewer as LogViewerPF } from '@patternfly/react-log-viewer';
 import { ReactNode, useEffect, useRef, useState } from 'react';
@@ -80,55 +80,72 @@ export const LogViewer = ({ isStatic = false, data, customActions }: ILogViewerP
 
   const HeaderToolbar = () => (
     <Toolbar>
-      <ToolbarContent>
-        <ToolbarItem>
-          <Button
-            onClick={() => {
-              if (logViewerRef.current?.state.scrollOffset) {
-                setIsPaused(true);
-                logViewerRef.current.scrollTo(0, 0);
-              }
-            }}
-            variant="control"
-            icon={<LongArrowAltUpIcon />}
-          >
-            Top
-          </Button>
-        </ToolbarItem>
-        <ToolbarItem>
-          <Button
-            onClick={() => {
-              setIsPaused(false);
-              logViewerRef.current?.scrollToBottom();
-            }}
-            variant="control"
-            icon={<LongArrowAltDownIcon />}
-          >
-            Bottom
-          </Button>
-        </ToolbarItem>
-        {!!customActions?.length && customActions.map((node, index) => <ToolbarItem key={index}>{node}</ToolbarItem>)}
-        {!isStatic && (
+      <ToolbarContent alignItems="center">
+        <ToolbarGroup>
           <ToolbarItem>
-            <Switch
-              label="Force Following"
-              isChecked={isFollowing}
-              onChange={(_, checked) => {
+            <Button
+              onClick={() => {
+                if (logViewerRef.current?.state.scrollOffset) {
+                  setIsPaused(true);
+                  logViewerRef.current.scrollTo(0, 0);
+                }
+              }}
+              variant="control"
+              icon={<LongArrowAltUpIcon />}
+            >
+              Top
+            </Button>
+          </ToolbarItem>
+          <ToolbarItem>
+            <Button
+              onClick={() => {
                 setIsPaused(false);
-                storeIsFollowing(checked);
+                logViewerRef.current?.scrollToBottom();
+              }}
+              variant="control"
+              icon={<LongArrowAltDownIcon />}
+            >
+              Bottom
+            </Button>
+          </ToolbarItem>
+        </ToolbarGroup>
+        <ToolbarGroup align={{ default: 'alignRight' }}>
+          {!isStatic && (
+            <>
+              <ToolbarItem alignSelf="center">
+                <Checkbox
+                  id="force-following-check"
+                  label="Force following"
+                  isChecked={isFollowing}
+                  onChange={(_, checked) => {
+                    setIsPaused(false);
+                    storeIsFollowing(checked);
+                  }}
+                />
+              </ToolbarItem>
+              <ToolbarItem variant="separator" />
+            </>
+          )}
+          <ToolbarItem alignSelf="center">
+            <Checkbox
+              id="wrap-lines-check"
+              label="Wrap lines"
+              isChecked={areLinesWrapped}
+              onChange={(_, checked) => {
+                storeAreLinesWrapped(checked);
               }}
             />
           </ToolbarItem>
-        )}
-        <ToolbarItem>
-          <Switch
-            label="Wrap Lines"
-            isChecked={areLinesWrapped}
-            onChange={(_, checked) => {
-              storeAreLinesWrapped(checked);
-            }}
-          />
-        </ToolbarItem>
+          {!!customActions?.length &&
+            customActions.map((node, index) => (
+              <>
+                <ToolbarItem variant="separator" />
+                <ToolbarItem key={index} alignSelf="center">
+                  {node}
+                </ToolbarItem>
+              </>
+            ))}
+        </ToolbarGroup>
       </ToolbarContent>
     </Toolbar>
   );