Add wrap text option for pipeline run logs

frontend/src/concepts/dashboard/DashboardLogViewer.tsx

@@ -8,7 +8,8 @@ const DashboardLogViewer: React.FC<{
   footer: JSX.Element | false;
   onScroll: React.ComponentProps<typeof LogViewer>['onScroll'];
   height?: number | string;
-}> = ({ data, logViewerRef, toolbar, footer, onScroll, height = '100%' }) => (
+  isTextWrapped?: boolean;
+}> = ({ data, logViewerRef, toolbar, footer, onScroll, height = '100%', isTextWrapped }) => (
   <LogViewer
     data-testid="logs"
     hasLineNumbers={false}
@@ -18,6 +19,7 @@ const DashboardLogViewer: React.FC<{
     toolbar={toolbar}
     footer={footer}
     onScroll={onScroll}
+    isTextWrapped={isTextWrapped}
   />
 );
 

frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTab.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import {
   Button,
+  Checkbox,
   DropdownList,
   Icon,
   Spinner,
@@ -89,6 +90,7 @@ const LogsTabForPodName: React.FC<{ podName: string; isFailedPod: boolean }> = (
   const [isFullScreen, setIsFullScreen] = React.useState(false);
   const [showSearchbar, setShowsearchbar] = React.useState(false);
   const [isKebabOpen, setIsKebabOpen] = React.useState(false);
+  const [isTextWrapped, setIsTextWrapped] = React.useState(true);
 
   const logsTabRef = React.useRef<HTMLDivElement>(null);
   const dispatchResizeEvent = useDebounceCallback(
@@ -229,6 +231,7 @@ const LogsTabForPodName: React.FC<{ podName: string; isFailedPod: boolean }> = (
             height="calc(100% - 75px)"
             data={data}
             logViewerRef={logViewerRef}
+            isTextWrapped={isTextWrapped}
             toolbar={
               !error && (
                 <Toolbar className={isFullScreen ? 'pf-v5-u-p-sm' : ''}>
@@ -309,6 +312,15 @@ const LogsTabForPodName: React.FC<{ podName: string; isFailedPod: boolean }> = (
                       )}
                     </ToolbarGroup>
                     <ToolbarGroup align={{ default: 'alignRight' }}>
+                      <ToolbarItem alignSelf="center">
+                        <Checkbox
+                          label="Wrap text"
+                          aria-label="wrap text checkbox"
+                          isChecked={isTextWrapped}
+                          id="wrap-text-checkbox"
+                          onChange={(_event, value) => setIsTextWrapped(value)}
+                        />
+                      </ToolbarItem>
                       <ToolbarItem spacer={{ default: 'spacerNone' }}>
                         {downloading && <Spinner size="sm" className="pf-v5-u-my-sm" />}
                         {podContainers.length <= 1 ? (

frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTabStatus.tsx

@@ -71,8 +71,7 @@ const LogsTabStatus: React.FC<LogsTabStatusProps> = ({
     >
       <p>
         The log refreshes every {Math.floor(LOG_REFRESH_RATE / 1000)} seconds and displays the
-        latest {LOG_TAIL_LINES} lines. Exceptionally long lines are abridged. To view the full log
-        for this task, you can{' '}
+        latest {LOG_TAIL_LINES} lines. To view the full log for this task, you can{' '}
         <Button isDisabled={!isLogsAvailable} variant="link" isInline onClick={onDownload}>
           download all step logs
         </Button>{' '}