Ended poll tiles: add ended the poll message

src/components/views/messages/MPollEndBody.tsx

@@ -21,7 +21,9 @@ import { logger } from "matrix-js-sdk/src/logger";
 
 import { Icon as PollIcon } from "../../../../res/img/element-icons/room/composer/poll.svg";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { _t } from "../../../languageHandler";
 import { textForEvent } from "../../../TextForEvent";
+import { Caption } from "../typography/Caption";
 import { IBodyProps } from "./IBodyProps";
 import MPollBody from "./MPollBody";
 
@@ -105,5 +107,10 @@ export const MPollEndBody = React.forwardRef<any, IBodyProps>(({ mxEvent, ...pro
         );
     }
 
-    return <MPollBody mxEvent={pollStartEvent} {...props} />;
+    return (
+        <div>
+            <Caption>{_t("Ended a poll")}</Caption>
+            <MPollBody mxEvent={pollStartEvent} {...props} />
+        </div>
+    );
 });

src/i18n/strings/en_EN.json

@@ -2413,6 +2413,7 @@
     "Based on %(count)s votes|other": "Based on %(count)s votes",
     "Based on %(count)s votes|one": "Based on %(count)s vote",
     "edited": "edited",
+    "Ended a poll": "Ended a poll",
     "Error decrypting video": "Error decrypting video",
     "Error processing voice message": "Error processing voice message",
     "Add reaction": "Add reaction",

test/components/views/messages/__snapshots__/MPollEndBody-test.tsx.snap

@@ -10,99 +10,106 @@ exports[`<MPollEndBody /> when poll start event does not exist in current timeli
 
 exports[`<MPollEndBody /> when poll start event exists in current timeline renders an ended poll 1`] = `
 <div>
-  <div
-    class="mx_MPollBody"
-  >
-    <h2
-      data-testid="pollQuestion"
+  <div>
+    <span
+      class="mx_Caption"
     >
-      Question?
-    </h2>
+      Ended a poll
+    </span>
     <div
-      class="mx_MPollBody_allOptions"
+      class="mx_MPollBody"
     >
+      <h2
+        data-testid="pollQuestion"
+      >
+        Question?
+      </h2>
       <div
-        class="mx_PollOption mx_PollOption_ended"
-        data-testid="pollOption-socks"
+        class="mx_MPollBody_allOptions"
       >
         <div
-          class="mx_PollOption_endedOption"
-          data-value="socks"
+          class="mx_PollOption mx_PollOption_ended"
+          data-testid="pollOption-socks"
         >
           <div
-            class="mx_PollOption_content"
+            class="mx_PollOption_endedOption"
+            data-value="socks"
           >
             <div
-              class="mx_PollOption_optionText"
-            >
-              Socks
-            </div>
-            <div
-              class="mx_PollOption_optionVoteCount"
+              class="mx_PollOption_content"
             >
-              0 votes
+              <div
+                class="mx_PollOption_optionText"
+              >
+                Socks
+              </div>
+              <div
+                class="mx_PollOption_optionVoteCount"
+              >
+                0 votes
+              </div>
             </div>
           </div>
-        </div>
-        <div
-          class="mx_PollOption_popularityBackground"
-        >
           <div
-            class="mx_PollOption_popularityAmount"
-            style="width: 0%;"
-          />
+            class="mx_PollOption_popularityBackground"
+          >
+            <div
+              class="mx_PollOption_popularityAmount"
+              style="width: 0%;"
+            />
+          </div>
         </div>
-      </div>
-      <div
-        class="mx_PollOption mx_PollOption_ended"
-        data-testid="pollOption-shoes"
-      >
         <div
-          class="mx_PollOption_endedOption"
-          data-value="shoes"
+          class="mx_PollOption mx_PollOption_ended"
+          data-testid="pollOption-shoes"
         >
           <div
-            class="mx_PollOption_content"
+            class="mx_PollOption_endedOption"
+            data-value="shoes"
           >
             <div
-              class="mx_PollOption_optionText"
+              class="mx_PollOption_content"
             >
-              Shoes
+              <div
+                class="mx_PollOption_optionText"
+              >
+                Shoes
+              </div>
+              <div
+                class="mx_PollOption_optionVoteCount"
+              >
+                0 votes
+              </div>
             </div>
+          </div>
+          <div
+            class="mx_PollOption_popularityBackground"
+          >
             <div
-              class="mx_PollOption_optionVoteCount"
-            >
-              0 votes
-            </div>
+              class="mx_PollOption_popularityAmount"
+              style="width: 0%;"
+            />
           </div>
         </div>
+      </div>
+      <div
+        class="mx_MPollBody_totalVotes"
+        data-testid="totalVotes"
+      >
+        Final result based on 0 votes
         <div
-          class="mx_PollOption_popularityBackground"
+          class="mx_Spinner"
         >
           <div
-            class="mx_PollOption_popularityAmount"
-            style="width: 0%;"
+            aria-label="Loading…"
+            class="mx_Spinner_icon"
+            data-testid="spinner"
+            role="progressbar"
+            style="width: 16px; height: 16px;"
           />
         </div>
       </div>
     </div>
-    <div
-      class="mx_MPollBody_totalVotes"
-      data-testid="totalVotes"
-    >
-      Final result based on 0 votes
-      <div
-        class="mx_Spinner"
-      >
-        <div
-          aria-label="Loading…"
-          class="mx_Spinner_icon"
-          data-testid="spinner"
-          role="progressbar"
-          style="width: 16px; height: 16px;"
-        />
-      </div>
-    </div>
   </div>
 </div>
 `;