organization-settings: Redesign edit and delete buttons in settings tables.

Fixes part of #34200.

help/custom-emoji.md

@@ -51,7 +51,7 @@ while the search box is empty (you may have to scroll down a bit to find it).
 
 {settings_tab|emoji-settings}
 
-1. Click the **trash** (<i class="fa fa-trash-o"></i>) icon next to the
+1. Click the **deactivate** (<i class="zulip-icon zulip-icon-trash"></i>) icon next to the
    emoji that you would like to deactivate.
 
 {end_tabs}

help/custom-profile-fields.md

@@ -38,7 +38,7 @@ methods][authentication-production] documentation for details.
 
 {settings_tab|profile-field-settings}
 
-1. In the **Actions** column, click the **pencil** (<i class="fa fa-pencil"></i>)
+1. In the **Actions** column, click the **edit** (<i class="zulip-icon zulip-icon-edit"></i>)
    icon for the profile field you want to edit.
 
 1. Edit profile field information as desired, and click **Save changes**.
@@ -60,7 +60,7 @@ checkboxes will be disabled.
 
 {settings_tab|profile-field-settings}
 
-1. In the **Actions** column, click the **pencil** (<i class="fa fa-pencil"></i>)
+1. In the **Actions** column, click the **edit** (<i class="zulip-icon zulip-icon-edit"></i>)
    icon for the profile field you want to edit.
 
 1. Toggle **Display on user card**.
@@ -84,7 +84,7 @@ it out.
 
 {settings_tab|profile-field-settings}
 
-1. In the **Actions** column, click the **pencil** (<i class="fa fa-pencil"></i>)
+1. In the **Actions** column, click the **edit** (<i class="zulip-icon zulip-icon-edit"></i>)
    icon for the profile field you want to edit.
 
 1. Toggle **Required field**.
@@ -110,7 +110,7 @@ syncing profile fields from an employee directory.
 
 {settings_tab|profile-field-settings}
 
-1. In the **Actions** column, click the **pencil** (<i class="fa fa-pencil"></i>)
+1. In the **Actions** column, click the **edit** (<i class="zulip-icon zulip-icon-edit"></i>)
    icon for the profile field you want to configure.
 
 1. Toggle **Users can edit this field for their own account**.

web/src/settings_emoji.ts

@@ -321,7 +321,9 @@ export function set_up(): void {
         e.preventDefault();
         e.stopPropagation();
         const $button = $(this);
-        const url = "/json/realm/emoji/" + encodeURIComponent($button.attr("data-emoji-name")!);
+        const url =
+            "/json/realm/emoji/" +
+            encodeURIComponent($button.closest("tr").attr("data-emoji-name")!);
         const html_body = render_confirm_deactivate_custom_emoji({});
 
         const opts = {

web/src/settings_exports.ts

@@ -426,7 +426,9 @@ export function set_up(): void {
         e.preventDefault();
         e.stopPropagation();
         const $button = $(this);
-        const url = "/json/export/realm/" + encodeURIComponent($button.attr("data-export-id")!);
+        const url =
+            "/json/export/realm/" +
+            encodeURIComponent($button.closest("tr").attr("data-export-id")!);
         const html_body = render_confirm_delete_data_export();
 
         confirm_dialog.launch({

web/src/settings_linkifiers.ts

@@ -220,7 +220,9 @@ export function build_page(): void {
         e.stopPropagation();
         const $button = $(this);
         const html_body = render_confirm_delete_linkifier();
-        const url = "/json/realm/filters/" + encodeURIComponent($button.attr("data-linkifier-id")!);
+        const url =
+            "/json/realm/filters/" +
+            encodeURIComponent($button.closest("tr").attr("data-linkifier-id")!);
 
         confirm_dialog.launch({
             html_heading: $t_html({defaultMessage: "Delete linkifier?"}),
@@ -238,7 +240,7 @@ export function build_page(): void {
         e.stopPropagation();
 
         const $button = $(this);
-        const linkifier_id = Number.parseInt($button.attr("data-linkifier-id")!, 10);
+        const linkifier_id = Number.parseInt($button.closest("tr").attr("data-linkifier-id")!, 10);
         open_linkifier_edit_form(linkifier_id);
     });
 

web/src/settings_playgrounds.ts

@@ -93,7 +93,8 @@ function build_page(): void {
         e.stopPropagation();
         const $button = $(this);
         const url =
-            "/json/realm/playgrounds/" + encodeURIComponent($button.attr("data-playground-id")!);
+            "/json/realm/playgrounds/" +
+            encodeURIComponent($button.closest("tr").attr("data-playground-id")!);
         const html_body = render_confirm_delete_playground();
 
         confirm_dialog.launch({

web/src/settings_profile_fields.ts

@@ -87,7 +87,10 @@ function delete_profile_field(this: HTMLElement, e: JQuery.ClickEvent): void {
     e.preventDefault();
     e.stopPropagation();
 
-    const profile_field_id = Number.parseInt($(this).attr("data-profile-field-id")!, 10);
+    const profile_field_id = Number.parseInt(
+        $(this).closest("tr").attr("data-profile-field-id")!,
+        10,
+    );
     const profile_field = get_profile_field(profile_field_id);
     const active_user_ids = people.get_active_user_ids();
     let users_using_deleting_profile_field = 0;
@@ -443,7 +446,7 @@ function set_up_select_field_edit_form(
 function open_edit_form_modal(this: HTMLElement): void {
     const field_types = realm.custom_profile_field_types;
 
-    const field_id = Number.parseInt($(this).attr("data-profile-field-id")!, 10);
+    const field_id = Number.parseInt($(this).closest("tr").attr("data-profile-field-id")!, 10);
     const field = get_profile_field(field_id)!;
 
     let field_data: unknown = {};

web/styles/app_components.css

@@ -811,6 +811,12 @@ input.settings_text_input {
     .actions {
         width: 1%;
         white-space: nowrap;
+
+        .icon-button {
+            display: inline-flex;
+            align-items: center;
+            min-height: 2.1875em; /* 35px at 16px/1em */
+        }
     }
 
     th.actions {

web/templates/settings/admin_emoji_list.hbs

@@ -1,5 +1,5 @@
 {{#with emoji}}
-<tr class="emoji_row" id="emoji_{{name}}">
+<tr class="emoji_row" id="emoji_{{name}}" data-emoji-name="{{name}}">
     <td>
         <span class="emoji_name">{{display_name}}</span>
     </td>
@@ -20,9 +20,13 @@
         {{/if}}
     </td>
     <td>
-        <button class="button rounded small delete button-danger tippy-zulip-delayed-tooltip" {{#unless can_delete_emoji}}disabled="disabled"{{/unless}} data-tippy-content="{{t 'Delete' }}" data-emoji-name="{{name}}">
-            <i class="fa fa-trash-o" aria-hidden="true"></i>
-        </button>
+        {{> ../components/icon_button
+          icon="trash"
+          intent="danger"
+          custom_classes="tippy-zulip-delayed-tooltip delete"
+          disabled=(not can_delete_emoji)
+          data-tippy-content=(t "Deactivate")
+          }}
     </td>
 </tr>
 {{/with}}

web/templates/settings/admin_export_list.hbs

@@ -1,5 +1,5 @@
 {{#with realm_export}}
-<tr class="export_row" id="export_{{id}}">
+<tr class="export_row" id="export_{{id}}" data-export-id="{{id}}">
     <td>
         <span class="acting_user">{{acting_user}}</span>
     </td>
@@ -22,9 +22,13 @@
     </td>
     <td class="actions">
         {{#if url}}
-        <button class="button rounded small delete button-danger" data-export-id="{{id}}">
-            <i class="fa fa-trash-o" aria-hidden="true"></i>
-        </button>
+        {{> ../components/icon_button
+          icon="trash"
+          intent="danger"
+          custom_classes="tippy-zulip-delayed-tooltip delete"
+          data-tippy-content=(t "Delete")
+          aria-label=(t "Delete")
+          }}
         {{/if}}
     </td>
 </tr>

web/templates/settings/admin_linkifier_list.hbs

@@ -14,12 +14,20 @@
     </td>
     {{#if ../can_modify}}
     <td class="no-select actions">
-        <button class="button small rounded edit button-warning tippy-zulip-delayed-tooltip" data-linkifier-id="{{id}}" data-tippy-content="{{t 'Edit' }}" aria-label="{{t 'Edit' }}">
-            <i class="fa fa-pencil"></i>
-        </button>
-        <button class="button small rounded delete button-danger tippy-zulip-delayed-tooltip" data-linkifier-id="{{id}}" data-tippy-content="{{t 'Delete' }}" aria-label="{{t 'Delete' }}">
-            <i class="fa fa-trash-o"></i>
-        </button>
+        {{> ../components/icon_button
+          icon="edit"
+          intent="neutral"
+          custom_classes="tippy-zulip-delayed-tooltip edit"
+          data-tippy-content=(t "Edit")
+          aria-label=(t "Edit")
+          }}
+        {{> ../components/icon_button
+          icon="trash"
+          intent="danger"
+          custom_classes="tippy-zulip-delayed-tooltip delete"
+          data-tippy-content=(t "Delete")
+          aria-label=(t "Delete")
+          }}
     </td>
     {{/if}}
 </tr>

web/templates/settings/admin_playground_list.hbs

@@ -1,5 +1,5 @@
 {{#with playground}}
-<tr class="playground_row">
+<tr class="playground_row" data-playground-id="{{id}}">
     <td>
         <span class="playground_pygments_language">{{pygments_language}}</span>
     </td>
@@ -11,9 +11,13 @@
     </td>
     {{#if ../can_modify}}
     <td class="no-select actions">
-        <button class="button small delete button-danger tippy-zulip-tooltip" data-playground-id="{{id}}" data-tippy-content="{{t 'Delete' }}" aria-label="{{t 'Delete' }}">
-            <i class="fa fa-trash-o"></i>
-        </button>
+        {{> ../components/icon_button
+          icon="trash"
+          intent="danger"
+          custom_classes="tippy-zulip-tooltip delete"
+          data-tippy-content=(t "Delete")
+          aria-label=(t "Delete")
+          }}
     </td>
     {{/if}}
 </tr>

web/templates/settings/admin_profile_field_list.hbs

@@ -35,12 +35,19 @@
     </td>
     {{#if ../can_modify}}
     <td class="actions">
-        <button class="button rounded small button-warning open-edit-form-modal tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Edit' }}" data-profile-field-id="{{id}}">
-            <i class="fa fa-pencil" aria-hidden="true"></i>
-        </button>
-        <button class="button rounded small delete button-danger tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Delete' }}" data-profile-field-id="{{id}}">
-            <i class="fa fa-trash-o" aria-hidden="true"></i>
-        </button>
+        {{> ../components/icon_button
+          icon="edit"
+          intent="neutral"
+          custom_classes="tippy-zulip-delayed-tooltip open-edit-form-modal"
+          data-tippy-content=(t "Edit")
+          }}
+        {{> ../components/icon_button
+          icon="trash"
+          intent="danger"
+          custom_classes="tippy-zulip-delayed-tooltip delete"
+          data-tippy-content=(t "Delete")
+          aria-label=(t "Delete")
+          }}
     </td>
     {{/if}}
 </tr>