fix: editor contains previous comment when reloading page after successful comment to a proposal

.github/workflows/continuous-integration-workflow-events.yml

@@ -19,7 +19,24 @@ jobs:
         run: npm ci
       - name: Run code formatting check
         run: npm run fmt:check
-
+  playwright-tests-proposal:
+    name: Proposal - Playwright tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "npm"
+      - name: Install dependencies
+        run: |
+          npm ci
+          curl --proto '=https' --tlsv1.2 -LsSf https://github.com/mpeterdev/bos-loader/releases/download/v0.7.1/bos-loader-v0.7.1-installer.sh | sh
+          npx playwright install-deps
+          npx playwright install
+      - name: Run tests
+        run: |
+          INSTANCE=events npx playwright test --project=events playwright-tests/tests/proposal/comment.spec.js
   playwright-tests-events:
     name: Events Committee - Playwright tests
     runs-on: ubuntu-latest

.github/workflows/continuous-integration-workflow-infra.yml

@@ -19,7 +19,24 @@ jobs:
         run: npm ci
       - name: Run code formatting check
         run: npm run fmt:check
-
+  playwright-tests-proposal:
+    name: Proposal - Playwright tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "npm"
+      - name: Install dependencies
+        run: |
+          npm ci
+          curl --proto '=https' --tlsv1.2 -LsSf https://github.com/mpeterdev/bos-loader/releases/download/v0.7.1/bos-loader-v0.7.1-installer.sh | sh
+          npx playwright install-deps
+          npx playwright install
+      - name: Run tests
+        run: |
+          INSTANCE=infrastructure npx playwright test --project=infrastructure playwright-tests/tests/proposal/comment.spec.js
   playwright-tests-infra:
     name: Infrastructure Committee - Playwright tests
     runs-on: ubuntu-latest

instances/devhub.near/widget/devhub/entity/proposal/ComposeComment.jsx

@@ -170,6 +170,7 @@ function composeData() {
     onCommit: () => {
       setCommentToast(true);
       setComment("");
+      Storage.privateSet(draftKey, "");
       setHandler("committed");
       setTxnCreated(false);
     },

instances/events-committee.near/widget/devhub/entity/proposal/CommentsAndLogs.jsx

@@ -2,6 +2,7 @@ const { getLinkUsingCurrentGateway } = VM.require(
   "${REPL_DEVHUB}/widget/core.lib.url"
 ) || { getLinkUsingCurrentGateway: () => {} };
 const snapshotHistory = props.snapshotHistory;
+const proposalId = props.id;
 
 const Wrapper = styled.div`
   position: relative;
@@ -59,11 +60,10 @@ function getDifferentKeysWithValues(obj1, obj2) {
       if (key !== "editor_id" && obj2.hasOwnProperty(key)) {
         const value1 = obj1[key];
         const value2 = obj2[key];
-        if (Array.isArray(value1) && Array.isArray(value2)) {
-          const sortedValue1 = [...value1].sort();
-          const sortedValue2 = [...value2].sort();
-          return JSON.stringify(sortedValue1) !== JSON.stringify(sortedValue2);
-        } else if (typeof value1 === "object" && typeof value2 === "object") {
+
+        if (typeof value1 === "object" && typeof value2 === "object") {
+          return JSON.stringify(value1) !== JSON.stringify(value2);
+        } else if (Array.isArray(value1) && Array.isArray(value2)) {
           return JSON.stringify(value1) !== JSON.stringify(value2);
         } else {
           return value1 !== value2;
@@ -98,6 +98,22 @@ function sortTimelineAndComments() {
           ...getDifferentKeysWithValues(startingPoint, item),
         };
       });
+
+    // add log for accepting terms and condition
+    changedKeysListWithValues.unshift({
+      0: {
+        key: "timestamp",
+        originalValue: "0",
+        modifiedValue: snapshotHistory[0].timestamp,
+      },
+      1: {
+        key: "terms_and_condition",
+        originalValue: "",
+        modifiedValue: "accepted",
+      },
+      editorId: snapshotHistory[0].editor_id,
+    });
+
     State.update({
       changedKeysListWithValues,
       snapshotHistoryLength: snapshotHistory.length,
@@ -143,9 +159,7 @@ const Comment = ({ commentItem }) => {
     blockHeight,
   };
   const content = JSON.parse(Social.get(item.path, blockHeight) ?? "null");
-  const link = getLinkUsingCurrentGateway(
-    `${REPL_DEVHUB}/widget/app?page=proposal&id=${props.id}&accountId=${accountId}&blockHeight=${blockHeight}`
-  );
+  const link = `https://${REPL_DEVHUB}.page/proposal/${proposalId}?accountId=${accountId}&blockHeight=${blockHeight}`;
   const hightlightComment =
     parseInt(props.blockHeight ?? "") === blockHeight &&
     props.accountId === accountId;
@@ -162,6 +176,7 @@ const Comment = ({ commentItem }) => {
           />
         </div>
         <CommentContainer
+          id={`${accountId.replace(/[^a-z0-9]/g, "")}${blockHeight}`}
           style={{ border: hightlightComment ? "2px solid black" : "" }}
           className="rounded-2 flex-1"
         >
@@ -297,13 +312,22 @@ const AccountProfile = ({ accountId }) => {
 
 const parseProposalKeyAndValue = (key, modifiedValue, originalValue) => {
   switch (key) {
+    case "terms_and_condition": {
+      return (
+        <span>
+          accepted
+          <Widget
+            src={"${REPL_DEVHUB}/widget/devhub.entity.proposal.AcceptedTerms"}
+            props={{ proposalId: proposalId }}
+          />
+        </span>
+      );
+    }
     case "name":
       return <span>changed title</span>;
     case "summary":
     case "description":
       return <span>changed {key}</span>;
-    case "labels":
-      return <span>changed labels to {(modifiedValue ?? []).join(", ")}</span>;
     case "category":
       return (
         <span>
@@ -421,7 +445,10 @@ const Log = ({ timestamp }) => {
                 : "inline-flex")
             }
           >
-            <span className="inline-flex fw-bold text-black">
+            <span
+              className="inline-flex fw-bold text-black"
+              style={{ marginRight: 0 }}
+            >
               <AccountProfile accountId={editorId} showAccountId={true} />
             </span>
             {parseProposalKeyAndValue(i.key, i.modifiedValue, i.originalValue)}

instances/events-committee.near/widget/devhub/entity/proposal/ComposeComment.jsx

@@ -151,9 +151,10 @@ function composeData() {
     notifications.push({
       key: notifyAccountId,
       value: {
-        type: "devhub/reply",
+        type: "proposal/reply",
         item,
         proposal: proposalId,
+        widgetAccountId: "${REPL_DEVHUB}",
       },
     });
   }
@@ -169,6 +170,7 @@ function composeData() {
     onCommit: () => {
       setCommentToast(true);
       setComment("");
+      Storage.privateSet(draftKey, "");
       setHandler("committed");
       setTxnCreated(false);
     },
@@ -205,10 +207,11 @@ const Compose = useMemo(() => {
         embeddCSS: ComposeEmbeddCSS,
         handler: handler,
         showProposalIdAutoComplete: true,
+        sortedRelevantUsers: props.sortedRelevantUsers,
       }}
     />
   );
-}, [draftComment, handler]);
+}, [draftComment, handler, props.sortedRelevantUsers]);
 
 return (
   <div className="d-flex gap-2">

instances/infrastructure-committee.near/widget/components/molecule/ComposeComment.jsx

@@ -183,7 +183,8 @@ function composeData() {
     onCommit: () => {
       setCommentToast(true);
       setComment("");
-      setHandler("refreshEditor");
+      Storage.privateSet(draftKey, "");
+      setHandler("committed");
       setTxnCreated(false);
     },
     onCancel: () => {

instances/infrastructure-committee.near/widget/components/molecule/SimpleMDE.jsx

@@ -548,7 +548,7 @@ window.addEventListener("message", (event) => {
     simplemde.value(event.data.content);
     isEditorInitialized = true;
   } else {
-    if (event.data.handler === 'refreshEditor') {
+    if (event.data.handler === 'refreshEditor' || event.data.handler === 'committed') {
       codeMirrorInstance.getDoc().setValue(event.data.content);
     }
   }

instances/infrastructure-committee.near/widget/components/proposals/CommentsAndLogs.jsx

@@ -150,9 +150,8 @@ const Comment = ({ commentItem }) => {
     blockHeight,
   };
   const content = JSON.parse(Social.get(item.path, blockHeight) ?? "null");
-  const link = getLinkUsingCurrentGateway(
-    `${REPL_INFRASTRUCTURE_COMMITTEE}/widget/app?page=proposal&id=${props.id}&accountId=${accountId}&blockHeight=${blockHeight}`
-  );
+  const link = `https://${REPL_DEVHUB}.page/proposal/${proposalId}?accountId=${accountId}&blockHeight=${blockHeight}`;
+
   const hightlightComment =
     parseInt(props.blockHeight ?? "") === blockHeight &&
     props.accountId === accountId;
@@ -169,6 +168,7 @@ const Comment = ({ commentItem }) => {
           />
         </div>
         <CommentContainer
+          id={`${accountId.replace(/[^a-z0-9]/g, "")}${blockHeight}`}
           style={{ border: hightlightComment ? "2px solid black" : "" }}
           className="rounded-2 flex-1"
         >