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
Samk13 · Jul 5, 2024 · 8dec284 · 8dec284
1 parent f6f5583
commit 8dec284
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 21 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 {
+      requestsApi,
+      requestEventsApi,
+      request,
+      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);
   }
 
@@ -58,6 +65,7 @@ InvenioRequestsApp.propTypes = {
   userAvatar: PropTypes.string.isRequired,
   defaultQueryParams: PropTypes.object,
   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
@@ -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,13 @@ export class Request extends Component {
   }
 
   render() {
-    const { request, updateRequestAfterAction, userAvatar, permissions } = this.props;
+    const {
+      request,
+      updateRequestAfterAction,
+      userAvatar,
+      permissions,
+      commentContentMaxLength,
+    } = this.props;
 
     return (
       <Overridable id="InvenioRequest.Request.layout">
@@ -32,6 +39,7 @@ export class Request extends Component {
             request={request}
             userAvatar={userAvatar}
             permissions={permissions}
+            commentContentMaxLength={commentContentMaxLength}
           />
         </Loader>
       </Overridable>
@@ -44,11 +52,13 @@ Request.propTypes = {
   initRequest: PropTypes.func.isRequired,
   updateRequestAfterAction: PropTypes.func.isRequired,
   userAvatar: PropTypes.string,
+  commentContentMaxLength: PropTypes.number.isRequired,
   permissions: PropTypes.object.isRequired,
 };
 
 Request.defaultProps = {
   userAvatar: "",
+  commentContentMaxLength: 0,
 };
 
 export default Overridable.component("InvenioRequests.Request", Request);
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,9 @@ 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
+);
 const defaultComponents = {
   ...defaultContribComponents,
   "TimelineEvent.layout.unknown": TimelineUnknownEvent,
@@ -97,6 +100,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
@@ -11,6 +11,7 @@ import { Container, Message } from "semantic-ui-react";
 import PropTypes from "prop-types";
 import { i18next } from "@translations/invenio_requests/i18next";
 import { RequestEventAvatarContainer } from "../components/RequestsFeed";
+import { useSelector } from "react-redux";
 
 const TimelineCommentEditor = ({
   isLoading,
@@ -19,18 +20,22 @@ const TimelineCommentEditor = ({
   error,
   submitComment,
   userAvatar,
-  maxCharCount,
 }) => {
   const [charCount, setCharCount] = useState(0);
   const [localError, setLocalError] = useState("");
-
+  const commentContentMaxLength =
+    useSelector((state) => state.timeline.commentContentMaxLength) || 25000;
   const handleInit = (editor) => {
-    editor.on('input', () => {
+    editor.on("input", () => {
       setCommentContent(editor.getContent());
       const charCount = editor.plugins.wordcount.body.getCharacterCount();
       setCharCount(charCount);
-      if (charCount > maxCharCount) {
-        setLocalError(i18next.t(`Character count exceeds the maximum limit of ${maxCharCount} characters.`));
+      if (charCount > commentContentMaxLength) {
+        setLocalError(
+          i18next.t(
+            `Character count exceeds the maximum limit of ${commentContentMaxLength} characters.`
+          )
+        );
       } else {
         setLocalError("");
       }
@@ -53,7 +58,7 @@ const TimelineCommentEditor = ({
             }}
             minHeight={150}
             editorConfig={{
-              setup: handleInit
+              setup: handleInit,
             }}
           />
         </Container>
@@ -63,7 +68,7 @@ const TimelineCommentEditor = ({
           icon="send"
           size="medium"
           content={i18next.t("Comment")}
-          disabled={isLoading || charCount > maxCharCount}
+          disabled={isLoading || charCount > commentContentMaxLength}
           loading={isLoading}
           onClick={() => submitComment(commentContent, "html")}
         />
@@ -79,15 +84,13 @@ TimelineCommentEditor.propTypes = {
   error: PropTypes.string,
   submitComment: PropTypes.func.isRequired,
   userAvatar: PropTypes.string,
-  maxCharCount: PropTypes.number,
 };
 
 TimelineCommentEditor.defaultProps = {
   commentContent: "",
   isLoading: false,
   error: "",
   userAvatar: "",
-  maxCharCount: 2500,
 };
 
 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,7 @@ const mapStateToProps = (state) => ({
   isLoading: state.timelineCommentEditor.isLoading,
   error: state.timelineCommentEditor.error,
   commentContent: state.timelineCommentEditor.commentContent,
+  commentContentMaxLength: state.timelineCommentEditor,
 });
 
 export const TimelineCommentEditor = connect(

diff --git a/invenio_requests/templates/semantic-ui/invenio_requests/details/index.html b/invenio_requests/templates/semantic-ui/invenio_requests/details/index.html
@@ -2,6 +2,7 @@
 
   This file is part of Invenio.
   Copyright (C) 2016-2020 CERN.
+  Copyright (C) 2024      KTH Royal Institute of Technology.
 
   Invenio is free software; you can redistribute it and/or modify it
   under the terms of the MIT License; see LICENSE file for more details.
@@ -49,6 +50,7 @@ <h2 class="ui header">
          data-default-query-config='{{ dict(size=config["REQUESTS_TIMELINE_PAGE_SIZE"]) | tojson }}'
          data-user-avatar='{{ user_avatar | tojson }}'
          data-permissions='{{ permissions | tojson }}'
+         data-comment-content-max-length='{{ config["REQUESTS_COMMENT_CONTENT_MAX_LENGTH"] }}'
     >{# react app root #}
       <div class="ui grid">
         <div class="stretched row">