compose: Show globe icon for web public streams.

Fixes #20285.

frontend_tests/node_tests/stream_data.js

@@ -119,6 +119,9 @@ test("basics", () => {
         "invite-only-public-history",
     );
     assert.equal(stream_data.get_stream_privacy_policy(web_public_stream.stream_id), "web-public");
+    assert.ok(stream_data.is_web_public_by_stream_name(web_public_stream.name));
+    assert.ok(!stream_data.is_web_public_by_stream_name(social.name));
+    assert.ok(!stream_data.is_web_public_by_stream_name("unknown"));
 
     assert.ok(stream_data.get_invite_only("social"));
     assert.ok(!stream_data.get_invite_only("unknown"));

static/js/stream_bar.js

@@ -4,14 +4,21 @@ import * as color_class from "./color_class";
 import * as stream_data from "./stream_data";
 
 function update_compose_stream_icon(stream_name) {
-    const icon = $("#compose-lock-icon");
     const streamfield = $("#stream_message_recipient_stream");
-    if (stream_data.get_invite_only(stream_name)) {
+    const globe_icon = $("#compose-globe-icon");
-        icon.show();
+    const lock_icon = $("#compose-lock-icon");
-        streamfield.addClass("lock-padding");
+
-    } else {
+    // Reset state
-        icon.hide();
+    globe_icon.hide();
+    lock_icon.hide();
     streamfield.removeClass("lock-padding");
+
+    if (stream_data.get_invite_only(stream_name)) {
+        lock_icon.show();
+        streamfield.addClass("lock-padding");
+    } else if (stream_data.is_web_public_by_stream_name(stream_name)) {
+        globe_icon.show();
+        streamfield.addClass("lock-padding");
     }
 }
 

static/js/stream_data.js

@@ -581,6 +581,14 @@ export function get_invite_only(stream_name) {
     return sub.invite_only;
 }
 
+export function is_web_public_by_stream_name(stream_name) {
+    const sub = get_sub(stream_name);
+    if (sub === undefined) {
+        return false;
+    }
+    return sub.is_web_public;
+}
+
 export function set_realm_default_streams(realm_default_streams) {
     default_stream_ids.clear();
 

static/styles/compose.css

@@ -128,12 +128,19 @@
         font-weight: 600;
     }
 
-    #compose-lock-icon {
+    #compose-lock-icon,
+    #compose-globe-icon {
         position: relative;
         left: 5px;
         width: 0;
     }
 
+    #compose-globe-icon {
+        top: 1px;
+        left: 4.5px;
+        padding-right: 2px;
+    }
+
     .message_header {
         background: none;
         background-color: hsl(0, 0%, 92%);

static/templates/compose.hbs

@@ -64,6 +64,9 @@
                             <span id="compose-lock-icon">
                                 <i class="fa fa-lock" title="{{t 'This is a private stream' }}" aria-hidden="true"></i>
                             </span>
+                            <span id="compose-globe-icon">
+                                <i class="fa fa-globe" title="{{t 'This is a web public stream' }}" aria-hidden="true"></i>
+                            </span>
                             <input type="text" class="recipient_box" name="stream_message_recipient_stream" id="stream_message_recipient_stream" maxlength="30" value="" placeholder="{{t 'Stream' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Stream' }}" />
                             <i class="fa fa-angle-right" aria-hidden="true"></i>
                             <input type="text" class="recipient_box" name="stream_message_recipient_topic" id="stream_message_recipient_topic" maxlength="60" value="" placeholder="{{t 'Topic' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Topic' }}" />