Display '(edited)' next to edited polls (#7789)
This commit is contained in:
parent
6793ef33ba
commit
84e15fa148
4 changed files with 95 additions and 13 deletions
|
@ -23,6 +23,12 @@ limitations under the License.
|
|||
line-height: $font-24px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.mx_MPollBody_edited {
|
||||
color: $roomtopic-color;
|
||||
font-size: $font-12px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
h2::before {
|
||||
|
|
|
@ -400,8 +400,14 @@ export default class MPollBody extends React.Component<IBodyProps, IState> {
|
|||
totalText = _t("Based on %(count)s votes", { count: totalVotes });
|
||||
}
|
||||
|
||||
const editedSpan = (
|
||||
this.props.mxEvent.replacingEvent()
|
||||
? <span className="mx_MPollBody_edited"> ({ _t("edited") })</span>
|
||||
: null
|
||||
);
|
||||
|
||||
return <div className="mx_MPollBody">
|
||||
<h2>{ poll.question.text }</h2>
|
||||
<h2>{ poll.question.text }{ editedSpan }</h2>
|
||||
<div className="mx_MPollBody_allOptions">
|
||||
{
|
||||
poll.answers.map((answer: PollAnswerSubevent) => {
|
||||
|
|
|
@ -2136,6 +2136,7 @@
|
|||
"%(count)s votes cast. Vote to see the results|one": "%(count)s vote cast. Vote to see the results",
|
||||
"Based on %(count)s votes|other": "Based on %(count)s votes",
|
||||
"Based on %(count)s votes|one": "Based on %(count)s vote",
|
||||
"edited": "edited",
|
||||
"%(count)s votes|other": "%(count)s votes",
|
||||
"%(count)s votes|one": "%(count)s vote",
|
||||
"Error decrypting video": "Error decrypting video",
|
||||
|
@ -2156,7 +2157,6 @@
|
|||
"Edited at %(date)s": "Edited at %(date)s",
|
||||
"Click to view edits": "Click to view edits",
|
||||
"Edited at %(date)s. Click to view edits.": "Edited at %(date)s. Click to view edits.",
|
||||
"edited": "edited",
|
||||
"Submit logs": "Submit logs",
|
||||
"Can't load this message": "Can't load this message",
|
||||
"toggle event": "toggle event",
|
||||
|
|
|
@ -180,6 +180,8 @@ describe("MPollBody", () => {
|
|||
expect(votesCount(body, "italian")).toBe("");
|
||||
expect(votesCount(body, "wings")).toBe("");
|
||||
expect(body.find(".mx_MPollBody_totalVotes").text()).toBe("No votes cast");
|
||||
expect(body.find('h2').html())
|
||||
.toEqual("<h2>What should we order for the party?</h2>");
|
||||
});
|
||||
|
||||
it("finds votes from multiple people", () => {
|
||||
|
@ -867,6 +869,54 @@ describe("MPollBody", () => {
|
|||
).toBe(false);
|
||||
});
|
||||
|
||||
it("Displays edited content and new answer IDs if the poll has been edited", () => {
|
||||
const pollEvent = new MatrixEvent({
|
||||
"type": M_POLL_START.name,
|
||||
"event_id": "$mypoll",
|
||||
"room_id": "#myroom:example.com",
|
||||
"content": newPollStart(
|
||||
[
|
||||
{ "id": "o1", [M_TEXT.name]: "old answer 1" },
|
||||
{ "id": "o2", [M_TEXT.name]: "old answer 2" },
|
||||
],
|
||||
"old question",
|
||||
),
|
||||
});
|
||||
const replacingEvent = new MatrixEvent({
|
||||
"type": M_POLL_START.name,
|
||||
"event_id": "$mypollreplacement",
|
||||
"room_id": "#myroom:example.com",
|
||||
"content": {
|
||||
"m.new_content": newPollStart(
|
||||
[
|
||||
{ "id": "n1", [M_TEXT.name]: "new answer 1" },
|
||||
{ "id": "n2", [M_TEXT.name]: "new answer 2" },
|
||||
{ "id": "n3", [M_TEXT.name]: "new answer 3" },
|
||||
],
|
||||
"new question",
|
||||
),
|
||||
},
|
||||
});
|
||||
pollEvent.makeReplaced(replacingEvent);
|
||||
const body = newMPollBodyFromEvent(pollEvent, []);
|
||||
expect(body.find('h2').html())
|
||||
.toEqual(
|
||||
"<h2>new question"
|
||||
+ "<span class=\"mx_MPollBody_edited\"> (edited)</span>"
|
||||
+ "</h2>",
|
||||
);
|
||||
const inputs = body.find('input[type="radio"]');
|
||||
expect(inputs).toHaveLength(3);
|
||||
expect(inputs.at(0).prop("value")).toEqual("n1");
|
||||
expect(inputs.at(1).prop("value")).toEqual("n2");
|
||||
expect(inputs.at(2).prop("value")).toEqual("n3");
|
||||
const options = body.find('.mx_MPollBody_optionText');
|
||||
expect(options).toHaveLength(3);
|
||||
expect(options.at(0).text()).toEqual("new answer 1");
|
||||
expect(options.at(1).text()).toEqual("new answer 2");
|
||||
expect(options.at(2).text()).toEqual("new answer 3");
|
||||
});
|
||||
|
||||
it("renders a poll with no votes", () => {
|
||||
const votes = [];
|
||||
const body = newMPollBody(votes);
|
||||
|
@ -968,17 +1018,25 @@ function newMPollBody(
|
|||
relationEvents: Array<MatrixEvent>,
|
||||
endEvents: Array<MatrixEvent> = [],
|
||||
answers?: POLL_ANSWER[],
|
||||
): ReactWrapper {
|
||||
const mxEvent = new MatrixEvent({
|
||||
"type": M_POLL_START.name,
|
||||
"event_id": "$mypoll",
|
||||
"room_id": "#myroom:example.com",
|
||||
"content": newPollStart(answers),
|
||||
});
|
||||
return newMPollBodyFromEvent(mxEvent, relationEvents, endEvents);
|
||||
}
|
||||
|
||||
function newMPollBodyFromEvent(
|
||||
mxEvent: MatrixEvent,
|
||||
relationEvents: Array<MatrixEvent>,
|
||||
endEvents: Array<MatrixEvent> = [],
|
||||
): ReactWrapper {
|
||||
const voteRelations = newVoteRelations(relationEvents);
|
||||
const endRelations = newEndRelations(endEvents);
|
||||
|
||||
return mount(<MPollBody
|
||||
mxEvent={new MatrixEvent({
|
||||
"type": M_POLL_START.name,
|
||||
"event_id": "$mypoll",
|
||||
"room_id": "#myroom:example.com",
|
||||
"content": newPollStart(answers),
|
||||
})}
|
||||
mxEvent={mxEvent}
|
||||
getRelationsForEvent={
|
||||
(eventId: string, relationType: string, eventType: string) => {
|
||||
expect(eventId).toBe("$mypoll");
|
||||
|
@ -1035,7 +1093,10 @@ function endedVotesCount(wrapper: ReactWrapper, value: string): string {
|
|||
).text();
|
||||
}
|
||||
|
||||
function newPollStart(answers?: POLL_ANSWER[]): M_POLL_START_EVENT_CONTENT {
|
||||
function newPollStart(
|
||||
answers?: POLL_ANSWER[],
|
||||
question?: string,
|
||||
): M_POLL_START_EVENT_CONTENT {
|
||||
if (!answers) {
|
||||
answers = [
|
||||
{ "id": "pizza", [M_TEXT.name]: "Pizza" },
|
||||
|
@ -1045,16 +1106,25 @@ function newPollStart(answers?: POLL_ANSWER[]): M_POLL_START_EVENT_CONTENT {
|
|||
];
|
||||
}
|
||||
|
||||
if (!question) {
|
||||
question = "What should we order for the party?";
|
||||
}
|
||||
|
||||
const answersFallback = Array.from(answers.entries())
|
||||
.map(([i, a]) => `${i + 1}. ${a[M_TEXT.name]}`)
|
||||
.join("\n");
|
||||
|
||||
const fallback = `${question}\n${answersFallback}`;
|
||||
|
||||
return {
|
||||
[M_POLL_START.name]: {
|
||||
"question": {
|
||||
[M_TEXT.name]: "What should we order for the party?",
|
||||
[M_TEXT.name]: question,
|
||||
},
|
||||
"kind": M_POLL_KIND_DISCLOSED.name,
|
||||
"answers": answers,
|
||||
},
|
||||
[M_TEXT.name]: "What should we order for the party?\n" +
|
||||
"1. Pizza\n2. Poutine\n3. Italian\n4. Wings",
|
||||
[M_TEXT.name]: fallback,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue