chore(#512): Moved Log download/clear to the top of the log bar,

src/Components/Buttonbar/__tests__/index.test.jsx

@@ -10,7 +10,6 @@ import { Provider } from 'react-redux';
 
 import escsReducer, { setIndividual } from '../../../Containers/App/escsSlice';
 import melodiesReducer, { updateAll } from '../../MelodyEditor/melodiesSlice';
-import logReducer, { add } from '../../Log/logSlice';
 import stateReducer, { setWriting } from '../../../Containers/App/stateSlice';
 
 import Buttonbar from '../';
@@ -24,7 +23,6 @@ function setupTestStore() {
     const store = configureStore({
       reducer: {
         escs: escsReducer,
-        log: logReducer,
         melodies: melodiesReducer,
         state: stateReducer,
       },
@@ -74,26 +72,9 @@ describe('Buttonbar', () => {
     expect(screen.getByText(/escButtonRead/i)).toBeInTheDocument();
     expect(screen.getByText(/escButtonWrite/i)).toBeInTheDocument();
     expect(screen.getByText(/escButtonFlashAll/i)).toBeInTheDocument();
-    expect(screen.getByText(/escButtonSaveLog/i)).toBeInTheDocument();
     expect(screen.getAllByText(/escButtonOpenMelodyEditor/i).length).toEqual(2);
   });
 
-  it('should always trigger log save', () => {
-    global.URL.createObjectURL = jest.fn();
-
-    render(
-      <Buttonbar
-        onReadSetup={onReadSetup}
-        onResetDefaults={onResetDefaults}
-        onWriteSetup={onWriteSetup}
-      />,
-      { wrapper: storeRef.wrapper }
-    );
-
-    userEvent.click(screen.getByText(/escButtonSaveLog/i));
-    expect(global.URL.createObjectURL).toHaveBeenCalled();
-  });
-
   it('should not trigger handlers when disabled', () => {
     storeRef.store.dispatch(setWriting(true));
 
@@ -182,32 +163,4 @@ describe('Buttonbar', () => {
     expect(melodies.show).toBeTruthy();
   });
 
-  it('should clear log', () => {
-    const onWriteSetup = jest.fn();
-    const onReadSetup = jest.fn();
-    const onResetDefaults = jest.fn();
-    const onSeletFirmwareForAll = jest.fn();
-
-    storeRef.store.dispatch(add('line1'));
-
-    let log = storeRef.store.getState().log;
-    expect(log.log.length).toEqual(1);
-
-    render(
-      <Buttonbar
-        onReadSetup={onReadSetup}
-        onResetDefaults={onResetDefaults}
-        onSeletFirmwareForAll={onSeletFirmwareForAll}
-        onWriteSetup={onWriteSetup}
-      />,
-      { wrapper: storeRef.wrapper }
-    );
-
-    expect(screen.getByText(/escButtonClearLog/i)).toBeInTheDocument();
-
-    userEvent.click(screen.getByText(/escButtonClearLog/i));
-
-    log = storeRef.store.getState().log;
-    expect(log.log.length).toEqual(0);
-  });
 });

src/Components/Buttonbar/index.jsx

@@ -13,10 +13,6 @@ import {
   show,
   selectSupported,
 } from '../MelodyEditor/melodiesSlice';
-import {
-  clear as clearLog,
-  selectLog,
-} from '../Log/logSlice';
 import {
   selectCanFlash,
   selectCanRead,
@@ -39,7 +35,6 @@ function Buttonbar({
   const dispatch = useDispatch();
 
   const showMelodyEditor = useSelector(selectSupported);
-  const log = useSelector(selectLog);
 
   const canFlash = useSelector(selectCanFlash);
   const canRead = useSelector(selectCanRead);
@@ -63,21 +58,6 @@ function Buttonbar({
     dispatch(show());
   }, [dispatch]);
 
-  const handleSaveLog = useCallback(() => {
-    const element = document.createElement("a");
-    const file = new Blob([log.join("\n")], { type: 'text/plain' });
-    element.href = URL.createObjectURL(file);
-    element.download = "esc-configurator-log.txt";
-    document.body.appendChild(element);
-    element.click();
-
-    dispatch(clearLog());
-  }, [dispatch, log]);
-
-  const handleClearLog = useCallback(() => {
-    dispatch(clearLog());
-  }, [dispatch]);
-
   return (
     <div className="button-bar">
       <div className="buttons-bottom mobile-show">
@@ -90,16 +70,6 @@ function Buttonbar({
       </div>
 
       <div className="buttons-left">
-        <GenericButton
-          onClick={handleSaveLog}
-          text={t('escButtonSaveLog')}
-        />
-
-        <GenericButton
-          onClick={handleClearLog}
-          text={t('escButtonClearLog')}
-        />
-
         <div className="mobile-show">
           <GenericButton
             disabled={!canWrite}

src/Components/Log/__tests__/index.test.jsx

@@ -90,6 +90,40 @@ describe('Log', () => {
     expect(screen.queryByText(/showLog/i)).not.toBeInTheDocument();
     expect(screen.getByText(/hideLog/i)).toBeInTheDocument();
   });
+
+  it('should save debug log', () => {
+    global.URL.createObjectURL = jest.fn();
+
+    storeRef.store.dispatch(add('line1'));
+
+    render(
+      <Log />,
+      { wrapper: storeRef.wrapper }
+    );
+
+    userEvent.click(screen.getByText(/escButtonSaveLog/i));
+    expect(global.URL.createObjectURL).toHaveBeenCalled();
+
+    const log = storeRef.store.getState().log;
+    expect(log.log.length).toEqual(0);
+  });
+
+  it('should clear debug log', () => {
+    storeRef.store.dispatch(add('line1'));
+
+    let log = storeRef.store.getState().log;
+    expect(log.log.length).toEqual(1);
+
+    render(
+      <Log />,
+      { wrapper: storeRef.wrapper }
+    );
+
+    userEvent.click(screen.getByText(/escButtonClearLog/i));
+
+    log = storeRef.store.getState().log;
+    expect(log.log.length).toEqual(0);
+  });
 });
 
 describe('logSlice', () => {

src/Components/Log/index.jsx

@@ -2,16 +2,25 @@ import React, {
   useCallback,
   useState,
 } from 'react';
-import { useSelector } from 'react-redux';
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
 import { useTranslation } from 'react-i18next';
 
-import { selectLogTimestamped } from './logSlice';
+import {
+  clear as clearLog,
+  selectLog,
+  selectLogTimestamped,
+} from './logSlice';
 
 import './style.scss';
 
 function Log() {
   const { t } = useTranslation('common');
+  const dispatch = useDispatch();
   const messages = useSelector(selectLogTimestamped);
+  const log = useSelector(selectLog);
   const [ expanded, setExpanded] = useState(false);
 
   const messageElements = messages.slice(0).reverse()
@@ -37,12 +46,41 @@ function Log() {
     setExpanded(!expanded);
   }, [expanded]);
 
+  const handleSaveLog = useCallback(() => {
+    const element = document.createElement("a");
+    const file = new Blob([log.join("\n")], { type: 'text/plain' });
+    element.href = URL.createObjectURL(file);
+    element.download = "esc-configurator-log.txt";
+    document.body.appendChild(element);
+    element.click();
+
+    dispatch(clearLog());
+  }, [dispatch, log]);
+
+  const handleClearLog = useCallback(() => {
+    dispatch(clearLog());
+  }, [dispatch]);
+
   return (
     <div
       className={expanded ? 'expanded' : ''}
       id="log"
     >
       <div className="logswitch">
+        <button
+          onClick={handleSaveLog}
+          type="button"
+        >
+          {t('escButtonSaveLog')}
+        </button>
+
+        <button
+          onClick={handleClearLog}
+          type="button"
+        >
+          {t('escButtonClearLog')}
+        </button>
+
         <button
           id="showlog"
           onClick={toggleExpanded}

src/Components/Log/style.scss

@@ -72,7 +72,10 @@
     position: absolute;
     right: 20px;
     z-index: 10;
-    line-height: 27px;
+    height: 27px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
 
     button {
       background: transparent;

src/Components/MainContent/__tests__/index.test.jsx

@@ -190,8 +190,7 @@ describe('MainContent', () => {
     expect(screen.getByText('motorControl')).toBeInTheDocument();
     expect(screen.getByText(/enableMotorControl/i)).toBeInTheDocument();
     expect(screen.getByText(/masterSpeed/i)).toBeInTheDocument();
-    expect(screen.getByText("escButtonSaveLog")).toBeInTheDocument();
-    expect(screen.getByText("escButtonClearLog")).toBeInTheDocument();
+
     expect(screen.getByText(/escButtonFlashAll/i)).toBeInTheDocument();
   });
 
@@ -259,8 +258,7 @@ describe('MainContent', () => {
     expect(screen.getByText('motorControl')).toBeInTheDocument();
     expect(screen.getByText(/enableMotorControl/i)).toBeInTheDocument();
     expect(screen.getByText(/masterSpeed/i)).toBeInTheDocument();
-    expect(screen.getByText("escButtonSaveLog")).toBeInTheDocument();
-    expect(screen.getByText("escButtonClearLog")).toBeInTheDocument();
+
     expect(screen.getByText(/escButtonFlashAll/i)).toBeInTheDocument();
   });
 
@@ -289,8 +287,7 @@ describe('MainContent', () => {
 
     expect(screen.getByText(/notePropsOff/i)).toBeInTheDocument();
     expect(screen.getByText(/noteConnectPower/i)).toBeInTheDocument();
-    expect(screen.getByText("escButtonSaveLog")).toBeInTheDocument();
-    expect(screen.getByText("escButtonClearLog")).toBeInTheDocument();
+
     expect(screen.getByText(/escButtonFlashAll/i)).toBeInTheDocument();
 
     expect(screen.queryByText(/enableMotorControl/i)).not.toBeInTheDocument();
@@ -325,8 +322,7 @@ describe('MainContent', () => {
     expect(screen.getByText('motorControl')).toBeInTheDocument();
     expect(screen.getByText(/enableMotorControl/i)).toBeInTheDocument();
     expect(screen.getByText(/masterSpeed/i)).toBeInTheDocument();
-    expect(screen.getByText("escButtonSaveLog")).toBeInTheDocument();
-    expect(screen.getByText("escButtonClearLog")).toBeInTheDocument();
+
     expect(screen.getByText(/escButtonFlashAll/i)).toBeInTheDocument();
   });
 
@@ -354,8 +350,7 @@ describe('MainContent', () => {
 
     expect(screen.getByText(/notePropsOff/i)).toBeInTheDocument();
     expect(screen.getByText(/noteConnectPower/i)).toBeInTheDocument();
-    expect(screen.getByText("escButtonSaveLog")).toBeInTheDocument();
-    expect(screen.getByText("escButtonClearLog")).toBeInTheDocument();
+
     expect(screen.getByText(/escButtonFlashAll/i)).toBeInTheDocument();
   });
 
@@ -474,8 +469,7 @@ describe('MainContent', () => {
 
     expect(screen.getByText(/notePropsOff/i)).toBeInTheDocument();
     expect(screen.getByText(/noteConnectPower/i)).toBeInTheDocument();
-    expect(screen.getByText("escButtonSaveLog")).toBeInTheDocument();
-    expect(screen.getByText("escButtonClearLog")).toBeInTheDocument();
+
     expect(screen.getByText(/escButtonFlashAll/i)).toBeInTheDocument();
   });
 
@@ -593,8 +587,7 @@ describe('MainContent', () => {
 
     expect(screen.getByText(/notePropsOff/i)).toBeInTheDocument();
     expect(screen.getByText(/noteConnectPower/i)).toBeInTheDocument();
-    expect(screen.getByText("escButtonSaveLog")).toBeInTheDocument();
-    expect(screen.getByText("escButtonClearLog")).toBeInTheDocument();
+
     expect(screen.getByText(/escButtonFlashAll/i)).toBeInTheDocument();
   });
 
@@ -737,8 +730,7 @@ describe('MainContent', () => {
     expect(screen.getByText(/notePropsOff/i)).toBeInTheDocument();
     expect(screen.getByText(/noteConnectPower/i)).toBeInTheDocument();
     expect(screen.queryByText('motorControl')).not.toBeInTheDocument();
-    expect(screen.getByText("escButtonSaveLog")).toBeInTheDocument();
-    expect(screen.getByText("escButtonClearLog")).toBeInTheDocument();
+
     expect(screen.getByText(/escButtonFlashAll/i)).toBeInTheDocument();
   });
 
@@ -768,8 +760,7 @@ describe('MainContent', () => {
     expect(screen.getByText(/notePropsOff/i)).toBeInTheDocument();
     expect(screen.getByText(/noteConnectPower/i)).toBeInTheDocument();
     expect(screen.getByText('motorControl')).toBeInTheDocument();
-    expect(screen.getByText("escButtonSaveLog")).toBeInTheDocument();
-    expect(screen.getByText("escButtonClearLog")).toBeInTheDocument();
+
     expect(screen.getByText(/escButtonFlashAll/i)).toBeInTheDocument();
   });
 

src/changelog.json

@@ -2,6 +2,7 @@
   {
     "title": "Unreleased",
     "items": [
+      "Enhancement: Debug log buttons always accessible in log bar",
       "Translation: Add Japanese translation",
       "Translation: Translation updates",
       "Enhancement: More melodies"