feat(ui): restore mail folder

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"

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",

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>

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>