[O2B-1181] Add easy to reach no-anonymous toggle (#1451)

* [O2B-1181] Add easy to reach no-anonymous toggle

* Place properly the toggle

Author: martinboulais

lib/public/Model.js

@@ -81,6 +81,9 @@ export default class Model extends Observable {
         this.simulationPasses = new SimulationPassesModel(this);
         this.simulationPasses.bubbleTo(this);
 
+        /**
+         * @type {LogsModel}
+         */
         this.logs = new LogsModel(this);
         this.logs.bubbleTo(this);
 

lib/public/components/Filters/LogsFilter/author/AuthorFilterModel.js

@@ -40,12 +40,15 @@ export class AuthorFilterModel extends FilterInputModel {
      *
      * @returns {void}
      */
-    applyExcludeAnonymousFilter() {
+    toggleAnonymousFilter() {
         if (this.isAnonymousExcluded()) {
-            return;
+            this._raw = this._raw.split(',')
+                .filter((author) => author.trim() !== '!Anonymous')
+                .join(',');
+        } else {
+            this._raw += super.isEmpty ? '!Anonymous' : ', !Anonymous';
         }
 
-        this._raw += super.isEmpty ? '!Anonymous' : ', !Anonymous';
         this._value = this.valueFromRaw(this._raw);
         this.notify();
     }

lib/public/components/Filters/LogsFilter/author/authorFilter.js

@@ -13,6 +13,7 @@
 
 import { h } from '/js/src/index.js';
 import { iconX } from '/js/src/icons.js';
+import { switchInput } from '../../../common/form/switchInput.js';
 
 /**
  * Returns a text input field that can be used to filter logs by author
@@ -40,19 +41,15 @@ const resetAuthorFilterButton = (authorFilterModel) => h(
 );
 
 /**
- * Returns a button that can be used to exclude anonymous authors
+ * Returns a toggle that can be used to exclude anonymous authors
  *
  * @param {AuthorFilterModel} authorFilterModel The author filter model object
  * @return {Component} A button component that can be used to exclude anonymous authors
  */
-const excludeAnonymousButton = (authorFilterModel) => h(
-    'input.btn.btn-primary',
-    {
-        type: 'button',
-        value: 'No Anonymous',
-        disabled: authorFilterModel.isAnonymousExcluded(),
-        onclick: () => authorFilterModel.applyExcludeAnonymousFilter(),
-    },
+export const excludeAnonymousLogAuthorToggle = (authorFilterModel) => switchInput(
+    authorFilterModel.isAnonymousExcluded(),
+    () => authorFilterModel.toggleAnonymousFilter(),
+    { labelAfter: 'No Anonymous' },
 );
 
 /**
@@ -64,5 +61,5 @@ const excludeAnonymousButton = (authorFilterModel) => h(
 export const authorFilter = ({ authorFilter }) => h('.flex-row.items-center.g3', [
     authorFilterTextInput(authorFilter),
     resetAuthorFilterButton(authorFilter),
-    excludeAnonymousButton(authorFilter),
+    excludeAnonymousLogAuthorToggle(authorFilter),
 ]);

lib/public/views/Logs/Overview/index.js

@@ -18,6 +18,7 @@ import { estimateDisplayableRowsCount } from '../../../utilities/estimateDisplay
 import { paginationComponent } from '../../../components/Pagination/paginationComponent.js';
 import { frontLink } from '../../../components/common/navigation/frontLink.js';
 import { filtersPanelPopover } from '../../../components/Filters/common/filtersPanelPopover.js';
+import { excludeAnonymousLogAuthorToggle } from '../../../components/Filters/LogsFilter/author/authorFilter.js';
 
 const TABLEROW_HEIGHT = 69;
 // Estimate of the navbar and pagination elements height total; Needs to be updated in case of changes;
@@ -36,7 +37,10 @@ const logOverviewScreen = ({ logs: { overviewModel: logsOverviewModel } }) => {
 
     return h('', [
         h('.flex-row.justify-between.header-container.pv2', [
-            filtersPanelPopover(logsOverviewModel, logsActiveColumns),
+            h('.flex-row.g3', [
+                filtersPanelPopover(logsOverviewModel, logsActiveColumns),
+                excludeAnonymousLogAuthorToggle(logsOverviewModel.authorFilter),
+            ]),
             actionButtons(),
         ]),
         h('.w-100.flex-column', [