From 0128b9f76865fc2e6f49e5b63d07e6d9693e73be Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 5 Dec 2024 12:32:08 +0100
Subject: [PATCH] feat(ui): restore mail folder

---
 ui/package.json                               |   6 +-
 ui/public/i18n/en/translation.json            |  34 +-
 .../mailboxes/BackupRepositorySelector.vue    | 164 ++++++
 .../mailboxes/BackupSnapshotSelector.vue      | 147 +++++
 .../components/mailboxes/PublicMailboxes.vue  |  30 +-
 .../mailboxes/RestoreFolderModal.vue          | 536 ++++++++++++++++++
 ui/src/components/mailboxes/UserMailboxes.vue |  34 +-
 ui/src/main.js                                |  10 +-
 ui/yarn.lock                                  |  28 +-
 9 files changed, 972 insertions(+), 17 deletions(-)
 create mode 100644 ui/src/components/mailboxes/BackupRepositorySelector.vue
 create mode 100644 ui/src/components/mailboxes/BackupSnapshotSelector.vue
 create mode 100644 ui/src/components/mailboxes/RestoreFolderModal.vue

diff --git a/ui/package.json b/ui/package.json
index 186bac84..09718177 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -12,7 +12,7 @@
   "dependencies": {
     "@carbon/icons-vue": "^10.37.0",
     "@carbon/vue": "^2.40.0",
-    "@nethserver/ns8-ui-lib": "^0.1.31",
+    "@nethserver/ns8-ui-lib": "^1.2.1",
     "await-to-js": "^3.0.0",
     "axios": "^0.21.2",
     "carbon-components": "^10.41.0",
@@ -22,9 +22,10 @@
     "vue": "^2.6.11",
     "vue-axios": "^3.2.4",
     "vue-date-fns": "^2.0.1",
-    "vue-debounce": "^4.0.0",
     "vue-i18n": "^8.24.4",
+    "vue-infinite-loading": "^2.4.5",
     "vue-router": "^3.2.0",
+    "vue2-debounce": "^1.0.1",
     "vuex": "^3.4.0"
   },
   "devDependencies": {
@@ -38,6 +39,7 @@
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^6.2.2",
+    "mark.js": "^8.11.1",
     "prettier": "^2.2.1",
     "sass-loader": "^10.1.1",
     "vue-template-compiler": "^2.6.11"
diff --git a/ui/public/i18n/en/translation.json b/ui/public/i18n/en/translation.json
index 3115f197..d50e06d7 100644
--- a/ui/public/i18n/en/translation.json
+++ b/ui/public/i18n/en/translation.json
@@ -19,7 +19,9 @@
         "optional": "Optional",
         "mail_hostname": "Mail server hostname",
         "mail_hostname_tooltip": "Enter the MX record configured on your DNS service provider",
-        "rspamd_credentials_tooltip": "Use your login credentials to access Rspamd"
+        "rspamd_credentials_tooltip": "Use your login credentials to access Rspamd",
+        "next": "Next",
+        "previous": "Previous"
     },
     "status": {
         "title": "Status",
@@ -104,7 +106,10 @@
         "flush-postfix-queue": "Flush Postfix queue",
         "get-queue-settings": "Get queue settings",
         "set-queue-settings": "Set queue settings",
-        "set-always-bcc": "Set always BCC"
+        "set-always-bcc": "Set always BCC",
+        "restore-backup-content": "Restore mail folder",
+        "seek-snapshot-contents": "Get snapshot folders",
+        "read-backup-snapshots": "Read backup snapshots"
     },
     "error": {
         "error": "Error",
@@ -274,7 +279,30 @@
         "disable_mailbox": "Disable mailbox",
         "confirm_disable_mailbox": "Do you really want to disable mailbox {mailbox}?",
         "confirm_disable_mailbox_2": "It will stop receiving messages and you won't be able to select it as address destination",
-        "address_already_exists": "Address already exists"
+        "address_already_exists": "Address already exists",
+        "restore_folder_for_user_name": "Restore folder for user {name}",
+        "restore_public_mailbox_name": "Restore public mailbox {name}",
+        "restore_folder": "Restore folder",
+        "restore": "Restore",
+        "select_backup_destination": "Select backup destination",
+        "select_backup_snapshot": "Select backup snapshot",
+        "select_folder_to_restore": "Select folder to restore",
+        "no_backup_found": "No backup found",
+        "no_backup_found_description": "Ensure that a backup destination has been configured and that a backup has been performed for {module}",
+        "from_node_name_of_this_cluster": "From node {name} of this cluster",
+        "from_node_name_of_different_cluster": "From node {name} of a different cluster",
+        "from_this_cluster": "From this cluster",
+        "from_different_cluster": "From a different cluster",
+        "from_node_name": "From node {name}",
+        "most_recent": "Most recent",
+        "no_snapshot_to_restore": "No snapshots to restore",
+        "search_folder": "Search folder",
+        "restore_folder_info": "The selected mail folder will be restored to '{restoredFolder}'. If it exceeds the available space in the user's mailbox, the quota setting for that user will be changed to '@:settings_mailboxes.unlimited'.",
+        "restoring_mail_folder_for_user": "Restoring mail folder for {name}",
+        "restoring_public_mailbox_name": "Restoring public mailbox {name}",
+        "mailbox_quota_changed": "Mailbox quota changed",
+        "mailbox_quota_changed_description": "Mailbox quota for {user} has been set to '@:settings_mailboxes.unlimited' due to insufficient space encountered during folder restoration",
+        "go_to_mailboxes": "Go to Mailboxes"
     },
     "filter": {
         "title": "Filter",
diff --git a/ui/src/components/mailboxes/BackupRepositorySelector.vue b/ui/src/components/mailboxes/BackupRepositorySelector.vue
new file mode 100644
index 00000000..ea0d13fe
--- /dev/null
+++ b/ui/src/components/mailboxes/BackupRepositorySelector.vue
@@ -0,0 +1,164 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+<template>
+  <div class="repo-selector">
+    <div class="repo-list">
+      <!-- skeleton -->
+      <div v-if="loading">
+        <cv-tile
+          v-for="index in 2"
+          :key="index"
+          :light="light"
+          class="repo-tile"
+        >
+          <cv-skeleton-text
+            :paragraph="true"
+            :line-count="2"
+          ></cv-skeleton-text>
+        </cv-tile>
+      </div>
+      <!-- no repositories -->
+      <NsEmptyState
+        v-else-if="!repositories.length"
+        :title="$t('mailboxes.no_backup_found')"
+      >
+        <template #description>
+          {{
+            $t("mailboxes.no_backup_found_description", {
+              module: instanceName,
+            })
+          }}
+        </template>
+      </NsEmptyState>
+      <!-- repo list -->
+      <NsTile
+        v-else
+        v-for="(repo, index) of repositories"
+        :key="index"
+        :light="light"
+        kind="selectable"
+        :selected="repo.repository_id === value"
+        value="repoValue"
+        @click="onTileClick(repo)"
+        class="repo-tile"
+      >
+        <div>
+          {{ repo.repository_name }}
+        </div>
+        <!-- repository url -->
+        <div class="secondary-row">
+          {{ repo.repository_url }}
+        </div>
+        <!-- timestamp -->
+        <div class="secondary-row">
+          {{ formatDate(new Date(repo.timestamp * 1000), "PPpp") }}
+        </div>
+        <!-- node and/or cluster -->
+        <div
+          v-if="repo.node_fqdn || repo.is_generated_locally !== null"
+          class="secondary-row"
+        >
+          <template v-if="repo.node_fqdn && repo.is_generated_locally !== null">
+            <!-- node and cluster -->
+            <template v-if="repo.is_generated_locally">
+              {{
+                $t("mailboxes.from_node_name_of_this_cluster", {
+                  name: repo.node_fqdn,
+                })
+              }}
+            </template>
+            <template v-else>
+              {{
+                $t("mailboxes.from_node_name_of_different_cluster", {
+                  name: repo.node_fqdn,
+                })
+              }}
+            </template>
+          </template>
+          <template v-else-if="repo.node_fqdn">
+            <!-- node only -->
+            {{
+              $t("mailboxes.from_node_name", {
+                name: repo.node_fqdn,
+              })
+            }}
+          </template>
+          <template v-else>
+            <!-- cluster only -->
+            <template v-if="repo.is_generated_locally">
+              {{ $t("mailboxes.from_this_cluster") }}
+            </template>
+            <template v-else>
+              {{ $t("mailboxes.from_different_cluster") }}
+            </template>
+          </template>
+        </div>
+      </NsTile>
+    </div>
+  </div>
+</template>
+
+<script>
+import { UtilService, DateTimeService } from "@nethserver/ns8-ui-lib";
+
+export default {
+  name: "BackupRepositorySelector",
+  components: {},
+  mixins: [UtilService, DateTimeService],
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+    repositories: {
+      type: Array,
+      required: true,
+    },
+    instanceName: {
+      type: String,
+      required: true,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    light: Boolean,
+  },
+  methods: {
+    onTileClick(repo) {
+      if (repo.repository_id !== this.value) {
+        this.$emit("input", repo.repository_id);
+      } else {
+        // tile has been deselected
+        this.$emit("input", "");
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../styles/carbon-utils";
+
+.repo-selector {
+  display: flex;
+  flex-direction: column;
+}
+
+.repo-list {
+  overflow-y: auto;
+  max-height: 21rem;
+}
+
+.ns-tile.repo-tile,
+.cv-tile.repo-tile {
+  margin-bottom: $spacing-03;
+}
+
+.secondary-row {
+  margin-top: $spacing-02;
+  color: $ui-04;
+}
+</style>
diff --git a/ui/src/components/mailboxes/BackupSnapshotSelector.vue b/ui/src/components/mailboxes/BackupSnapshotSelector.vue
new file mode 100644
index 00000000..bdded13b
--- /dev/null
+++ b/ui/src/components/mailboxes/BackupSnapshotSelector.vue
@@ -0,0 +1,147 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+<template>
+  <div class="snapshot-selector">
+    <div class="snapshot-list">
+      <!-- skeleton -->
+      <div v-if="loading">
+        <cv-tile
+          v-for="index in 2"
+          :key="index"
+          :light="light"
+          class="snapshot-tile"
+        >
+          <cv-skeleton-text
+            :paragraph="true"
+            :line-count="2"
+          ></cv-skeleton-text>
+        </cv-tile>
+      </div>
+      <!-- no snapshot to restore -->
+      <NsEmptyState
+        v-else-if="!snapshots.length"
+        :title="$t('mailboxes.no_snapshot_to_restore')"
+      />
+      <!-- snapshot list -->
+      <NsTile
+        v-else
+        v-for="(snapshot, index) of snapshotsLoaded"
+        :key="index"
+        :light="light"
+        kind="selectable"
+        :selected="snapshot.id === value"
+        value="snapshotValue"
+        @click="onTileClick(snapshot)"
+        class="snapshot-tile"
+      >
+        <div>
+          {{ formatDate(new Date(snapshot.timestamp * 1000), "PPpp") }}
+        </div>
+        <div v-if="index == 0" class="secondary-row">
+          {{ $t("mailboxes.most_recent") }}
+        </div>
+      </NsTile>
+      <infinite-loading
+        :identifier="infiniteId"
+        @infinite="infiniteScrollHandler"
+      ></infinite-loading>
+    </div>
+  </div>
+</template>
+
+<script>
+import { UtilService, DateTimeService } from "@nethserver/ns8-ui-lib";
+
+export default {
+  name: "BackupSnapshotSelector",
+  components: {},
+  mixins: [UtilService, DateTimeService],
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+    snapshots: {
+      type: Array,
+      required: true,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    light: Boolean,
+  },
+  data() {
+    return {
+      // infinite scroll
+      snapshotsLoaded: [],
+      pageNum: 0,
+      pageSize: 20,
+      infiniteId: +new Date(),
+    };
+  },
+  watch: {
+    snapshots: function () {
+      this.snapshotsLoaded = [];
+      this.pageNum = 0;
+      this.infiniteId += 1;
+      this.infiniteScrollHandler();
+    },
+  },
+  methods: {
+    onTileClick(snapshot) {
+      if (snapshot.id !== this.value) {
+        this.$emit("input", snapshot.id);
+      } else {
+        // tile has been deselected
+        this.$emit("input", "");
+      }
+    },
+    infiniteScrollHandler($state) {
+      const pageItems = this.snapshots.slice(
+        this.pageNum * this.pageSize,
+        (this.pageNum + 1) * this.pageSize
+      );
+
+      if (pageItems.length) {
+        this.pageNum++;
+        this.snapshotsLoaded.push(...pageItems);
+
+        if ($state) {
+          $state.loaded();
+        }
+      } else {
+        if ($state) {
+          $state.complete();
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../styles/carbon-utils";
+
+.snapshot-selector {
+  display: flex;
+  flex-direction: column;
+}
+
+.snapshot-list {
+  overflow-y: auto;
+  max-height: 21rem;
+}
+
+.ns-tile.snapshot-tile,
+.cv-tile.snapshot-tile {
+  margin-bottom: $spacing-03;
+}
+
+.secondary-row {
+  margin-top: $spacing-02;
+  color: $ui-04;
+}
+</style>
diff --git a/ui/src/components/mailboxes/PublicMailboxes.vue b/ui/src/components/mailboxes/PublicMailboxes.vue
index b94d200b..e289722f 100644
--- a/ui/src/components/mailboxes/PublicMailboxes.vue
+++ b/ui/src/components/mailboxes/PublicMailboxes.vue
@@ -124,6 +124,16 @@
                         :label="core.$t('common.edit')"
                       />
                     </cv-overflow-menu-item>
+                    <cv-overflow-menu-item
+                      @click="showRestoreFolderModal(row)"
+                      :data-test-id="row.user + '-restore'"
+                      :disabled="row.enabled == false"
+                    >
+                      <NsMenuItem
+                        :icon="RecentlyViewed20"
+                        :label="$t('mailboxes.restore_folder')"
+                      />
+                    </cv-overflow-menu-item>
                     <NsMenuDivider />
                     <cv-overflow-menu-item
                       danger
@@ -182,6 +192,13 @@
         </p>
       </template>
     </NsDangerDeleteModal>
+    <!-- restore folder modal -->
+    <RestoreFolderModal
+      :isShown="isShownRestoreFolderModal"
+      :mailbox="currentMailbox"
+      mailboxKind="public"
+      @hide="hideRestoreFolderModal"
+    />
   </div>
 </template>
 
@@ -195,10 +212,12 @@ import {
 } from "@nethserver/ns8-ui-lib";
 import to from "await-to-js";
 import CreateOrEditPublicMailboxModal from "./CreateOrEditPublicMailboxModal";
+import RecentlyViewed20 from "@carbon/icons-vue/es/recently-viewed/20";
+import RestoreFolderModal from "./RestoreFolderModal";
 
 export default {
   name: "PublicMailboxes",
-  components: { CreateOrEditPublicMailboxModal },
+  components: { CreateOrEditPublicMailboxModal, RestoreFolderModal },
   mixins: [QueryParamService, UtilService, IconService, TaskService],
   data() {
     return {
@@ -209,6 +228,8 @@ export default {
       mailboxes: [],
       isShownCreateOrEditPublicMailboxModal: false,
       isShownDeleteMailboxModal: false,
+      RecentlyViewed20,
+      isShownRestoreFolderModal: false,
       loading: {
         listPublicMailboxes: false,
         alterPublicMailbox: false,
@@ -298,6 +319,13 @@ export default {
     hideDeleteMailboxModal() {
       this.isShownDeleteMailboxModal = false;
     },
+    showRestoreFolderModal(mailbox) {
+      this.currentMailbox = mailbox;
+      this.isShownRestoreFolderModal = true;
+    },
+    hideRestoreFolderModal() {
+      this.isShownRestoreFolderModal = false;
+    },
     async removePublicMailbox() {
       this.loading.removePublicMailbox = true;
       this.error.removePublicMailbox = "";
diff --git a/ui/src/components/mailboxes/RestoreFolderModal.vue b/ui/src/components/mailboxes/RestoreFolderModal.vue
new file mode 100644
index 00000000..8380bb95
--- /dev/null
+++ b/ui/src/components/mailboxes/RestoreFolderModal.vue
@@ -0,0 +1,536 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+<template>
+  <NsWizard
+    size="default"
+    :visible="isShown"
+    :cancelLabel="$t('common.cancel')"
+    :previousLabel="$t('common.previous')"
+    :nextLabel="isLastStep ? $t('mailboxes.restore') : $t('common.next')"
+    :isPreviousDisabled="isFirstStep || loading.restoreBackupContent"
+    :isNextDisabled="isNextButtonDisabled"
+    :isNextLoading="loading.restoreBackupContent"
+    @modal-shown="onModalShown"
+    @modal-hidden="$emit('hide')"
+    @cancel="$emit('hide')"
+    @previousStep="previousStep"
+    @nextStep="nextStep"
+  >
+    <template slot="title">{{
+      mailboxKind === "user"
+        ? $t("mailboxes.restore_folder_for_user_name", {
+            name: mailboxName,
+          })
+        : $t("mailboxes.restore_public_mailbox_name", {
+            name: mailboxName,
+          })
+    }}</template>
+    <template slot="content">
+      <cv-form @submit.prevent="nextStep">
+        <template v-if="step == 'repository'">
+          <div class="mg-bottom-md">
+            {{ $t("mailboxes.select_backup_destination") }}
+          </div>
+          <!-- listBackupRepositories error -->
+          <NsInlineNotification
+            v-if="error.listBackupRepositories"
+            kind="error"
+            :title="$t('action.list-backup-repositories')"
+            :description="error.listBackupRepositories"
+            :showCloseButton="false"
+          />
+          <cv-grid class="mg-top-lg mg-bottom-md no-padding">
+            <cv-row>
+              <cv-column>
+                <BackupRepositorySelector
+                  v-model="selectedRepositoryId"
+                  :repositories="backupRepositories"
+                  :instanceName="instanceName"
+                  :loading="loading.listBackupRepositories"
+                  :light="true"
+                />
+              </cv-column>
+            </cv-row>
+          </cv-grid>
+        </template>
+        <template v-if="step == 'snapshot'">
+          <div>
+            {{ $t("mailboxes.select_backup_snapshot") }}
+          </div>
+          <!-- readBackupSnapshots error -->
+          <NsInlineNotification
+            v-if="error.readBackupSnapshots"
+            kind="error"
+            :title="$t('action.read-backup-snapshots')"
+            :description="error.readBackupSnapshots"
+            :showCloseButton="false"
+          />
+          <cv-grid class="mg-top-lg mg-bottom-md no-padding">
+            <cv-row>
+              <cv-column>
+                <BackupSnapshotSelector
+                  v-model="selectedSnapshotId"
+                  :snapshots="backupSnapshots"
+                  :loading="loading.readBackupSnapshots"
+                  :light="true"
+                />
+              </cv-column>
+            </cv-row>
+          </cv-grid>
+        </template>
+        <template v-if="step == 'folder'">
+          <div>
+            {{ $t("mailboxes.select_folder_to_restore") }}
+          </div>
+          <NsComboBox
+            v-model="selectedFolder"
+            :label="
+              loading.seekSnapshotContents
+                ? core.$t('common.loading')
+                : $t('mailboxes.search_folder')
+            "
+            :auto-filter="true"
+            :auto-highlight="true"
+            :options="folderOptions"
+            :disabled="loading.seekSnapshotContents"
+            light
+            ref="folder"
+            class="mg-top-lg"
+          />
+          <!-- seekSnapshotContents error -->
+          <NsInlineNotification
+            v-if="error.seekSnapshotContents"
+            kind="error"
+            :title="$t('action.seek-snapshot-contents')"
+            :description="error.seekSnapshotContents"
+            :showCloseButton="false"
+          />
+          <NsInlineNotification
+            kind="info"
+            :description="
+              $t('mailboxes.restore_folder_info', {
+                restoredFolder: 'Restored folder',
+              })
+            "
+            :showCloseButton="false"
+            class="mb-9"
+          />
+          <!-- restoreBackupContent error -->
+          <NsInlineNotification
+            v-if="error.restoreBackupContent"
+            kind="error"
+            :title="$t('action.restore-backup-content')"
+            :description="error.restoreBackupContent"
+            :showCloseButton="false"
+          />
+        </template>
+      </cv-form>
+    </template>
+  </NsWizard>
+</template>
+
+<script>
+import { UtilService, TaskService, IconService } from "@nethserver/ns8-ui-lib";
+import to from "await-to-js";
+import { mapState } from "vuex";
+import BackupRepositorySelector from "./BackupRepositorySelector.vue";
+import BackupSnapshotSelector from "./BackupSnapshotSelector.vue";
+
+export default {
+  name: "RestoreFolderModal",
+  components: {
+    BackupRepositorySelector,
+    BackupSnapshotSelector,
+  },
+  mixins: [UtilService, TaskService, IconService],
+  props: {
+    isShown: {
+      type: Boolean,
+      default: true,
+    },
+    mailbox: Object,
+    mailboxKind: {
+      type: String,
+      required: true,
+      validator: (val) => ["user", "public"].includes(val),
+    },
+  },
+  data() {
+    return {
+      step: "",
+      backupRepositories: [],
+      backupSnapshots: [],
+      selectedRepositoryId: "",
+      selectedSnapshotId: "",
+      selectedFolder: "",
+      folderOptions: [],
+      loading: {
+        listBackupRepositories: true,
+        restoreBackupContent: false,
+        readBackupSnapshots: false,
+        seekSnapshotContents: false,
+      },
+      error: {
+        listBackupRepositories: "",
+        restoreBackupContent: "",
+        readBackupSnapshots: "",
+        seekSnapshotContents: "",
+      },
+    };
+  },
+  computed: {
+    ...mapState(["instanceName", "core"]),
+    steps() {
+      return this.mailboxKind === "user"
+        ? ["repository", "snapshot", "folder"]
+        : ["repository", "snapshot"];
+    },
+    stepIndex() {
+      return this.steps.indexOf(this.step);
+    },
+    isFirstStep() {
+      return this.stepIndex == 0;
+    },
+    isLastStep() {
+      return this.stepIndex == this.steps.length - 1;
+    },
+    isNextButtonDisabled() {
+      return (
+        this.loading.restoreBackupContent ||
+        (this.step == "repository" && !this.selectedRepositoryId) ||
+        (this.step == "snapshot" && !this.selectedSnapshotId) ||
+        (this.step == "folder" && !this.selectedFolder)
+      );
+    },
+    selectedRepository() {
+      return this.backupRepositories.find(
+        (repo) => repo.repository_id === this.selectedRepositoryId
+      );
+    },
+    mailboxName() {
+      if (!this.mailbox) {
+        return "";
+      }
+      return this.mailboxKind === "user"
+        ? this.mailbox.user
+        : this.mailbox.mailbox;
+    },
+  },
+  watch: {
+    step: function () {
+      if (this.step == "repository") {
+        this.selectedRepositoryId = "";
+      } else if (this.step == "snapshot") {
+        this.selectedSnapshotId = "";
+        this.readBackupSnapshots();
+      } else if (this.step == "folder") {
+        this.selectedFolder = "";
+        this.seekSnapshotContents();
+      }
+    },
+  },
+  methods: {
+    nextStep() {
+      if (this.isNextButtonDisabled) {
+        return;
+      }
+
+      if (this.isLastStep) {
+        this.restoreBackupContent();
+      } else {
+        this.step = this.steps[this.stepIndex + 1];
+      }
+    },
+    previousStep() {
+      if (!this.isFirstStep) {
+        this.step = this.steps[this.stepIndex - 1];
+      }
+    },
+    onModalShown() {
+      // show first step
+      this.step = this.steps[0];
+      this.selectedRepositoryId = "";
+      this.listBackupRepositories();
+    },
+    async listBackupRepositories() {
+      this.loading.listBackupRepositories = true;
+      this.error.listBackupRepositories = "";
+      const taskAction = "list-backup-repositories";
+      const eventId = this.getUuid();
+
+      // register to task error
+      this.core.$root.$once(
+        `${taskAction}-aborted-${eventId}`,
+        this.listBackupRepositoriesAborted
+      );
+
+      // register to task completion
+      this.core.$root.$once(
+        `${taskAction}-completed-${eventId}`,
+        this.listBackupRepositoriesCompleted
+      );
+
+      const res = await to(
+        this.createModuleTaskForApp(this.instanceName, {
+          action: taskAction,
+          extra: {
+            title: this.$t("action." + taskAction),
+            isNotificationHidden: true,
+            eventId,
+          },
+        })
+      );
+      const err = res[0];
+
+      if (err) {
+        console.error(`error creating task ${taskAction}`, err);
+        this.error.listBackupRepositories = this.getErrorMessage(err);
+        this.loading.listBackupRepositories = false;
+        return;
+      }
+    },
+    listBackupRepositoriesAborted(taskResult, taskContext) {
+      console.error(`${taskContext.action} aborted`, taskResult);
+      this.error.listBackupRepositories = this.$t("error.generic_error");
+      this.loading.listBackupRepositories = false;
+    },
+    listBackupRepositoriesCompleted(taskContext, taskResult) {
+      let backupRepositories = taskResult.output;
+
+      // sort repositories by name
+      backupRepositories.sort(this.sortByProperty("repository_name"));
+      this.backupRepositories = backupRepositories;
+
+      // select the first repository if there is only one
+      if (this.backupRepositories.length == 1) {
+        this.selectedRepositoryId = this.backupRepositories[0].repository_id;
+      }
+      this.loading.listBackupRepositories = false;
+    },
+    async readBackupSnapshots() {
+      this.error.readBackupSnapshots = "";
+      this.loading.readBackupSnapshots = true;
+      const taskAction = "read-backup-snapshots";
+
+      // register to task error
+      this.core.$root.$off(taskAction + "-aborted");
+      this.core.$root.$once(
+        taskAction + "-aborted",
+        this.readBackupSnapshotsAborted
+      );
+
+      // register to task completion
+      this.core.$root.$off(taskAction + "-completed");
+      this.core.$root.$once(
+        taskAction + "-completed",
+        this.readBackupSnapshotsCompleted
+      );
+
+      const res = await to(
+        this.createClusterTaskForApp({
+          action: taskAction,
+          data: {
+            repository: this.selectedRepositoryId,
+            path: this.selectedRepository.path,
+          },
+          extra: {
+            title: this.$t("action." + taskAction),
+            isNotificationHidden: true,
+          },
+        })
+      );
+      const err = res[0];
+
+      if (err) {
+        console.error(`error creating task ${taskAction}`, err);
+        this.error.readBackupSnapshots = this.getErrorMessage(err);
+        this.loading.readBackupSnapshots = false;
+        return;
+      }
+    },
+    readBackupSnapshotsAborted(taskResult, taskContext) {
+      console.error(`${taskContext.action} aborted`, taskResult);
+      this.error.readBackupSnapshots = this.$t("error.generic_error");
+      this.loading.readBackupSnapshots = false;
+    },
+    readBackupSnapshotsCompleted(taskContext, taskResult) {
+      let snapshots = taskResult.output;
+
+      // sort snapshots by timestamp descending (most recent first)
+      snapshots.sort(this.sortByProperty("timestamp")).reverse();
+      this.backupSnapshots = snapshots;
+
+      // select the first snapshot if there is only one
+      if (this.backupSnapshots.length == 1) {
+        this.selectedSnapshotId = this.backupSnapshots[0].id;
+      }
+      this.loading.readBackupSnapshots = false;
+    },
+    async restoreBackupContent() {
+      this.loading.restoreBackupContent = true;
+      this.error.restoreBackupContent = "";
+      const taskAction = "restore-backup-content";
+      const eventId = this.getUuid();
+
+      // register to task error
+      this.core.$root.$once(
+        `${taskAction}-aborted-${eventId}`,
+        this.restoreBackupContentAborted
+      );
+
+      // register to task completion
+      this.core.$root.$once(
+        `${taskAction}-completed-${eventId}`,
+        this.restoreBackupContentCompleted
+      );
+
+      const payload = {
+        destination: this.selectedRepositoryId,
+        repopath: this.selectedRepository.path,
+        snapshot: this.selectedSnapshotId,
+      };
+
+      if (this.mailboxKind === "user") {
+        payload.user = this.mailbox.user;
+        payload.folder = this.selectedFolder;
+      } else {
+        payload.user = "vmail";
+        payload.folder = this.mailbox.mailbox;
+      }
+
+      const taskDescription =
+        this.mailboxKind === "user"
+          ? this.$t("mailboxes.restoring_mail_folder_for_user", {
+              name: this.mailboxName,
+            })
+          : this.$t("mailboxes.restoring_public_mailbox_name", {
+              name: this.mailboxName,
+            });
+
+      const res = await to(
+        this.createModuleTaskForApp(this.instanceName, {
+          action: taskAction,
+
+          data: payload,
+          extra: {
+            title: this.$t("action." + taskAction),
+            description: taskDescription,
+            eventId,
+          },
+        })
+      );
+      const err = res[0];
+
+      if (err) {
+        console.error(`error creating task ${taskAction}`, err);
+        this.error.restoreBackupContent = this.getErrorMessage(err);
+        this.loading.restoreBackupContent = false;
+        return;
+      }
+
+      // close modal immediately, no validation needed
+      this.$emit("hide");
+      this.loading.restoreBackupContent = false;
+      this.searchQuery = "";
+    },
+    restoreBackupContentAborted(taskResult, taskContext) {
+      console.error(`${taskContext.action} aborted`, taskResult);
+      this.error.restoreBackupContent = this.$t("error.generic_error");
+      this.loading.restoreBackupContent = false;
+    },
+    restoreBackupContentCompleted(taskContext, taskResult) {
+      if (taskResult.output.quota_disabled) {
+        // show a warning notification
+        const notification = {
+          id: this.getUuid(),
+          title: this.$t("mailboxes.mailbox_quota_changed"),
+          description: this.$t("mailboxes.mailbox_quota_changed_description", {
+            user: this.mailboxName,
+          }),
+          type: "warning",
+          toastTimeout: 0,
+          actionLabel: this.$t("mailboxes.go_to_mailboxes"),
+          action: {
+            type: "callback",
+            callback: () => {
+              this.goToAppPage(this.instanceName, "mailboxes", {
+                view: "user-mailboxes",
+              });
+            },
+          },
+        };
+
+        setTimeout(() => {
+          this.createNotificationForApp(notification);
+        }, 3000);
+      }
+
+      this.loading.restoreBackupContent = false;
+    },
+    async seekSnapshotContents() {
+      this.loading.seekSnapshotContents = true;
+      this.error.seekSnapshotContents = "";
+      const taskAction = "seek-snapshot-contents";
+      const eventId = this.getUuid();
+
+      // register to task error
+      this.core.$root.$once(
+        `${taskAction}-aborted-${eventId}`,
+        this.seekSnapshotContentsAborted
+      );
+
+      // register to task completion
+      this.core.$root.$once(
+        `${taskAction}-completed-${eventId}`,
+        this.seekSnapshotContentsCompleted
+      );
+
+      const res = await to(
+        this.createModuleTaskForApp(this.instanceName, {
+          action: taskAction,
+          data: {
+            destination: this.selectedRepositoryId,
+            user: this.mailbox.user,
+            repopath: this.selectedRepository.path,
+            snapshot: this.selectedSnapshotId,
+          },
+          extra: {
+            title: this.$t("action." + taskAction),
+            isNotificationHidden: true,
+            eventId,
+          },
+        })
+      );
+      const err = res[0];
+
+      if (err) {
+        console.error(`error creating task ${taskAction}`, err);
+        this.error.seekSnapshotContents = this.getErrorMessage(err);
+        this.loading.seekSnapshotContents = false;
+        return;
+      }
+    },
+    seekSnapshotContentsAborted(taskResult, taskContext) {
+      console.error(`${taskContext.action} aborted`, taskResult);
+      this.error.seekSnapshotContents = this.$t("error.generic_error");
+      this.loading.seekSnapshotContents = false;
+    },
+    seekSnapshotContentsCompleted(taskContext, taskResult) {
+      this.folderOptions = taskResult.output.folders.map((folder) => ({
+        name: folder,
+        label: folder,
+        value: folder,
+      }));
+      this.loading.seekSnapshotContents = false;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.mb-9 {
+  margin-bottom: 9rem;
+}
+</style>
diff --git a/ui/src/components/mailboxes/UserMailboxes.vue b/ui/src/components/mailboxes/UserMailboxes.vue
index b5b74b75..f920b561 100644
--- a/ui/src/components/mailboxes/UserMailboxes.vue
+++ b/ui/src/components/mailboxes/UserMailboxes.vue
@@ -163,6 +163,16 @@
                         :label="core.$t('common.edit')"
                       />
                     </cv-overflow-menu-item>
+                    <cv-overflow-menu-item
+                      @click="showRestoreFolderModal(row)"
+                      :data-test-id="row.user + '-restore'"
+                      :disabled="row.enabled == false"
+                    >
+                      <NsMenuItem
+                        :icon="RecentlyViewed20"
+                        :label="$t('mailboxes.restore_folder')"
+                      />
+                    </cv-overflow-menu-item>
                     <cv-overflow-menu-item
                       @click="toggleMailboxEnabled(row)"
                       :data-test-id="row.user + '-set-enabled'"
@@ -200,6 +210,13 @@
       @hide="hideConfirmDisableMailbox"
       @confirm="setMailboxEnabled(false)"
     />
+    <!-- restore folder modal -->
+    <RestoreFolderModal
+      :isShown="isShownRestoreFolderModal"
+      :mailbox="currentMailbox"
+      mailboxKind="user"
+      @hide="hideRestoreFolderModal"
+    />
   </div>
 </template>
 
@@ -214,10 +231,16 @@ import {
 import to from "await-to-js";
 import EditUserMailboxModal from "./EditUserMailboxModal";
 import ConfirmDisableMailboxModal from "./ConfirmDisableMailboxModal";
+import RecentlyViewed20 from "@carbon/icons-vue/es/recently-viewed/20";
+import RestoreFolderModal from "./RestoreFolderModal";
 
 export default {
   name: "UserMailboxes",
-  components: { EditUserMailboxModal, ConfirmDisableMailboxModal },
+  components: {
+    EditUserMailboxModal,
+    ConfirmDisableMailboxModal,
+    RestoreFolderModal,
+  },
   mixins: [QueryParamService, UtilService, IconService, TaskService],
   data() {
     return {
@@ -228,6 +251,8 @@ export default {
       isShownEditUserMailboxModal: false,
       defaultSpamRetention: 0,
       isShownConfirmDisableMailbox: false,
+      RecentlyViewed20,
+      isShownRestoreFolderModal: false,
       loading: {
         listUserMailboxes: false,
         alterUserMailbox: false,
@@ -307,6 +332,13 @@ export default {
     hideEditUserMailboxModal() {
       this.isShownEditUserMailboxModal = false;
     },
+    showRestoreFolderModal(mailbox) {
+      this.currentMailbox = mailbox;
+      this.isShownRestoreFolderModal = true;
+    },
+    hideRestoreFolderModal() {
+      this.isShownRestoreFolderModal = false;
+    },
     toggleMailboxEnabled(mailbox) {
       this.currentMailbox = mailbox;
 
diff --git a/ui/src/main.js b/ui/src/main.js
index 64e3eaff..ce1faca1 100644
--- a/ui/src/main.js
+++ b/ui/src/main.js
@@ -28,7 +28,15 @@ Vue.use(VueDateFns);
 import LottieAnimation from "lottie-web-vue";
 Vue.use(LottieAnimation);
 
-import vueDebounce from "vue-debounce";
+import InfiniteLoading from "vue-infinite-loading";
+Vue.use(InfiniteLoading, {
+  slots: {
+    noResults: "",
+    noMore: "",
+  },
+});
+
+import vueDebounce from "vue2-debounce";
 Vue.use(vueDebounce);
 
 // filters
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 6239cb60..89c78508 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -1012,10 +1012,10 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
-"@nethserver/ns8-ui-lib@^0.1.31":
-  version "0.1.31"
-  resolved "https://registry.yarnpkg.com/@nethserver/ns8-ui-lib/-/ns8-ui-lib-0.1.31.tgz#3dab2dde84441696e6a36b9e5d0e2dad913a691d"
-  integrity sha512-0r5Vcae6+rsOfOCYOgjCjr5JbIGZx4Qyq3biD3h66AoGBJSADfVDY3RWqlsu9yD0gHtC87Av0SJ18R9qq7ET0Q==
+"@nethserver/ns8-ui-lib@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@nethserver/ns8-ui-lib/-/ns8-ui-lib-1.2.1.tgz#1c44f886af63cb8bfbd4fb07ef72163cb3ac5ecf"
+  integrity sha512-vcAFwsDHpTU2jE1Rc9avl22gE7rokGf1nIPzqAynywfuyaa6djzSnP61lJSDHTKQ3oFAd5bzi68McPntLQNAHQ==
   dependencies:
     "@rollup/plugin-json" "^4.1.0"
     core-js "^3.15.2"
@@ -5741,6 +5741,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+mark.js@^8.11.1:
+  version "8.11.1"
+  resolved "https://registry.yarnpkg.com/mark.js/-/mark.js-8.11.1.tgz#180f1f9ebef8b0e638e4166ad52db879beb2ffc5"
+  integrity sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.npmmirror.com/md5.js/download/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -8721,11 +8726,6 @@ vue-date-fns@^2.0.1:
   dependencies:
     date-fns "^2.0.0"
 
-vue-debounce@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/vue-debounce/-/vue-debounce-4.0.0.tgz#3f584dabc08a841a0182ab68d19f77f70a416fcc"
-  integrity sha512-+BrcKfLpyDpUJ58ZrAvI35irRCgYHFpnF3NJZwwaz8/kkKmEq6TWPXBIhLh2HQAsUZNwo52K/vQyiEFsJ/1RYA==
-
 vue-eslint-parser@^7.0.0:
   version "7.8.0"
   resolved "https://registry.npmmirror.com/vue-eslint-parser/download/vue-eslint-parser-7.8.0.tgz#43850bf856c9a69d62c0e12769609c338423684b"
@@ -8749,6 +8749,11 @@ vue-i18n@^8.24.4:
   resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.24.5.tgz#7127a666d5be2199be69be39e439a419a90ff931"
   integrity sha512-p8W5xOmniuZ8fj76VXe0vBL3bRWVU87jHuC/v8VwmhKVH2iMQsKnheB1U+umxDBqC/5g9K+NwzokepcLxnBAVQ==
 
+vue-infinite-loading@^2.4.5:
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/vue-infinite-loading/-/vue-infinite-loading-2.4.5.tgz#cc20fd40af7f20188006443c99b60470cf1de1b3"
+  integrity sha512-xhq95Mxun060bRnsOoLE2Be6BR7jYwuC89kDe18+GmCLVrRA/dU0jrGb12Xu6NjmKs+iTW0AA6saSEmEW4cR7g==
+
 "vue-loader-v16@npm:vue-loader@^16.1.0":
   version "16.3.0"
   resolved "https://registry.npmmirror.com/vue-loader/download/vue-loader-16.3.0.tgz?cache=0&sync_timestamp=1624994254628&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fvue-loader%2Fdownload%2Fvue-loader-16.3.0.tgz#2f195e4ba0fb0e263596d6830df17d1a36e8936c"
@@ -8795,6 +8800,11 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.npmmirror.com/vue-template-es2015-compiler/download/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=
 
+vue2-debounce@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/vue2-debounce/-/vue2-debounce-1.0.1.tgz#2b4da2fe9d34f9c8be08ead9e8e68b988fd15f98"
+  integrity sha512-tZX6QltRUuGn9WUUVJDTWUmAqGugIUKcQN4praNAW4ZQPtBIyyZfvCLq7hKOOSdFhVRloXeFnCZvETibEgKNOw==
+
 vue@^2.6.11, vue@^2.6.12:
   version "2.6.14"
   resolved "https://registry.npmmirror.com/vue/download/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"