From aa952339ad1face074388d316daa880c7e1df4b6 Mon Sep 17 00:00:00 2001
From: Axel Bocciarelli <axelboc@gmail.com>
Date: Thu, 26 Sep 2024 09:03:38 +0200
Subject: [PATCH] Extract and refactor clear queue dialog

---
 ui/cypress/support.js                         |  2 +-
 ui/src/components/DraggableModal.jsx          | 20 +++--
 .../GenericDialog/ConfirmActionDialog.jsx     | 90 +++++++++----------
 ui/src/components/Main.jsx                    |  2 +
 .../SampleGrid/ClearQueueDialog.jsx           | 26 ++++++
 ui/src/containers/SampleListViewContainer.jsx | 19 +---
 6 files changed, 82 insertions(+), 77 deletions(-)
 create mode 100644 ui/src/components/SampleGrid/ClearQueueDialog.jsx

diff --git a/ui/cypress/support.js b/ui/cypress/support.js
index b9a747d10..35e328e86 100644
--- a/ui/cypress/support.js
+++ b/ui/cypress/support.js
@@ -57,5 +57,5 @@ Cypress.Commands.add('mountSample', (sample = 'test', protein = 'test') => {
 Cypress.Commands.add('clearSamples', () => {
   cy.findByText('Samples').click();
   cy.findByRole('button', { name: /Clear sample list/u }).click('left');
-  cy.findByRole('button', { name: 'Ok' }).click();
+  cy.findByRole('button', { name: 'Clear' }).click();
 });
diff --git a/ui/src/components/DraggableModal.jsx b/ui/src/components/DraggableModal.jsx
index 6f3e587cf..57333b7e0 100644
--- a/ui/src/components/DraggableModal.jsx
+++ b/ui/src/components/DraggableModal.jsx
@@ -2,17 +2,19 @@ import React from 'react';
 import { Modal } from 'react-bootstrap';
 import Draggable from 'react-draggable';
 
-class DraggableModalDialog extends React.Component {
-  render() {
-    return (
-      <Draggable handle=".modal-header" defaultPosition={this.props.defaultpos}>
-        <Modal.Dialog {...this.props} />
-      </Draggable>
-    );
-  }
+function DraggableModalDialog(props) {
+  const { defaultpos } = props;
+
+  return (
+    <Draggable handle=".modal-header" defaultPosition={defaultpos}>
+      <Modal.Dialog {...props} />
+    </Draggable>
+  );
 }
 
 export function DraggableModal(props) {
+  const { children } = props;
+
   return (
     <Modal
       dialogAs={DraggableModalDialog}
@@ -20,7 +22,7 @@ export function DraggableModal(props) {
       backdrop="static"
       {...props}
     >
-      {props.children}
+      {children}
     </Modal>
   );
 }
diff --git a/ui/src/components/GenericDialog/ConfirmActionDialog.jsx b/ui/src/components/GenericDialog/ConfirmActionDialog.jsx
index 11acf14e2..7acd4ffa7 100644
--- a/ui/src/components/GenericDialog/ConfirmActionDialog.jsx
+++ b/ui/src/components/GenericDialog/ConfirmActionDialog.jsx
@@ -1,56 +1,46 @@
-/* eslint-disable react/jsx-handler-names */
 import React from 'react';
 import { Modal, Button } from 'react-bootstrap';
 
-export default class ConfirmActionDialog extends React.Component {
-  constructor(props) {
-    super(props);
-    this.onOkClick = this.onOkClick.bind(this);
-    this.onCancelClick = this.onCancelClick.bind(this);
-  }
+function ConfirmActionDialog(props) {
+  const {
+    title,
+    okBtnLabel = 'OK',
+    cancelBtnLabel = 'Cancel',
+    show = false,
+    children,
+    onHide,
+    onOk,
+    onCancel,
+  } = props;
 
-  onOkClick() {
-    if (this.props.onOk) {
-      this.props.onOk();
-    }
-
-    this.props.hide();
-  }
-
-  onCancelClick() {
-    if (this.props.onCancel) {
-      this.props.onCancel();
-    }
-
-    this.props.hide();
-  }
-
-  render() {
-    return (
-      <Modal show={this.props.show}>
-        <Modal.Header>
-          <Modal.Title>{this.props.title}</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>{this.props.message}</Modal.Body>
-        <Modal.Footer>
-          <Button variant="outline-secondary" onClick={this.onCancelClick}>
-            {this.props.cancelButtonText}
-          </Button>
-          <Button variant="outline-secondary" onClick={this.onOkClick}>
-            {this.props.okButtonText}
-          </Button>
-        </Modal.Footer>
-      </Modal>
-    );
-  }
+  return (
+    <Modal show={show} data-default-styles onHide={onHide}>
+      <Modal.Header>
+        <Modal.Title>{title}</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>{children}</Modal.Body>
+      <Modal.Footer>
+        <Button
+          variant="warning"
+          onClick={() => {
+            onOk?.();
+            onHide();
+          }}
+        >
+          {okBtnLabel}
+        </Button>
+        <Button
+          variant="outline-secondary"
+          onClick={() => {
+            onCancel?.();
+            onHide();
+          }}
+        >
+          {cancelBtnLabel}
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
 }
 
-ConfirmActionDialog.defaultProps = {
-  show: false,
-  title: '',
-  message: '',
-  okButtonText: 'Ok',
-  cancelButtonText: 'Cancel',
-  onOk: false,
-  onCancel: false,
-};
+export default ConfirmActionDialog;
diff --git a/ui/src/components/Main.jsx b/ui/src/components/Main.jsx
index e03c243ad..33a95b9c2 100644
--- a/ui/src/components/Main.jsx
+++ b/ui/src/components/Main.jsx
@@ -25,6 +25,7 @@ import './rachat.css';
 import { getInitialState } from '../actions/login';
 import MXNavbar from './MXNavbar/MXNavbar';
 import ChatWidget from './ChatWidget';
+import ClearQueueDialog from './SampleGrid/ClearQueueDialog';
 
 function Main() {
   const dispatch = useDispatch();
@@ -54,6 +55,7 @@ function Main() {
       )}
 
       <SelectProposalContainer />
+      <ClearQueueDialog />
       <TaskContainer />
       <PleaseWaitDialog />
       <ErrorNotificationPanel />
diff --git a/ui/src/components/SampleGrid/ClearQueueDialog.jsx b/ui/src/components/SampleGrid/ClearQueueDialog.jsx
new file mode 100644
index 000000000..007d40469
--- /dev/null
+++ b/ui/src/components/SampleGrid/ClearQueueDialog.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import ConfirmActionDialog from '../GenericDialog/ConfirmActionDialog';
+import { useDispatch, useSelector } from 'react-redux';
+import { clearQueue } from '../../actions/queue';
+import { showConfirmClearQueueDialog } from '../../actions/general';
+
+function ClearQueueDialog() {
+  const dispatch = useDispatch();
+  const show = useSelector(
+    (state) => state.general.showConfirmClearQueueDialog,
+  );
+
+  return (
+    <ConfirmActionDialog
+      title="Clear sample list?"
+      okBtnLabel="Clear"
+      show={show}
+      onOk={() => dispatch(clearQueue())}
+      onHide={() => dispatch(showConfirmClearQueueDialog(false))}
+    >
+      This will also <strong>clear the queue</strong>.
+    </ConfirmActionDialog>
+  );
+}
+
+export default ClearQueueDialog;
diff --git a/ui/src/containers/SampleListViewContainer.jsx b/ui/src/containers/SampleListViewContainer.jsx
index 214afb1a7..d68b56311 100644
--- a/ui/src/containers/SampleListViewContainer.jsx
+++ b/ui/src/containers/SampleListViewContainer.jsx
@@ -38,7 +38,6 @@ import {
 } from '../actions/sampleGrid';
 
 import {
-  clearQueue,
   deleteSamplesFromQueue,
   setEnabledSample,
   addSamplesToQueue,
@@ -54,7 +53,6 @@ import { showTaskForm } from '../actions/taskForm';
 
 import SampleGridTableContainer from './SampleGridTableContainer';
 
-import ConfirmActionDialog from '../components/GenericDialog/ConfirmActionDialog';
 import QueueSettings from './QueueSettings.jsx';
 
 import '../components/SampleGrid/SampleGridTable.css';
@@ -789,14 +787,6 @@ class SampleListViewContainer extends React.Component {
         id="sampleGridContainer"
         className="samples-grid-table-container mt-4"
       >
-        <ConfirmActionDialog
-          title="Clear sample grid ?"
-          message="This will remove all samples (and collections) from the grid,
-                    are you sure you would like to continue ?"
-          onOk={this.props.clearQueue}
-          show={this.props.general.showConfirmClearQueueDialog}
-          hide={this.props.confirmClearQueueHide}
-        />
         {this.props.loading ? (
           <div
             className="center-in-box"
@@ -863,7 +853,7 @@ class SampleListViewContainer extends React.Component {
                   <Button
                     className="nowrap-style"
                     variant="outline-secondary"
-                    onClick={this.props.confirmClearQueueShow}
+                    onClick={this.props.showConfirmClearQueueDialog}
                     disabled={this.props.queue.queueStatus === QUEUE_RUNNING}
                   >
                     <i
@@ -1016,17 +1006,12 @@ function mapDispatchToProps(dispatch) {
       dispatch(setEnabledSample(qidList, value)),
     deleteTask: (qid, taskIndex) => dispatch(deleteTask(qid, taskIndex)),
     deleteTaskList: (sampleIDList) => dispatch(deleteTaskList(sampleIDList)),
-    clearQueue: () => dispatch(clearQueue()),
     addSamplesToQueue: (sampleData) => dispatch(addSamplesToQueue(sampleData)),
     stopQueue: () => dispatch(stopQueue()),
-    confirmClearQueueShow: bindActionCreators(
+    showConfirmClearQueueDialog: bindActionCreators(
       showConfirmClearQueueDialog,
       dispatch,
     ),
-    confirmClearQueueHide: bindActionCreators(
-      showConfirmClearQueueDialog.bind(null, false),
-      dispatch,
-    ),
     showConfirmCollectDialog: bindActionCreators(
       showConfirmCollectDialog,
       dispatch,