user groups: Implement General tab functionalities for group settings.

There will be one more follow up commit to this, that will
add support for editing memberships of user groups and will
complete preliminary version for user group edit settings.

Follw up for #22214.

static/js/user_group_edit.js

@@ -1,15 +1,19 @@
 import $ from "jquery";
 
+import render_change_user_group_info_modal from "../templates/user_group_settings/change_user_group_info_modal.hbs";
 import render_user_group_settings from "../templates/user_group_settings/user_group_settings.hbs";
 
 import * as blueslip from "./blueslip";
 import * as browser_history from "./browser_history";
+import * as channel from "./channel";
 import * as components from "./components";
+import * as dialog_widget from "./dialog_widget";
 import * as hash_util from "./hash_util";
-import {$t} from "./i18n";
+import {$t, $t_html} from "./i18n";
 import {page_params} from "./page_params";
 import * as people from "./people";
 import * as settings_data from "./settings_data";
+import * as settings_ui from "./settings_ui";
 import * as ui from "./ui";
 import * as user_group_ui_updates from "./user_group_ui_updates";
 import * as user_groups from "./user_groups";
@@ -24,7 +28,7 @@ function setup_group_edit_hash(group) {
 }
 
 function get_user_group_id(target) {
-    const $row = $(target).closest(".group-row");
+    const $row = $(target).closest(".group-row, .user_group_settings_wrapper, .save-button");
     return Number.parseInt($row.attr("data-group-id"), 10);
 }
 
@@ -59,7 +63,9 @@ export function can_edit(group_id) {
 }
 
 export function get_edit_container(group) {
-    return $(`#groups_overlay .user_group_settings[data-group-id='${CSS.escape(group.id)}']`);
+    return $(
+        `#groups_overlay .user_group_settings_wrapper[data-group-id='${CSS.escape(group.id)}']`,
+    );
 }
 
 export function show_settings_for(node) {
@@ -76,7 +82,7 @@ export function show_settings_for(node) {
     const $edit_container = get_edit_container(group);
     $(".nothing-selected").hide();
 
-    $edit_container.addClass("show");
+    $edit_container.show();
 }
 
 export function setup_group_settings(node) {
@@ -112,4 +118,59 @@ export function initialize() {
             open_group_edit_panel_for_row(this);
         }
     });
+
+    $("#manage_groups_container").on("click", "#open_group_info_modal", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const user_group_id = get_user_group_id(e.target);
+        const user_group = user_groups.get_user_group_from_id(user_group_id);
+        const template_data = {
+            group_name: user_group.name,
+            group_description: user_group.description,
+        };
+        const change_user_group_info_modal = render_change_user_group_info_modal(template_data);
+        dialog_widget.launch({
+            html_heading: $t_html(
+                {defaultMessage: "Edit {group_name}"},
+                {group_name: user_group.name},
+            ),
+            html_body: change_user_group_info_modal,
+            id: "change_group_info_modal",
+            on_click: save_group_info,
+            post_render: () => {
+                $("#change_group_info_modal .dialog_submit_button")
+                    .addClass("save-button")
+                    .attr("data-group-id", user_group_id);
+            },
+        });
+    });
+
+    function save_group_info(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        const group = get_user_group_for_target(e.currentTarget);
+
+        const url = `/json/user_groups/${group.id}`;
+        const data = {};
+        const new_name = $("#change_user_group_name").val().trim();
+        const new_description = $("#change_user_group_description").val().trim();
+
+        if (new_name === group.name && new_description === group.description) {
+            return;
+        }
+        if (new_name !== group.name) {
+            data.name = new_name;
+        } else {
+            data.name = group.name;
+        }
+        if (new_description !== group.description) {
+            data.description = new_description;
+        } else {
+            data.description = group.description;
+        }
+
+        const $status_element = $(".group_change_property_info");
+        dialog_widget.close_modal();
+        settings_ui.do_settings_change(channel.patch, url, data, $status_element);
+    }
 }

static/styles/subscriptions.css

@@ -598,7 +598,7 @@ h4.user_group_setting_subsection_title {
         }
 
         .top-bar .stream-name,
-        .top-bar .group-name,
+        .top-bar .group-name-wrapper,
         .bottom-bar .description {
             white-space: nowrap;
             overflow: hidden;
@@ -624,7 +624,7 @@ h4.user_group_setting_subsection_title {
         }
 
         .top-bar .stream-name,
-        .top-bar .group-name {
+        .top-bar .group-name-wrapper {
             font-weight: 600;
         }
 
@@ -766,10 +766,12 @@ h4.user_group_setting_subsection_title {
         }
     }
 
+    .group-header,
     .stream-header {
         white-space: nowrap;
         padding-top: 10px;
 
+        .group-name-wrapper,
         .stream-name {
             display: inline-block;
             position: relative;
@@ -780,6 +782,7 @@ h4.user_group_setting_subsection_title {
             white-space: nowrap;
             max-width: 260px;
 
+            .group-name,
             .sub-stream-name {
                 display: block;
                 max-width: 20ch;
@@ -825,12 +828,14 @@ h4.user_group_setting_subsection_title {
             }
         }
 
+        .group_change_property_info,
         .stream_change_property_info {
             vertical-align: top;
             margin: -5px 0 0;
         }
     }
 
+    .group-description-wrapper,
     .stream-description {
         margin-bottom: 5px;
 
@@ -995,6 +1000,7 @@ h4.user_group_setting_subsection_title {
     margin: 5.5px 0 1px;
 }
 
+#change_user_group_description,
 #change_stream_description {
     width: 100%;
     height: 80px;
@@ -1115,6 +1121,7 @@ h4.user_group_setting_subsection_title {
 }
 
 @media (width < $sm_min) {
+    #groups_overlay .user_group_settings_wrapper,
     #subscription_overlay .subscription_settings {
         .button-group {
             display: block;
@@ -1122,10 +1129,14 @@ h4.user_group_setting_subsection_title {
             margin-top: 10px;
         }
 
-        .stream-header .button-group {
+        .group-header,
+        .stream-header {
+            .button-group {
                 margin-top: -5px;
             }
+        }
 
+        .group_change_property_info,
         .stream_change_property_info {
             /* For small widths where there is not enough space
             to show alert beside stream name we set its display

static/templates/user_group_settings/change_user_group_info_modal.hbs

@@ -0,0 +1,12 @@
+<div>
+    <label for="change_user_group_name">
+        {{t 'User group name' }}
+    </label>
+    <input type="text" id="change_user_group_name" value="{{ group_name }}" />
+</div>
+<div>
+    <label for="change_user_group_description">
+        {{t 'User group description' }}
+    </label>
+    <textarea id="change_user_group_description">{{ group_description }}</textarea>
+</div>

static/templates/user_group_settings/user_group_settings.hbs

@@ -1,11 +1,26 @@
 <div class="group_settings_header" data-group-id="{{group.id}}">
     <div class="tab-container"></div>
 </div>
-<div class="user_group_settings_wrapper" data-group-id="{{group.id}}">
+<div class="user_group_settings_wrapper hide" data-group-id="{{group.id}}">
     <div class="inner-box">
 
         <div class="group_general_settings group_setting_section">
-            General group settings.
+            <div class="group-header">
+                <div class="group-name-wrapper">
+                    <span class="group-name" title="{{group.name}}">{{group.name}}</span>
+                </div>
+                <div class="group_change_property_info alert-notification"></div>
+                <div class="button-group" {{#unless can_edit}}style="display:none"{{/unless}}>
+                    <button id="open_group_info_modal" class="button rounded small btn-warning tippy-zulip-tooltip" data-tippy-content="{{t 'Change group info' }}">
+                        <i class="fa fa-pencil" aria-hidden="true"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="group-description-wrapper">
+                <span class="group-description">
+                    {{group.description}}
+                </span>
+            </div>
         </div>
 
         <div class="group_member_settings group_setting_section">