Merge pull request #14815 from rhamilto/CONSOLE-4498

CONSOLE-4498: Replace checkboxes with Switch in ResourceLog

Author: openshift-merge-bot[bot]

frontend/packages/console-app/src/components/nodes/NodeLogs.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
   Alert,
-  Checkbox,
   EmptyState,
   EmptyStateBody,
   EmptyStateVariant,
@@ -15,6 +14,7 @@ import {
   ToolbarContent,
   ToolbarGroup,
   ToolbarItem,
+  Switch,
 } from '@patternfly/react-core';
 import { LogViewer, LogViewerSearch } from '@patternfly/react-log-viewer';
 import classnames from 'classnames';
@@ -94,7 +94,7 @@ const LogControls: React.FC<LogControlsProps> = ({
   const { t } = useTranslation();
 
   return (
-    <Toolbar className="co-toolbar-empty-state">
+    <Toolbar>
       <ToolbarContent>
         <ToolbarGroup>
           <ToolbarItem>
@@ -151,7 +151,7 @@ const LogControls: React.FC<LogControlsProps> = ({
           )}
         </ToolbarGroup>
         <ToolbarItem className="pf-v6-u-flex-fill pf-v6-u-align-self-center pf-v6-u-justify-content-flex-end">
-          <Checkbox
+          <Switch
             label={t('public~Wrap lines')}
             id="wrapLogLines"
             isChecked={isWrapLines}

frontend/packages/integration-tests-cypress/tests/app/resource-log.cy.ts

@@ -22,7 +22,7 @@ describe('Pod log viewer tab', () => {
     // Verify the default log buffer size
     cy.byTestID('no-log-lines').contains('1000 lines');
     // Verify the log exceeds the default log buffer size
-    cy.byTestID('show-full-log').check();
+    cy.byTestID('show-full-log').check({ force: true }); // force as checkbox is hidden (from Switch)
     // eslint-disable-next-line cypress/no-unnecessary-waiting
     cy.wait(5000);
     cy.byTestID('no-log-lines').should('not.contain', '1000 lines');

frontend/public/components/utils/resource-log.tsx

@@ -7,7 +7,6 @@ import {
   Alert,
   AlertActionLink,
   Button,
-  Checkbox,
   Divider,
   Dropdown,
   DropdownGroup,
@@ -18,6 +17,7 @@ import {
   Select,
   SelectList,
   SelectOption,
+  Switch,
   Tooltip,
 } from '@patternfly/react-core';
 import { LogViewer, LogViewerSearch } from '@patternfly/react-log-viewer';
@@ -313,7 +313,7 @@ export const LogControls: React.FC<LogControlsProps> = ({
       <Tooltip
         content={t('public~Select to view the entire log. Default view is the last 1,000 lines.')}
       >
-        <Checkbox
+        <Switch
           label={t('public~Show full log')}
           id="showFullLog"
           data-test="show-full-log"
@@ -328,7 +328,7 @@ export const LogControls: React.FC<LogControlsProps> = ({
   );
 
   const wrapLines = (
-    <Checkbox
+    <Switch
       label={t('public~Wrap lines')}
       id="wrapLogLines"
       isChecked={isWrapLines}
@@ -481,7 +481,7 @@ export const LogControls: React.FC<LogControlsProps> = ({
                 default: 'vertical',
               }}
             />
-            {wrapLines}
+            <div>{wrapLines}</div>
             <Divider
               orientation={{
                 default: 'vertical',

frontend/public/style/_overrides.scss

@@ -32,7 +32,8 @@ form.pf-v6-c-form {
     max-width: 100%;
     min-width: 50px; // prevent collapsed state before img loads
     width: fit-content;
-    :where(.pf-v6-theme-dark) & { // custom styling needed to provide extra padding on dark mode due to white background imgs
+    :where(.pf-v6-theme-dark) & {
+      // custom styling needed to provide extra padding on dark mode due to white background imgs
       margin-left: 0;
       margin-top: 0;
     }
@@ -79,11 +80,6 @@ form.pf-v6-c-form {
   vertical-align: top; // PF defaults to baseline which doesn't align correctly when Operator logos are within the table
 }
 
-.co-toolbar-empty-state .pf-v6-c-toolbar__content {
-  --pf-v6-c-toolbar__content--PaddingLeft: 0;
-  --pf-v6-c-toolbar__content--PaddingRight: 0;
-}
-
 // fix bug where monaco-aria-container is visible in Firefox but shouldn't be
 // bug occurs only if the suggestions overlay has been enabled
 .monaco-aria-container {