From d7458a2fab99b51a55d12e0cb9956075ace9ea22 Mon Sep 17 00:00:00 2001
From: Joao Mario Lago <joao.mario.lago@hotmail.com>
Date: Mon, 20 May 2024 15:56:41 -0300
Subject: [PATCH] frontend: Add extension manifest settings

---
 .../components/kraken/ExtensionSettings.vue   | 381 ++++++++++++++++++
 .../src/views/ExtensionManagerView.vue        |  26 +-
 2 files changed, 405 insertions(+), 2 deletions(-)
 create mode 100644 core/frontend/src/components/kraken/ExtensionSettings.vue

diff --git a/core/frontend/src/components/kraken/ExtensionSettings.vue b/core/frontend/src/components/kraken/ExtensionSettings.vue
new file mode 100644
index 0000000000..330d33e208
--- /dev/null
+++ b/core/frontend/src/components/kraken/ExtensionSettings.vue
@@ -0,0 +1,381 @@
+<template>
+  <v-dialog v-model="settings_open" width="500px">
+    <v-card min-width="100%">
+      <v-app-bar>
+        <v-toolbar-title>Extensions Manifest</v-toolbar-title>
+        <v-spacer />
+      </v-app-bar>
+      <v-card class="px-3 pb-3 mx-2" elevation="0">
+        <v-list>
+          <v-card-subtitle class="text-md-center" max-width="30">
+            Drag manifest sources to set priority. <br /><b>Top ones have higher priority.</b>
+          </v-card-subtitle>
+          <draggable v-model="manifests">
+            <v-card
+              v-for="(element, index) in manifests"
+              :key="index"
+              class="pl-3 ma-2 pa-1 d-flex align-center justify-center"
+              style="cursor: pointer;"
+            >
+              {{ order(index + 1) }}
+              <v-spacer />
+              {{ element.name }}
+              <v-spacer />
+              <v-btn
+                icon
+                :disabled="element.factory"
+                tooltip="Delete Source"
+                @click="removeSource(element.identifier)"
+              >
+                <v-icon>mdi-delete</v-icon>
+              </v-btn>
+              <v-btn
+                icon
+                @click="setEditingModal(element)"
+              >
+                <v-icon>{{ element.factory ? 'mdi-pencil-lock' : 'mdi-pencil' }}</v-icon>
+              </v-btn>
+              <v-icon v-text="'mdi-drag'" />
+            </v-card>
+          </draggable>
+          <v-card
+            class="ma-2 py-1 mt-4 d-flex align-center justify-center"
+            @click.prevent="setCreateModal"
+          >
+            <v-spacer />
+            <v-icon>mdi-plus</v-icon>
+            <v-spacer />
+          </v-card>
+        </v-list>
+        <v-alert
+          v-if="has_operation_error"
+          class="mx-2"
+          type="error"
+        >
+          {{ operation_error }}
+        </v-alert>
+        <v-progress-linear
+          v-if="operation_loading"
+          indeterminate
+          min-width="300"
+        />
+        <v-divider />
+        <v-card-actions class="justify-center mt-1">
+          <v-btn
+            color="primary"
+            @click="settings_open = false"
+          >
+            Cancel
+          </v-btn>
+          <v-spacer />
+          <v-btn
+            color="success"
+            @click="reorderSources"
+          >
+            Apply
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-card>
+    <v-dialog v-model="operation_open" width="600px">
+      <v-card elevation="0">
+        <v-card-title class="mb-7">
+          {{ is_editing ? 'Update Source' : 'Add a new source' }}
+        </v-card-title>
+        <v-card-subtitle class="text-md-center" max-width="30">
+          <b>Factory sources can only be enabled/disabled.</b>
+        </v-card-subtitle>
+        <v-text-field
+          v-model="source_url"
+          :disabled="is_factory"
+          class="mx-6"
+          label="URL"
+          outlined
+          dense
+          @input="deductNameFromURL"
+        />
+        <v-text-field
+          v-model="source_name"
+          :disabled="is_factory"
+          class="mx-6 pr-8"
+          label="Name"
+          outlined
+          dense
+          @input="blockNameAutoComplete"
+        />
+        <v-checkbox
+          v-model="source_enabled"
+          class="mx-6 mt-0"
+          label="Source Enabled"
+        />
+        <v-divider />
+        <v-card-actions class="justify-center pb-4 mt-3 mx-1">
+          <v-btn
+            color="primary"
+            @click="operation_open = false"
+          >
+            Cancel
+          </v-btn>
+          <v-spacer />
+          <v-btn
+            color="success"
+            @click="applySubModalAction"
+          >
+            Apply
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+import { Manifest, ManifestSource } from '@/types/kraken'
+import back_axios from '@/utils/api'
+
+const KRAKEN_API_V2_URL = '/kraken/v2.0'
+
+export default Vue.extend({
+  name: 'ExtensionSettings',
+  props: {
+    value: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      settings_open: false,
+      operation_open: false,
+
+      operation_loading: false,
+      operation_error: undefined as string | undefined,
+
+      source_name: '',
+      source_url: '',
+      source_enabled: true,
+      allow_deduct_name: true,
+      source_url_copy_icon: 'mdi-content-copy',
+
+      editing_source: undefined as Manifest | undefined,
+
+      manifests: [] as Manifest[],
+    }
+  },
+  computed: {
+    is_editing(): boolean {
+      return this.editing_source !== undefined
+    },
+    is_factory(): boolean {
+      return this.editing_source?.factory ?? false
+    },
+    has_operation_error(): boolean {
+      return this.operation_error !== undefined
+    },
+  },
+  watch: {
+    value(val) {
+      this.settings_open = val
+
+      if (val) {
+        this.fetchManifestsSources()
+      }
+    },
+    settings_open(val) {
+      this.$emit('input', val)
+
+      if (!val) {
+        this.$emit('refresh')
+      }
+    },
+  },
+  methods: {
+    order(index: number): string {
+      // Based over: https://stackoverflow.com/a/39466341
+      return `${index}${['st', 'nd', 'rd'][((index + 90) % 100 - 10) % 10 - 1] || 'th'}`
+    },
+    copyURLToClipboard() {
+      navigator.clipboard.writeText(this.source_url)
+      this.source_url_copy_icon = 'mdi-check'
+      setTimeout(() => {
+        this.source_url_copy_icon = 'mdi-content-copy'
+      }, 500)
+    },
+    blockNameAutoComplete() {
+      this.allow_deduct_name = false
+    },
+    deductNameFromURL() {
+      if (!(this.allow_deduct_name && URL.canParse(this.source_url))) {
+        return
+      }
+
+      const cut_path = new URL(this.source_url).pathname.slice(1)
+      if (cut_path === '') {
+        return
+      }
+      const parts = cut_path.split('/').filter((part) => !part.endsWith('.json') && !part.endsWith('.txt'))
+
+      this.source_name = `${parts[0] ?? ''} ${parts[1] ?? ''}`.trim()
+    },
+    prepareRequest() {
+      this.operation_loading = true
+      this.operation_error = undefined
+    },
+    setDefaultModal() {
+      this.source_name = ''
+      this.source_url = ''
+      this.source_enabled = true
+      this.editing_source = undefined
+      this.allow_deduct_name = true
+    },
+    setEditingModal(manifest: Manifest) {
+      this.source_name = manifest.name
+      this.source_url = manifest.url
+      this.source_enabled = manifest.enabled
+      this.editing_source = manifest
+      this.allow_deduct_name = false
+
+      this.operation_open = true
+    },
+    setCreateModal() {
+      this.setDefaultModal()
+
+      this.operation_open = true
+    },
+    async applySubModalAction() {
+      // Close the sub modal as soon as applied since errors and loading are performed on main modal
+      this.operation_open = false
+
+      if (this.is_editing) {
+        if (this.is_factory) {
+          await this.setSourceEnable(this.editing_source!.identifier, this.source_enabled)
+        } else {
+          await this.updateSource(
+            this.editing_source!.identifier,
+            this.source_name,
+            this.source_url,
+            this.source_enabled,
+          )
+        }
+      } else {
+        await this.addSource(this.source_name, this.source_url, this.source_enabled)
+      }
+    },
+    async fetchManifestsSources() {
+      this.prepareRequest()
+
+      try {
+        const sources = await back_axios({
+          method: 'get',
+          url: `${KRAKEN_API_V2_URL}/manifest/?data=false`,
+          timeout: 20000,
+        })
+
+        this.manifests = sources.data as Manifest[]
+      } catch (error) {
+        this.operation_error = `Unable to fetch manifest sources: ${error}`
+      } finally {
+        this.operation_loading = false
+      }
+    },
+    async addSource(name: string, url: string, enabled: boolean) {
+      this.prepareRequest()
+
+      try {
+        const source = { name, url, enabled } as ManifestSource
+
+        await back_axios({
+          method: 'post',
+          url: `${KRAKEN_API_V2_URL}/manifest/`,
+          data: source,
+          timeout: 20000,
+        })
+
+        this.fetchManifestsSources()
+      } catch (error) {
+        this.operation_error = `Unable to add manifest source: ${error}`
+      } finally {
+        this.operation_loading = false
+      }
+    },
+    async removeSource(identifier: string) {
+      this.prepareRequest()
+
+      try {
+        await back_axios({
+          method: 'delete',
+          url: `${KRAKEN_API_V2_URL}/manifest/${identifier}`,
+          timeout: 15000,
+        })
+
+        this.fetchManifestsSources()
+      } catch (error) {
+        this.operation_error = `Unable to remove manifest source: ${error}`
+      } finally {
+        this.operation_loading = false
+      }
+    },
+    async updateSource(identifier: string, name: string, url: string, enabled: boolean) {
+      this.prepareRequest()
+
+      try {
+        const source = { name, url, enabled } as ManifestSource
+
+        await back_axios({
+          method: 'put',
+          url: `${KRAKEN_API_V2_URL}/manifest/${identifier}/details`,
+          data: source,
+          timeout: 20000,
+        })
+
+        this.fetchManifestsSources()
+      } catch (error) {
+        this.operation_error = `Unable to update manifest source: ${error}`
+      } finally {
+        this.operation_loading = false
+      }
+    },
+    async reorderSources() {
+      this.prepareRequest()
+
+      const ids = this.manifests.map((manifest) => manifest.identifier)
+      try {
+        await back_axios({
+          method: 'put',
+          url: `${KRAKEN_API_V2_URL}/manifest/orders`,
+          data: ids,
+          timeout: 20000,
+        })
+
+        // After some successful apply we should close the main modal to keep consistency
+        this.settings_open = false
+      } catch (error) {
+        this.operation_error = `Unable to update order: ${error}`
+      } finally {
+        this.operation_loading = false
+      }
+    },
+    async setSourceEnable(identifier: string, enable: boolean) {
+      this.prepareRequest()
+
+      try {
+        const postfix = enable ? 'enable' : 'disable'
+
+        await back_axios({
+          method: 'post',
+          url: `${KRAKEN_API_V2_URL}/manifest/${identifier}/${postfix}`,
+          timeout: 10000,
+        })
+
+        this.fetchManifestsSources()
+      } catch (error) {
+        this.operation_error = `Unable to ${enable ? 'enable' : 'disable'} source: ${error}`
+      } finally {
+        this.operation_loading = false
+      }
+    },
+  },
+})
+</script>
diff --git a/core/frontend/src/views/ExtensionManagerView.vue b/core/frontend/src/views/ExtensionManagerView.vue
index 9e01282ae9..0c1d2c0e75 100644
--- a/core/frontend/src/views/ExtensionManagerView.vue
+++ b/core/frontend/src/views/ExtensionManagerView.vue
@@ -17,6 +17,10 @@
         @clicked="performActionFromModal"
       />
     </v-dialog>
+    <extension-settings
+      v-model="show_settings"
+      @refresh="fetchManifest"
+    />
     <v-dialog
       v-model="show_log"
       width="80%"
@@ -62,7 +66,16 @@
           Installed
         </v-tab>
       </v-tabs>
-      <v-spacer class="search-container" />
+      <v-spacer class="tabs-container-spacer-right" />
+      <v-btn
+        v-tooltip="'Settings'"
+        icon
+        color="gray"
+        hide-details="auto"
+        @click="show_settings = true"
+      >
+        <v-icon>mdi-cog</v-icon>
+      </v-btn>
     </v-toolbar>
     <v-card
       v-if="tab === 0"
@@ -203,6 +216,7 @@ import SpinningLogo from '@/components/common/SpinningLogo.vue'
 import ExtensionCard from '@/components/kraken/ExtensionCard.vue'
 import CreationDialog from '@/components/kraken/ExtensionCreationDialog.vue'
 import ExtensionModal from '@/components/kraken/ExtensionModal.vue'
+import ExtensionSettings from '@/components/kraken/ExtensionSettings.vue'
 import InstalledExtensionCard from '@/components/kraken/InstalledExtensionCard.vue'
 import PullProgress from '@/components/utils/PullProgress.vue'
 import Notifier from '@/libs/notifier'
@@ -217,6 +231,7 @@ import {
 } from '../types/kraken'
 
 const API_URL = '/kraken/v1.0'
+const KRAKEN_API_V2_URL = '/kraken/v2.0'
 
 const notifier = new Notifier(kraken_service)
 
@@ -226,6 +241,7 @@ export default Vue.extend({
     ExtensionCard,
     InstalledExtensionCard,
     ExtensionModal,
+    ExtensionSettings,
     PullProgress,
     CreationDialog,
     SpinningLogo,
@@ -234,6 +250,7 @@ export default Vue.extend({
     return {
       tab: 0,
       show_dialog: false,
+      show_settings: false,
       installed_extensions: {} as Dictionary<InstalledExtensionData>,
       selected_extension: null as (null | ExtensionData),
       selected_companies: [] as string[],
@@ -439,7 +456,7 @@ export default Vue.extend({
     async fetchManifest(): Promise<void> {
       await back_axios({
         method: 'get',
-        url: `${API_URL}/extensions_manifest`,
+        url: `${KRAKEN_API_V2_URL}/manifest/consolidated`,
         timeout: 15000,
       })
         .then((response) => {
@@ -748,6 +765,11 @@ pre.logs {
   width: 50% !important;
 }
 
+.tabs-container-spacer-right {
+  flex: 1 1 auto;
+  width: 30% !important;
+}
+
 .v-input.expanding-search {
   transition: max-width 0.2s;
 }