From 1b844a8d1ca4edc51f5c7270f701d15f3bc7c1e6 Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Tue, 20 Apr 2021 21:39:08 +0000
Subject: [PATCH] message_edit: Deduplicate control buttons.

Deduplicate control buttons by re-using the
compose_control_buttons.

A link to `help` overlay was added to `message_edit_form`
as a part of this process.

This fixes a bug that when video provider is set to `Jitsi`
from `none` in organization settings while message_edit_form
is open, the video icon is not displayed since
it was not present in the message_edit_form DOM even if
compose.update_video_chat_button_display tries to display it.
It is fixed since the `.video_link` element is always present
in DOM of `message_edit_form` now.
---
 static/js/message_edit.js                    |  6 +++---
 static/styles/zulip.css                      |  4 ++++
 static/templates/compose_control_buttons.hbs |  1 +
 static/templates/message_edit_form.hbs       | 17 +----------------
 4 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/static/js/message_edit.js b/static/js/message_edit.js
index ea2b304493..887a7d98b6 100644
--- a/static/js/message_edit.js
+++ b/static/js/message_edit.js
@@ -332,8 +332,6 @@ function edit_message(row, raw_content) {
         file_upload_enabled = true;
     }
 
-    const show_video_chat_button = compose.compute_show_video_chat_button();
-
     const show_edit_stream = message.is_stream && page_params.is_admin;
     // current message's stream has been already been added and selected in handlebar
     const available_streams = show_edit_stream
@@ -350,7 +348,6 @@ function edit_message(row, raw_content) {
             topic: message.topic,
             content: raw_content,
             file_upload_enabled,
-            show_video_chat_button,
             minutes_to_edit: Math.floor(page_params.realm_message_content_edit_limit_seconds / 60),
             show_edit_stream,
             available_streams,
@@ -368,6 +365,9 @@ function edit_message(row, raw_content) {
 
     form.on("keydown", handle_message_row_edit_keydown);
 
+    form.find(".message-edit-feature-group .video_link").toggle(
+        compose.compute_show_video_chat_button(),
+    );
     upload.feature_check($(`#edit_form_${CSS.escape(rows.id(row))} .compose_upload_file`));
 
     const message_edit_stream = row.find(`#select_stream_id_${CSS.escape(message.id)}`);
diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index 5f91e4835c..99b4269be5 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -2512,6 +2512,10 @@ div.topic_edit_spinner .loading_indicator_spinner {
     .edit-controls {
         margin-left: 0;
         margin-top: 0;
+
+        .message-control-link {
+            margin-right: 5px;
+        }
     }
 
     textarea {
diff --git a/static/templates/compose_control_buttons.hbs b/static/templates/compose_control_buttons.hbs
index 53ede8c96c..6f94b4150b 100644
--- a/static/templates/compose_control_buttons.hbs
+++ b/static/templates/compose_control_buttons.hbs
@@ -1,3 +1,4 @@
+{{! This file assumes message_id is only preset in message_edit_form and message_id cannot be 0.}}
 <input type="file" class="file_input notvisible pull-left" multiple />
 {{#if file_upload_enabled }}
 <a role="button" class="compose_control_button compose_upload_file fa fa-paperclip notdisplayed" aria-label="{{t 'Upload files' }}" tabindex=0 title="{{t 'Upload files' }}"></a>
diff --git a/static/templates/message_edit_form.hbs b/static/templates/message_edit_form.hbs
index d3cbaa999e..4af8cb577e 100644
--- a/static/templates/message_edit_form.hbs
+++ b/static/templates/message_edit_form.hbs
@@ -58,22 +58,7 @@
                 <button type="button" class="button small rounded message_edit_cancel">{{t "Cancel" }}</button>
                 {{#if is_content_editable}}
                 <div class="message-edit-feature-group">
-                    <input type="file" class="file_input notvisible pull-left" multiple />
-                    {{#if file_upload_enabled}}
-                    <a role="button" tabindex=0 class="compose_control_button attach_files fa fa-paperclip notdisplayed" aria-label="{{t "Attach files" }}" title="{{t "Attach files" }}"></a>
-                    {{/if}}
-                    <a role="button" tabindex=0 class="markdown_preview compose_control_button fa fa-eye" aria-label="{{t 'Preview' }}" title="{{t 'Preview' }}"></a>
-                    <a role="button" tabindex=0 class="undo_markdown_preview compose_control_button fa fa-edit" aria-label="{{t 'Write' }}" style="display:none;" title="{{t 'Write' }}"></a>
-                    {{#if show_video_chat_button}}
-                    <a role="button" tabindex=0 class="compose_control_button fa fa-video-camera video_link" aria-label="{{t "Add video call" }}" title="{{t "Add video call" }}"></a>
-                    {{/if}}
-                    <a role="button" tabindex=0 class="emoji_map compose_control_button fa fa-smile-o" aria-label="{{t 'Add emoji' }}" title="{{t 'Add emoji' }}"></a>
-                    {{#if giphy_api_available }}
-                    <a role="button" class="compose_control_button" aria-label="{{t 'Add GIF' }}" id="compose_box_giphy_grid" title="{{t 'Add GIF' }}">
-                        <img class="compose_giphy_logo" tabindex=0 src="/static/images/GIPHY_logo.png">
-                    </a>
-                    {{/if}}
-                    <a role="button" tabindex=0 class="message-control-link" data-overlay-trigger="message-formatting" >{{t 'Help' }}</a>
+                    {{> compose_control_buttons }}
                 </div>
                 {{/if}}
             {{else}}