From a95b832a1f3bb72e1dd26c73b1dce6843f14605d Mon Sep 17 00:00:00 2001
From: Caroline Desprat <cdesprat@icij.org>
Date: Thu, 3 Oct 2024 11:55:53 +0000
Subject: [PATCH] feat: add plugin settings by grouping extensions and plugins
 under "addon"

---
 src/components/Addon/AddonCardInstance.vue |   8 +-
 src/enums/addons.js                        |  21 ++++
 src/lang/en.json                           |  20 ++--
 src/router/index.js                        |   6 +-
 src/views/Settings/SettingsView.vue        |   4 +-
 src/views/Settings/SettingsViewAddons.vue  | 116 +++++++++++++++++++++
 src/views/Settings/SettingsViewPlugins.vue |  12 ---
 7 files changed, 159 insertions(+), 28 deletions(-)
 create mode 100644 src/enums/addons.js
 create mode 100644 src/views/Settings/SettingsViewAddons.vue
 delete mode 100644 src/views/Settings/SettingsViewPlugins.vue

diff --git a/src/components/Addon/AddonCardInstance.vue b/src/components/Addon/AddonCardInstance.vue
index a13034bf26..16628a2714 100644
--- a/src/components/Addon/AddonCardInstance.vue
+++ b/src/components/Addon/AddonCardInstance.vue
@@ -5,10 +5,10 @@ import { useI18n } from 'vue-i18n'
 
 import AddonCard from '@/components/Addon/AddonCard'
 import { useCore } from '@/composables/core'
+import { ADDON_TYPE, addonTypeValidator } from '@/enums/addons'
 
-const EXTENSION = 'extension'
 const props = defineProps({
-  addonType: { type: String, validator: (s) => ['extension', 'plugin'].includes(s.toLowerCase()) },
+  addonType: { type: String, validator: addonTypeValidator },
   id: { type: String, required: true },
   name: { type: String, required: true },
   version: { type: String, required: true },
@@ -49,10 +49,10 @@ const recommendedVersion = computed(() => {
 const homepage = computed(() => props.deliverableFromRegistry?.homepage ?? null)
 
 const addonInstallFn = computed(() => {
-  return props.addonType === EXTENSION ? core.api.installExtensionFromId : core.api.installPluginFromId
+  return props.addonType === ADDON_TYPE.EXTENSION ? core.api.installExtensionFromId : core.api.installPluginFromId
 })
 const addonUninstallFn = computed(() => {
-  return props.addonType === EXTENSION ? core.api.uninstallExtension : core.api.uninstallPlugin
+  return props.addonType === ADDON_TYPE.EXTENSION ? core.api.uninstallExtension : core.api.uninstallPlugin
 })
 async function install() {
   const toast = {
diff --git a/src/enums/addons.js b/src/enums/addons.js
new file mode 100644
index 0000000000..9321567c84
--- /dev/null
+++ b/src/enums/addons.js
@@ -0,0 +1,21 @@
+// SINGULAR
+const EXTENSION = 'extension'
+const PLUGIN = 'plugin'
+export const ADDON_TYPE = Object.freeze({
+  EXTENSION,
+  PLUGIN
+})
+export const ADDON_TYPES = Object.values(ADDON_TYPE)
+
+export const addonTypeValidator = (s) => ADDON_TYPES.includes(s.toLowerCase())
+
+// PLURAL
+const EXTENSIONS = 'extensions'
+const PLUGINS = 'plugins'
+export const ADDONS_TYPE = Object.freeze({
+  EXTENSIONS,
+  PLUGINS
+})
+export const ADDONS_TYPES = Object.values(ADDONS_TYPE)
+
+export const addonsTypeValidator = (s) => ADDONS_TYPES.includes(s)
diff --git a/src/lang/en.json b/src/lang/en.json
index 31351f6f4e..73c817a73e 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -1162,17 +1162,21 @@
     },
     "document-processing":{"title": "Document Processing" },
     "batch-tasks":{"title": "Batch Tasks" },
-    "plugins":{"title": "Plugins" },
+
     "addons": {
       "installFromUrl": "Install from a URL",
-      "install": "Install"
-    },
-    "extensions":{
-      "title": "Extensions",
-      "info": "Extensions are programs that you add to Datashare's back-end to add new features to store and manipulate data.",
-      "searchPlaceholder": "Search extensions"
+      "install": "Install",
+      "plugins":{
+        "title": "Plugins",
+        "info": "Plugins are front-end modules to add new features in Datashare's user interface.",
+        "searchPlaceholder": "Search plugins"
+      },
+      "extensions":{
+        "title": "Extensions",
+        "info": "Extensions are back-end modules to add new features to store and manipulate data with Datashare.",
+        "searchPlaceholder": "Search extensions"
+      }
     }
-
   },
   "serverSettings": {
     "title": "Server Settings",
diff --git a/src/router/index.js b/src/router/index.js
index 476118fd1c..d6c44b6677 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -429,7 +429,8 @@ export const routes = [
           {
             name: 'settings.plugins',
             path: 'plugins',
-            component: () => import('@/views/Settings/SettingsViewPlugins'),
+            component: () => import('@/views/Settings/SettingsViewAddons'),
+            props: { addonsType: 'plugins' },
             meta: {
               title: 'Plugins',
               breadcrumb: false
@@ -438,7 +439,8 @@ export const routes = [
           {
             name: 'settings.extensions',
             path: 'extensions',
-            component: () => import('@/views/Settings/SettingsViewExtensions'),
+            component: () => import('@/views/Settings/SettingsViewAddons'),
+            props: { addonsType: 'extensions' },
             meta: {
               title: 'Extensions',
               breadcrumb: false
diff --git a/src/views/Settings/SettingsView.vue b/src/views/Settings/SettingsView.vue
index 3d1c2ed925..079587c62d 100644
--- a/src/views/Settings/SettingsView.vue
+++ b/src/views/Settings/SettingsView.vue
@@ -11,8 +11,8 @@ const tabs = computed(() => [
   { icon: 'moon', title: t('settings.appearance.title'), name: 'settings.appearance' },
   { icon: 'file-text', title: t('settings.document-processing.title'), name: 'settings.document-processing' },
   { icon: 'rocket-launch', title: t('settings.batch-tasks.title'), name: 'settings.batch-tasks' },
-  { icon: 'monitor', title: t('settings.plugins.title'), name: 'settings.plugins' },
-  { icon: 'database', title: t('settings.extensions.title'), name: 'settings.extensions' }
+  { icon: 'monitor', title: t('settings.addons.plugins.title'), name: 'settings.plugins' },
+  { icon: 'database', title: t('settings.addons.extensions.title'), name: 'settings.extensions' }
 ])
 </script>
 
diff --git a/src/views/Settings/SettingsViewAddons.vue b/src/views/Settings/SettingsViewAddons.vue
new file mode 100644
index 0000000000..ca99448211
--- /dev/null
+++ b/src/views/Settings/SettingsViewAddons.vue
@@ -0,0 +1,116 @@
+<script setup>
+/**
+ * A list of extensions for the frontend.
+ */
+
+import { computed, onBeforeMount, ref } from 'vue'
+import { uniqueId } from 'lodash'
+import { useI18n } from 'vue-i18n'
+import Fuse from 'fuse.js'
+
+import { useCore } from '@/composables/core'
+import AddonUrlInput from '@/components/Addon/AddonUrlInput'
+import AddonCardInstance from '@/components/Addon/AddonCardInstance'
+import SettingsViewLayout from '@/views/Settings/SettingsViewLayout'
+import { ADDONS_TYPE, addonsTypeValidator } from '@/enums/addons'
+
+defineOptions({ name: 'SettingsViewAddons' })
+const props = defineProps({ addonsType: { type: String, validator: addonsTypeValidator } })
+
+const { toastedPromise, core, wait } = useCore()
+const { t } = useI18n()
+
+const loaderId = uniqueId(`${props.addonType}-loader-`)
+
+const addons = ref([])
+const url = ref('')
+const isLoading = ref(false)
+const filterTerm = ref('')
+
+onBeforeMount(() => {
+  return loadAddons()
+})
+
+async function installFromUrl(urlToInstall) {
+  isLoading.value = true
+  try {
+    const toast = {
+      successMessage: t(`${props.addonType}.submitSuccess`),
+      errorMessage: t(`${props.addonType}.submitError`)
+    }
+    const promise = installAddonFromUrlFn.value(urlToInstall)
+    await toastedPromise(promise, toast)
+  } catch (e) {
+  } finally {
+    isLoading.value = false
+    url.value = ''
+  }
+}
+const infoLabel = computed(() => t(`settings.addons.${props.addonsType}.info`))
+const dismissInfoLabel = computed(() => t('settings.layout.infoDismiss'))
+const searchPlaceholder = computed(() => t(`settings.addons.${props.addonsType}.searchPlaceholder`))
+
+const installAddonFromUrlFn = computed(() =>
+  props.addonType === ADDONS_TYPE.EXTENSIONS
+    ? core.api.installExtensionFromUrl.bind(core.api)
+    : core.api.installPluginFromUrl.bind(core.api)
+)
+const retrieveAddonsFn = computed(() =>
+  props.addonsType === ADDONS_TYPE.EXTENSIONS
+    ? core.api.getExtensions.bind(core.api)
+    : core.api.getPlugins.bind(core.api)
+)
+
+async function loadAddons(searchTerm) {
+  wait.start(loaderId)
+  try {
+    addons.value = await retrieveAddonsFn.value(searchTerm)
+  } catch (e) {
+    console.log('err', e)
+  } finally {
+    wait.end(loaderId)
+  }
+}
+const fuse = computed(() => {
+  const options = {
+    includeScore: true,
+    keys: ['deliverableFromRegistry.name', 'name'],
+    shouldSort: true
+  }
+  return new Fuse(addons.value, options)
+})
+
+const filteredAddons = computed(() => {
+  if (filterTerm.value.length > 0) {
+    return fuse.value.search(filterTerm.value).map((r) => r.item)
+  }
+  return addons.value
+})
+</script>
+<template>
+  <settings-view-layout info-name="extensions" :info-label="infoLabel" :dismiss-info-label="dismissInfoLabel">
+    <template #filter
+      ><form-control-search v-model="filterTerm" :placeholder="searchPlaceholder" clear-text
+    /></template>
+    <div class="col-8">
+      <addon-url-input v-model="url" :loading="isLoading" @install="installFromUrl" />
+    </div>
+    <v-wait :for="loaderId" class="row g-4">
+      <div v-for="addon in filteredAddons" :key="addon.id" class="col-12 col-xl-6 d-flex">
+        <addon-card-instance
+          :id="addon.id"
+          addon-type="extension"
+          :name="addon.name"
+          :version="addon.version"
+          :description="addon.description"
+          :installed="addon.installed"
+          :deliverable-from-registry="addon.deliverableFromRegistry"
+          @installed="addon.installed = true"
+          @uninstalled="addon.installed = false"
+        />
+      </div>
+    </v-wait>
+  </settings-view-layout>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/Settings/SettingsViewPlugins.vue b/src/views/Settings/SettingsViewPlugins.vue
deleted file mode 100644
index fa810a3268..0000000000
--- a/src/views/Settings/SettingsViewPlugins.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup>
-/**
- * A list of plugins for the backend.
- */
-
-defineOptions({ name: 'SettingsViewPlugins' })
-</script>
-<template>
-  <div class="settings-view-plugins my-4">settings-view-plugins</div>
-</template>
-
-<style scoped lang="scss"></style>