feat(cc-addon-admin): adapt the danger zone text to match different s…

…ituations Fixes #1018
CleverCloud · Apr 29, 2024 · 8dfea44 · 8dfea44
1 parent 4624e67
commit 8dfea44
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 3 deletions.
diff --git a/src/components/cc-addon-admin/cc-addon-admin.js b/src/components/cc-addon-admin/cc-addon-admin.js
@@ -31,6 +31,8 @@ export class CcAddonAdmin extends LitElement {
     return {
       addon: { type: Object },
       error: { type: Boolean },
+      noDangerZoneBackupText: { type: Boolean, attribute: 'no-danger-zone-backup-text' },
+      noDangerZoneVmText: { type: Boolean, attribute: 'no-danger-zone-vm-text' },
       saving: { type: Boolean },
       _name: { type: String, state: true },
       _skeleton: { type: Boolean, state: true },
@@ -47,6 +49,12 @@ export class CcAddonAdmin extends LitElement {
     /** @type {boolean} Sets the error state on the component. */
     this.error = false;
 
+    /** @type {boolean} Hides the text about backups within the danger zone when set to `true` */
+    this.noDangerZoneBackupText = false;
+
+    /** @type {boolean} Hides the text about VM delay within the danger zone when set to `true` */
+    this.noDangerZoneVmText = false;
+
     /** @type {boolean} Enables the saving state */
     this.saving = false;
 
@@ -97,6 +105,8 @@ export class CcAddonAdmin extends LitElement {
 
     const isFormDisabled = this.error || this.saving;
     const loadingError = (this.error && !this.saving) || (this.error && this.addon == null);
+    const shouldShowBackupsText = !this.noDangerZoneBackupText;
+    const shouldShowVmText = !this.noDangerZoneVmText;
 
     return html`
       <cc-block>
@@ -138,7 +148,11 @@ export class CcAddonAdmin extends LitElement {
 
           <cc-block-section>
             <div slot="title" class="danger">${i18n('cc-addon-admin.danger-zone')}</div>
-            <div slot="info">${i18n('cc-addon-admin.delete-description')}</div>
+            <div slot="info" class="danger-desc">
+              <p>${i18n('cc-addon-admin.delete-disclaimer')}</p>
+              ${shouldShowVmText ? html`<p>${i18n('cc-addon-admin.delete-vm')}</p>` : ''}
+              ${shouldShowBackupsText ? html`<p>${i18n('cc-addon-admin.delete-backups')}</p>` : ''}
+            </div>
             <div>
               <cc-button danger ?skeleton=${this._skeleton} ?disabled=${isFormDisabled} @cc-button:click=${this._onDeleteSubmit}>${i18n('cc-addon-admin.delete')}</cc-button>
             </div>
@@ -172,6 +186,15 @@ export class CcAddonAdmin extends LitElement {
         .one-line-form cc-button {
           margin-top: var(--cc-margin-top-btn-horizontal-form);
         }
+
+        .danger-desc {
+          display: grid;
+          gap: 0.5em;
+        }
+
+        .danger-desc p {
+          margin: 0;
+        }
       `,
     ];
   }

diff --git a/src/components/cc-addon-admin/cc-addon-admin.stories.js b/src/components/cc-addon-admin/cc-addon-admin.stories.js
@@ -28,6 +28,22 @@ export const saving = makeStory(conf, {
   items: [{ addon, saving: true }],
 });
 
+export const dataLoadedWithDangerZoneVmAndBackups = makeStory(conf, {
+  items: [{ addon }],
+});
+
+export const dataLoadedWithDangerZoneVmButNoBackups = makeStory(conf, {
+  items: [{ addon, noDangerZoneBackupText: true }],
+});
+
+export const dataLoadedWithDangerZoneNoVmButBackups = makeStory(conf, {
+  items: [{ addon, noDangerZoneVmText: true }],
+});
+
+export const dataLoadedWithDangerZoneNoVmNoBackups = makeStory(conf, {
+  items: [{ addon, noDangerZoneBackupText: true, noDangerZoneVmText: true }],
+});
+
 export const errorWithLoading = makeStory(conf, {
   items: [{ error: true }],
 });

diff --git a/src/translations/translations.en.js b/src/translations/translations.en.js
@@ -49,7 +49,9 @@ export const translations = {
   'cc-addon-admin.admin': `Add-on administration`,
   'cc-addon-admin.danger-zone': `Danger zone`,
   'cc-addon-admin.delete': `Delete the add-on`,
-  'cc-addon-admin.delete-description': () => sanitize`Deleting this add-on will make it immediately unavailable.<br>The virtual machine will be stopped in 24 hours.<br>Backups will be kept according to the retention policy.`,
+  'cc-addon-admin.delete-backups': `Backups are kept according to the retention policy.`,
+  'cc-addon-admin.delete-disclaimer': `Deleting this add-on makes it immediately unavailable.`,
+  'cc-addon-admin.delete-vm': `The virtual machine will be stopped within 24 hours.`,
   'cc-addon-admin.error-loading': `Something went wrong while loading add-on info.`,
   'cc-addon-admin.heading.name': `Name`,
   'cc-addon-admin.heading.tags': `Tags`,

diff --git a/src/translations/translations.fr.js b/src/translations/translations.fr.js
@@ -62,7 +62,9 @@ export const translations = {
   'cc-addon-admin.admin': `Administration de l'add-on`,
   'cc-addon-admin.danger-zone': `Zone de danger`,
   'cc-addon-admin.delete': `Supprimer l'add-on`,
-  'cc-addon-admin.delete-description': () => sanitize`La machine virtuelle sera arrêtée dans 24 heures.<br>Les backups seront gardés suivant la politique de rétention.<br>Supprimer cet add-on le rendra directement indisponible.`,
+  'cc-addon-admin.delete-backups': `Les sauvegardes sont gardées suivant la politique de rétention.`,
+  'cc-addon-admin.delete-disclaimer': `Supprimer cet add-on le rend immédiatement indisponible.`,
+  'cc-addon-admin.delete-vm': `La machine virtuelle sera arrêtée sous 24 heures.`,
   'cc-addon-admin.error-loading': `Une erreur est survenue pendant le chargement des informations de l'add-on.`,
   'cc-addon-admin.heading.name': `Nom`,
   'cc-addon-admin.heading.tags': `Tags`,