From 60b12367cc33635c0c1a149464330831458c30b1 Mon Sep 17 00:00:00 2001 From: Sahil Batra Date: Sun, 27 Oct 2024 16:01:15 +0530 Subject: [PATCH] settings: Use new settings UI for create_multiuse_invite_group. --- web/src/group_setting_pill.ts | 2 +- web/src/pill_typeahead.ts | 2 +- web/src/settings_components.ts | 51 +++++++++++++++++-- web/src/settings_org.ts | 47 ++++++++++++++++- web/src/state_data.ts | 2 +- web/src/user_events.js | 1 + web/styles/settings.css | 16 ++++++ .../organization_permissions_admin.hbs | 13 +++-- web/tests/settings_org.test.js | 1 + web/tests/user_events.test.js | 1 + 10 files changed, 124 insertions(+), 12 deletions(-) diff --git a/web/src/group_setting_pill.ts b/web/src/group_setting_pill.ts index ad16fa9eb4..da9492aee4 100644 --- a/web/src/group_setting_pill.ts +++ b/web/src/group_setting_pill.ts @@ -153,7 +153,7 @@ export function set_up_pill_typeahead({ opts: { setting_name: string; setting_type: "realm" | "stream" | "group"; - group: UserGroup | undefined; + group?: UserGroup | undefined; }; }): void { pill_typeahead.set_up_group_setting_typeahead( diff --git a/web/src/pill_typeahead.ts b/web/src/pill_typeahead.ts index fad05a283f..5b49d83b56 100644 --- a/web/src/pill_typeahead.ts +++ b/web/src/pill_typeahead.ts @@ -135,7 +135,7 @@ export function set_up_group_setting_typeahead( opts: { setting_name: string; setting_type: "realm" | "stream" | "group"; - group: UserGroup | undefined; + group?: UserGroup | undefined; }, ): void { const bootstrap_typeahead_input: TypeaheadInputElement = { diff --git a/web/src/settings_components.ts b/web/src/settings_components.ts index 106951f6d6..cc417a3ce8 100644 --- a/web/src/settings_components.ts +++ b/web/src/settings_components.ts @@ -27,7 +27,7 @@ import * as scroll_util from "./scroll_util"; import * as settings_config from "./settings_config"; import * as settings_data from "./settings_data"; import type {CustomProfileField, GroupSettingValue} from "./state_data"; -import {current_user, realm, realm_schema} from "./state_data"; +import {current_user, group_setting_value_schema, realm, realm_schema} from "./state_data"; import * as stream_data from "./stream_data"; import type {StreamSubscription} from "./sub_store"; import {stream_subscription_schema} from "./sub_store"; @@ -488,7 +488,6 @@ const dropdown_widget_map = new Map([ ["realm_can_delete_own_message_group", null], ["realm_can_manage_all_groups", null], ["realm_can_move_messages_between_channels_group", null], - ["realm_create_multiuse_invite_group", null], ["realm_direct_message_initiator_group", null], ["realm_direct_message_permission_group", null], ]); @@ -801,7 +800,6 @@ export function check_realm_settings_property_changed(elem: HTMLElement): boolea case "realm_signup_announcements_stream_id": case "realm_zulip_update_announcements_stream_id": case "realm_default_code_block_language": - case "realm_create_multiuse_invite_group": case "realm_can_access_all_users_group": case "realm_can_add_custom_emoji_group": case "realm_can_create_groups": @@ -816,6 +814,12 @@ export function check_realm_settings_property_changed(elem: HTMLElement): boolea case "realm_direct_message_permission_group": proposed_val = get_dropdown_list_widget_setting_value($elem); break; + case "realm_create_multiuse_invite_group": { + const pill_widget = get_group_setting_widget(property_name); + assert(pill_widget !== null); + proposed_val = get_group_setting_widget_value(pill_widget); + break; + } case "realm_message_content_edit_limit_seconds": case "realm_message_content_delete_limit_seconds": case "realm_move_messages_between_streams_limit_seconds": @@ -844,7 +848,7 @@ export function check_realm_settings_property_changed(elem: HTMLElement): boolea blueslip.error("Element refers to unknown property", {property_name}); } } - return current_val !== proposed_val; + return !_.isEqual(current_val, proposed_val); } export function check_stream_settings_property_changed( @@ -1426,6 +1430,7 @@ export const group_setting_widget_map = new Map { + save_discard_realm_settings_widget_status_handler($save_discard_widget_container); + }); + pill_widget.onPillRemove(() => { + save_discard_realm_settings_widget_status_handler($save_discard_widget_container); + }); +} diff --git a/web/src/settings_org.ts b/web/src/settings_org.ts index 12783a69b8..dbeda508c1 100644 --- a/web/src/settings_org.ts +++ b/web/src/settings_org.ts @@ -105,6 +105,29 @@ export function maybe_disable_widgets(): void { .addClass("control-label-disabled"); } +export function enable_or_disable_group_permission_settings(): void { + if (current_user.is_owner) { + const $permission_pill_container_elements = $("#organization-permissions").find( + ".pill-container", + ); + $permission_pill_container_elements.find(".input").prop("contenteditable", true); + $permission_pill_container_elements + .closest(".input-group") + .removeClass("group_setting_disabled"); + settings_components.enable_opening_typeahead_on_clicking_label( + $("#organization-permissions"), + ); + return; + } + + const $permission_pill_container_elements = $("#organization-permissions").find( + ".pill-container", + ); + $permission_pill_container_elements.find(".input").prop("contenteditable", false); + $permission_pill_container_elements.closest(".input-group").addClass("group_setting_disabled"); + settings_components.disable_opening_typeahead_on_clicking_label($("#organization-permissions")); +} + type OrganizationSettingsOptions = { common_policy_values: SettingOptionValueWithKey[]; wildcard_mention_policy_values: SettingOptionValueWithKey[]; @@ -551,7 +574,6 @@ export function discard_realm_property_element_changes(elem: HTMLElement): void case "realm_signup_announcements_stream_id": case "realm_zulip_update_announcements_stream_id": case "realm_default_code_block_language": - case "realm_create_multiuse_invite_group": case "realm_direct_message_initiator_group": case "realm_direct_message_permission_group": case "realm_can_add_custom_emoji_group": @@ -570,6 +592,15 @@ export function discard_realm_property_element_changes(elem: HTMLElement): void property_value, ); break; + case "realm_create_multiuse_invite_group": { + const pill_widget = settings_components.get_group_setting_widget(property_name); + assert(pill_widget !== null); + settings_components.set_group_setting_widget_value( + pill_widget, + group_setting_value_schema.parse(property_value), + ); + break; + } case "realm_default_language": assert(typeof property_value === "string"); $("#org-notifications .language_selection_widget .language_selection_button span").attr( @@ -917,6 +948,9 @@ export function set_up_dropdown_widget_for_realm_group_settings(): void { ); for (const setting_name of realm_group_permission_settings) { + if (setting_name === "create_multiuse_invite_group") { + continue; + } const get_setting_options = (): UserGroupForDropdownListWidget[] => user_groups.get_realm_user_groups_for_dropdown_list_widget(setting_name, "realm"); let dropdown_list_item_click_callback: @@ -1114,6 +1148,15 @@ export function register_save_discard_widget_handlers( ); } +function initialize_group_setting_widgets(): void { + settings_components.create_realm_group_setting_widget({ + $pill_container: $("#id_realm_create_multiuse_invite_group"), + setting_name: "create_multiuse_invite_group", + }); + + enable_or_disable_group_permission_settings(); +} + export function build_page(): void { meta.loaded = true; @@ -1124,6 +1167,8 @@ export function build_page(): void { // Populate realm domains populate_realm_domains_label(realm.realm_domains); + initialize_group_setting_widgets(); + // Populate authentication methods table populate_auth_methods(settings_components.realm_authentication_methods_to_boolean_dict()); diff --git a/web/src/state_data.ts b/web/src/state_data.ts index 50a3557bcf..5caffb14fc 100644 --- a/web/src/state_data.ts +++ b/web/src/state_data.ts @@ -296,7 +296,7 @@ export const realm_schema = z.object({ realm_can_delete_own_message_group: z.number(), realm_can_manage_all_groups: z.number(), realm_can_move_messages_between_channels_group: z.number(), - realm_create_multiuse_invite_group: z.number(), + realm_create_multiuse_invite_group: group_setting_value_schema, realm_date_created: z.number(), realm_default_code_block_language: z.string(), realm_default_external_accounts: z.record( diff --git a/web/src/user_events.js b/web/src/user_events.js index 7cd30fd3d4..57daa1b8bb 100644 --- a/web/src/user_events.js +++ b/web/src/user_events.js @@ -87,6 +87,7 @@ export const update_person = function update(person) { if (people.is_my_user_id(person.user_id) && current_user.is_owner !== person_obj.is_owner) { current_user.is_owner = person_obj.is_owner; settings_org.maybe_disable_widgets(); + settings_org.enable_or_disable_group_permission_settings(); settings.update_lock_icon_in_sidebar(); } diff --git a/web/styles/settings.css b/web/styles/settings.css index 393921416b..b8c500229c 100644 --- a/web/styles/settings.css +++ b/web/styles/settings.css @@ -814,6 +814,22 @@ input[type="checkbox"] { } } +.org-permissions-form .pill-container { + /* 319px + 2 * (2px padding) + 2 * (1px border) = 325px, which is the total + width of dropdown widget buttons */ + min-width: 319px; + background-color: hsl(0deg 0% 100%); + + .input { + flex-grow: 1; + + &:first-child:empty::before { + opacity: 0.5; + content: attr(data-placeholder); + } + } +} + .progressive-table-wrapper { position: relative; max-height: calc(95vh - 220px); diff --git a/web/templates/settings/organization_permissions_admin.hbs b/web/templates/settings/organization_permissions_admin.hbs index 689a9642e8..ad9c63df0b 100644 --- a/web/templates/settings/organization_permissions_admin.hbs +++ b/web/templates/settings/organization_permissions_admin.hbs @@ -23,10 +23,15 @@ - {{> ../dropdown_widget_with_label - widget_name="realm_create_multiuse_invite_group" - label=(t 'Who can create reusable invitation links') - value_type="number"}} +
+ +
+
+ {{~! Squash whitespace so that placeholder is displayed when empty. ~}} +
+
+
diff --git a/web/tests/settings_org.test.js b/web/tests/settings_org.test.js index d38e2e6134..2d17074d19 100644 --- a/web/tests/settings_org.test.js +++ b/web/tests/settings_org.test.js @@ -529,6 +529,7 @@ test("set_up", ({override, override_rewire}) => { }; override_rewire(settings_org, "init_dropdown_widgets", noop); + override_rewire(settings_org, "initialize_group_setting_widgets", noop); $("#id_realm_message_content_edit_limit_minutes").set_parent( $.create(""), ); diff --git a/web/tests/user_events.test.js b/web/tests/user_events.test.js index 78c1af996e..c4cc9f0e7d 100644 --- a/web/tests/user_events.test.js +++ b/web/tests/user_events.test.js @@ -43,6 +43,7 @@ mock_esm("../src/settings_linkifiers", { }); mock_esm("../src/settings_org", { maybe_disable_widgets() {}, + enable_or_disable_group_permission_settings() {}, }); mock_esm("../src/settings_profile_fields", { maybe_disable_widgets() {},