Enhance AddRepositoryModal for Rclone support and UI optimizations

[stephdl]

Update AddRepositoryModal to support new storage providers, specifically Rclone, and improve UI translations and development build optimizations.

NethServer/dev#7966

[Copilot]

Pull request overview

This PR updates the backup destinations UI to add Rclone as a supported provider and streamlines repository interactions (moving from “details” to “edit”), alongside several i18n/UI adjustments.

Changes:

• Add Rclone provider support to the “Add destination” and “Edit destination” modals (paste/upload config + optional base path).
• Simplify repository actions in Backup.vue (remove details modal; use edit action).
• Update English translations and adjust backend input validation regex for rclone configuration payloads.

Reviewed changes

Copilot reviewed 7 out of 14 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
core/ui/src/views/Backup.vue	Removes repository details modal and changes repo action UI to edit/delete.
core/ui/src/components/backup/RestoreSingleInstanceSnapshotSelector.vue	Enhances snapshot tile UI with “most recent” tag and size display.
core/ui/src/components/backup/RepoDetailsModal.vue	Removes the repository details modal component.
core/ui/src/components/backup/EditRepositoryModal.vue	Adds Rclone edit flow and updates error handling / advanced options UI.
core/ui/src/components/backup/AddRepositoryModal.vue	Adds Rclone provider option and configuration upload/paste UX.
core/ui/public/i18n/en/translation.json	Updates backup/destination wording and adds rclone-related strings.
core/imageroot/var/lib/nethserver/cluster/actions/alter-backup-repository/validate-input.json	Loosens rclone config regex to allow EOF without newline.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[Copilot]

Pull request overview

Copilot reviewed 7 out of 14 changed files in this pull request and generated 5 comments.

Comments suppressed due to low confidence (2)

core/ui/src/components/backup/EditRepositoryModal.vue:263

• The error notification at the bottom of the modal is wired to the wrong state: it checks error.addBackupRepository, but this component sets error.alterBackupRepository on failures. Also the notification title uses action.add-backup-repository. As-is, task failures may not be displayed (and alterBackupRepository is not declared in data, so it may not be reactive).

        <NsInlineNotification
          v-if="error.addBackupRepository"
          kind="error"
          :title="$t('action.add-backup-repository')"
          :description="error.alterBackupRepository"
          :showCloseButton="false"

core/ui/src/components/backup/AddRepositoryModal.vue:182

• The UI removes Azure as a selectable/editable backup destination, but the backend schemas still define provider: azure for both add/alter actions. If Azure is still supported server-side, this is a functional regression (users won’t be able to add/edit existing Azure destinations). If Azure is intentionally deprecated, the related schemas/translations should be updated accordingly to avoid inconsistencies.

              <!-- Cluster -->
              <cv-column :md="4">
                <NsTile
                  :light="true"
                  kind="selectable"
                  v-model="isClusterSelected"
                  value="providerValue"
                  @click="selectCluster()"
                  class="provider-card"
                >
                  <div class="provider-card-content">
                    <div class="provider-icon">
                      <img
                        :src="require('@/assets/node_storage.png')"
                        alt="cluster logo"
                      />
                    </div>
                    <h6>
                      {{ $t("backup.cluster") }}
                    </h6>
                  </div>
                </NsTile>
              </cv-column>
              <!-- samba -->
              <cv-column :md="4">
                <NsTile
                  :light="true"
                  kind="selectable"
                  v-model="isSambaSelected"
                  value="providerValue"
                  @click="selectSamba()"
                  class="provider-card"
                >
                  <div class="provider-card-content">
                    <div class="provider-icon">
                      <img
                        :src="require('@/assets/samba.png')"
                        alt="samba logo"
                      />
                    </div>
                    <h6>
                      {{ $t("backup.samba") }}
                    </h6>
                  </div>
                </NsTile>
              </cv-column>
              <!-- amazon s3 -->
              <cv-column :md="4">
                <NsTile
                  :light="true"
                  kind="selectable"
                  v-model="isAmazonS3Selected"
                  value="providerValue"
                  @click="selectAmazonS3()"
                  class="provider-card"
                >
                  <div class="provider-card-content">
                    <div class="provider-icon">
                      <img
                        :src="require('@/assets/aws.png')"
                        alt="amazon s3 logo"
                      />
                    </div>
                    <h6>
                      {{ $t("backup.aws") }}
                    </h6>
                  </div>
                </NsTile>
              </cv-column>
              <!-- backblaze -->
              <cv-column :md="4">
                <NsTile
                  :light="true"
                  kind="selectable"
                  v-model="isBackblazeSelected"
                  value="providerValue"
                  @click="selectBackblaze()"
                  class="provider-card"
                >
                  <div class="provider-card-content">
                    <div class="provider-icon">
                      <img
                        :src="require('@/assets/backblaze.png')"
                        alt="backblaze logo"
                      />
                    </div>
                    <h6>
                      {{ $t("backup.backblaze") }}
                    </h6>
                  </div>
                </NsTile>
              </cv-column>
              <!-- generic s3 -->
              <cv-column :md="4">
                <NsTile
                  :light="true"
                  kind="selectable"
                  v-model="isGenericS3Selected"
                  value="providerValue"
                  @click="selectGenericS3()"
                  class="provider-card"
                >
                  <div class="provider-card-content">
                    <div class="provider-icon">
                      <img
                        :src="require('@/assets/s3-generic.png')"
                        alt="generic s3 logo"
                      />
                    </div>
                    <h6>
                      {{ $t("backup.generic-s3") }}
                    </h6>
                  </div>
                </NsTile>
              </cv-column>
              <!-- rclone -->
              <cv-column :md="4">
                <NsTile
                  :light="true"
                  kind="selectable"
                  v-model="isRcloneSelected"
                  value="providerValue"
                  @click="selectRclone()"
                  class="provider-card"
                >
                  <div class="provider-card-content">
                    <div class="provider-icon">
                      <img
                        :src="require('@/assets/rclone.png')"
                        alt="rclone logo"
                      />
                    </div>
                    <h6>
                      {{ $t("backup.rclone") }}
                    </h6>
                  </div>
                </NsTile>
              </cv-column>
            </cv-row>

[Copilot]

Pull request overview

Copilot reviewed 7 out of 14 changed files in this pull request and generated 3 comments.

Comments suppressed due to low confidence (1)

core/ui/src/components/backup/EditRepositoryModal.vue:263

• The modal error notification is wired to error.addBackupRepository / action.add-backup-repository, but this component sets error.alterBackupRepository when task creation fails. As-is, alter task errors won't be shown and error.alterBackupRepository is added dynamically (non-reactive in Vue 2) unless initialized in data(). Align the v-if, title, and description to the alter action and declare the error field in data().

        <NsInlineNotification
          v-if="error.addBackupRepository"
          kind="error"
          :title="$t('action.add-backup-repository')"
          :description="error.alterBackupRepository"
          :showCloseButton="false"

[Copilot]

Pull request overview

Copilot reviewed 8 out of 15 changed files in this pull request and generated 4 comments.

[andre8244]

• Thanks for cleaning up the code, we still have a couple of "//// handle all providers", try a global search on the project
• Not sure about the spinner showing after clicking "Download cluster backup". What do you think @AmaLuci ? Sadly the component does not currently support showing a spinner inside that button, shall we avoid showing it? The dowload preparation is usually fast, maybe we can avoid giving feedback to the user in this case

[AmaLuci]

• Thanks for cleaning up the code, we still have a couple of "//// handle all providers", try a global search on the project
• Not sure about the spinner showing after clicking "Download cluster backup". What do you think @AmaLuci ? Sadly the component does not currently support showing a spinner inside that button, shall we avoid showing it? The dowload preparation is usually fast, maybe we can avoid giving feedback to the user in this case

I agree with you, it's not necessary. Let's hide the spinner.