webview: Add read-only support for poll widgets.

Related: zulip#3205

Author: WesleyAC

src/webview/css/cssNight.js

@@ -5,6 +5,9 @@ body {
   color: hsl(210, 11%, 85%);
   background: hsl(212, 28%, 18%);
 }
+.poll-vote {
+  color: hsl(210, 11%, 85%);
+}
 .topic-header {
   background: hsl(212, 13%, 38%);
 }

src/webview/html/messageAsHtml.js

@@ -1,6 +1,10 @@
 /* @flow strict-local */
 import { PixelRatio } from 'react-native';
+import invariant from 'invariant';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+// $FlowFixMe[untyped-import]
+import { PollData } from '@zulip/shared/js/poll_data';
+
 import template from './template';
 import type {
   AggregatedReaction,
@@ -10,14 +14,17 @@ import type {
   MessageLike,
   Outbox,
   Reaction,
+  SubmessageData,
   ImageEmojiType,
   UserId,
+  WidgetData,
 } from '../../types';
 import type { BackgroundData } from '../MessageList';
 import { shortTime } from '../../utils/date';
 import aggregateReactions from '../../reactions/aggregateReactions';
 import { codeToEmojiMap } from '../../emoji/data';
 import processAlertWords from './processAlertWords';
+import * as logging from '../../utils/logging';
 
 const messageTagsAsHtml = (isStarred: boolean, timeEdited: number | void): string => {
   const pieces = [];
@@ -72,14 +79,106 @@ $!${messageReactionListAsHtml(reactions, ownUser.user_id, allImageEmojiById)}
 `;
 };
 
-const widgetBody = (message: Message | Outbox) => template`
+/**
+ * Render the body of a message that has submessages.
+ *
+ * Must not be called on a message without any submessages.
+ */
+const widgetBody = (message: Message, ownUserId: UserId) => {
+  invariant(
+    message.submessages !== undefined && message.submessages.length > 0,
+    'should have submessages',
+  );
+
+  const widgetSubmessages: Array<{
+    sender_id: number,
+    content: SubmessageData,
+    ...
+  }> = message.submessages
+    .filter(submessage => submessage.msg_type === 'widget')
+    .sort((m1, m2) => m1.id - m2.id)
+    .map(submessage => ({
+      sender_id: submessage.sender_id,
+      content: JSON.parse(submessage.content),
+    }));
+
+  const errorMessage = template`
 $!${message.content}
 <div class="special-message"
  ><p>Interactive message</p
  ><p>To use, open on web or desktop</p
 ></div>
 `;
 
+  const pollWidget = widgetSubmessages.shift();
+  if (!pollWidget || !pollWidget.content) {
+    return errorMessage;
+  }
+
+  /* $FlowFixMe[incompatible-type]: The first widget submessage should be
+       a `WidgetData`; see jsdoc on `SubmessageData`. */
+  const pollWidgetContent: WidgetData = pollWidget.content;
+
+  if (pollWidgetContent.widget_type !== 'poll') {
+    return errorMessage;
+  }
+
+  if (pollWidgetContent.extra_data == null) {
+    // We don't expect this to happen in general, but there are some malformed
+    // messages lying around that will trigger this [1]. The code here is slightly
+    // different the webapp code, but mostly because the current webapp
+    // behaviour seems accidental: an error is printed to the console, and the
+    // code that is written to handle the situation is never reached.  Instead
+    // of doing that, we've opted to catch this case here, and print out the
+    // message (which matches the behaviour of the webapp, minus the console
+    // error, although it gets to that behaviour in a different way). The bug
+    // tracking fixing this on the webapp side is zulip/zulip#19145.
+    // [1]: https://chat.zulip.org/#narrow/streams/public/near/582872
+    return template`$!${message.content}`;
+  }
+
+  const pollData = new PollData({
+    message_sender_id: message.sender_id,
+    current_user_id: ownUserId,
+    is_my_poll: message.sender_id === ownUserId,
+    question: pollWidgetContent.extra_data.question ?? '',
+    options: pollWidgetContent.extra_data.options ?? [],
+    // TODO: Implement this.
+    comma_separated_names: () => '',
+    report_error_function: (msg: string) => {
+      logging.error(msg);
+    },
+  });
+
+  for (const pollEvent of widgetSubmessages) {
+    pollData.handle_event(pollEvent.sender_id, pollEvent.content);
+  }
+
+  const parsedPollData = pollData.get_widget_data();
+
+  return template`
+<div class="poll-widget">
+  <p class="poll-question">${parsedPollData.question}</p>
+  <ul>
+    $!${parsedPollData.options
+      .map(
+        option =>
+          template`
+        <li>
+          <button
+            class="poll-vote"
+            data-voted="${option.current_user_vote}"
+            data-key="${option.key}"
+          >${option.count}</button>
+          <span class="poll-option">${option.option}</span>
+        </li>`,
+      )
+      .join('')}
+  </ul>
+</div>
+  `;
+};
+
 export const flagsStateToStringList = (flags: FlagsState, id: number): string[] =>
   Object.keys(flags).filter(key => flags[key][id]);
 
@@ -112,7 +211,7 @@ export default (
 `;
   const bodyHtml =
     message.submessages && message.submessages.length > 0
-      ? widgetBody(message)
+      ? widgetBody(message, backgroundData.ownUser.user_id)
       : messageBody(backgroundData, message);
 
   if (isBrief) {

src/webview/static/base.css

@@ -696,3 +696,50 @@ h1, h2, h3, h4, h5, h6 {
 .spoiler-block .spoiler-arrow.spoiler-button-open::after {
   transform: rotate(90deg) translate(10px, 0);
 }
+
+/* Poll styling */
+
+.poll-widget {
+  border: hsl(0, 0%, 50%) 1px solid;
+  padding: 2px 8px 2px 10px;
+  border-radius: 10px;
+}
+
+.poll-question {
+  font-size: 1.2rem;
+  margin-bottom: 8px;
+  border-bottom: 1px solid hsla(0, 0%, 60%, 0.2);
+}
+
+.poll-widget > ul {
+  padding: 0px;
+}
+
+.poll-widget > ul > li {
+  list-style: none;
+  margin-bottom: 4px;
+  display: flex;
+  align-items: center;
+}
+
+.poll-vote {
+  background-color: hsla(0, 0%, 0%, 0);
+  border: 1.5px solid hsl(0, 0%, 50%);
+  border-radius: 8px;
+  height: 36px;
+  min-width: 36px;
+  padding: 1px 8px;
+  font-weight: bold;
+  font-size: 18px;
+  flex-shrink: 0;
+}
+
+.poll-vote[data-voted="true"] {
+  border: 1.5px solid hsl(222, 99%, 69%);
+  background-color: hsla(222, 99%, 69%, 25%);
+}
+
+.poll-option {
+  margin-left: 8px;
+  width: 100%;
+}