paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 21:43:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

user_group_edit: Convert module to TypeScript.

Browse Source
This commit is contained in:
Varun Singh
2024-12-09 19:12:58 +05:30
committed by Tim Abbott
parent 0ed81f6bef
commit 010e2b9867
8 changed files with 292 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
tools/test-js-with-node
View File

@@ -273,7 +273,7 @@ EXEMPT_FILES = make_set(
"web/src/user_group_create.ts",
"web/src/user_group_create_members.ts",
"web/src/user_group_create_members_data.ts",
"web/src/user_group_edit.js",
"web/src/user_group_edit.ts",
"web/src/user_group_edit_members.ts",
"web/src/user_group_popover.ts",
"web/src/user_groups.ts",

2
web/src/hashchange.js
View File

@@ -30,7 +30,7 @@ import * as spectators from "./spectators.ts";
import {current_user} from "./state_data.ts";
import * as stream_settings_ui from "./stream_settings_ui.ts";
import * as ui_report from "./ui_report.ts";
import * as user_group_edit from "./user_group_edit.js";
import * as user_group_edit from "./user_group_edit.ts";
import * as user_profile from "./user_profile.ts";
import {user_settings} from "./user_settings.ts";

4
web/src/list_widget.ts
View File

@@ -40,7 +40,7 @@ type ListWidgetOpts<Key, Item = Key> = {
name?: string;
get_item: (key: Key) => Item;
modifier_html: (item: Item, filter_value: string) => string;
init_sort?: string | SortingFunction<Item>;
init_sort?: string | string[] | SortingFunction<Item>;
initially_descending_sort?: boolean;
html_selector?: (item: Item) => JQuery;
callback_after_render?: () => void;
@@ -70,7 +70,7 @@ export type ListWidget<Key, Item = Key> = BaseListWidget & {
clear: () => void;
set_filter_value: (value: string) => void;
set_reverse_mode: (reverse_mode: boolean) => void;
set_sorting_function: (sorting_function: string | SortingFunction<Item>) => void;
set_sorting_function: (sorting_function: string | string[] | SortingFunction<Item>) => void;
set_up_event_handlers: () => void;
increase_rendered_offset: () => void;
reduce_rendered_offset: () => void;

2
web/src/server_events_dispatch.js
View File

@@ -87,7 +87,7 @@ import * as typing_events from "./typing_events.ts";
import * as unread_ops from "./unread_ops.ts";
import * as unread_ui from "./unread_ui.ts";
import * as user_events from "./user_events.js";
import * as user_group_edit from "./user_group_edit.js";
import * as user_group_edit from "./user_group_edit.ts";
import * as user_groups from "./user_groups.ts";
import {user_settings} from "./user_settings.ts";
import * as user_status from "./user_status.ts";

2
web/src/settings_components.ts
View File

@@ -1565,7 +1565,7 @@ export const group_setting_name_schema = z.enum([
"can_remove_members_group",
]);
type GroupSettingName = z.infer<typeof group_setting_name_schema>;
export type GroupSettingName = z.infer<typeof group_setting_name_schema>;
export function create_group_setting_widget({
$pill_container,

2
web/src/ui_init.js
View File

@@ -142,7 +142,7 @@ import * as unread_ops from "./unread_ops.ts";
import * as unread_ui from "./unread_ui.ts";
import * as upload from "./upload.ts";
import * as user_card_popover from "./user_card_popover.ts";
import * as user_group_edit from "./user_group_edit.js";
import * as user_group_edit from "./user_group_edit.ts";
import * as user_group_edit_members from "./user_group_edit_members.ts";
import * as user_group_popover from "./user_group_popover.ts";
import * as user_groups from "./user_groups.ts";

2
web/src/user_events.js
View File

@@ -25,7 +25,7 @@ import * as settings_streams from "./settings_streams.ts";
import * as settings_users from "./settings_users.ts";
import {current_user, realm} from "./state_data.ts";
import * as stream_events from "./stream_events.ts";
import * as user_group_edit from "./user_group_edit.js";
import * as user_group_edit from "./user_group_edit.ts";
import * as user_profile from "./user_profile.ts";
export const update_person = function update(person) {

446
web/src/user_group_edit.js → web/src/user_group_edit.ts
View File

@@ -1,4 +1,7 @@
import $ from "jquery";
import assert from "minimalistic-assert";
import type * as tippy from "tippy.js";
import {z} from "zod";
import render_confirm_delete_user from "../templates/confirm_dialog/confirm_delete_user.hbs";
import render_confirm_join_group_direct_member from "../templates/confirm_dialog/confirm_join_group_direct_member.hbs";
@@ -14,6 +17,7 @@ import * as blueslip from "./blueslip.ts";
import * as browser_history from "./browser_history.ts";
import * as channel from "./channel.ts";
import * as components from "./components.ts";
import type {Toggle} from "./components.ts";
import * as compose_banner from "./compose_banner.ts";
import * as confirm_dialog from "./confirm_dialog.ts";
import * as dialog_widget from "./dialog_widget.ts";
@@ -25,6 +29,7 @@ import * as overlays from "./overlays.ts";
import * as people from "./people.ts";
import * as scroll_util from "./scroll_util.ts";
import * as settings_components from "./settings_components.ts";
import {group_setting_name_schema} from "./settings_components.ts";
import * as settings_config from "./settings_config.ts";
import * as settings_data from "./settings_data.ts";
import * as settings_org from "./settings_org.ts";
@@ -36,23 +41,54 @@ import * as user_group_components from "./user_group_components.ts";
import * as user_group_create from "./user_group_create.ts";
import * as user_group_edit_members from "./user_group_edit_members.ts";
import * as user_groups from "./user_groups.ts";
import type {UserGroup} from "./user_groups.ts";
import * as user_profile from "./user_profile.ts";
import * as util from "./util.ts";
export let toggler;
type UserGroupPermissionData =
| number
| {
direct_members: number[];
direct_subgroups: number[];
};
type UserGroupUpdateEvent = {
id: number;
type: string;
group_id: number;
data: {
name: string;
description: string;
can_add_members_group: UserGroupPermissionData;
can_remove_members_group: UserGroupPermissionData;
can_join_group: UserGroupPermissionData;
can_leave_group: UserGroupPermissionData;
can_manage_group: UserGroupPermissionData;
can_mention_group: UserGroupPermissionData;
deactivated: boolean;
};
};
type ActiveData = {
$row: JQuery | undefined;
id: number | undefined;
$tabs: JQuery;
};
export let toggler: Toggle;
export let select_tab = "general";
let group_list_widget;
let group_list_toggler;
let group_list_widget: ListWidget.ListWidget<UserGroup, UserGroup>;
let group_list_toggler: Toggle;
function get_user_group_id(target) {
function get_user_group_id(target: HTMLElement): number {
const $row = $(target).closest(
".group-row, .user_group_settings_wrapper, .save-button, .group_settings_header",
);
return Number.parseInt($row.attr("data-group-id"), 10);
return Number.parseInt($row.attr("data-group-id")!, 10);
}
function get_user_group_for_target(target) {
function get_user_group_for_target(target: HTMLElement): UserGroup | undefined {
const user_group_id = get_user_group_id(target);
if (!user_group_id) {
blueslip.error("Cannot find user group id for target");
@@ -67,19 +103,21 @@ function get_user_group_for_target(target) {
return group;
}
export function get_edit_container(group) {
export function get_edit_container(group: UserGroup): JQuery {
return $(
`#groups_overlay .user_group_settings_wrapper[data-group-id='${CSS.escape(group.id)}']`,
`#groups_overlay .user_group_settings_wrapper[data-group-id='${CSS.escape(group.id.toString())}']`,
);
}
function update_add_members_elements(group) {
function update_add_members_elements(group: UserGroup): void {
if (!is_editing_group(group.id)) {
return;
}
// We are only concerned with the Members tab for editing groups.
const $add_members_container = $(".edit_members_for_user_group .add_members_container");
const $add_members_container = $<tippy.PopperElement>(
".edit_members_for_user_group .add_members_container",
);
if (current_user.is_guest || realm.realm_is_zephyr_mirror_realm) {
// For guest users, we just hide the add_members feature.
@@ -98,7 +136,7 @@ function update_add_members_elements(group) {
$button_element.prop("disabled", false);
}
$button_element.css("pointer-events", "");
$add_members_container[0]._tippy?.destroy();
$add_members_container[0]?._tippy?.destroy();
$add_members_container.removeClass("add_members_disabled");
} else {
$input_element.prop("contenteditable", false);
@@ -112,7 +150,7 @@ function update_add_members_elements(group) {
}
}
function update_group_permission_settings_elements(group) {
function update_group_permission_settings_elements(group: UserGroup): void {
if (!is_editing_group(group.id)) {
return;
}
@@ -127,8 +165,8 @@ function update_group_permission_settings_elements(group) {
$permission_pill_container_elements.find(".input").prop("contenteditable", true);
$permission_input_groups.removeClass("group_setting_disabled");
$permission_input_groups.each(function () {
$(this)[0]._tippy?.destroy();
$permission_input_groups.each(function (this: tippy.ReferenceElement) {
$(this)[0]?._tippy?.destroy();
});
settings_components.enable_opening_typeahead_on_clicking_label($group_permission_settings);
} else {
@@ -142,7 +180,7 @@ function update_group_permission_settings_elements(group) {
}
}
function show_membership_settings(group) {
function show_membership_settings(group: UserGroup): void {
const $edit_container = get_edit_container(group);
const $member_container = $edit_container.find(".edit_members_for_user_group");
@@ -154,8 +192,10 @@ function show_membership_settings(group) {
update_members_panel_ui(group);
}
function show_general_settings(group) {
const permission_settings = Object.keys(realm.server_supported_permission_settings.group);
function show_general_settings(group: UserGroup): void {
const permission_settings = z
.array(group_setting_name_schema)
.parse(Object.keys(realm.server_supported_permission_settings.group));
for (const setting_name of permission_settings) {
settings_components.create_group_setting_widget({
$pill_container: $(`#id_${CSS.escape(setting_name)}`),
@@ -167,21 +207,25 @@ function show_general_settings(group) {
update_general_panel_ui(group);
}
function update_general_panel_ui(group) {
function update_general_panel_ui(group: UserGroup): void {
const $edit_container = get_edit_container(group);
if (settings_data.can_manage_user_group(group.id)) {
$edit_container.find(".group-header .button-group").show();
$(`.group_settings_header[data-group-id='${CSS.escape(group.id)}'] .deactivate`).show();
$(
`.group_settings_header[data-group-id='${CSS.escape(group.id.toString())}'] .deactivate`,
).show();
} else {
$edit_container.find(".group-header .button-group").hide();
$(`.group_settings_header[data-group-id='${CSS.escape(group.id)}'] .deactivate`).hide();
$(
`.group_settings_header[data-group-id='${CSS.escape(group.id.toString())}'] .deactivate`,
).hide();
}
update_group_permission_settings_elements(group);
update_group_membership_button(group.id);
}
function update_members_panel_ui(group) {
function update_members_panel_ui(group: UserGroup): void {
const $edit_container = get_edit_container(group);
const $member_container = $edit_container.find(".edit_members_for_user_group");
@@ -192,7 +236,7 @@ function update_members_panel_ui(group) {
update_add_members_elements(group);
}
export function update_group_management_ui() {
export function update_group_management_ui(): void {
if (!overlays.groups_open()) {
return;
}
@@ -209,11 +253,13 @@ export function update_group_management_ui() {
update_members_panel_ui(group);
}
function group_membership_button(group_id) {
return $(`.group_settings_header[data-group-id='${CSS.escape(group_id)}'] .join_leave_button`);
function group_membership_button(group_id: number): JQuery {
return $(
`.group_settings_header[data-group-id='${CSS.escape(group_id.toString())}'] .join_leave_button`,
);
}
function initialize_tooltip_for_membership_button(group_id) {
function initialize_tooltip_for_membership_button(group_id: number): void {
const $tooltip_wrapper = group_membership_button(group_id).closest(
".join_leave_button_wrapper",
);
@@ -228,7 +274,7 @@ function initialize_tooltip_for_membership_button(group_id) {
}
// Group membership button only adds or removes direct membership.
function update_group_membership_button(group_id) {
function update_group_membership_button(group_id: number): void {
const $group_settings_button = group_membership_button(group_id);
if (!$group_settings_button.length) {
@@ -259,25 +305,24 @@ function update_group_membership_button(group_id) {
if (can_update_membership) {
$group_settings_button.prop("disabled", false);
$group_settings_button.css("pointer-events", "");
const $group_settings_button_wrapper = $group_settings_button.closest(
".join_leave_button_wrapper",
);
$group_settings_button_wrapper[0]._tippy?.destroy();
const $group_settings_button_wrapper: JQuery<tippy.ReferenceElement> =
$group_settings_button.closest(".join_leave_button_wrapper");
$group_settings_button_wrapper[0]?._tippy?.destroy();
} else {
$group_settings_button.prop("disabled", true);
initialize_tooltip_for_membership_button(group_id);
}
}
function update_display_checkmark_on_group_edit(group) {
function update_display_checkmark_on_group_edit(group: UserGroup): void {
if (is_group_already_present(group)) {
const $row = row_for_group_id(group.id);
const item = group;
item.is_member = user_groups.is_user_in_group(group.id, people.my_current_user_id());
item.can_join = settings_data.can_join_user_group(item.id);
item.can_leave = settings_data.can_leave_user_group(item.id);
item.is_direct_member = user_groups.is_direct_member_of(
const is_member = user_groups.is_user_in_group(group.id, people.my_current_user_id());
const can_join = settings_data.can_join_user_group(item.id);
const can_leave = settings_data.can_leave_user_group(item.id);
const is_direct_member = user_groups.is_direct_member_of(
people.my_current_user_id(),
item.id,
);
@@ -285,8 +330,16 @@ function update_display_checkmark_on_group_edit(group) {
item,
people.my_current_user_id(),
);
item.associated_subgroup_names = user_groups.format_group_list(associated_subgroups);
const html = render_browse_user_groups_list_item(item);
const associated_subgroup_names = user_groups.format_group_list(associated_subgroups);
const item_render_data = {
...item,
is_member,
can_join,
can_leave,
is_direct_member,
associated_subgroup_names,
};
const html = render_browse_user_groups_list_item(item_render_data);
const $new_row = $(html);
// TODO: Remove this if/when we just handle "active" when rendering templates.
@@ -298,7 +351,7 @@ function update_display_checkmark_on_group_edit(group) {
}
}
function update_your_groups_list_if_needed(group_id) {
function update_your_groups_list_if_needed(group_id: number): void {
// update display of group-rows on left panel.
// We need this update only if your-groups tab is active
// and current user is among the affect users as in that
@@ -323,7 +376,7 @@ function update_your_groups_list_if_needed(group_id) {
}
}
export function handle_subgroup_edit_event(group_id, direct_subgroup_ids) {
export function handle_subgroup_edit_event(group_id: number, direct_subgroup_ids: number[]): void {
if (!overlays.groups_open()) {
return;
}
@@ -365,7 +418,7 @@ export function handle_subgroup_edit_event(group_id, direct_subgroup_ids) {
}
}
function update_status_text_on_member_update(updated_group) {
function update_status_text_on_member_update(updated_group: UserGroup): void {
const active_group_id = get_active_data().id;
if (active_group_id === undefined) {
return;
@@ -397,7 +450,7 @@ function update_status_text_on_member_update(updated_group) {
update_membership_status_text(active_group);
}
function update_settings_for_group_overlay(group_id, user_ids) {
function update_settings_for_group_overlay(group_id: number, user_ids: number[]): void {
const group = user_groups.get_user_group_from_id(group_id);
// update members list if currently rendered.
@@ -421,24 +474,28 @@ function update_settings_for_group_overlay(group_id, user_ids) {
}
}
export function handle_member_edit_event(group_id, user_ids) {
export function handle_member_edit_event(group_id: number, user_ids: number[]): void {
if (overlays.groups_open()) {
update_settings_for_group_overlay(group_id, user_ids);
}
user_profile.update_user_profile_groups_list_for_users(user_ids);
}
export function update_group_details(group) {
export function update_group_details(group: UserGroup): void {
const $edit_container = get_edit_container(group);
$edit_container.find(".group-name").text(group.name);
$edit_container.find(".group-description").text(group.description);
}
function update_toggler_for_group_setting() {
function update_toggler_for_group_setting(): void {
toggler.goto(select_tab);
}
function get_membership_status_context(group) {
function get_membership_status_context(group: UserGroup): {
is_direct_member: boolean;
is_member: boolean;
associated_subgroup_names_html: string | undefined;
} {
const current_user_id = people.my_current_user_id();
const is_direct_member = user_groups.is_direct_member_of(current_user_id, group.id);
@@ -467,19 +524,19 @@ function get_membership_status_context(group) {
};
}
function update_membership_status_text(group) {
function update_membership_status_text(group: UserGroup): void {
const args = get_membership_status_context(group);
const rendered_membership_status = render_user_group_membership_status(args);
const $edit_container = get_edit_container(group);
$edit_container.find(".membership-status").html(rendered_membership_status);
}
export function show_settings_for(group) {
export function show_settings_for(group: UserGroup): void {
const html = render_user_group_settings({
group,
// We get timestamp in seconds from the API but timerender needs milliseconds.
date_created_string: timerender.get_localized_date_or_time_for_format(
new Date(group.date_created * 1000),
new Date((group.date_created ?? 0) * 1000),
"dayofyear_year",
),
creator: stream_data.maybe_get_creator_details(group.creator_id),
@@ -499,7 +556,7 @@ export function show_settings_for(group) {
show_general_settings(group);
}
export function setup_group_settings(group) {
export function setup_group_settings(group: UserGroup): void {
toggler = components.toggle({
child_wants_focus: true,
values: [
@@ -518,7 +575,7 @@ export function setup_group_settings(group) {
show_settings_for(group);
}
export function setup_group_list_tab_hash(tab_key_value) {
export function setup_group_list_tab_hash(tab_key_value: string): void {
/*
We do not update the hash based on tab switches if
a group is currently being edited.
@@ -536,55 +593,56 @@ export function setup_group_list_tab_hash(tab_key_value) {
}
}
function display_membership_toggle_spinner(group_row) {
function display_membership_toggle_spinner($group_row: JQuery): void {
/* Prevent sending multiple requests by removing the button class. */
$(group_row).find(".check").removeClass("join_leave_button");
$group_row.find(".check").removeClass("join_leave_button");
/* Hide the tick. */
const $tick = $(group_row).find("svg");
const $tick = $group_row.find("svg");
$tick.addClass("hide");
/* Add a spinner to show the request is in process. */
const $spinner = $(group_row).find(".join_leave_status").expectOne();
const $spinner = $group_row.find(".join_leave_status").expectOne();
$spinner.show();
loading.make_indicator($spinner);
}
function hide_membership_toggle_spinner(group_row) {
function hide_membership_toggle_spinner($group_row: JQuery): void {
/* Re-enable the button to handle requests. */
$(group_row).find(".check").addClass("join_leave_button");
$group_row.find(".check").addClass("join_leave_button");
/* Show the tick. */
const $tick = $(group_row).find("svg");
const $tick = $group_row.find("svg");
$tick.removeClass("hide");
/* Destroy the spinner. */
const $spinner = $(group_row).find(".join_leave_status").expectOne();
const $spinner = $group_row.find(".join_leave_status").expectOne();
loading.destroy_indicator($spinner);
}
function empty_right_panel() {
function empty_right_panel(): void {
$(".group-row.active").removeClass("active");
user_group_components.show_user_group_settings_pane.nothing_selected();
}
function open_right_panel_empty() {
function open_right_panel_empty(): void {
empty_right_panel();
const tab_key = $(".user-groups-container")
.find("div.ind-tab.selected")
.first()
.attr("data-tab-key");
assert(tab_key !== undefined);
setup_group_list_tab_hash(tab_key);
}
export function is_editing_group(desired_group_id) {
export function is_editing_group(desired_group_id: number): boolean {
if (!overlays.groups_open()) {
return false;
}
return get_active_data().id === desired_group_id;
}
export function handle_deleted_group(group_id) {
export function handle_deleted_group(group_id: number): void {
if (!overlays.groups_open()) {
return;
}
@@ -595,15 +653,18 @@ export function handle_deleted_group(group_id) {
redraw_user_group_list();
}
export function show_group_settings(group) {
export function show_group_settings(group: UserGroup): void {
$(".group-row.active").removeClass("active");
user_group_components.show_user_group_settings_pane.settings(group);
row_for_group_id(group.id).addClass("active");
setup_group_settings(group);
}
export function open_group_edit_panel_for_row(group_row) {
export function open_group_edit_panel_for_row(group_row: HTMLElement): void {
const group = get_user_group_for_target(group_row);
if (group === undefined) {
return;
}
show_group_settings(group);
}
@@ -612,7 +673,7 @@ export function open_group_edit_panel_for_row(group_row) {
// `realm.max_stream_description_length` for streams.
export const max_user_group_name_length = 100;
export function set_up_click_handlers() {
export function set_up_click_handlers(): void {
$("#groups_overlay").on("click", ".left #clear_search_group_name", (e) => {
const $input = $("#groups_overlay .left #search_group_name");
$input.val("");
@@ -626,7 +687,7 @@ export function set_up_click_handlers() {
});
}
function create_user_group_clicked() {
function create_user_group_clicked(): void {
// this changes the tab switcher (settings/preview) which isn't necessary
// to a add new stream title.
user_group_components.show_user_group_settings_pane.create_user_group();
@@ -636,36 +697,41 @@ function create_user_group_clicked() {
$("#create_user_group_name").trigger("focus");
}
export function do_open_create_user_group() {
export function do_open_create_user_group(): void {
// Only call this directly for hash changes.
// Prefer open_create_user_group().
show_right_section();
create_user_group_clicked();
}
export function open_create_user_group() {
export function open_create_user_group(): void {
do_open_create_user_group();
browser_history.update("#groups/new");
}
export function row_for_group_id(group_id) {
return $(`.group-row[data-group-id='${CSS.escape(group_id)}']`);
export function row_for_group_id(group_id: number): JQuery {
return $(`.group-row[data-group-id='${CSS.escape(group_id.toString())}']`);
}
export function is_group_already_present(group) {
export function is_group_already_present(group: UserGroup): boolean {
return row_for_group_id(group.id).length > 0;
}
export function get_active_data() {
export function get_active_data(): ActiveData {
const $active_tabs = $(".user-groups-container").find("div.ind-tab.selected");
const active_group_id = user_group_components.active_group_id;
let $row;
if (active_group_id !== undefined) {
$row = row_for_group_id(active_group_id);
}
return {
$row: row_for_group_id(user_group_components.active_group_id),
$row,
id: user_group_components.active_group_id,
$tabs: $active_tabs,
};
}
export function switch_to_group_row(group) {
export function switch_to_group_row(group: UserGroup): void {
if (is_group_already_present(group)) {
/*
It is possible that this function may be called at times
@@ -681,7 +747,7 @@ export function switch_to_group_row(group) {
const $group_row = row_for_group_id(group.id);
const $container = $(".user-groups-list");
get_active_data().$row.removeClass("active");
get_active_data().$row?.removeClass("active");
$group_row.addClass("active");
scroll_util.scroll_element_into_container($group_row, $container);
@@ -690,12 +756,12 @@ export function switch_to_group_row(group) {
show_group_settings(group);
}
function show_right_section() {
function show_right_section(): void {
$(".right").addClass("show");
$(".user-groups-header").addClass("slide-left");
}
export function add_group_to_table(group) {
export function add_group_to_table(group: UserGroup): void {
if (is_group_already_present(group)) {
// If a group is already listed/added in groups modal,
// then we simply return.
@@ -718,7 +784,7 @@ export function add_group_to_table(group) {
}
}
export function sync_group_permission_setting(property, group) {
export function sync_group_permission_setting(property: string, group: UserGroup): void {
const $elem = $(`#id_${CSS.escape(property)}`);
const $subsection = $elem.closest(".settings-subsection-parent");
if ($subsection.find(".save-button-controls").hasClass("hide")) {
@@ -728,7 +794,7 @@ export function sync_group_permission_setting(property, group) {
}
}
export function update_group(event) {
export function update_group(event: UserGroupUpdateEvent): void {
if (!overlays.groups_open()) {
return;
}
@@ -785,7 +851,11 @@ export function update_group(event) {
}
}
export function change_state(section, left_side_tab, right_side_tab) {
export function change_state(
section: string,
left_side_tab: string | undefined,
right_side_tab: string,
): void {
if (section === "new") {
do_open_create_user_group();
redraw_user_group_list();
@@ -827,29 +897,33 @@ export function change_state(section, left_side_tab, right_side_tab) {
empty_right_panel();
}
function compare_by_name(a, b) {
function compare_by_name(a: UserGroup, b: UserGroup): number {
return util.strcmp(a.name, b.name);
}
function redraw_left_panel(tab_name) {
function redraw_left_panel(tab_name: string): void {
let groups_list_data;
if (tab_name === "all-groups") {
groups_list_data = user_groups.get_realm_user_groups();
} else if (tab_name === "your-groups") {
groups_list_data = user_groups.get_user_groups_of_user(people.my_current_user_id());
}
if (groups_list_data === undefined) {
return;
}
groups_list_data.sort(compare_by_name);
group_list_widget.replace_list_data(groups_list_data);
update_empty_left_panel_message();
maybe_reset_right_panel(groups_list_data);
}
export function redraw_user_group_list() {
export function redraw_user_group_list(): void {
const tab_name = get_active_data().$tabs.first().attr("data-tab-key");
assert(tab_name !== undefined);
redraw_left_panel(tab_name);
}
export function switch_group_tab(tab_name) {
export function switch_group_tab(tab_name: string): void {
/*
This switches the groups list tab, but it doesn't update
the group_list_toggler widget. You may instead want to
@@ -859,11 +933,11 @@ export function switch_group_tab(tab_name) {
setup_group_list_tab_hash(tab_name);
}
export function add_or_remove_from_group(group, group_row) {
export function add_or_remove_from_group(group: UserGroup, $group_row: JQuery): void {
const user_id = people.my_current_user_id();
function success_callback() {
if (group_row.length) {
hide_membership_toggle_spinner(group_row);
function success_callback(): void {
if ($group_row.length) {
hide_membership_toggle_spinner($group_row);
// This should only be triggered when a user is on another group
// edit panel and they join a group via the left panel plus button.
// In that case, the edit panel of the newly joined group should
@@ -873,19 +947,19 @@ export function add_or_remove_from_group(group, group_row) {
!is_editing_group(group.id) &&
user_groups.is_user_in_group(group.id, user_id, true)
) {
open_group_edit_panel_for_row(group_row);
open_group_edit_panel_for_row(util.the($group_row));
}
}
}
function error_callback() {
if (group_row.length) {
hide_membership_toggle_spinner(group_row);
function error_callback(): void {
if ($group_row.length) {
hide_membership_toggle_spinner($group_row);
}
}
if (group_row.length) {
display_membership_toggle_spinner(group_row);
if ($group_row.length) {
display_membership_toggle_spinner($group_row);
}
if (user_groups.is_direct_member_of(user_id, group.id)) {
user_group_edit_members.edit_user_group_membership({
@@ -904,7 +978,7 @@ export function add_or_remove_from_group(group, group_row) {
}
}
export function maybe_reset_right_panel(groups_list_data) {
export function maybe_reset_right_panel(groups_list_data: UserGroup[]): void {
if (user_group_components.active_group_id === undefined) {
return;
}
@@ -915,7 +989,7 @@ export function maybe_reset_right_panel(groups_list_data) {
}
}
export function update_empty_left_panel_message() {
export function update_empty_left_panel_message(): void {
// Check if we have any groups in panel to decide whether to
// display a notice.
let has_groups;
@@ -940,7 +1014,7 @@ export function update_empty_left_panel_message() {
$(".no-groups-to-show").show();
}
export function remove_deactivated_user_from_all_groups(user_id) {
export function remove_deactivated_user_from_all_groups(user_id: number): void {
const all_user_groups = user_groups.get_realm_user_groups(true);
for (const user_group of all_user_groups) {
@@ -955,8 +1029,8 @@ export function remove_deactivated_user_from_all_groups(user_id) {
}
}
export function setup_page(callback) {
function initialize_components() {
export function setup_page(callback: () => void): void {
function initialize_components(): void {
group_list_toggler = components.toggle({
child_wants_focus: true,
values: [
@@ -971,7 +1045,7 @@ export function setup_page(callback) {
group_list_toggler.get().prependTo("#groups_overlay_container .list-toggler-container");
}
function populate_and_fill() {
function populate_and_fill(): void {
const template_data = {
can_create_user_groups: settings_data.user_can_create_user_groups(),
zulip_plan_is_not_limited: realm.zulip_plan_is_not_limited,
@@ -1013,12 +1087,16 @@ export function setup_page(callback) {
immediately after this due to call to change_state. So we call
`ListWidget.create` with empty user groups list.
*/
group_list_widget = ListWidget.create($container, [], {
const empty_user_group_list: UserGroup[] = [];
group_list_widget = ListWidget.create($container, empty_user_group_list, {
name: "user-groups-overlay",
get_item: ListWidget.default_get_item,
modifier_html(item) {
item.is_member = user_groups.is_user_in_group(item.id, people.my_current_user_id());
item.is_direct_member = user_groups.is_direct_member_of(
const is_member = user_groups.is_user_in_group(
item.id,
people.my_current_user_id(),
);
const is_direct_member = user_groups.is_direct_member_of(
people.my_current_user_id(),
item.id,
);
@@ -1026,11 +1104,19 @@ export function setup_page(callback) {
item,
people.my_current_user_id(),
);
item.associated_subgroup_names =
const associated_subgroup_names =
user_groups.format_group_list(associated_subgroups);
item.can_join = settings_data.can_join_user_group(item.id);
item.can_leave = settings_data.can_leave_user_group(item.id);
return render_browse_user_groups_list_item(item);
const can_join = settings_data.can_join_user_group(item.id);
const can_leave = settings_data.can_leave_user_group(item.id);
const item_render_data = {
...item,
is_member,
is_direct_member,
associated_subgroup_names,
can_join,
can_leave,
};
return render_browse_user_groups_list_item(item_render_data);
},
filter: {
$element: $("#groups_overlay_container .left #search_group_name"),
@@ -1074,8 +1160,22 @@ export function setup_page(callback) {
populate_and_fill();
}
function parse_args_for_deactivation_banner(objections) {
const args = {
type DeactivationBannerArgs = {
streams_using_group_for_setting: {
stream_name: string;
setting_url: string | undefined;
}[];
groups_using_group_for_setting: {
group_name: string;
setting_url: string;
}[];
realm_using_group_for_setting: boolean;
};
function parse_args_for_deactivation_banner(
objections: Record<string, unknown>[],
): DeactivationBannerArgs {
const args: DeactivationBannerArgs = {
streams_using_group_for_setting: [],
groups_using_group_for_setting: [],
realm_using_group_for_setting: false,
@@ -1083,6 +1183,7 @@ function parse_args_for_deactivation_banner(objections) {
for (const objection of objections) {
if (objection.type === "channel") {
const stream_id = objection.channel_id;
assert(typeof stream_id === "number");
const sub = stream_data.get_sub_by_id(stream_id);
if (sub !== undefined) {
args.streams_using_group_for_setting.push({
@@ -1100,6 +1201,7 @@ function parse_args_for_deactivation_banner(objections) {
if (objection.type === "user_group") {
const group_id = objection.group_id;
assert(typeof group_id === "number");
const group = user_groups.get_user_group_from_id(group_id);
const setting_url = hash_util.group_edit_url(group, "general");
args.groups_using_group_for_setting.push({group_name: group.name, setting_url});
@@ -1113,66 +1215,79 @@ function parse_args_for_deactivation_banner(objections) {
return args;
}
export function initialize() {
$("#groups_overlay_container").on("click", ".group-row", function (e) {
if ($(e.target).closest(".check, .user_group_settings_wrapper").length === 0) {
export function initialize(): void {
$("#groups_overlay_container").on("click", ".group-row", function (this: HTMLElement) {
if ($(this).closest(".check, .user_group_settings_wrapper").length === 0) {
open_group_edit_panel_for_row(this);
}
});
$("#groups_overlay_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,
max_user_group_name_length,
};
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",
loading_spinner: true,
on_click: save_group_info,
post_render() {
$("#change_group_info_modal .dialog_submit_button")
.addClass("save-button")
.attr("data-group-id", user_group_id);
},
update_submit_disabled_state_on_change: true,
});
});
$("#groups_overlay_container").on(
"click",
"#open_group_info_modal",
function (this: HTMLElement, e) {
e.preventDefault();
e.stopPropagation();
const user_group_id = get_user_group_id(this);
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,
max_user_group_name_length,
};
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",
loading_spinner: true,
on_click: save_group_info,
post_render() {
$("#change_group_info_modal .dialog_submit_button")
.addClass("save-button")
.attr("data-group-id", user_group_id);
},
update_submit_disabled_state_on_change: true,
});
},
);
$("#groups_overlay_container").on("click", ".group_settings_header .button-danger", () => {
const active_group_data = get_active_data();
const group_id = active_group_data.id;
assert(group_id !== undefined);
const user_group = user_groups.get_user_group_from_id(group_id);
if (!user_group || !settings_data.can_manage_user_group(group_id)) {
return;
}
function deactivate_user_group() {
function deactivate_user_group(): void {
channel.post({
url: "/json/user_groups/" + group_id + "/deactivate",
data: {},
success() {
dialog_widget.close();
active_group_data.$row.remove();
active_group_data.$row?.remove();
},
error(xhr) {
dialog_widget.hide_dialog_spinner();
if (xhr.responseJSON.code === "CANNOT_DEACTIVATE_GROUP_IN_USE") {
const parsed = z
.object({
code: z.string(),
msg: z.string(),
objections: z.array(z.record(z.string(), z.unknown())),
result: z.string(),
})
.safeParse(xhr.responseJSON);
if (parsed.success && parsed.data.code === "CANNOT_DEACTIVATE_GROUP_IN_USE") {
$("#deactivation-confirm-modal .dialog_submit_button").prop(
"disabled",
true,
);
const objections = xhr.responseJSON.objections;
const objections = parsed.data.objections;
const template_args = parse_args_for_deactivation_banner(objections);
const rendered_error_banner =
render_cannot_deactivate_group_banner(template_args);
@@ -1206,14 +1321,14 @@ export function initialize() {
});
});
function save_group_info(e) {
const group = get_user_group_for_target(e.currentTarget);
function save_group_info(this: HTMLElement): void {
const group = get_user_group_for_target(this);
assert(group !== undefined);
const url = `/json/user_groups/${group.id}`;
let name;
let description;
const new_name = $("#change_user_group_name").val().trim();
const new_description = $("#change_user_group_description").val().trim();
const new_name = $<HTMLInputElement>("#change_user_group_name").val()!.trim();
const new_description = $<HTMLInputElement>("#change_user_group_description").val()!.trim();
if (new_name !== group.name) {
name = new_name;
@@ -1250,16 +1365,13 @@ export function initialize() {
$(".user-groups-header").removeClass("slide-left");
});
$("#groups_overlay_container").on("click", ".join_leave_button", (e) => {
if (
$(e.currentTarget).hasClass("disabled") ||
$(e.currentTarget).hasClass("not-direct-member")
) {
$("#groups_overlay_container").on("click", ".join_leave_button", function (this: HTMLElement) {
if ($(this).hasClass("disabled") || $(this).hasClass("not-direct-member")) {
// We return early if user is not allowed to join or leave a group.
return;
}
const user_group_id = get_user_group_id(e.target);
const user_group_id = get_user_group_id(this);
const user_group = user_groups.get_user_group_from_id(user_group_id);
const is_member = user_groups.is_user_in_group(user_group_id, people.my_current_user_id());
const is_direct_member = user_groups.is_direct_member_of(
@@ -1294,13 +1406,16 @@ export function initialize() {
$("#groups_overlay_container").on(
"click",
".subsection-header .subsection-changes-save button",
(e) => {
function (this: HTMLElement, e) {
e.preventDefault();
e.stopPropagation();
const $save_button = $(e.currentTarget);
const $save_button = $(this);
const $subsection_elem = $save_button.closest(".settings-subsection-parent");
const group_id = $save_button.closest(".user_group_settings_wrapper").data("group-id");
const group_id: unknown = $save_button
.closest(".user_group_settings_wrapper")
.data("group-id");
assert(typeof group_id === "number");
const group = user_groups.get_user_group_from_id(group_id);
const data = settings_components.populate_data_for_group_request(
$subsection_elem,
@@ -1315,20 +1430,27 @@ export function initialize() {
$("#groups_overlay_container").on(
"click",
".subsection-header .subsection-changes-discard button",
(e) => {
function (this: HTMLElement, e) {
e.preventDefault();
e.stopPropagation();
const group_id = $(e.target).closest(".user_group_settings_wrapper").data("group-id");
const group_id: unknown = $(this)
.closest(".user_group_settings_wrapper")
.data("group-id");
assert(typeof group_id === "number");
const group = user_groups.get_user_group_from_id(group_id);
const $subsection = $(e.target).closest(".settings-subsection-parent");
const $subsection = $(this).closest(".settings-subsection-parent");
settings_org.discard_group_settings_subsection_changes($subsection, group);
},
);
}
export function launch(section, left_side_tab, right_side_tab) {
export function launch(
section: string,
left_side_tab: string | undefined,
right_side_tab: string,
): void {
setup_page(() => {
overlays.open_overlay({
name: "group_subscriptions",