Fixing minor issues with review comment forms.

ReCodEx · Dec 31, 2023 · 03a4167 · 03a4167
1 parent 64ed481
commit 03a4167
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 8 deletions.
diff --git a/src/components/Solutions/SourceCodeBox/SourceCodeBox.js b/src/components/Solutions/SourceCodeBox/SourceCodeBox.js
@@ -216,6 +216,7 @@ const SourceCodeBox = ({
             </div>
           ) : (
             <SourceCodeViewer
+              id={id}
               content={content.content}
               name={name}
               solutionId={solutionId}

diff --git a/src/components/forms/Fields/CheckboxField.js b/src/components/forms/Fields/CheckboxField.js
@@ -18,7 +18,7 @@ const CheckboxField = ({
   return (
     <FormGroup
       className={error ? 'text-danger' : warning ? 'text-warning' : dirty && !ignoreDirty ? 'text-primary' : undefined}
-      controlId={input.name}>
+      controlId={props.id || input.name}>
       <Component
         {...props}
         {...input}
@@ -34,6 +34,7 @@ const CheckboxField = ({
 };
 
 CheckboxField.propTypes = {
+  id: PropTypes.string,
   input: PropTypes.shape({
     name: PropTypes.string.isRequired,
     value: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),

diff --git a/src/components/forms/OnOffCheckbox/OnOffCheckbox.js b/src/components/forms/OnOffCheckbox/OnOffCheckbox.js
@@ -8,21 +8,32 @@ import { WarningIcon } from '../../icons';
 import 'react-toggle/style.css';
 import './OnOffCheckbox.css'; // eslint-disable-line import/no-deprecated
 
-const OnOffCheckbox = ({ children, name, className, disabled, checked, error, warning, dirty, ...props }) => (
+const OnOffCheckbox = ({
+  children,
+  name,
+  className,
+  disabled,
+  checked,
+  error,
+  warning,
+  dirty,
+  id = name,
+  ...props
+}) => (
   <FormLabel
     className={classnames({
       [className]: className && className.length > 0,
       onOffCheckboxLabelDisabled: disabled,
       onOffCheckboxLabel: !disabled,
     })}>
-    <Toggle {...props} checked={checked} name={name} id={name} value={checked ? 'true' : 'false'} disabled={disabled} />
+    <Toggle {...props} checked={checked} name={name} id={id} value={checked ? 'true' : 'false'} disabled={disabled} />
     <span className="onOffCheckboxLabelText">
       {children}
       {Boolean(error || warning) && (
         <OverlayTrigger
           placement="bottom"
           overlay={
-            <Tooltip id={name} className="wider-tooltip">
+            <Tooltip id={`${id}-tooltip`} className="wider-tooltip">
               {error || warning}
             </Tooltip>
           }>
@@ -40,6 +51,7 @@ OnOffCheckbox.propTypes = {
   error: PropTypes.any,
   warning: PropTypes.any,
   dirty: PropTypes.bool,
+  id: PropTypes.string,
   name: PropTypes.string,
   className: PropTypes.string,
 };

diff --git a/src/components/forms/ReviewCommentForm/ReviewCommentForm.js b/src/components/forms/ReviewCommentForm/ReviewCommentForm.js
@@ -22,6 +22,7 @@ export const newCommentFormInitialValues = {
 };
 
 const ReviewCommentForm = ({
+  form,
   authorId = null,
   createdAt = null,
   onCancel = null,
@@ -77,6 +78,7 @@ const ReviewCommentForm = ({
       <Row>
         <Col>
           <Field
+            id={`${form}-issue`}
             name="issue"
             component={CheckboxField}
             onOff
@@ -97,6 +99,7 @@ const ReviewCommentForm = ({
         {showSuppressor && (
           <Col sm="auto">
             <Field
+              id={`${form}-suppressNotification`}
               name="suppressNotification"
               component={CheckboxField}
               onOff
@@ -155,6 +158,7 @@ const ReviewCommentForm = ({
 );
 
 ReviewCommentForm.propTypes = {
+  form: PropTypes.string,
   createdAt: PropTypes.number,
   authorId: PropTypes.string,
   onCancel: PropTypes.func,

diff --git a/src/components/helpers/SourceCodeViewer/SourceCodeViewer.js b/src/components/helpers/SourceCodeViewer/SourceCodeViewer.js
@@ -85,7 +85,13 @@ class SourceCodeViewer extends React.Component {
   };
 
   linesRenderer = ({ rows, stylesheet, useInlineStyles }) => {
-    const { authorView = false, updateComment = null, removeComment = null, restrictCommentAuthor = null } = this.props;
+    const {
+      id,
+      authorView = false,
+      updateComment = null,
+      removeComment = null,
+      restrictCommentAuthor = null,
+    } = this.props;
     const comments = groupCommentsByLine(this.props.comments || []);
     return rows.map((node, i) => {
       const lineNumber = i + 1;
@@ -128,7 +134,7 @@ class SourceCodeViewer extends React.Component {
 
               {this.state.newComment && this.state.newComment === lineNumber && (
                 <ReviewCommentForm
-                  form="review-comment-new"
+                  form={`review-comment-new-${id}`}
                   initialValues={newCommentFormInitialValues}
                   onCancel={this.closeForms}
                   onSubmit={this.createNewComment}
@@ -171,6 +177,7 @@ class SourceCodeViewer extends React.Component {
 }
 
 SourceCodeViewer.propTypes = {
+  id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   content: PropTypes.string,
   solutionId: PropTypes.string.isRequired,

diff --git a/src/containers/SourceCodeViewerContainer/SourceCodeViewerContainer.js b/src/containers/SourceCodeViewerContainer/SourceCodeViewerContainer.js
@@ -85,7 +85,7 @@ class SourceCodeViewerContainer extends Component {
 
             <Modal.Body className={styles.modalBody}>
               <div>
-                <SourceCodeViewer content="" name="loading" solutionId={solutionId} />
+                <SourceCodeViewer id={fileId} content="" name="loading" solutionId={solutionId} />
               </div>
             </Modal.Body>
           </Modal>
@@ -163,7 +163,7 @@ class SourceCodeViewerContainer extends Component {
               {content.malformedCharacters ? (
                 <pre className="border-top">{content.content}</pre>
               ) : (
-                <SourceCodeViewer content={content.content} name={fileName} solutionId={solutionId} />
+                <SourceCodeViewer id={fileId} content={content.content} name={fileName} solutionId={solutionId} />
               )}
               <div className="border-top pt-1 bg-light rounded-bottom"></div>
             </Modal.Body>