UX: display warning message when uploads are not included in backup. (#23253)

Also, this PR will introduce a new checkbox in the modal window to manage whether the uploads should be included in the backup or not.

app/assets/javascripts/admin/addon/components/modal/start-backup.hbs

@@ -1,23 +1,27 @@
 <DModal
   @title={{i18n "admin.backups.operations.backup.confirm"}}
   @closeModal={{@closeModal}}
+  class="start-backup-modal"
 >
   <:body>
     {{#if this.warningMessage}}
-      <div class="alert alert-warning">{{html-safe this.warningMessage}}</div>
+      <div class={{this.warningCssClasses}}>{{html-safe
+          this.warningMessage
+        }}</div>
+    {{/if}}
+    {{#if this.canManageUploadsInBackup}}
+      <label>
+        <Input @type="checkbox" @checked={{this.includeUploads}} />
+        {{i18n "admin.backups.operations.backup.include_uploads"}}
+      </label>
     {{/if}}
   </:body>
   <:footer>
     <DButton
-      class="btn-primary backup-with-uploads"
-      @action={{this.startBackupWithUploads}}
-      @label={{or this.yesLabel "yes_value"}}
+      class="btn-primary"
+      @action={{this.startBackup}}
+      @label="yes_value"
     />
-    <DButton
-      class="backup-no-uploads"
-      @action={{this.startBackupWithoutUploads}}
-      @label="admin.backups.operations.backup.without_uploads"
-    />
-    <DButton class="btn-default" @action={{@closeModal}} @label="no_value" />
+    <DButton class="btn-flat" @action={{@closeModal}} @label="cancel" />
   </:footer>
 </DModal>

app/assets/javascripts/admin/addon/components/modal/start-backup.js

@@ -1,16 +1,37 @@
 import Component from "@glimmer/component";
 import { action } from "@ember/object";
+import { tracked } from "@glimmer/tracking";
+import { inject as service } from "@ember/service";
+import I18n from "I18n";
 
 export default class StartBackup extends Component {
-  @action
-  startBackupWithUploads() {
-    this.args.model.startBackup(true);
-    this.args.closeModal();
+  @service siteSettings;
+  @tracked includeUploads = true;
+
+  get canManageUploadsInBackup() {
+    return (
+      !this.siteSettings.enable_s3_uploads ||
+      this.siteSettings.include_s3_uploads_in_backups
+    );
+  }
+
+  get warningCssClasses() {
+    return "";
+  }
+
+  get warningMessage() {
+    if (
+      this.siteSettings.enable_s3_uploads &&
+      !this.siteSettings.include_s3_uploads_in_backups
+    ) {
+      return I18n.t("admin.backups.operations.backup.s3_upload_warning");
+    }
+    return "";
   }
 
   @action
-  startBackupWithoutUploads() {
-    this.args.model.startBackup(false);
+  startBackup() {
+    this.args.model.startBackup(this.includeUploads);
     this.args.closeModal();
   }
 }

app/assets/stylesheets/common/admin/backups.scss

@@ -89,11 +89,8 @@ button.ru {
 }
 
 .start-backup-modal {
-  .btn {
-    margin: 10px 0 10px 5px;
-  }
-  .btn:first-of-type {
-    margin-left: 10px;
+  .alert {
+    margin-bottom: 0;
   }
 }
 

config/locales/client.en.yml

@@ -5043,7 +5043,8 @@ en:
             label: "Backup"
             title: "Create a backup"
             confirm: "Do you want to start a new backup?"
-            without_uploads: "Yes (do not include uploads)"
+            include_uploads: "include all uploads"
+            s3_upload_warning: 'This is for database backups only. Uploads will not be included, meaning all images and other file uploads can be missing if the backup is restored to another hosting setup. <b>To enable a full backup including your S3 uploads please see <a href="https://meta.discourse.org/t/-/276535" target="_blank">this guide</a>.</b>'
           download:
             label: "Download"
             title: "Send email with download link"