webview html: Get stream name from stream, rather than message

In particular this means that if the stream name changes, we'll show
the right name.

src/webview/html/__tests__/header-test.js

@@ -7,6 +7,7 @@ import type { BackgroundData } from '../../MessageList';
 const backgroundData: BackgroundData = ({
   ownEmail: eg.selfUser.email,
   subscriptions: [eg.stream],
+  streams: new Map([[eg.stream.stream_id, eg.stream]]),
 }: $FlowFixMe);
 
 describe('header', () => {

src/webview/html/__tests__/messageListElementHtml-test.js

@@ -49,13 +49,26 @@ import getMessageListElements from '../../../message/getMessageListElements';
  * and `messageListElementHtml`.
  */
 describe('messages -> piece descriptors -> content HTML is stable/sensible', () => {
+  const user1 = eg.makeUser({ user_id: 1, name: 'nonrandom name one' });
+  const user2 = eg.makeUser({ user_id: 2, name: 'nonrandom name two' });
+  const user3 = eg.makeUser({ user_id: 3, name: 'nonrandom name three' });
+
+  const stream1 = { ...eg.makeStream({ name: 'stream 1' }), stream_id: 1 };
+  const stream2 = { ...eg.makeStream({ name: 'stream 2' }), stream_id: 2 };
+
+  const topic1 = 'topic 1';
+  const topic2 = 'topic 2';
+
   // Tell ESLint to recognize `check` as a helper function that runs
   // assertions.
   /* eslint jest/expect-expect: ["error", { "assertFunctionNames": ["expect", "check"] }] */
   const check = ({
     // TODO: Test with a variety of different things in
     // `backgroundData`.
-    backgroundData = eg.backgroundData,
+    backgroundData = {
+      ...eg.backgroundData,
+      streams: new Map([stream1, stream2].map(s => [s.stream_id, s])),
+    },
     narrow,
     messages,
   }) => {
@@ -79,16 +92,6 @@ describe('messages -> piece descriptors -> content HTML is stable/sensible', ()
     ).toMatchSnapshot();
   };
 
-  const user1 = eg.makeUser({ user_id: 1, name: 'nonrandom name one' });
-  const user2 = eg.makeUser({ user_id: 2, name: 'nonrandom name two' });
-  const user3 = eg.makeUser({ user_id: 3, name: 'nonrandom name three' });
-
-  const stream1 = { ...eg.makeStream({ name: 'stream 1' }), stream_id: 1 };
-  const stream2 = { ...eg.makeStream({ name: 'stream 2' }), stream_id: 2 };
-
-  const topic1 = 'topic 1';
-  const topic2 = 'topic 2';
-
   // Same sender, stream, topic, day
   const streamMessages1 = [
     eg.streamMessage({

src/webview/html/header.js

@@ -13,11 +13,7 @@ import {
 } from '../../utils/narrow';
 import { foregroundColorFromBackground } from '../../utils/color';
 import { humanDate } from '../../utils/date';
-import {
-  pmUiRecipientsFromMessage,
-  pmKeyRecipientsFromMessage,
-  streamNameOfStreamMessage,
-} from '../../utils/recipient';
+import { pmUiRecipientsFromMessage, pmKeyRecipientsFromMessage } from '../../utils/recipient';
 import { base64Utf8Encode } from '../../utils/encoding';
 
 const renderSubject = message =>
@@ -32,15 +28,17 @@ const renderSubject = message =>
  * This is a private helper of messageListElementHtml.
  */
 export default (
-  { ownUser, subscriptions }: BackgroundData,
+  { ownUser, streams, subscriptions }: BackgroundData,
   element: HeaderMessageListElement,
 ): string => {
   const { subsequentMessage: message, style: headerStyle } = element;
 
   if (message.type === 'stream') {
+    const stream = streams.get(message.stream_id);
+    invariant(stream, 'stream should exist for message');
+
     if (headerStyle === 'topic+date') {
-      const streamName = streamNameOfStreamMessage(message);
-      const topicNarrowStr = keyFromNarrow(topicNarrow(streamName, message.subject));
+      const topicNarrowStr = keyFromNarrow(topicNarrow(stream.name, message.subject));
       const topicHtml = renderSubject(message);
 
       return template`
@@ -54,13 +52,11 @@ export default (
 </div>
     `;
     } else if (headerStyle === 'full') {
-      const streamName = streamNameOfStreamMessage(message);
       const subscription = subscriptions.get(message.stream_id);
-
       const backgroundColor = subscription ? subscription.color : 'hsl(0, 0%, 80%)';
       const textColor = foregroundColorFromBackground(backgroundColor);
-      const streamNarrowStr = keyFromNarrow(streamNarrow(streamName));
-      const topicNarrowStr = keyFromNarrow(topicNarrow(streamName, message.subject));
+      const streamNarrowStr = keyFromNarrow(streamNarrow(stream.name));
+      const topicNarrowStr = keyFromNarrow(topicNarrow(stream.name, message.subject));
       const topicHtml = renderSubject(message);
 
       return template`
@@ -71,7 +67,7 @@ export default (
        style="color: ${textColor};
               background: ${backgroundColor}"
        data-narrow="${base64Utf8Encode(streamNarrowStr)}">
-    # ${streamName}
+    # ${stream.name}
   </div>
   <div class="topic-text">$!${topicHtml}</div>
   <div class="topic-date">${humanDate(new Date(message.timestamp * 1000))}</div>