upload-stat: Redesign upload space stats banners.

Fixes: #34252.

web/src/attachments_ui.ts

@@ -3,10 +3,11 @@ import type * as z from "zod/mini";
 
 import render_confirm_delete_attachment from "../templates/confirm_dialog/confirm_delete_attachment.hbs";
 import render_confirm_delete_detached_attachments_modal from "../templates/confirm_dialog/confirm_delete_detached_attachments.hbs";
-import render_settings_upload_space_stats from "../templates/settings/upload_space_stats.hbs";
 import render_uploaded_files_list from "../templates/settings/uploaded_files_list.hbs";
 
 import {attachment_api_response_schema} from "./attachments.ts";
+import * as banners from "./banners.ts";
+import type {ActionButton} from "./buttons.ts";
 import * as channel from "./channel.ts";
 import * as dialog_widget from "./dialog_widget.ts";
 import {$t, $t_html} from "./i18n.ts";
@@ -73,22 +74,45 @@ function set_upload_space_stats(): void {
     if (current_user.is_guest) {
         return;
     }
-    const args = {
-        show_upgrade_message:
-            realm.realm_plan_type === settings_config.realm_plan_types.limited.code,
-        upload_quota_string: $t(
+
+    const show_upgrade_message =
+        realm.realm_plan_type === settings_config.realm_plan_types.limited.code &&
+        current_user.is_admin;
+    const $container = $("#attachment-stats-holder");
+
+    if (!$container) {
+        return;
+    }
+
+    let buttons: ActionButton[] = [];
+    if (show_upgrade_message) {
+        buttons = [
+            ...buttons,
+            {
+                label: $t({defaultMessage: "Upgrade"}),
+                custom_classes: "request-upgrade",
+                attention: "quiet",
+            },
+        ];
+    }
+
+    const UPLOAD_STATS_BANNER: banners.Banner = {
+        intent: show_upgrade_message ? "info" : "neutral",
+        label: $t(
             {
                 defaultMessage:
-                    "Your organization is using {percent_used}% of your {upload_quota} file storage quota.",
+                    "Your organization is using {percent_used}% of your {upload_quota} file storage quota. Upgrade for more space.",
             },
             {
                 percent_used: percentage_used_space(upload_space_used),
                 upload_quota: bytes_to_size(mib_to_bytes(realm.realm_upload_quota_mib), true),
             },
         ),
+        buttons,
+        close_button: false,
     };
-    const rendered_upload_stats_html = render_settings_upload_space_stats(args);
-    $("#attachment-stats-holder").html(rendered_upload_stats_html);
+
+    banners.open(UPLOAD_STATS_BANNER, $container);
 }
 
 function delete_attachments(attachment: string, file_name: string): void {

web/templates/settings/attachments_settings.hbs

@@ -1,5 +1,5 @@
 <div id="attachments-settings" class="settings-section" data-name="uploaded-files">
-    <div id="attachment-stats-holder"></div>
+    <div id="attachment-stats-holder" class="banner-wrapper"></div>
     <div class="settings_panel_list_header">
         <h3>{{t "Your uploads"}}</h3>
         {{> filter_text_input id="upload_file_search" placeholder=(t 'Filter') aria_label=(t 'Filter uploads')}}

web/templates/settings/upload_space_stats.hbs

@@ -1,11 +0,0 @@
-<span>
-    {{#if show_upgrade_message}}
-    <a href="/upgrade/" class="upgrade-tip" target="_blank" rel="noopener noreferrer">
-        {{upload_quota_string}} {{t "Upgrade for more space." }}
-    </a>
-    {{else}}
-    <div class="tip">
-        {{upload_quota_string}}
-    </div>
-    {{/if}}
-</span>