From 325f077d3f7090aff18228f7f66cb620e65ab135 Mon Sep 17 00:00:00 2001
From: Maneesh Shukla <shuklamaneesh24@gmail.com>
Date: Tue, 4 Mar 2025 15:43:48 +0530
Subject: [PATCH] action_button: Rename type to attention to describe the
 attention level of the action button.

Currently, we are using type to describe the attention level of the
action button. We want to rename the type parameter to attention
as we need the type parameter separately for describing the type of
button.
---
 web/src/banners.ts                            |  2 +-
 web/src/navbar_alerts.ts                      | 26 +++---
 web/src/popup_banners.ts                      |  2 +-
 web/src/portico/showroom.ts                   | 80 ++++++++++---------
 web/templates/components/action_button.hbs    |  2 +-
 web/templates/settings/account_settings.hbs   |  8 +-
 .../settings/alert_word_settings.hbs          |  2 +-
 web/templates/settings/bot_settings.hbs       |  2 +-
 .../settings/organization_profile_admin.hbs   |  2 +-
 web/templates/settings/profile_settings.hbs   |  2 +-
 web/templates/topic_edit_form.hbs             |  4 +-
 11 files changed, 69 insertions(+), 63 deletions(-)

diff --git a/web/src/banners.ts b/web/src/banners.ts
index bacc21b5a1..66755cf12c 100644
--- a/web/src/banners.ts
+++ b/web/src/banners.ts
@@ -6,7 +6,7 @@ import render_banner from "../templates/components/banner.hbs";
 type ComponentIntent = "neutral" | "brand" | "info" | "success" | "warning" | "danger";
 
 type ActionButton = {
-    type: "primary" | "quiet" | "borderless";
+    attention: "primary" | "quiet" | "borderless";
     intent?: ComponentIntent;
     label: string;
     icon?: string;
diff --git a/web/src/navbar_alerts.ts b/web/src/navbar_alerts.ts
index df772b6fc8..87c1f49953 100644
--- a/web/src/navbar_alerts.ts
+++ b/web/src/navbar_alerts.ts
@@ -185,17 +185,17 @@ const DESKTOP_NOTIFICATIONS_BANNER: AlertBanner = {
     }),
     buttons: [
         {
-            type: "primary",
+            attention: "primary",
             label: $t({defaultMessage: "Enable notifications"}),
             custom_classes: "request-desktop-notifications",
         },
         {
-            type: "quiet",
+            attention: "quiet",
             label: $t({defaultMessage: "Customize notifications"}),
             custom_classes: "customize-desktop-notifications",
         },
         {
-            type: "borderless",
+            attention: "borderless",
             label: $t({defaultMessage: "Never ask on this computer"}),
             custom_classes: "reject-desktop-notifications",
         },
@@ -213,7 +213,7 @@ const CONFIGURE_OUTGOING_MAIL_BANNER: AlertBanner = {
     }),
     buttons: [
         {
-            type: "quiet",
+            attention: "quiet",
             label: $t({defaultMessage: "Configuration instructions"}),
             custom_classes: "configure-outgoing-mail-instructions",
         },
@@ -231,7 +231,7 @@ const INSECURE_DESKTOP_APP_BANNER: AlertBanner = {
     }),
     buttons: [
         {
-            type: "quiet",
+            attention: "quiet",
             label: $t({defaultMessage: "Download the latest version"}),
             custom_classes: "download-latest-zulip-version",
         },
@@ -246,7 +246,7 @@ const PROFILE_MISSING_REQUIRED_FIELDS_BANNER: AlertBanner = {
     label: $t({defaultMessage: "Your profile is missing required fields."}),
     buttons: [
         {
-            type: "quiet",
+            attention: "quiet",
             label: $t({defaultMessage: "Edit your profile"}),
             custom_classes: "edit-profile-required-fields",
         },
@@ -264,7 +264,7 @@ const ORGANIZATION_PROFILE_INCOMPLETE_BANNER: AlertBanner = {
     }),
     buttons: [
         {
-            type: "quiet",
+            attention: "quiet",
             label: $t({
                 defaultMessage: "Edit profile",
             }),
@@ -283,12 +283,12 @@ const SERVER_NEEDS_UPGRADE_BANNER: AlertBanner = {
     }),
     buttons: [
         {
-            type: "quiet",
+            attention: "quiet",
             label: $t({defaultMessage: "Learn more"}),
             custom_classes: "server-upgrade-learn-more",
         },
         {
-            type: "borderless",
+            attention: "borderless",
             label: $t({defaultMessage: "Dismiss for a week"}),
             custom_classes: "server-upgrade-nag-dismiss",
         },
@@ -328,12 +328,12 @@ const bankruptcy_banner = (): AlertBanner => {
         label,
         buttons: [
             {
-                type: "quiet",
+                attention: "quiet",
                 label: $t({defaultMessage: "Yes, please!"}),
                 custom_classes: "accept-bankruptcy",
             },
             {
-                type: "borderless",
+                attention: "borderless",
                 label: $t({defaultMessage: "No, I'll catch up."}),
                 custom_classes: "banner-close-action",
             },
@@ -385,12 +385,12 @@ const time_zone_update_offer_banner = (): AlertBanner => {
         ),
         buttons: [
             {
-                type: "quiet",
+                attention: "quiet",
                 label: $t({defaultMessage: "Yes, please!"}),
                 custom_classes: "accept-update-time-zone",
             },
             {
-                type: "borderless",
+                attention: "borderless",
                 label: $t({defaultMessage: "No, don't ask again."}),
                 custom_classes: "decline-time-zone-update",
             },
diff --git a/web/src/popup_banners.ts b/web/src/popup_banners.ts
index af35e6f566..723c0b0d5d 100644
--- a/web/src/popup_banners.ts
+++ b/web/src/popup_banners.ts
@@ -12,7 +12,7 @@ const CONNECTION_ERROR_POPUP_BANNER: Banner = {
     }),
     buttons: [
         {
-            type: "quiet",
+            attention: "quiet",
             label: $t({defaultMessage: "Try now"}),
             custom_classes: "retry-connection",
         },
diff --git a/web/src/portico/showroom.ts b/web/src/portico/showroom.ts
index 66f805e9cd..312485d4d1 100644
--- a/web/src/portico/showroom.ts
+++ b/web/src/portico/showroom.ts
@@ -7,7 +7,7 @@ import {$t, $t_html} from "../i18n.ts";
 type ComponentIntent = "neutral" | "brand" | "info" | "success" | "warning" | "danger";
 
 type ActionButton = {
-    type: "primary" | "quiet" | "borderless";
+    attention: "primary" | "quiet" | "borderless";
     intent: ComponentIntent;
     label: string;
     icon?: string | undefined;
@@ -41,7 +41,7 @@ const custom_normal_banner: Banner = {
     label: "This is a normal banner. Use the controls below to modify this banner.",
     buttons: [
         {
-            type: "quiet",
+            attention: "quiet",
             intent: "neutral",
             label: "Quiet Button",
         },
@@ -56,7 +56,7 @@ const alert_banners: Record<string, AlertBanner> = {
         label: "This is a navbar alerts banner. Use the controls below to modify this banner.",
         buttons: [
             {
-                type: "quiet",
+                attention: "quiet",
                 intent: "neutral",
                 label: "Quiet Button",
             },
@@ -70,12 +70,12 @@ const alert_banners: Record<string, AlertBanner> = {
         label: "Welcome back! You have 12 unread messages. Do you want to mark them all as read?",
         buttons: [
             {
-                type: "quiet",
+                attention: "quiet",
                 intent: "info",
                 label: "Yes, please!",
             },
             {
-                type: "borderless",
+                attention: "borderless",
                 intent: "info",
                 label: "No, I'll catch up.",
             },
@@ -89,7 +89,7 @@ const alert_banners: Record<string, AlertBanner> = {
         label: "Zulip needs to send email to confirm users' addresses and send notifications.",
         buttons: [
             {
-                type: "quiet",
+                attention: "quiet",
                 intent: "warning",
                 label: "Configuration instructions",
             },
@@ -135,17 +135,17 @@ const alert_banners: Record<string, AlertBanner> = {
         ),
         buttons: [
             {
-                type: "primary",
+                attention: "primary",
                 intent: "brand",
                 label: "Enable notifications",
             },
             {
-                type: "quiet",
+                attention: "quiet",
                 intent: "brand",
                 label: "Ask me later",
             },
             {
-                type: "borderless",
+                attention: "borderless",
                 intent: "brand",
                 label: "Never ask on this computer",
             },
@@ -159,7 +159,7 @@ const alert_banners: Record<string, AlertBanner> = {
         label: "Your profile is missing required fields.",
         buttons: [
             {
-                type: "quiet",
+                attention: "quiet",
                 intent: "warning",
                 label: "Edit your profile",
             },
@@ -173,7 +173,7 @@ const alert_banners: Record<string, AlertBanner> = {
         label: "You are using an old version of the Zulip desktop app with known security bugs.",
         buttons: [
             {
-                type: "quiet",
+                attention: "quiet",
                 intent: "danger",
                 label: "Download the latest version",
             },
@@ -187,7 +187,7 @@ const alert_banners: Record<string, AlertBanner> = {
         label: "Complete your organization profile, which is displayed on your organization's registration and login pages.",
         buttons: [
             {
-                type: "quiet",
+                attention: "quiet",
                 intent: "info",
                 label: "Edit profile",
             },
@@ -201,12 +201,12 @@ const alert_banners: Record<string, AlertBanner> = {
         label: "This Zulip server is running an old version and should be upgraded.",
         buttons: [
             {
-                type: "quiet",
+                attention: "quiet",
                 intent: "danger",
                 label: "Learn more",
             },
             {
-                type: "borderless",
+                attention: "borderless",
                 intent: "danger",
                 label: "Dismiss for a week",
             },
@@ -217,17 +217,17 @@ const alert_banners: Record<string, AlertBanner> = {
 };
 
 const sortButtons = (buttons: ActionButton[]): void => {
-    const sortOrder: Record<ActionButton["type"], number> = {
+    const sortOrder: Record<ActionButton["attention"], number> = {
         primary: 1,
         quiet: 2,
         borderless: 3,
     };
 
-    buttons.sort((a, b) => sortOrder[a.type] - sortOrder[b.type]);
+    buttons.sort((a, b) => sortOrder[a.attention] - sortOrder[b.attention]);
 };
 
 const update_buttons = (buttons: ActionButton[]): void => {
-    const primary_button = buttons.find((button) => button.type === "primary");
+    const primary_button = buttons.find((button) => button.attention === "primary");
     if (primary_button) {
         $("#enable_primary_button").prop("checked", true);
         $("#primary_button_text").val(primary_button.label);
@@ -242,7 +242,7 @@ const update_buttons = (buttons: ActionButton[]): void => {
         $("#primary_button_text").val("");
         $("#disable_primary_button_icon").prop("checked", true);
     }
-    const quiet_button = buttons.find((button) => button.type === "quiet");
+    const quiet_button = buttons.find((button) => button.attention === "quiet");
     if (quiet_button) {
         $("#enable_quiet_button").prop("checked", true);
         $("#quiet_button_text").val(quiet_button.label);
@@ -257,7 +257,7 @@ const update_buttons = (buttons: ActionButton[]): void => {
         $("#quiet_button_text").val("");
         $("#disable_quiet_button_icon").prop("checked", true);
     }
-    const borderless_button = buttons.find((button) => button.type === "borderless");
+    const borderless_button = buttons.find((button) => button.attention === "borderless");
     if (borderless_button) {
         $("#enable_borderless_button").prop("checked", true);
         $("#borderless_button_text").val(borderless_button.label);
@@ -400,7 +400,7 @@ $(window).on("load", () => {
 
     $("input[name='primary-button-select']").on("change", (e) => {
         if ($(e.target).attr("id") === "enable_primary_button") {
-            if (current_banner.buttons.some((button) => button.type === "primary")) {
+            if (current_banner.buttons.some((button) => button.attention === "primary")) {
                 return;
             }
             let label = $("#primary_button_text").val()?.toString();
@@ -409,7 +409,7 @@ $(window).on("load", () => {
             }
             const is_icon_enabled = $("#enable_primary_button_icon").prop("checked") === true;
             current_banner.buttons.push({
-                type: "primary",
+                attention: "primary",
                 intent: current_banner.intent,
                 label,
                 icon: is_icon_enabled
@@ -419,7 +419,7 @@ $(window).on("load", () => {
             $("#primary_button_text").val(label);
         } else {
             current_banner.buttons = current_banner.buttons.filter(
-                (button) => button.type !== "primary",
+                (button) => button.attention !== "primary",
             );
         }
         sortButtons(current_banner.buttons);
@@ -431,7 +431,9 @@ $(window).on("load", () => {
     });
 
     $("input[name='primary-button-icon-select']").on("change", (e) => {
-        const primary_button = current_banner.buttons.find((button) => button.type === "primary");
+        const primary_button = current_banner.buttons.find(
+            (button) => button.attention === "primary",
+        );
         if (primary_button === undefined) {
             return;
         }
@@ -448,7 +450,9 @@ $(window).on("load", () => {
     });
 
     $("#primary_button_select_icon").on("change", function (this: HTMLElement) {
-        const primary_button = current_banner.buttons.find((button) => button.type === "primary");
+        const primary_button = current_banner.buttons.find(
+            (button) => button.attention === "primary",
+        );
         if (primary_button === undefined) {
             return;
         }
@@ -464,7 +468,9 @@ $(window).on("load", () => {
     });
 
     $("#primary_button_text").on("input", function (this: HTMLElement) {
-        const primary_button = current_banner.buttons.find((button) => button.type === "primary");
+        const primary_button = current_banner.buttons.find(
+            (button) => button.attention === "primary",
+        );
         if (primary_button === undefined) {
             return;
         }
@@ -478,7 +484,7 @@ $(window).on("load", () => {
 
     $("input[name='quiet-button-select']").on("change", (e) => {
         if ($(e.target).attr("id") === "enable_quiet_button") {
-            if (current_banner.buttons.some((button) => button.type === "quiet")) {
+            if (current_banner.buttons.some((button) => button.attention === "quiet")) {
                 return;
             }
             let label = $("#quiet_button_text").val()?.toString();
@@ -487,7 +493,7 @@ $(window).on("load", () => {
             }
             const is_icon_enabled = $("#enable_quiet_button_icon").prop("checked") === true;
             current_banner.buttons.push({
-                type: "quiet",
+                attention: "quiet",
                 intent: current_banner.intent,
                 label,
                 icon: is_icon_enabled
@@ -498,7 +504,7 @@ $(window).on("load", () => {
             sortButtons(current_banner.buttons);
         } else {
             current_banner.buttons = current_banner.buttons.filter(
-                (button) => button.type !== "quiet",
+                (button) => button.attention !== "quiet",
             );
         }
         $("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
@@ -509,7 +515,7 @@ $(window).on("load", () => {
     });
 
     $("input[name='quiet-button-icon-select']").on("change", (e) => {
-        const quiet_button = current_banner.buttons.find((button) => button.type === "quiet");
+        const quiet_button = current_banner.buttons.find((button) => button.attention === "quiet");
         if (quiet_button === undefined) {
             return;
         }
@@ -526,7 +532,7 @@ $(window).on("load", () => {
     });
 
     $("#quiet_button_select_icon").on("change", function (this: HTMLElement) {
-        const quiet_button = current_banner.buttons.find((button) => button.type === "quiet");
+        const quiet_button = current_banner.buttons.find((button) => button.attention === "quiet");
         if (quiet_button === undefined) {
             return;
         }
@@ -542,7 +548,7 @@ $(window).on("load", () => {
     });
 
     $("#quiet_button_text").on("input", function (this: HTMLElement) {
-        const quiet_button = current_banner.buttons.find((button) => button.type === "quiet");
+        const quiet_button = current_banner.buttons.find((button) => button.attention === "quiet");
         if (quiet_button === undefined) {
             return;
         }
@@ -556,7 +562,7 @@ $(window).on("load", () => {
 
     $("input[name='borderless-button-select']").on("change", function (this: HTMLElement) {
         if ($(this).attr("id") === "enable_borderless_button") {
-            if (current_banner.buttons.some((button) => button.type === "borderless")) {
+            if (current_banner.buttons.some((button) => button.attention === "borderless")) {
                 return;
             }
             let label = $("#borderless_button_text").val()?.toString();
@@ -565,7 +571,7 @@ $(window).on("load", () => {
             }
             const is_icon_enabled = $("#enable_borderless_button_icon").prop("checked") === true;
             current_banner.buttons.push({
-                type: "borderless",
+                attention: "borderless",
                 intent: current_banner.intent,
                 label,
                 icon: is_icon_enabled
@@ -576,7 +582,7 @@ $(window).on("load", () => {
             sortButtons(current_banner.buttons);
         } else {
             current_banner.buttons = current_banner.buttons.filter(
-                (button) => button.type !== "borderless",
+                (button) => button.attention !== "borderless",
             );
         }
         $("#showroom_component_banner_navbar_alerts_wrapper").html(banner_html(current_banner));
@@ -588,7 +594,7 @@ $(window).on("load", () => {
 
     $("input[name='borderless-button-icon-select']").on("change", function (this: HTMLElement) {
         const borderless_button = current_banner.buttons.find(
-            (button) => button.type === "borderless",
+            (button) => button.attention === "borderless",
         );
         if (borderless_button === undefined) {
             return;
@@ -607,7 +613,7 @@ $(window).on("load", () => {
 
     $("#borderless_button_select_icon").on("change", function (this: HTMLElement) {
         const borderless_button = current_banner.buttons.find(
-            (button) => button.type === "borderless",
+            (button) => button.attention === "borderless",
         );
         if (borderless_button === undefined) {
             return;
@@ -625,7 +631,7 @@ $(window).on("load", () => {
 
     $("#borderless_button_text").on("input", function (this: HTMLElement) {
         const borderless_button = current_banner.buttons.find(
-            (button) => button.type === "borderless",
+            (button) => button.attention === "borderless",
         );
         if (borderless_button === undefined) {
             return;
diff --git a/web/templates/components/action_button.hbs b/web/templates/components/action_button.hbs
index f535cc3121..407973dc5a 100644
--- a/web/templates/components/action_button.hbs
+++ b/web/templates/components/action_button.hbs
@@ -1,4 +1,4 @@
-<button type="button" {{#if id}}id="{{id}}"{{/if}} class="{{#if custom_classes}}{{custom_classes}} {{/if}}action-button action-button-{{type}}-{{intent}} {{#if hidden}}hide{{/if}}" {{#if data-tooltip-template-id}}data-tooltip-template-id="{{data-tooltip-template-id}}"{{/if}} tabindex="0" {{#if aria-label}}aria-label="{{aria-label}}"{{/if}}
+<button type="button" {{#if id}}id="{{id}}"{{/if}} class="{{#if custom_classes}}{{custom_classes}} {{/if}}action-button action-button-{{attention}}-{{intent}} {{#if hidden}}hide{{/if}}" {{#if data-tooltip-template-id}}data-tooltip-template-id="{{data-tooltip-template-id}}"{{/if}} tabindex="0" {{#if aria-label}}aria-label="{{aria-label}}"{{/if}}
   {{#if disabled}}disabled{{/if}}
   >
     {{#if icon}}
diff --git a/web/templates/settings/account_settings.hbs b/web/templates/settings/account_settings.hbs
index b5243f3865..3694e51a95 100644
--- a/web/templates/settings/account_settings.hbs
+++ b/web/templates/settings/account_settings.hbs
@@ -57,7 +57,7 @@
                     <div class="input-group">
                         {{> ../components/action_button
                           label=(t "Change your password")
-                          type="quiet"
+                          attention="quiet"
                           intent="brand"
                           id="change_password"
                           }}
@@ -70,7 +70,7 @@
                 <div id="deactivate_account_container" class="inline-block {{#if user_is_only_organization_owner}}disabled_setting_tooltip{{/if}}">
                     {{> ../components/action_button
                       label=(t "Deactivate account")
-                      type="quiet"
+                      attention="quiet"
                       intent="danger"
                       id="user_deactivate_account_button"
                       disabled=user_is_only_organization_owner
@@ -79,7 +79,7 @@
                 {{#if owner_is_only_user_in_organization}}
                     {{> ../components/action_button
                       label=(t "Deactivate organization")
-                      type="quiet"
+                      attention="quiet"
                       intent="danger"
                       custom_classes="deactivate_realm_button inline-block"
                       }}
@@ -153,7 +153,7 @@
                 <div id="api_key_button_container" class="inline-block {{#unless user_has_email_set}}disabled_setting_tooltip{{/unless}}">
                     {{> ../components/action_button
                       label=(t "Manage your API key")
-                      type="quiet"
+                      attention="quiet"
                       intent="brand"
                       id="api_key_button"
                       disabled=(not user_has_email_set)
diff --git a/web/templates/settings/alert_word_settings.hbs b/web/templates/settings/alert_word_settings.hbs
index c90c1be207..86c059386b 100644
--- a/web/templates/settings/alert_word_settings.hbs
+++ b/web/templates/settings/alert_word_settings.hbs
@@ -6,7 +6,7 @@
     </form>
     {{> ../components/action_button
       label=(t "Add alert word")
-      type="quiet"
+      attention="quiet"
       intent="brand"
       id="open-add-alert-word-modal"
       }}
diff --git a/web/templates/settings/bot_settings.hbs b/web/templates/settings/bot_settings.hbs
index 23f450f7a2..4ac97b32e0 100644
--- a/web/templates/settings/bot_settings.hbs
+++ b/web/templates/settings/bot_settings.hbs
@@ -13,7 +13,7 @@
         <div>
             {{> ../components/action_button
               label=(t "Add a new bot")
-              type="quiet"
+              attention="quiet"
               intent="brand"
               custom_classes="add-a-new-bot"
               hidden=(not can_create_new_bots)
diff --git a/web/templates/settings/organization_profile_admin.hbs b/web/templates/settings/organization_profile_admin.hbs
index 0fd5cc9a06..2450a37dbf 100644
--- a/web/templates/settings/organization_profile_admin.hbs
+++ b/web/templates/settings/organization_profile_admin.hbs
@@ -91,7 +91,7 @@
                 <div id="deactivate_realm_button_container" class="inline-block {{#unless is_owner}}disabled_setting_tooltip{{/unless}}">
                     {{> ../components/action_button
                       label=(t "Deactivate organization")
-                      type="quiet"
+                      attention="quiet"
                       intent="danger"
                       custom_classes="deactivate_realm_button"
                       }}
diff --git a/web/templates/settings/profile_settings.hbs b/web/templates/settings/profile_settings.hbs
index b65d229d5c..ea6f86f4e7 100644
--- a/web/templates/settings/profile_settings.hbs
+++ b/web/templates/settings/profile_settings.hbs
@@ -71,7 +71,7 @@
             </div>
             {{> ../components/action_button
               label=(t "Preview profile")
-              type="quiet"
+              attention="quiet"
               intent="brand"
               id="show_my_user_profile_modal"
               icon="external-link"
diff --git a/web/templates/topic_edit_form.hbs b/web/templates/topic_edit_form.hbs
index a1553be81f..033da41478 100644
--- a/web/templates/topic_edit_form.hbs
+++ b/web/templates/topic_edit_form.hbs
@@ -4,7 +4,7 @@
     <input type="text" value="" autocomplete="off" maxlength="{{ max_topic_length }}"
       class="inline_topic_edit header-v {{#unless realm_mandatory_topics}}empty-topic-placeholder-display{{/unless}}"
       {{#unless realm_mandatory_topics}}placeholder="{{empty_string_topic_display_name}}"{{/unless}} />
-    {{> components/action_button custom_classes="topic_edit_save tippy-zulip-delayed-tooltip" icon="check" type="primary" intent="brand" data-tooltip-template-id="save-button-tooltip-template" }}
-    {{> components/action_button custom_classes="topic_edit_cancel tippy-zulip-delayed-tooltip" icon="circle-x" type="borderless" intent="neutral" data-tooltip-template-id="cancel-button-tooltip-template" }}
+    {{> components/action_button custom_classes="topic_edit_save tippy-zulip-delayed-tooltip" icon="check" attention="primary" intent="brand" data-tooltip-template-id="save-button-tooltip-template" }}
+    {{> components/action_button custom_classes="topic_edit_cancel tippy-zulip-delayed-tooltip" icon="circle-x" attention="borderless" intent="neutral" data-tooltip-template-id="cancel-button-tooltip-template" }}
     <div class="topic_edit_spinner"></div>
 </form>