From a40ea4855f01e4fd8bee5cbe0e21a2c098ba2882 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Thu, 5 Dec 2024 09:13:13 +0100
Subject: [PATCH] feat(ui): restore file or folder (#62)

---
 build-images.sh                               |   2 +-
 ui/package.json                               |   8 +-
 ui/public/i18n/en/translation.json            |  34 +-
 .../BackupRepositorySelector.vue              | 152 +++++
 .../shared-folders/BackupSnapshotSelector.vue | 147 +++++
 .../shared-folders/RestoreFileModal.vue       | 546 ++++++++++++++++++
 ui/src/main.js                                |  11 +
 ui/src/views/Shares.vue                       |  28 +-
 ui/yarn.lock                                  |  23 +-
 9 files changed, 939 insertions(+), 12 deletions(-)
 create mode 100644 ui/src/components/shared-folders/BackupRepositorySelector.vue
 create mode 100644 ui/src/components/shared-folders/BackupSnapshotSelector.vue
 create mode 100644 ui/src/components/shared-folders/RestoreFileModal.vue

diff --git a/build-images.sh b/build-images.sh
index 50cc6387..33d4a235 100644
--- a/build-images.sh
+++ b/build-images.sh
@@ -10,7 +10,7 @@ user_manager_version=v1.0.1
 container="ubuntu-working-container"
 # Prepare a local Ubuntu-based samba image
 if ! buildah inspect --type container "${container}" &>/dev/null; then
-    container=$(buildah from --name "${container}" docker.io/library/ubuntu:23.10)
+    container=$(buildah from --name "${container}" docker.io/library/ubuntu:24.04)
     buildah run "${container}" -- bash <<'EOF'
 set -e
 apt-get update
diff --git a/ui/package.json b/ui/package.json
index 957b6ad1..e45bbb22 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -6,23 +6,27 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "watch": "vue-cli-service build --watch"
+    "watch": "vue-cli-service build --watch",
+    "format": "prettier --write src/"
   },
   "dependencies": {
     "@carbon/icons-vue": "^10.37.0",
     "@carbon/vue": "^2.40.0",
-    "@nethserver/ns8-ui-lib": "^1.1.4",
+    "@nethserver/ns8-ui-lib": "^1.2.1",
     "await-to-js": "^3.0.0",
     "axios": "^0.21.2",
     "carbon-components": "^10.41.0",
     "core-js": "^3.6.5",
     "lottie-web-vue": "^1.2.0",
+    "mark.js": "^8.11.1",
     "sass": "^1.34.1",
     "vue": "^2.6.11",
     "vue-axios": "^3.2.4",
     "vue-date-fns": "^2.0.1",
     "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": {
diff --git a/ui/public/i18n/en/translation.json b/ui/public/i18n/en/translation.json
index 68043d8c..8c995951 100644
--- a/ui/public/i18n/en/translation.json
+++ b/ui/public/i18n/en/translation.json
@@ -4,7 +4,10 @@
         "work_in_progress": "Work in progress",
         "processing": "Processing...",
         "save": "Save",
-        "close": "Close"
+        "close": "Close",
+        "cancel": "Cancel",
+        "next": "Next",
+        "previous": "Previous"
     },
     "status": {
         "title": "Status",
@@ -60,7 +63,23 @@
         "set_shared_folder_permissions_explanation": "You are about to set new permissions on all files and subdirectories of shared folder '{name}'. This might take some time, depending on the size of the shared folder",
         "permissions": "Permissions",
         "set_permissions_for_share_name": "Set permissions for shared folder {name}",
-        "invalid_permissions": "Invalid permissions"
+        "invalid_permissions": "Invalid permissions",
+        "restore_file_or_folder": "Restore file or folder",
+        "restore": "Restore",
+        "select_backup_destination": "Select backup destination",
+        "select_backup_snapshot": "Select backup snapshot",
+        "select_file_or_folder_to_restore": "Select file or folder to restore",
+        "no_backup_destination": "No backup destination",
+        "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 snapshot to restore",
+        "search_file_or_folder": "Search file or folder",
+        "restore_file_info": "The selected file or folder will be restored to '{restoredFolder}'. Ensure there is sufficient space on {node} to avoid restore failure.",
+        "restoring_to_share_name": "Restoring to share '{name}'"
     },
     "about": {
         "title": "About"
@@ -82,7 +101,10 @@
         "alter-share": "Edit description",
         "remove-share": "Delete shared folder",
         "list-domain-groups": "List domain groups",
-        "reset-share-acls": "Set shared folder permissions"
+        "reset-share-acls": "Set shared folder permissions",
+        "restore-backup-content": "Restore file or folder",
+        "seek-snapshot-contents": "Search matching files",
+        "read-backup-snapshots": "Read backup snapshots"
     },
     "error": {
         "error": "Error",
@@ -95,5 +117,11 @@
         "404": "Resource not found",
         "cannot_retrieve_module_info": "Cannot retrieve module info",
         "cannot_retrieve_installed_modules": "Cannot retrieve installed modules"
+    },
+    "ns_combo_search_box": {
+        "placeholder": "Search",
+        "clear_search": "Clear search",
+        "no_results": "No results",
+        "results_limit_reached": "Keep typing to show more options"
     }
 }
diff --git a/ui/src/components/shared-folders/BackupRepositorySelector.vue b/ui/src/components/shared-folders/BackupRepositorySelector.vue
new file mode 100644
index 00000000..1bb38f9b
--- /dev/null
+++ b/ui/src/components/shared-folders/BackupRepositorySelector.vue
@@ -0,0 +1,152 @@
+<!--
+  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('shares.no_backup_destination')"
+      />
+      <!-- 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("shares.from_node_name_of_this_cluster", {
+                  name: repo.node_fqdn,
+                })
+              }}
+            </template>
+            <template v-else>
+              {{
+                $t("shares.from_node_name_of_different_cluster", {
+                  name: repo.node_fqdn,
+                })
+              }}
+            </template>
+          </template>
+          <template v-else-if="repo.node_fqdn">
+            <!-- node only -->
+            {{
+              $t("shares.from_node_name", {
+                name: repo.node_fqdn,
+              })
+            }}
+          </template>
+          <template v-else>
+            <!-- cluster only -->
+            <template v-if="repo.is_generated_locally">
+              {{ $t("shares.from_this_cluster") }}
+            </template>
+            <template v-else>
+              {{ $t("shares.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,
+    },
+    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/shared-folders/BackupSnapshotSelector.vue b/ui/src/components/shared-folders/BackupSnapshotSelector.vue
new file mode 100644
index 00000000..6c813c45
--- /dev/null
+++ b/ui/src/components/shared-folders/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('shares.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("shares.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/shared-folders/RestoreFileModal.vue b/ui/src/components/shared-folders/RestoreFileModal.vue
new file mode 100644
index 00000000..bce64711
--- /dev/null
+++ b/ui/src/components/shared-folders/RestoreFileModal.vue
@@ -0,0 +1,546 @@
+<!--
+  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('shares.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">{{ $t("shares.restore_file_or_folder") }}</template>
+    <template slot="content">
+      <cv-form @submit.prevent="nextStep">
+        <template v-if="step == 'repository'">
+          <div class="mg-bottom-md">
+            {{ $t("shares.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-xlg mg-bottom-md no-padding">
+            <cv-row>
+              <cv-column>
+                <BackupRepositorySelector
+                  v-model="selectedRepositoryId"
+                  :repositories="backupRepositories"
+                  :loading="loading.listBackupRepositories"
+                  :light="true"
+                />
+              </cv-column>
+            </cv-row>
+          </cv-grid>
+        </template>
+        <template v-if="step == 'snapshot'">
+          <div>
+            {{ $t("shares.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-xlg 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 == 'file'">
+          <div>
+            {{ $t("shares.select_file_or_folder_to_restore") }}
+          </div>
+          <NsComboSearchBox
+            v-model="fileQuery"
+            :results="fileSearchResults"
+            :resultsLimitReached="resultsLimitReached"
+            :loadingResults="loading.seekSnapshotContents"
+            auto-highlight
+            :placeholder="$t('shares.search_file_or_folder')"
+            :invalid-message="error.group"
+            light
+            :clearFilterLabel="$t('ns_combo_search_box.clear_search')"
+            :noResultsLabel="$t('ns_combo_search_box.no_results')"
+            :resultsLimitReachedLabel="
+              $t('ns_combo_search_box.results_limit_reached')
+            "
+            ref="fileSearch"
+            class="mg-top-xlg"
+            @change="selectedFile = $event"
+            @search="seekSnapshotContents"
+          />
+          <!-- 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('shares.restore_file_info', {
+                restoredFolder: 'Restored folder',
+                node: installationNodeLabel,
+              })
+            "
+            :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,
+  NsComboSearchBox,
+} 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: "RestoreFileModal",
+  components: {
+    BackupRepositorySelector,
+    BackupSnapshotSelector,
+    NsComboSearchBox,
+  },
+  mixins: [UtilService, TaskService, IconService],
+  props: {
+    isShown: {
+      type: Boolean,
+      default: true,
+    },
+    shareName: String,
+  },
+  data() {
+    return {
+      step: "",
+      steps: ["repository", "snapshot", "file"],
+      backupRepositories: [],
+      backupSnapshots: [],
+      selectedRepositoryId: "",
+      selectedSnapshotId: "",
+      selectedFile: "",
+      fileQuery: "",
+      fileSearchResults: [],
+      resultsLimitReached: false,
+      status: null,
+      loading: {
+        listBackupRepositories: true,
+        restoreBackupContent: false,
+        readBackupSnapshots: false,
+        getStatus: false,
+        seekSnapshotContents: false,
+      },
+      error: {
+        listBackupRepositories: "",
+        restoreBackupContent: "",
+        readBackupSnapshots: "",
+        getStatus: "",
+        seekSnapshotContents: "",
+      },
+    };
+  },
+  computed: {
+    ...mapState(["instanceName", "core"]),
+    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 == "file" && !this.selectedFile)
+      );
+    },
+    selectedRepository() {
+      return this.backupRepositories.find(
+        (repo) => repo.repository_id === this.selectedRepositoryId
+      );
+    },
+    installationNodeLabel() {
+      if (this.status) {
+        if (this.status.node_ui_name) {
+          return this.status.node_ui_name;
+        } else {
+          return `${this.$t("status.node")} ${this.status.node}`;
+        }
+      } else {
+        return "-";
+      }
+    },
+  },
+  watch: {
+    step: function () {
+      if (this.step == "repository") {
+        this.selectedRepositoryId = "";
+      } else if (this.step == "snapshot") {
+        this.selectedSnapshotId = "";
+        this.readBackupSnapshots();
+      } else if (this.step == "file") {
+        this.selectedFile = "";
+        this.getStatus();
+      }
+    },
+  },
+  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.$root.$off(taskAction + "-aborted");
+      this.$root.$once(
+        `${taskAction}-aborted-${eventId}`,
+        this.restoreBackupContentAborted
+      );
+
+      // register to task completion
+      this.$root.$off(taskAction + "-completed");
+      this.$root.$once(
+        `${taskAction}-completed-${eventId}`,
+        this.restoreBackupContentCompleted
+      );
+
+      const res = await to(
+        this.createModuleTaskForApp(this.instanceName, {
+          action: taskAction,
+          data: {
+            snapshot: this.selectedSnapshotId,
+            destination: this.selectedRepositoryId,
+            repopath: this.selectedRepository.path,
+            share: this.shareName,
+            content: this.selectedFile,
+          },
+          extra: {
+            title: this.$t("action." + taskAction),
+            description: this.$t("shares.restoring_to_share_name", {
+              name: this.shareName,
+            }),
+          },
+        })
+      );
+      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.fileQuery = "";
+    },
+    restoreBackupContentAborted(taskResult, taskContext) {
+      console.error(`${taskContext.action} aborted`, taskResult);
+      this.error.restoreBackupContent = this.$t("error.generic_error");
+      this.loading.restoreBackupContent = false;
+    },
+    restoreBackupContentCompleted() {
+      this.loading.restoreBackupContent = false;
+    },
+    async getStatus() {
+      this.loading.getStatus = true;
+      this.error.getStatus = "";
+      const taskAction = "get-status";
+      const eventId = this.getUuid();
+
+      // register to task error
+      this.core.$root.$once(
+        `${taskAction}-aborted-${eventId}`,
+        this.getStatusAborted
+      );
+
+      // register to task completion
+      this.core.$root.$once(
+        `${taskAction}-completed-${eventId}`,
+        this.getStatusCompleted
+      );
+
+      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.getStatus = this.getErrorMessage(err);
+        this.loading.getStatus = false;
+        return;
+      }
+    },
+    getStatusAborted(taskResult, taskContext) {
+      console.error(`${taskContext.action} aborted`, taskResult);
+      this.error.getStatus = this.$t("error.generic_error");
+      this.loading.getStatus = false;
+    },
+    getStatusCompleted(taskContext, taskResult) {
+      this.status = taskResult.output;
+      this.loading.getStatus = false;
+    },
+    async seekSnapshotContents(textQuery) {
+      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: {
+            snapshot: this.selectedSnapshotId,
+            destination: this.selectedRepositoryId,
+            repopath: this.selectedRepository.path,
+            share: this.shareName,
+            limit: 50,
+            query: textQuery,
+          },
+          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.fileSearchResults = taskResult.output.contents.map((item) => ({
+        name: item,
+        label: item,
+        value: item,
+      }));
+
+      this.resultsLimitReached = taskResult.output.limit_reached;
+      this.loading.seekSnapshotContents = false;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.mb-9 {
+  margin-bottom: 9rem;
+}
+</style>
diff --git a/ui/src/main.js b/ui/src/main.js
index bb2d3035..8138d048 100644
--- a/ui/src/main.js
+++ b/ui/src/main.js
@@ -24,6 +24,17 @@ Vue.use(VueDateFns);
 import LottieAnimation from "lottie-web-vue";
 Vue.use(LottieAnimation);
 
+import InfiniteLoading from "vue-infinite-loading";
+Vue.use(InfiniteLoading, {
+  slots: {
+    noResults: "",
+    noMore: "",
+  },
+});
+
+import vueDebounce from "vue2-debounce";
+Vue.use(vueDebounce);
+
 // filters
 import { Filters } from "@nethserver/ns8-ui-lib";
 for (const f in Filters) {
diff --git a/ui/src/views/Shares.vue b/ui/src/views/Shares.vue
index 2f218779..b795fd83 100644
--- a/ui/src/views/Shares.vue
+++ b/ui/src/views/Shares.vue
@@ -58,8 +58,8 @@
                     @click="showCreateSharedFolderModal"
                     class="empty-state-button"
                     >{{ $t("shares.create_shared_folder") }}</NsButton
-                  ></template
-                >
+                  >
+                </template>
               </NsEmptyState>
             </cv-tile>
           </cv-column>
@@ -91,6 +91,12 @@
                       :label="$t('shares.set_permissions')"
                     />
                   </cv-overflow-menu-item>
+                  <cv-overflow-menu-item @click="showRestoreFileModal(share)">
+                    <NsMenuItem
+                      :icon="RecentlyViewed20"
+                      :label="$t('shares.restore_file_or_folder')"
+                    />
+                  </cv-overflow-menu-item>
                   <cv-overflow-menu-item
                     danger
                     @click="showDeleteShareModal(share)"
@@ -149,6 +155,12 @@
       @hide="hideSetPermissionsModal"
       @permissionsUpdated="onPermissionsUpdated"
     />
+    <!-- restore file modal -->
+    <RestoreFileModal
+      :isShown="isShownRestoreFileModal"
+      :shareName="currentShare ? currentShare.name : ''"
+      @hide="hideRestoreFileModal"
+    />
     <!-- delete share modal -->
     <NsDangerDeleteModal
       :isShown="isShownDeleteShareModal"
@@ -193,6 +205,8 @@ import CreateSharedFolderModal from "@/components/shared-folders/CreateSharedFol
 import EditDescriptionModal from "@/components/shared-folders/EditDescriptionModal.vue";
 import ShowAclsModal from "@/components/shared-folders/ShowAclsModal.vue";
 import SetPermissionsModal from "@/components/shared-folders/SetPermissionsModal.vue";
+import RecentlyViewed20 from "@carbon/icons-vue/es/recently-viewed/20";
+import RestoreFileModal from "@/components/shared-folders/RestoreFileModal.vue";
 
 export default {
   name: "Settings",
@@ -201,6 +215,7 @@ export default {
     EditDescriptionModal,
     ShowAclsModal,
     SetPermissionsModal,
+    RestoreFileModal,
   },
   mixins: [
     TaskService,
@@ -223,8 +238,10 @@ export default {
       isShownEditDescriptionModal: false,
       isShownAclsModal: false,
       isShownSetPermissionsModal: false,
+      isShownRestoreFileModal: false,
       isShownDeleteShareModal: false,
       currentShare: null,
+      RecentlyViewed20,
       loading: {
         listShares: false,
         removeShare: false,
@@ -331,6 +348,13 @@ export default {
     hideSetPermissionsModal() {
       this.isShownSetPermissionsModal = false;
     },
+    showRestoreFileModal(share) {
+      this.currentShare = share;
+      this.isShownRestoreFileModal = true;
+    },
+    hideRestoreFileModal() {
+      this.isShownRestoreFileModal = false;
+    },
     onPermissionsUpdated() {
       this.listShares();
     },
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 56eded4a..4266993b 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@^1.1.4":
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/@nethserver/ns8-ui-lib/-/ns8-ui-lib-1.1.4.tgz#6e8a47356c43773527c2d410e907c3dbe41326e2"
-  integrity sha512-z5lpixFPFlhBejMIYOFG6+YS74wcoppg1bat3WM1HTVo5gmpE3GVMOOIz+A2ThO9S/4ecWs6LG/GT/syQI2k5A==
+"@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"
@@ -8744,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.nlark.com%2Fvue-loader%2Fdownload%2Fvue-loader-16.3.0.tgz#2f195e4ba0fb0e263596d6830df17d1a36e8936c"
@@ -8790,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"