demo-orgs: Use banners for org settings demo organization warning.

Migrate the demo organization warning that's shown on all the tabs
for organization settings to use the shared banner code.

Updates links in the current warning to be buttons in the banner,
and matches the navbar alert banner for demo organizations.

Fixes #34447.

web/src/demo_organizations_ui.ts

@@ -3,12 +3,13 @@ import assert from "minimalistic-assert";
 import {z} from "zod";
 
 import render_convert_demo_organization_form from "../templates/settings/convert_demo_organization_form.hbs";
-import render_demo_organization_warning from "../templates/settings/demo_organization_warning.hbs";
+import render_demo_organization_warning_container from "../templates/settings/demo_organization_warning.hbs";
 
+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} from "./i18n.ts";
-import * as keydown_util from "./keydown_util.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";
@@ -26,13 +27,46 @@ export function get_demo_organization_deadline_days_remaining(): number {
 }
 
 export function insert_demo_organization_warning(): void {
-    const days_remaining = get_demo_organization_deadline_days_remaining();
-    const rendered_demo_organization_warning = render_demo_organization_warning({
-        is_demo_organization: realm.demo_organization_scheduled_deletion_date,
-        is_owner: current_user.is_owner,
-        days_remaining,
+    const demo_organization_warning_container = render_demo_organization_warning_container({
+        is_demo_organization: true,
     });
-    $(".organization-box").find(".settings-section").prepend($(rendered_demo_organization_warning));
+    $(".organization-box")
+        .find(".settings-section")
+        .prepend($(demo_organization_warning_container));
+    const days_remaining = get_demo_organization_deadline_days_remaining();
+    let buttons: ActionButton[] = [
+        {
+            attention: "borderless",
+            label: $t({defaultMessage: "Learn more"}),
+            custom_classes: "demo-organizations-help",
+        },
+    ];
+    if (current_user.is_owner) {
+        buttons = [
+            ...buttons,
+            {
+                attention: "quiet",
+                label: $t({defaultMessage: "Convert"}),
+                custom_classes: "convert-demo-organization",
+            },
+        ];
+    }
+    const demo_organization_warning_banner: banners.Banner = {
+        intent: days_remaining <= 7 ? "danger" : "info",
+        label: $t(
+            {
+                defaultMessage:
+                    "This demo organization will be automatically deleted in {days_remaining} days, unless it's converted into a permanent organization.",
+            },
+            {
+                days_remaining,
+            },
+        ),
+        buttons,
+        close_button: false,
+        custom_classes: "organization-settings-banner",
+    };
+    banners.append(demo_organization_warning_banner, $(".demo-organization-warning"));
 }
 
 export function do_convert_demo_organization(): void {
@@ -108,21 +142,13 @@ export function do_convert_demo_organization(): void {
 }
 
 export function handle_demo_organization_conversion(): void {
-    $(".convert-demo-organization-button").on("click", (e) => {
+    $(".demo-organization-warning").on("click", ".convert-demo-organization", (e) => {
         e.stopPropagation();
         e.preventDefault();
         do_convert_demo_organization();
     });
 
-    // Treat Enter with convert demo organization link as a click.
-    $(".demo-organization-warning").on(
-        "keyup",
-        ".convert-demo-organization-button[role=button]",
-        function (e) {
-            e.stopPropagation();
-            if (keydown_util.is_enter_event(e)) {
-                $(this).trigger("click");
-            }
-        },
-    );
+    $(".demo-organization-warning").on("click", ".demo-organizations-help", () => {
+        window.open("https://zulip.com/help/demo-organizations", "_blank", "noopener,noreferrer");
+    });
 }

web/styles/app_components.css

@@ -541,30 +541,7 @@ input.settings_text_input {
 }
 
 .demo-organization-warning {
-    position: relative;
-    display: block;
-    background-color: var(
-        --color-background-settings-demo-organization-warning
-    );
-    border: 1px solid var(--color-border-settings-demo-organization-warning);
-    border-radius: 4px;
-    padding: 10px;
     margin: 10px 0;
-    font-size: 1rem;
-    line-height: 1.5;
-    color: var(--color-text-settings-demo-organization-warning);
-
-    a {
-        text-decoration: none;
-    }
-
-    .convert-demo-organization-button {
-        &:focus {
-            outline: 1px solid
-                var(--color-focus-outline-settings-convert-demo-organization);
-            outline-offset: 0;
-        }
-    }
 }
 
 .user_status_icon_wrapper {

web/styles/app_variables.css

@@ -1420,24 +1420,6 @@
         hsl(200deg 79% 66%)
     );
 
-    /* Demo Organization colors */
-    --color-text-settings-demo-organization-warning: light-dark(
-        hsl(4deg 58% 33%),
-        hsl(3deg 73% 80%)
-    );
-    --color-background-settings-demo-organization-warning: light-dark(
-        hsl(4deg 35% 90%),
-        hsl(0deg 60% 19%)
-    );
-    --color-border-settings-demo-organization-warning: light-dark(
-        hsl(3deg 57% 33% / 40%),
-        hsl(3deg 73% 74% / 40%)
-    );
-    --color-focus-outline-settings-convert-demo-organization: light-dark(
-        hsl(200deg 100% 25%),
-        hsl(200deg 79% 66%)
-    );
-
     /* Widgets colors */
     --color-border-dropdown-widget-button: light-dark(
         hsl(0deg 0% 80%),

web/templates/settings/demo_organization_warning.hbs

@@ -1,15 +1,3 @@
 {{#if is_demo_organization }}
-<div class="demo-organization-warning">
-    {{#if is_owner }}
-    {{#tr}}
-        This demo organization will be automatically deleted in {days_remaining} days, unless it's <z-link>converted into a permanent organization</z-link>.
-        {{#*inline "z-link"}}<a class="convert-demo-organization-button" role="button" tabindex=0>{{> @partial-block}}</a>{{/inline}}
-    {{/tr}}
-    {{else}}
-    {{#tr}}
-        This demo organization will be automatically deleted in {days_remaining} days, unless it's <z-link>converted into a permanent organization</z-link>.
-        {{#*inline "z-link"}}<a href="/help/demo-organizations" target="_blank" rel="noopener noreferrer">{{> @partial-block }}</a>{{/inline}}
-    {{/tr}}
-    {{/if}}
-</div>
+<div class="demo-organization-warning banner-wrapper"></div>
 {{/if}}