NCL-8835 Fix alignment of Log viewer toolbar items

project-ncl · Sep 25, 2024 · fe9a9d6 · fe9a9d6
1 parent 6022e93
commit fe9a9d6
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 46 deletions.
diff --git a/src/components/BuildLogPage/BuildLogPage.tsx b/src/components/BuildLogPage/BuildLogPage.tsx
@@ -44,7 +44,7 @@ export const BuildLogPage = () => {
     { buildId }
   );
 
-  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
@@ -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';
@@ -94,55 +94,70 @@ 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?.scrollToItem(lineCount);
-            }}
-            variant="control"
-            icon={<LongArrowAltDownIcon />}
-          >
-            Bottom
-          </Button>
-        </ToolbarItem>
-        {!!customActions?.length && customActions.map((node, index) => <ToolbarItem key={index}>{node}</ToolbarItem>)}
-        {!isStatic && (
+      <ToolbarContent alignItems="center">
+        <ToolbarGroup>
+          <ToolbarItem>
+            <Button
+              onClick={() => {
+                if (logViewerRef.current?.state.scrollOffset) {
+                  setIsPaused(true);
+                  logViewerRef.current.scrollTo(0, 0);
+                }
+              }}
+              variant="control"
+              icon={<LongArrowAltUpIcon />}
+            >
+              Top
+            </Button>
+          </ToolbarItem>
           <ToolbarItem>
-            <Switch
-              label="Force Following"
-              isChecked={isFollowing}
+            <Button
+              onClick={() => {
+                setIsPaused(false);
+                logViewerRef.current?.scrollToItem(lineCount);
+              }}
+              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) => storeIsFollowing(!checked)}
+                />
+              </ToolbarItem>
+              <ToolbarItem variant="separator" />
+            </>
+          )}
+          <ToolbarItem alignSelf="center">
+            <Checkbox
+              id="wrap-lines-check"
+              label="Wrap lines"
+              isChecked={areLinesWrapped}
               onChange={(_, checked) => {
-                storeIsFollowing(checked);
+                setIsPaused(true);
+                storeAreLinesWrapped(checked);
               }}
             />
           </ToolbarItem>
-        )}
-        <ToolbarItem>
-          <Switch
-            label="Wrap Lines"
-            isChecked={areLinesWrapped}
-            onChange={(_, checked) => {
-              setIsPaused(true);
-              storeAreLinesWrapped(checked);
-            }}
-          />
-        </ToolbarItem>
+          {!!customActions?.length &&
+            customActions.map((node, index) => (
+              <>
+                <ToolbarItem variant="separator" />
+                <ToolbarItem key={index} alignSelf="center">
+                  {node}
+                </ToolbarItem>
+              </>
+            ))}
+        </ToolbarGroup>
       </ToolbarContent>
     </Toolbar>
   );