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,
@@ -18,6 +22,7 @@ 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,13 +77,87 @@ $!${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 = message.submessages
+    .filter(submessage => submessage.msg_type === 'widget')
+    .map(submessage => ({
+      ...submessage,
+      content: JSON.parse(submessage.content),
+    }));
+
+  const poll_widgets = widgetSubmessages.filter(widget => widget.content.widget_type === 'poll');
+  // "events" are submessages other than the main widget submessage - for
+  // instance, `vote`, `new_option`, and similar submessages. These are not
+  // documented, look at the PollData code if you're interested in what the
+  // possibilities are.
+  const events = widgetSubmessages.filter(widget => 'type' in widget.content);
+
+  if (poll_widgets.length == 0) {
+    return template`
 $!${message.content}
 <div class="special-message"
  ><p>Interactive message</p
  ><p>To use, open on web or desktop</p
 ></div>
 `;
+  }
+  const poll_widget = poll_widgets[0];
+
+  if (!poll_widget.content || !poll_widget.content.extra_data) {
+    // We don't expect this to happen in general, but there are some malformed
+    // messages lying around that will trigger this.
+    return template`$!${message.content}`;
+  }
+
+  const poll_data = new PollData({
+    current_user_id: ownUserId,
+    is_my_poll: message.sender_id === ownUserId,
+    question: poll_widget.content.extra_data.question,
+    options: poll_widget.content.extra_data.options,
+    comma_separated_names: () => {},
+    report_error_function: (msg: string) => {
+      logging.error(msg);
+    },
+  });
+
+  for (const poll_event of events) {
+    poll_data.handle_event(poll_event.sender_id, poll_event.content);
+  }
+
+  const parsed_poll_data = poll_data.get_widget_data();
+
+  return template`
+<div class="poll-widget">
+  <p class="poll-question">${parsed_poll_data.question}</p>
+  <ul>
+    $!${parsed_poll_data.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 +191,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

@@ -690,3 +690,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%;
+}