From e4fdd1fcfc1497e95eced1a233160a35d395f79e Mon Sep 17 00:00:00 2001
From: Axel Bocciarelli <axelboc@gmail.com>
Date: Mon, 26 Aug 2024 10:53:33 +0200
Subject: [PATCH] Refactor and improve observer dialog

---
 ui/cypress/support.js                         |   2 +-
 ui/src/actions/remoteAccess.js                |   4 -
 .../RemoteAccess/ObserverDialog.jsx           | 160 ++++++------------
 .../RemoteAccess/PassControlDialog.jsx        |  27 +--
 ui/src/reducers/remoteAccess.js               |   4 -
 5 files changed, 70 insertions(+), 127 deletions(-)

diff --git a/ui/cypress/support.js b/ui/cypress/support.js
index 81fa688aa..01de273d4 100644
--- a/ui/cypress/support.js
+++ b/ui/cypress/support.js
@@ -20,7 +20,7 @@ Cypress.Commands.add('takeControl', (returnPage = '/datacollection') => {
   // control only needs to be taken, when observer mode is present
   cy.get('body').then(($body) => {
     if ($body.text().includes('Observer mode')) {
-      cy.findByRole('button', { name: 'OK' }).click();
+      cy.findByRole('button', { name: 'Continue' }).click();
       cy.findByRole('link', { name: /Remote/u, hidden: true }).click();
       cy.findByRole('button', { name: 'Take control' }).click();
       cy.visit(returnPage);
diff --git a/ui/src/actions/remoteAccess.js b/ui/src/actions/remoteAccess.js
index 8b38849fc..694aa5004 100644
--- a/ui/src/actions/remoteAccess.js
+++ b/ui/src/actions/remoteAccess.js
@@ -15,10 +15,6 @@ import { showErrorPanel } from './general';
 import { getLoginInfo } from './login';
 import { showWaitDialog } from './waitDialog';
 
-export function showObserverDialog(show = true) {
-  return { type: 'SHOW_OBSERVER_DIALOG', show };
-}
-
 export function getRaState() {
   return async (dispatch) => {
     const data = await fetchRemoteAccessState();
diff --git a/ui/src/components/RemoteAccess/ObserverDialog.jsx b/ui/src/components/RemoteAccess/ObserverDialog.jsx
index 8ced49a08..218084fe6 100644
--- a/ui/src/components/RemoteAccess/ObserverDialog.jsx
+++ b/ui/src/components/RemoteAccess/ObserverDialog.jsx
@@ -1,113 +1,63 @@
-/* eslint-disable react/jsx-handler-names */
-import React from 'react';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import { Modal, Button, Form, Row, Col } from 'react-bootstrap';
-import { showObserverDialog, updateNickname } from '../../actions/remoteAccess';
-
-export class ObserverDialog extends React.Component {
-  constructor(props) {
-    super(props);
-    this.accept = this.accept.bind(this);
-    this.reject = this.reject.bind(this);
-    this.show = this.show.bind(this);
-  }
-
-  componentDidUpdate() {
-    if (this.name && this.name.value === '') {
-      try {
-        this.name.value = this.props.login.user.nickname;
-      } catch {
-        this.name.value = '';
-      }
-    }
-  }
-
-  show() {
-    return (
-      !this.props.login.user.inControl && this.props.login.user.nickname === ''
-    );
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Modal, Button, Form } from 'react-bootstrap';
+import { updateNickname } from '../../actions/remoteAccess';
+import { useForm } from 'react-hook-form';
+
+function ObserverDialog() {
+  const dispatch = useDispatch();
+
+  const { loginType, loginID, user } = useSelector((state) => state.login);
+  const isUserLogin = loginType === 'User';
+  const showDialog = !user.inControl && !user.nickname;
+
+  const {
+    register,
+    handleSubmit: makeOnSubmit,
+    setFocus,
+  } = useForm({
+    defaultValues: { name: loginID },
+  });
+
+  function handleSubmit(data) {
+    dispatch(updateNickname(data.name || user.username));
   }
 
-  accept(evt) {
-    evt.preventDefault();
-
-    const name = this.name ? this.name.value : this.props.login.loginID;
-
-    if (name) {
-      this.props.updateNickname(name);
-    } else {
-      this.props.updateNickname(this.props.login.user.username);
+  useEffect(() => {
+    if (showDialog) {
+      setFocus('name');
     }
-
-    this.props.hide();
-  }
-
-  reject() {
-    this.props.hide();
-  }
-
-  title() {
-    return 'Observer mode';
-  }
-
-  render() {
-    return (
-      <Modal backdrop="static" show={this.show()} style={{ zIndex: 10_001 }}>
+  }, [setFocus, showDialog]);
+
+  return (
+    <Modal
+      backdrop="static"
+      show={showDialog}
+      style={{ zIndex: 10_001 }}
+      data-default-styles
+    >
+      <Form onSubmit={makeOnSubmit(handleSubmit)}>
         <Modal.Header>
-          <Modal.Title>{this.title()}</Modal.Title>
+          <Modal.Title>Observer mode</Modal.Title>
         </Modal.Header>
-        <div>
-          <Modal.Body>
+        <Modal.Body>
+          <p className="mb-0">
             Someone else is currently using the beamline, you are going to be
-            logged in as an observer.{' '}
-            {this.props.login.loginType === 'User'
-              ? ''
-              : 'You have to enter your name to be able to continue.'}
-          </Modal.Body>
-          <Modal.Footer className="d-block">
-            <Form onSubmit={this.accept}>
-              {this.props.login.loginType === 'User' ? null : (
-                <Row className="mb-3">
-                  <Form.Group as={Col} sm={12}>
-                    <Form.Control
-                      ref={(ref) => {
-                        this.name = ref;
-                      }}
-                      type="text"
-                      defaultValue={this.props.login.loginID}
-                    />
-                  </Form.Group>
-                </Row>
-              )}
-              <Row className="justify-content-end">
-                <Form.Group as={Col} sm={3}>
-                  <Button style={{ float: 'right' }} type="submit">
-                    {' '}
-                    OK{' '}
-                  </Button>
-                </Form.Group>
-              </Row>
-            </Form>
-          </Modal.Footer>
-        </div>
-      </Modal>
-    );
-  }
-}
-
-function mapStateToProps(state) {
-  return {
-    remoteAccess: state.remoteAccess,
-    login: state.login,
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
-    hide: bindActionCreators(showObserverDialog.bind(null, false), dispatch),
-    updateNickname: bindActionCreators(updateNickname, dispatch),
-  };
+            logged in as an observer.
+          </p>
+          {!isUserLogin && (
+            <Form.Group className="mt-3" controlId="observerName">
+              <Form.Label>Please enter your name:</Form.Label>
+              <Form.Control {...register('name')} type="text" />
+            </Form.Group>
+          )}
+        </Modal.Body>
+        <Modal.Footer>
+          <Button type="submit">Continue</Button>
+        </Modal.Footer>
+      </Form>
+    </Modal>
+  );
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(ObserverDialog);
+export default ObserverDialog;
diff --git a/ui/src/components/RemoteAccess/PassControlDialog.jsx b/ui/src/components/RemoteAccess/PassControlDialog.jsx
index 1ac8a85e1..34c7f239f 100644
--- a/ui/src/components/RemoteAccess/PassControlDialog.jsx
+++ b/ui/src/components/RemoteAccess/PassControlDialog.jsx
@@ -66,21 +66,22 @@ function PassControlDialog() {
           {requestingObs?.requestsControlMsg && (
             <Alert>{requestingObs.requestsControlMsg}</Alert>
           )}
-          <Form.Label>Your response:</Form.Label>
-          <Form.Control
-            type="textarea"
-            {...register('message')}
-            placeholder="Message"
-            rows="4"
-            isValid={isSubmitted && !errors.message}
-            isInvalid={isSubmitted && !!errors.message}
-          />
-          <Form.Control.Feedback type="invalid">
-            {errors.message?.message}
-          </Form.Control.Feedback>
+          <Form.Group controlId="passControlResponse">
+            <Form.Label>Your response:</Form.Label>
+            <Form.Control
+              {...register('message')}
+              type="textarea"
+              placeholder="Message"
+              rows="4"
+              isValid={isSubmitted && !errors.message}
+              isInvalid={isSubmitted && !!errors.message}
+            />
+            <Form.Control.Feedback type="invalid">
+              {errors.message?.message}
+            </Form.Control.Feedback>
+          </Form.Group>
         </Modal.Body>
         <Modal.Footer>
-          <br />
           <Button type="submit" name="allow" variant="success">
             Give control
           </Button>
diff --git a/ui/src/reducers/remoteAccess.js b/ui/src/reducers/remoteAccess.js
index 6b0b5fc20..19b645c0f 100644
--- a/ui/src/reducers/remoteAccess.js
+++ b/ui/src/reducers/remoteAccess.js
@@ -4,7 +4,6 @@ const INITIAL_STATE = {
   observers: [],
   allowRemote: false,
   timeoutGivesControl: false,
-  showObserverDialog: false,
   chatMessageCount: 0,
 };
 
@@ -24,9 +23,6 @@ function remoteAccessReducer(state = INITIAL_STATE, action = {}) {
     case 'SET_OBSERVERS': {
       return { ...state, observers: action.observers };
     }
-    case 'SHOW_OBSERVER_DIALOG': {
-      return { ...state, showObserverDialog: action.show };
-    }
     case 'SET_ALLOW_REMOTE': {
       return { ...state, allowRemote: action.allow };
     }