compose: Show banner if user is not allowed to post in the stream.

We now show a banner on opening the compose box and changing the
stream in dropdown, if a user is not allowed to post in a stream.

The "Send" button is also disabled if user is not allowed to post
in the stream.

This commit also moved the CSS for disabled modal button in dark
theme below after the other CSS for modals as we are using the
same CSS for the "Send" button as well in disabled state.

web/src/compose_actions.js

@@ -306,6 +306,10 @@ export function start(msg_type, opts) {
     // Show a warning if topic is resolved
     compose_validate.warn_if_topic_resolved(true);
 
+    if (msg_type === "stream") {
+        compose_recipient.check_stream_posting_policy_for_compose_box(opts.stream);
+    }
+
     // Reset the `max-height` property of `compose-textarea` so that the
     // compose-box do not cover the last messages of the current stream
     // while writing a long message.

web/src/compose_recipient.js

@@ -3,6 +3,7 @@
 import $ from "jquery";
 import _ from "lodash";
 
+import * as compose_banner from "./compose_banner";
 import * as compose_fade from "./compose_fade";
 import * as compose_state from "./compose_state";
 import * as compose_validate from "./compose_validate";
@@ -100,6 +101,26 @@ export function open_compose_stream_dropup() {
     $("#id_compose_select_stream > .dropdown-toggle").trigger("click");
 }
 
+export function check_stream_posting_policy_for_compose_box(stream_name) {
+    const stream = stream_data.get_sub_by_name(stream_name);
+    if (!stream) {
+        return;
+    }
+    const can_post_messages_in_stream = stream_data.can_post_messages_in_stream(stream);
+    if (!can_post_messages_in_stream) {
+        $(".compose_right_float_container").addClass("disabled-compose-send-button-container");
+        compose_banner.show_error_message(
+            $t({
+                defaultMessage: "You do not have permission to post in this stream.",
+            }),
+            compose_banner.CLASSNAMES.no_post_permissions,
+        );
+    } else {
+        $(".compose_right_float_container").removeClass("disabled-compose-send-button-container");
+        compose_banner.clear_errors();
+    }
+}
+
 export function on_compose_select_stream_update(new_value) {
     const $stream_header_colorblock = $("#compose_stream_selection_dropdown").find(
         ".stream_header_colorblock",
@@ -107,6 +128,8 @@ export function on_compose_select_stream_update(new_value) {
     stream_bar.decorate(new_value, $stream_header_colorblock);
     update_on_recipient_change();
     $("#stream_message_recipient_topic").trigger("focus").trigger("select");
+
+    check_stream_posting_policy_for_compose_box(new_value);
 }
 
 export function update_stream_dropdown_options() {

web/src/tippyjs.js

@@ -639,6 +639,17 @@ export function initialize() {
         placement: "top",
         appendTo: () => document.body,
     });
+
+    delegate("body", {
+        target: [".disabled-compose-send-button-container"],
+        content: $t({
+            defaultMessage: "You do not have permission to post in this stream.",
+        }),
+        appendTo: () => document.body,
+        onHidden(instance) {
+            instance.destroy();
+        },
+    });
 }
 
 export function show_copied_confirmation($copy_button) {

web/styles/compose.css

@@ -708,6 +708,15 @@ input.recipient_box {
     white-space: nowrap;
     margin-top: 2px;
     height: 24px;
+
+    &.disabled-compose-send-button-container {
+        cursor: not-allowed;
+
+        & button {
+            pointer-events: none;
+            background-color: hsl(0deg 0% 65%);
+        }
+    }
 }
 
 a.compose_control_button {

web/styles/dark_theme.css

@@ -59,11 +59,6 @@
         border: 1px solid hsl(0deg 0% 0% / 60%);
     }
 
-    .modal__btn:disabled {
-        opacity: 1;
-        background-color: hsl(0deg 0% 83% / 50%);
-    }
-
     .modal__content.simplebar-scrollable-y + .modal__footer {
         border-top: 1px solid hsl(0deg 0% 100% / 20%);
     }
@@ -104,6 +99,12 @@
         }
     }
 
+    .modal__btn:disabled,
+    .disabled-compose-send-button-container button {
+        opacity: 1;
+        background-color: hsl(0deg 0% 83% / 50%);
+    }
+
     & table.table-striped thead.table-sticky-headers th {
         background-color: hsl(0deg 0% 0%);
 

web/tests/compose.test.js

@@ -765,6 +765,7 @@ test_ui("on_events", ({override}) => {
 
 test_ui("create_message_object", ({override, override_rewire}) => {
     mock_stream_header_colorblock();
+    mock_banners();
     override_rewire(stream_bar, "decorate", noop);
     override_rewire(compose_recipient, "update_on_recipient_change", noop);
 

web/tests/compose_actions.test.js

@@ -131,6 +131,7 @@ test("start", ({override, override_rewire}) => {
     override_rewire(compose_actions, "blur_compose_inputs", () => {});
     override_rewire(compose_actions, "clear_textarea", () => {});
     override_rewire(compose_recipient, "update_on_recipient_change", () => {});
+    override_rewire(compose_recipient, "check_stream_posting_policy_for_compose_box", () => {});
     stream_bar.decorate = () => {};
     mock_stream_header_colorblock();
 

web/tests/composebox_typeahead.test.js

@@ -3,6 +3,7 @@
 const {strict: assert} = require("assert");
 
 const {mock_stream_header_colorblock} = require("./lib/compose");
+const {mock_banners} = require("./lib/compose_banner");
 const {mock_esm, set_global, with_overrides, zrequire} = require("./lib/namespace");
 const {run_test} = require("./lib/test");
 const $ = require("./lib/zjquery");
@@ -677,6 +678,7 @@ function sorted_names_from(subs) {
 
 test("initialize", ({override, override_rewire, mock_template}) => {
     mock_stream_header_colorblock();
+    mock_banners();
     override_rewire(compose_recipient, "update_on_recipient_change", noop);
     override_rewire(stream_bar, "decorate", noop);
 
@@ -1727,6 +1729,7 @@ test("PM recipients sorted according to stream / topic being viewed", ({override
             stream_id === denmark_stream.stream_id && user_id === cordelia.user_id,
     );
     mock_stream_header_colorblock();
+    mock_banners();
     override_rewire(stream_bar, "decorate", noop);
     override_rewire(compose_recipient, "update_on_recipient_change", noop);