Refactor Publish zone button

web/src/routes/domains/[dn]/+layout.svelte

@@ -43,10 +43,9 @@
         Spinner,
     } from "@sveltestrap/sveltestrap";
 
-    import { getDomain as APIGetDomain, deleteDomain as APIDeleteDomain } from "$lib/api/domains";
+    import { deleteDomain as APIDeleteDomain } from "$lib/api/domains";
-    import { diffZone as APIDiffZone } from "$lib/api/zone";
+    import ButtonZonePublish from "./ButtonZonePublish.svelte";
-    import DiffSummary from "./DiffSummary.svelte";
+    import ModalDiffZone from "./ModalDiffZone.svelte";
-    import ModalDiffZone, { controls as ctrlDiffZone } from "./ModalDiffZone.svelte";
     import ModalDomainDelete, { controls as ctrlDomainDelete } from "./ModalDomainDelete.svelte";
     import ModalUploadZone, { controls as ctrlUploadZone } from "./ModalUploadZone.svelte";
     import ModalViewZone, { controls as ctrlViewZone } from "./ModalViewZone.svelte";
@@ -109,10 +108,6 @@
         }
     }
 
-    async function getDomain(id: string): Promise<Domain> {
-        return await APIGetDomain(id);
-    }
-
     function viewZone(): void {
         if (!selectedHistory) {
             return;
@@ -121,14 +116,6 @@
         ctrlViewZone.Open(data.domain, selectedHistory);
     }
 
-    function showDiff(): void {
-        if (!selectedHistory) {
-            return;
-        }
-
-        ctrlDiffZone.Open(data.domain, selectedHistory);
-    }
-
     let deleteInProgress = false;
     function detachDomain(): void {
         deleteInProgress = true;
@@ -289,70 +276,11 @@
                         <Icon name="trash" />
                         {$t("domains.stop")}
                     </Button>
-                {:else if $domains_idx[selectedDomain].zone_history && selectedHistory === $domains_idx[selectedDomain].zone_history[0]}
-                    <Button
-                        size="lg"
-                        color="success"
-                        title={$t("domains.actions.propagate")}
-                        on:click={showDiff}
-                    >
-                        <Icon name="cloud-upload" aria-hidden="true" />
-                        {$t("domains.actions.propagate")}
-                    </Button>
-                    <p class="mt-2 mb-1 text-center">
-                        {#key $thisZone}
-                            {#await APIDiffZone(data.domain, "@", $thisZone.id)}
-                                {$t("wait.wait")}
-                            {:then zoneDiff}
-                                <DiffSummary {zoneDiff} />
-                            {/await}
-                        {/key}
-                    </p>
                 {:else}
-                    <Button
+                    <ButtonZonePublish
-                        size="lg"
+                        domain={data.domain}
-                        color="warning"
+                        history={selectedHistory}
-                        title={$t("domains.actions.rollback")}
+                    />
-                        on:click={showDiff}
-                    >
-                        <Icon name="cloud-upload" aria-hidden="true" />
-                        {$t("domains.actions.rollback")}
-                    </Button>
-                    <p class="mt-2 mb-1 text-center">
-                        {#await getDomain(data.domain.id)}
-                            Chargement des informations de l'historique
-                        {:then domain}
-                            {#if domain.zone_meta && domain.zone_meta[selectedHistory]}
-                                {@const history = domain.zone_meta[selectedHistory]}
-                                <div class="text-truncate">
-                                    {#if history.published}
-                                        Publiée le
-                                        {new Intl.DateTimeFormat(undefined, {
-                                            dateStyle: "long",
-                                            timeStyle: "long",
-                                        }).format(new Date(history.published))}
-                                    {:else if history.commit_date}
-                                        Enregistrée le
-                                        {new Intl.DateTimeFormat(undefined, {
-                                            dateStyle: "long",
-                                            timeStyle: "long",
-                                        }).format(new Date(history.commit_date))}
-                                    {:else}
-                                        Dernière modification le
-                                        {new Intl.DateTimeFormat(undefined, {
-                                            dateStyle: "long",
-                                            timeStyle: "long",
-                                        }).format(new Date(history.last_modified))}
-                                    {/if}
-                                </div>
-                                {#if history.commit_message}
-                                    <div class="text-truncate" title={history.commit_message}>
-                                        {history.commit_message}
-                                    </div>
-                                {/if}
-                            {/if}
-                        {/await}
-                    </p>
                 {/if}
             {:else}
                 <div class="mt-4 text-center">

web/src/routes/domains/[dn]/ButtonZonePublish.svelte

@@ -0,0 +1,150 @@
+<!--
+     This file is part of the happyDomain (R) project.
+     Copyright (c) 2022-2025 happyDomain
+     Authors: Pierre-Olivier Mercier, et al.
+
+     This program is offered under a commercial and under the AGPL license.
+     For commercial licensing, contact us at <contact@happydomain.org>.
+
+     For AGPL licensing:
+     This program is free software: you can redistribute it and/or modify
+     it under the terms of the GNU Affero General Public License as published by
+     the Free Software Foundation, either version 3 of the License, or
+     (at your option) any later version.
+
+     This program is distributed in the hope that it will be useful,
+     but WITHOUT ANY WARRANTY; without even the implied warranty of
+     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+     GNU Affero General Public License for more details.
+
+     You should have received a copy of the GNU Affero General Public License
+     along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<script lang="ts">
+    import {
+        Button,
+        Icon,
+        Spinner,
+    } from "@sveltestrap/sveltestrap";
+
+    import { getDomain as APIGetDomain } from "$lib/api/domains";
+    import { controls as ctrlDiffZone } from "./ModalDiffZone.svelte";
+    import { controls as ctrlDomainDelete } from "./ModalDomainDelete.svelte";
+    import { diffZone as APIDiffZone } from "$lib/api/zone";
+    import DiffSummary from "./DiffSummary.svelte";
+    import type { Domain } from "$lib/model/domain";
+    import { domains_idx } from "$lib/stores/domains";
+    import { thisZone } from "$lib/stores/thiszone";
+    import { t } from "$lib/translations";
+
+    export let domain: Domain;
+    export let history: string;
+
+    async function getDomain(id: string): Promise<Domain> {
+        return await APIGetDomain(id);
+    }
+
+    function showDiff(): void {
+        if (!history) {
+            return;
+        }
+
+        ctrlDiffZone.Open(domain, history);
+    }
+</script>
+
+{#if $domains_idx[domain.domain]}
+    {#if $domains_idx[domain.domain].zone_history && history === $domains_idx[domain.domain].zone_history[0]}
+        {#key $thisZone}
+            {#await APIDiffZone(domain, "@", $thisZone.id)}
+                <Button
+                    size="lg"
+                    color="success"
+                    outline
+                    title={$t("domains.actions.propagate")}
+                    on:click={showDiff}
+                >
+                    <Spinner size="sm" />
+                    {$t("domains.actions.propagate")}
+                </Button>
+                <p class="mt-2 mb-1 text-center">
+                    {$t("wait.wait")}
+                </p>
+            {:then zoneDiff}
+                <Button
+                    size="lg"
+                    color="success"
+                    outline={zoneDiff && !zoneDiff.length}
+                    title={$t("domains.actions.propagate")}
+                    on:click={showDiff}
+                >
+                    <Icon name="cloud-upload" aria-hidden="true" />
+                    {$t("domains.actions.propagate")}
+                </Button>
+                <p class="mt-2 mb-1 text-center">
+                    <DiffSummary {zoneDiff} />
+                </p>
+            {:catch err}
+                <p class="mb-0 text-center">
+                    <Icon name="exclamation-triangle" class="text-danger" />
+                    {err}
+                </p>
+                <Button
+                    color="danger"
+                    class="mt-3"
+                    outline
+                    on:click={() => ctrlDomainDelete.Open()}
+                >
+                    <Icon name="trash" />
+                    {$t("domains.stop")}
+                </Button>
+            {/await}
+        {/key}
+    {:else}
+        <Button
+            size="lg"
+            color="warning"
+            title={$t("domains.actions.rollback")}
+            on:click={showDiff}
+        >
+            <Icon name="cloud-upload" aria-hidden="true" />
+            {$t("domains.actions.rollback")}
+        </Button>
+        <p class="mt-2 mb-1 text-center">
+            {#await getDomain(domain.id)}
+                Chargement des informations de l'historique
+            {:then domain}
+                {#if domain.zone_meta && domain.zone_meta[history]}
+                    {@const history = domain.zone_meta[history]}
+                    <div class="text-truncate">
+                        {#if history.published}
+                            Publiée le
+                            {new Intl.DateTimeFormat(undefined, {
+                                dateStyle: "long",
+                                timeStyle: "long",
+                            }).format(new Date(history.published))}
+                        {:else if history.commit_date}
+                            Enregistrée le
+                            {new Intl.DateTimeFormat(undefined, {
+                                dateStyle: "long",
+                                timeStyle: "long",
+                            }).format(new Date(history.commit_date))}
+                        {:else}
+                            Dernière modification le
+                            {new Intl.DateTimeFormat(undefined, {
+                                dateStyle: "long",
+                                timeStyle: "long",
+                            }).format(new Date(history.last_modified))}
+                        {/if}
+                    </div>
+                    {#if history.commit_message}
+                        <div class="text-truncate" title={history.commit_message}>
+                            {history.commit_message}
+                        </div>
+                    {/if}
+                {/if}
+            {/await}
+        </p>
+    {/if}
+{/if}

web/src/routes/domains/[dn]/DiffSummary.svelte

@@ -54,7 +54,7 @@
     }
 </script>
 
-{#if zoneDiff}
+{#if zoneDiff && zoneDiff.length}
     {#if zoneDiffCreated}
         <span class="text-success">
             {$t("domains.apply.additions", { count: zoneDiffCreated })}