comments: set maximum length for comments

* UI: Add live character count validation to TimelineCommentEditor * UI: Connect config value through Redux store to make it available as we make config value configurable, this allowe the max limit to change dynamically as well * These changes depending on thins PR: inveniosoftware/react-invenio-forms#244 * Disable submit button when comment exceed char count * Disable submit button when it's < 1 char * Show understandable error msg when exceeding limit
inveniosoftware · Jul 8, 2024 · 6d48f8e · 6d48f8e
1 parent 82dbf28
commit 6d48f8e
Show file tree

Hide file tree

Showing 14 changed files with 124 additions and 27 deletions.
diff --git a/invenio_requests/assets/semantic-ui/js/invenio_requests/InvenioRequestsApp.js b/invenio_requests/assets/semantic-ui/js/invenio_requests/InvenioRequestsApp.js
@@ -1,5 +1,6 @@
 // This file is part of InvenioRequests
 // Copyright (C) 2022 CERN.
+// Copyright (C) 2024 KTH Royal Institute of Technology.
 //
 // Invenio RDM Records is free software; you can redistribute it and/or modify it
 // under the terms of the MIT License; see LICENSE file for more details.
@@ -20,7 +21,13 @@ import { Provider } from "react-redux";
 export class InvenioRequestsApp extends Component {
   constructor(props) {
     super(props);
-    const { requestsApi, requestEventsApi, request, defaultQueryParams } = this.props;
+    const {
+      request,
+      requestsApi,
+      requestEventsApi,
+      defaultQueryParams,
+      commentContentMaxLength,
+    } = this.props;
     const defaultRequestsApi = new InvenioRequestsAPI(
       new RequestLinksExtractor(request)
     );
@@ -32,8 +39,8 @@ export class InvenioRequestsApp extends Component {
       requestEventsApi: requestEventsApi || defaultRequestEventsApi,
       refreshIntervalMs: 5000,
       defaultQueryParams,
+      commentContentMaxLength,
     };
-
     this.store = configureStore(appConfig);
   }
 
@@ -52,12 +59,13 @@ export class InvenioRequestsApp extends Component {
 
 InvenioRequestsApp.propTypes = {
   requestsApi: PropTypes.object,
-  requestEventsApi: PropTypes.object,
   overriddenCmps: PropTypes.object,
+  requestEventsApi: PropTypes.object,
   request: PropTypes.object.isRequired,
-  userAvatar: PropTypes.string.isRequired,
   defaultQueryParams: PropTypes.object,
+  userAvatar: PropTypes.string.isRequired,
   permissions: PropTypes.object.isRequired,
+  commentContentMaxLength: PropTypes.number.isRequired,
 };
 
 InvenioRequestsApp.defaultProps = {

diff --git a/invenio_requests/assets/semantic-ui/js/invenio_requests/contrib/index.js b/invenio_requests/assets/semantic-ui/js/invenio_requests/contrib/index.js
@@ -1,5 +1,4 @@
 import {
-
   LabelStatusAccept,
   LabelStatusCancel,
   LabelStatusDecline,
@@ -12,24 +11,20 @@ import {
   LabelTypeGuestAccess,
   LabelTypeUserAccess,
   LabelTypeCommunityManageRecord,
-  LabelTypeCommunitySubcommunity
-
+  LabelTypeCommunitySubcommunity,
 } from "@js/invenio_requests/contrib";
 import {
-
   RequestAcceptButton,
   RequestCancelButton,
   RequestDeclineButton,
   RequestSubmitButton,
 } from "@js/invenio_requests/components/Buttons";
 import {
-
   RequestAcceptModalTrigger,
   RequestDeclineModalTrigger,
   RequestCancelModalTrigger,
 } from "@js/invenio_requests/components/ModalTriggers";
 import {
-
   AccessRequestIcon,
   CommunityInclusionIcon,
   CommunityInvitationIcon,

diff --git a/invenio_requests/assets/semantic-ui/js/invenio_requests/request/Request.js b/invenio_requests/assets/semantic-ui/js/invenio_requests/request/Request.js
@@ -19,7 +19,12 @@ export class Request extends Component {
   }
 
   render() {
-    const { request, updateRequestAfterAction, userAvatar, permissions } = this.props;
+    const {
+      request,
+      userAvatar,
+      permissions,
+      updateRequestAfterAction,
+    } = this.props;
 
     return (
       <Overridable id="InvenioRequest.Request.layout">

diff --git a/invenio_requests/assets/semantic-ui/js/invenio_requests/requestsAppInit.js b/invenio_requests/assets/semantic-ui/js/invenio_requests/requestsAppInit.js
@@ -1,5 +1,6 @@
 // This file is part of InvenioRequests
 // Copyright (C) 2022 CERN.
+// Copyright (C) 2024 KTH Royal Institute of Technology.
 //
 // Invenio RDM Records is free software; you can redistribute it and/or modify it
 // under the terms of the MIT License; see LICENSE file for more details.
@@ -29,7 +30,7 @@ import {
   LabelTypeGuestAccess,
   LabelTypeUserAccess,
   LabelTypeCommunityManageRecord,
-  LabelTypeCommunitySubcommunity
+  LabelTypeCommunitySubcommunity,
 } from "./contrib";
 import {
   AcceptStatus,
@@ -53,7 +54,10 @@ const request = JSON.parse(requestDetailsDiv.dataset.record);
 const defaultQueryParams = JSON.parse(requestDetailsDiv.dataset.defaultQueryConfig);
 const userAvatar = JSON.parse(requestDetailsDiv.dataset.userAvatar);
 const permissions = JSON.parse(requestDetailsDiv.dataset.permissions);
-
+const commentContentMaxLength = parseInt(
+  requestDetailsDiv.dataset.commentContentMaxLength,
+  10
+);
 const defaultComponents = {
   ...defaultContribComponents,
   "TimelineEvent.layout.unknown": TimelineUnknownEvent,
@@ -97,6 +101,7 @@ ReactDOM.render(
     overriddenCmps={{ ...defaultComponents, ...overriddenComponents }}
     userAvatar={userAvatar}
     permissions={permissions}
+    commentContentMaxLength={commentContentMaxLength}
   />,
   requestDetailsDiv
 );
diff --git a/invenio_requests/assets/semantic-ui/js/invenio_requests/store.js b/invenio_requests/assets/semantic-ui/js/invenio_requests/store.js
@@ -1,5 +1,6 @@
 // This file is part of InvenioRequests
 // Copyright (C) 2022 CERN.
+// Copyright (C) 2024 KTH Royal Institute of Technology.
 //
 // Invenio RDM Records is free software; you can redistribute it and/or modify it
 // under the terms of the MIT License; see LICENSE file for more details.
@@ -16,12 +17,13 @@ const composeEnhancers = composeWithDevTools({
 
 export function configureStore(config) {
   const { size } = config.defaultQueryParams;
+  const { commentContentMaxLength } = config;
 
   return createStore(
     createReducers(),
     // config object will be available in the actions,
     {
-      timeline: { ...initialTimeLineState, size },
+      timeline: { ...initialTimeLineState, size, commentContentMaxLength },
     },
     composeEnhancers(applyMiddleware(thunk.withExtraArgument(config)))
   );

diff --git a/...sts/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/TimelineCommentEditor.js b/...sts/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/TimelineCommentEditor.js
@@ -1,5 +1,6 @@
 // This file is part of InvenioRequests
 // Copyright (C) 2022 CERN.
+// Copyright (C) 2024 KTH Royal Institute of Technology.
 //
 // Invenio RDM Records is free software; you can redistribute it and/or modify it
 // under the terms of the MIT License; see LICENSE file for more details.
@@ -19,7 +20,10 @@ const TimelineCommentEditor = ({
   error,
   submitComment,
   userAvatar,
+  charCount,
+  commentContentMaxLength,
 }) => {
+  const isSubmitDisabled = () => isLoading || (charCount === 0) || (charCount >= commentContentMaxLength)
   return (
     <div className="timeline-comment-editor-container">
       {error && <Message negative>{error}</Message>}
@@ -30,8 +34,8 @@ const TimelineCommentEditor = ({
         />
         <Container fluid className="ml-0-mobile mr-0-mobile fluid-mobile">
           <RichEditor
-            value={commentContent}
-            onChange={(event, editor) => {
+            inputValue={commentContent}
+            onEditorChange={(event, editor) => {
               setCommentContent(editor.getContent());
             }}
             minHeight={150}
@@ -43,6 +47,7 @@ const TimelineCommentEditor = ({
           icon="send"
           size="medium"
           content={i18next.t("Comment")}
+          disabled={isSubmitDisabled()}
           loading={isLoading}
           onClick={() => submitComment(commentContent, "html")}
         />
@@ -58,13 +63,17 @@ TimelineCommentEditor.propTypes = {
   error: PropTypes.string,
   submitComment: PropTypes.func.isRequired,
   userAvatar: PropTypes.string,
+  charCount: PropTypes.number,
+  commentContentMaxLength: PropTypes.number,
 };
 
 TimelineCommentEditor.defaultProps = {
   commentContent: "",
   isLoading: false,
   error: "",
   userAvatar: "",
+  charCount: 0,
+  commentContentMaxLength: 0,
 };
 
 export default TimelineCommentEditor;
diff --git a/invenio_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/index.js b/invenio_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/index.js
@@ -1,5 +1,6 @@
 // This file is part of InvenioRequests
 // Copyright (C) 2022 CERN.
+// Copyright (C) 2024 KTH Royal Institute of Technology.
 //
 // Invenio RDM Records is free software; you can redistribute it and/or modify it
 // under the terms of the MIT License; see LICENSE file for more details.
@@ -17,6 +18,8 @@ const mapStateToProps = (state) => ({
   isLoading: state.timelineCommentEditor.isLoading,
   error: state.timelineCommentEditor.error,
   commentContent: state.timelineCommentEditor.commentContent,
+  charCount: state.timelineCommentEditor.charCount,
+  commentContentMaxLength: state.timeline.commentContentMaxLength,
 });
 
 export const TimelineCommentEditor = connect(

diff --git a/...io_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/state/actions.js b/...io_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/state/actions.js
@@ -1,5 +1,6 @@
 // This file is part of InvenioRequests
 // Copyright (C) 2022 CERN.
+// Copyright (C) 2024 KTH Royal Institute of Technology.
 //
 // Invenio RDM Records is free software; you can redistribute it and/or modify it
 // under the terms of the MIT License; see LICENSE file for more details.
@@ -12,18 +13,34 @@ import {
   SUCCESS as TIMELINE_SUCCESS,
 } from "../../timeline/state/actions";
 import _cloneDeep from "lodash/cloneDeep";
+import { i18next } from "@translations/invenio_requests/i18next";
 
 export const IS_LOADING = "eventEditor/IS_LOADING";
 export const HAS_ERROR = "eventEditor/HAS_ERROR";
 export const SUCCESS = "eventEditor/SUCCESS";
 export const SETTING_CONTENT = "eventEditor/SETTING_CONTENT";
+export const SET_CHAR_COUNT = "eventEditor/SET_CHAR_COUNT";
+export const CLEAR_ERROR = "eventEditor/CLEAR_ERROR";
 
 export const setEventContent = (content) => {
   return async (dispatch, getState, config) => {
     dispatch({
       type: SETTING_CONTENT,
       payload: content,
     });
+
+    const commentContentMaxLength = config.commentContentMaxLength;
+    const charCount = content.length;
+    const errorMessage = i18next.t("Character count exceeds the maximum allowed limit.");
+
+    const validateContentLength = (charCount, maxLength, errorMessage) => {
+      return charCount >= maxLength ? errorMessage : null;
+    };
+
+    const error = validateContentLength(charCount, commentContentMaxLength, errorMessage);
+
+    dispatch({ type: SET_CHAR_COUNT, payload: charCount });
+    dispatch({ type: HAS_ERROR, payload: error });
   };
 };
 
@@ -44,7 +61,6 @@ export const submitComment = (content, format) => {
       That includes the pagination logic e.g. changing pages if the current page size is exceeded by a new comment. */
 
       const response = await config.requestsApi.submitComment(payload);
-
       const currentPage = timelineState.page;
       const currentSize = timelineState.size;
       const currentCommentsLength = timelineState.data.hits.hits.length;

diff --git a/...io_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/state/reducer.js b/...io_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/state/reducer.js
@@ -1,15 +1,17 @@
 // This file is part of InvenioRequests
 // Copyright (C) 2022 CERN.
+// Copyright (C) 2024 KTH Royal Institute of Technology.
 //
 // Invenio RDM Records is free software; you can redistribute it and/or modify it
 // under the terms of the MIT License; see LICENSE file for more details.
 
-import { IS_LOADING, HAS_ERROR, SUCCESS, SETTING_CONTENT } from "./actions";
+import { IS_LOADING, HAS_ERROR, SUCCESS, SETTING_CONTENT, SET_CHAR_COUNT } from "./actions";
 
 const initial_state = {
   error: null,
   isLoading: false,
   commentContent: "",
+  charCount: 0,
 };
 
 export const commentEditorReducer = (state = initial_state, action) => {
@@ -27,6 +29,8 @@ export const commentEditorReducer = (state = initial_state, action) => {
         error: null,
         commentContent: "",
       };
+    case SET_CHAR_COUNT:
+      return { ...state, charCount: action.payload };
     default:
       return state;
   }

diff --git a/...io_requests/assets/semantic-ui/js/invenio_requests/timelineEvents/TimelineCommentEvent.js b/...io_requests/assets/semantic-ui/js/invenio_requests/timelineEvents/TimelineCommentEvent.js
@@ -24,10 +24,47 @@ class TimelineCommentEvent extends Component {
     const { event } = props;
 
     this.state = {
-      commentContent: event?.payload?.content,
+      commentContent: event?.payload?.content || '',
+      inputError: null,
+      isDisabled: false,
+      commentContentMaxLength: 0,
+      charCount: event?.payload?.content?.length || 0,
     };
   }
 
+  componentDidMount() {
+    const requestDetailsDiv = document.getElementById("request-detail");
+    if (requestDetailsDiv) {
+      const commentContentMaxLength = parseInt(
+        requestDetailsDiv.dataset.commentContentMaxLength,
+        10
+      );
+      this.setState({ commentContentMaxLength });
+    }
+  }
+
+  validateContentLength = (charCount, maxLength) => {
+    const errorMessage = i18next.t("Character count exceeds the maximum allowed limit.");
+    return {
+      isDisabled: (charCount === 0) || (charCount >= maxLength),
+      inputError: charCount >= maxLength ? errorMessage : null,
+    };
+  };
+
+  handleEditorChange = (event, editor) => {
+    const content = editor.getContent();
+    const charCount = content.length;
+    const { commentContentMaxLength } = this.state;
+
+    const { isDisabled, inputError } = this.validateContentLength(charCount, commentContentMaxLength);
+
+    this.setState({
+      commentContent: content,
+      charCount,
+      isDisabled,
+      inputError,
+    });
+  };
   eventToType = ({ type, payload }) => {
     switch (type) {
       case "L":
@@ -49,7 +86,7 @@ class TimelineCommentEvent extends Component {
       deleteComment,
       toggleEditMode,
     } = this.props;
-    const { commentContent } = this.state;
+    const { commentContent, inputError } = this.state;
 
     const commentHasBeenEdited = event?.revision_id > 1 && event?.payload;
 
@@ -109,14 +146,13 @@ class TimelineCommentEvent extends Component {
                 </Feed.Summary>
 
                 <Feed.Extra text={!isEditing}>
-                  {error && <Error error={error} />}
+                  {(error || inputError) && <Error error={error || inputError} />}
 
                   {isEditing ? (
                     <RichEditor
-                      value={event?.payload?.content}
-                      onChange={(event, editor) => {
-                        this.setState({ commentContent: editor.getContent() });
-                      }}
+                      initialValue={event?.payload?.content}
+                      inputValue={commentContent}
+                      onEditorChange={this.handleEditorChange}
                       minHeight={150}
                     />
                   ) : (
@@ -132,6 +168,7 @@ class TimelineCommentEvent extends Component {
                       <SaveButton
                         onClick={() => updateComment(commentContent, "html")}
                         loading={isLoading}
+                        disabled={isLoading || this.state.isDisabled}
                       />
                     </Container>
                   )}