compose: Add new banner for success message scheduled.

web/src/compose_banner.ts

@@ -17,7 +17,7 @@ export const ERROR = "error";
 const MESSAGE_SENT_CLASSNAMES = {
     sent_scroll_to_view: "sent_scroll_to_view",
     narrow_to_recipient: "narrow_to_recipient",
-    scheduled_message_banner: "scheduled_message_banner",
+    message_scheduled_success_compose_banner: "message_scheduled_success_compose_banner",
 };
 // Technically, unmute_topic_notification is a message sent banner, but
 // it has distinct behavior / look - it has an associated action button,

web/src/scheduled_messages.js

@@ -1,13 +1,13 @@
 import $ from "jquery";
 
+import render_success_message_scheduled_banner from "../templates/compose_banner/success_message_scheduled_banner.hbs";
+
 import * as channel from "./channel";
 import * as compose from "./compose";
 import * as compose_actions from "./compose_actions";
 import * as compose_banner from "./compose_banner";
 import * as compose_ui from "./compose_ui";
-import {$t} from "./i18n";
 import * as narrow from "./narrow";
-import * as notifications from "./notifications";
 import {page_params} from "./page_params";
 import * as people from "./people";
 import * as popover_menus from "./popover_menus";
@@ -93,15 +93,14 @@ export function open_scheduled_message_in_compose(scheduled_msg) {
 }
 
 export function send_request_to_schedule_message(scheduled_message_data, deliver_at) {
-    const success = function () {
+    const success = function (data) {
         compose.clear_compose_box();
-        notifications.notify_above_composebox(
-            $t({defaultMessage: `Your message has been scheduled for {deliver_at}.`}, {deliver_at}),
-            "scheduled_message_banner",
-            "/#scheduled",
-            "",
-            $t({defaultMessage: "View scheduled messages"}),
-        );
+        const new_row = render_success_message_scheduled_banner({
+            scheduled_message_id: data.scheduled_message_id,
+            deliver_at,
+        });
+        compose_banner.clear_message_sent_banners();
+        compose_banner.append_compose_banner_to_banner_list(new_row);
     };
 
     const error = function (xhr) {
@@ -144,4 +143,16 @@ export function initialize() {
     } else {
         add_scheduled_messages(page_params.scheduled_messages);
     }
+
+    $("body").on("click", ".undo_scheduled_message", (e) => {
+        const scheduled_message_id = Number.parseInt(
+            $(e.target)
+                .parents(".message_scheduled_success_compose_banner")
+                .attr("data-scheduled-message-id"),
+            10,
+        );
+        edit_scheduled_message(scheduled_message_id);
+        e.preventDefault();
+        e.stopPropagation();
+    });
 }

web/styles/compose.css

@@ -325,6 +325,19 @@
                 color: hsl(147deg 57% 25% / 75%);
             }
         }
+
+        .compose_banner_action_button {
+            background-color: hsl(147deg 57% 25% / 10%);
+            color: inherit;
+
+            &:hover {
+                background-color: hsl(147deg 57% 25% / 12%);
+            }
+
+            &:active {
+                background-color: hsl(147deg 57% 25% / 15%);
+            }
+        }
     }
 
     /* warning and warning-style classes have the same CSS; this is since
@@ -413,6 +426,32 @@
     }
 }
 
+.compose_banner.success.message_scheduled_success_compose_banner {
+    & a.open_scheduled_message_overlay {
+        line-height: normal;
+        display: inline-block;
+        box-sizing: border-box;
+
+        &:hover,
+        &:focus {
+            text-decoration: none;
+        }
+    }
+
+    .undo_scheduled_message {
+        color: hsl(38deg 44% 27%);
+        background-color: hsl(46.29deg 46.67% 85.29%);
+
+        &:hover {
+            background-color: hsl(47.65deg 41.46% 83.92%);
+        }
+
+        &:active {
+            background-color: hsl(47.65deg 37.78% 82.35%);
+        }
+    }
+}
+
 .upload_banner {
     overflow: hidden;
 

web/styles/dark_theme.css

@@ -225,6 +225,19 @@
                     color: hsl(147deg 51% 55% / 75%);
                 }
             }
+
+            .compose_banner_action_button {
+                background-color: hsl(147deg 51% 55% / 10%);
+                color: inherit;
+
+                &:hover {
+                    background-color: hsl(147deg 51% 55% / 15%);
+                }
+
+                &:active {
+                    background-color: hsl(147deg 51% 55% / 20%);
+                }
+            }
         }
 
         &.warning,
@@ -310,6 +323,21 @@
         }
     }
 
+    .compose_banner.success.message_scheduled_success_compose_banner {
+        .undo_scheduled_message {
+            color: hsl(50deg 45% 61%);
+            background-color: hsl(54deg 75% 15.69%);
+
+            &:hover {
+                background-color: hsl(52.13deg 64.21% 18.63%);
+            }
+
+            &:active {
+                background-color: hsl(51.29deg 57.41% 21.18%);
+            }
+        }
+    }
+
     .upload_banner {
         .moving_bar {
             background: hsl(204deg 63% 18%);

web/templates/compose_banner/success_message_scheduled_banner.hbs

@@ -0,0 +1,8 @@
+<div
+  class="compose_banner success message_scheduled_success_compose_banner"
+  data-scheduled-message-id="{{scheduled_message_id}}">
+    <p class="banner_content">{{t 'Your message has been scheduled for {deliver_at}.' }}</p>
+    <a href="#scheduled" class="compose_banner_action_button open_scheduled_message_overlay">{{t "View scheduled messages" }}</a>
+    <button class="compose_banner_action_button undo_scheduled_message" >{{t "Undo"}}</button>
+    <a role="button" class="zulip-icon zulip-icon-close compose_banner_close_button"></a>
+</div>