fix the code

WIP

desktop/core/src/desktop/js/apps/admin/ServerLogs/ServerLogsHeader.tsx

@@ -70,8 +70,12 @@ const ServerLogsHeader: React.FC<ServerLogsHeaderProps> = ({
           }}
           checked={wrapLogs}
           className="server__checkbox-icon"
+          id="wrapLogsToggle"
         />
-        <span className="server__wrap-logs">Wrap logs</span>
+        <label className="server__wrap-logs" htmlFor="wrapLogsToggle">
+          Wrap logs
+        </label>
+
         <Button
           className="server__download-button"
           data-event="download-button"

desktop/core/src/desktop/js/apps/admin/ServerLogs/ServerLogsTab.scss

@@ -34,7 +34,7 @@
       }
     }
 
-    .server_nowrap {
+    .server_wrap {
       white-space: nowrap;
     }
 

desktop/core/src/desktop/js/apps/admin/ServerLogs/ServerLogsTab.test.tsx

@@ -15,48 +15,89 @@
 // limitations under the License.
 
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import ServerLogs from './ServerLogsTab';
+import { mocked } from 'jest-mock';
+import useLoadData from '../../../utils/hooks/useLoadData';
 
 const mockData = jest.fn().mockReturnValue({
   logs: ['Log entry 1', 'Log entry 2'],
   hue_hostname: 'test-hostname'
 });
 
-jest.mock('../../../utils/hooks/useLoadData', () => {
-  return jest.fn(() => ({
-    data: mockData(),
-    loading: false
-  }));
+const emptyMockData = jest.fn().mockReturnValue({
+  logs: [],
+  hue_hostname: 'test-hostname'
 });
 
+jest.mock('../../../utils/hooks/useLoadData');
 
 afterEach(() => {
-  jest.clearAllMocks(); 
+  jest.clearAllMocks();
 });
 
 describe('ServerLogs Component', () => {
   test('Render ServerLogs component with fetched logs', () => {
+    mocked(useLoadData).mockImplementation(() => ({
+      data: mockData(),
+      loading: false,
+      reloadData: jest.fn()
+    }));
+
     render(<ServerLogs />);
 
-      expect(screen.getByText('Log entry 1')).toBeInTheDocument();
-      expect(screen.getByText('Log entry 2')).toBeInTheDocument();
+    expect(screen.getByText('Log entry 1')).toBeInTheDocument();
+    expect(screen.getByText('Log entry 2')).toBeInTheDocument();
   });
 
   test('Handles no logs found scenario', () => {
-
-    jest.mock('../../../utils/hooks/useLoadData', () => {
-      return jest.fn(() => ({
-        data: {
-          logs: [],
-          hue_hostname: 'test-hostname'
-        },
-        loading: false
-      }));
-    });
-
+    mocked(useLoadData).mockImplementation(() => ({
+      data: emptyMockData(),
+      loading: false,
+      reloadData: jest.fn()
+    }));
+
     render(<ServerLogs />);
+
     expect(screen.getByText('No logs found!')).toBeInTheDocument();
   });
+
+  test('Finds and highlights the searched value', async () => {
+    mocked(useLoadData).mockImplementation(() => ({
+      data: mockData(),
+      loading: false,
+      reloadData: jest.fn()
+    }));
+
+    render(<ServerLogs />);
+
+    const searchValue = 'entry 1';
+    const searchInput = screen.getByPlaceholderText('Search in the logs');
+
+    await userEvent.type(searchInput, searchValue);
+
+    const highlightedElements = screen.getAllByText(searchValue, { selector: 'mark' });
+    expect(highlightedElements.length).toBeGreaterThan(0);
+    highlightedElements.forEach(element => {
+      expect(element).toHaveClass('server--highlight-word');
+    });
+  });
+
+  test('Toggling wrap logs changes the functionality and thus class of log lines', async () => {
+    mocked(useLoadData).mockImplementation(() => ({
+      data: mockData(),
+      loading: false,
+      reloadData: jest.fn()
+    }));
+
+    render(<ServerLogs />);
+
+    expect(screen.getByText('Log entry 1')).toHaveClass('server_wrap');
+
+    fireEvent.click(screen.getByLabelText('Wrap logs'));
+
+    expect(screen.getByText('Log entry 1')).not.toHaveClass('server_wrap');
+  });
 });

desktop/core/src/desktop/js/apps/admin/ServerLogs/ServerLogsTab.tsx

@@ -32,7 +32,7 @@ const ServerLogs: React.FC = (): JSX.Element => {
   const {
     data: logsData,
     loading,
-    error,
+    error
     //reloadData
   } = useLoadData<ServerLogsData>('/api/v1/logs');
 
@@ -89,14 +89,14 @@ const ServerLogs: React.FC = (): JSX.Element => {
               hostName={logsData?.hue_hostname ?? ''}
             />
             {logsData && (logsData.logs.length === 0 || logsData.logs[0] === '') && (
-                <pre className="server__no-logs-found">No logs found!</pre>
-              )}
+              <pre className="server__no-logs-found">No logs found!</pre>
+            )}
 
             {logsData && logsData.logs.length > 0 && logsData.logs[0] !== '' && (
               <div className="server__display-logs">
                 {logsData.logs.map((line, index) => (
                   <div
-                    className={`server__log-line ${wrapLogs ? 'server_nowrap' : ''}`}
+                    className={`server__log-line ${wrapLogs ? 'server_wrap' : ''}`}
                     key={'logs_' + index}
                   >
                     {highlightText(line, filter)}