From bd8c77e002e06bb9f9a7955c2e40dd50fc8fa11c Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild@klavaro.se>
Date: Thu, 28 Nov 2024 06:09:52 +0100
Subject: [PATCH] feat: Editable config file in browser

Fixes #178
---
 CHANGELOG.md                                 |  1 +
 src/corpus/config/CorpusConfigCustom.vue     | 33 +++----
 src/corpus/config/CorpusConfigCustomEdit.vue | 97 ++++++++++++++++++++
 src/corpus/config/CorpusConfigCustomHelp.vue | 20 ++++
 src/i18n/locales/en.yaml                     |  5 +-
 src/i18n/locales/sv.yaml                     |  7 +-
 src/router/corpus.routes.ts                  |  7 ++
 tailwind.config.ts                           |  6 +-
 8 files changed, 154 insertions(+), 22 deletions(-)
 create mode 100644 src/corpus/config/CorpusConfigCustomEdit.vue
 create mode 100644 src/corpus/config/CorpusConfigCustomHelp.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index effc7e3..359e751 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@ As this project is a user-facing application, the places in the semantic version
 ### Added
 
 - Add geotagging to the NER option [#174](https://github.com/spraakbanken/mink-frontend/issues/174)
+- Editable config file in browser [#178](https://github.com/spraakbanken/mink-frontend/issues/178)
 
 ### Fixed
 
diff --git a/src/corpus/config/CorpusConfigCustom.vue b/src/corpus/config/CorpusConfigCustom.vue
index cd7e82c..718e662 100644
--- a/src/corpus/config/CorpusConfigCustom.vue
+++ b/src/corpus/config/CorpusConfigCustom.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { AxiosError } from "axios";
-import { PhWarning } from "@phosphor-icons/vue";
+import { PhPencilSimple, PhWarning } from "@phosphor-icons/vue";
 import useCorpusIdParam from "@/corpus/corpusIdParam.composable";
 import useConfig from "@/corpus/config/config.composable";
 import { useAuth } from "@/auth/auth.composable";
@@ -11,6 +11,8 @@ import type { MinkResponse } from "@/api/api.types";
 import useMessenger from "@/message/messenger.composable";
 import SyntaxHighlight from "@/components/SyntaxHighlight.vue";
 import PendingContent from "@/spin/PendingContent.vue";
+import RouteButton from "@/components/RouteButton.vue";
+import CorpusConfigCustomHelp from "./CorpusConfigCustomHelp.vue";
 
 const corpusId = useCorpusIdParam();
 const { config, uploadConfigRaw } = useConfig(corpusId);
@@ -31,20 +33,7 @@ async function upload(files: File[]) {
 </script>
 
 <template>
-  <HelpBox>
-    <i18n-t scope="global" keypath="config.custom.help">
-      <template #sparv>
-        <a :href="$t('sparv.url')">Sparv</a>
-      </template>
-      <template #topic>
-        <a
-          href="https://spraakbanken.gu.se/sparv/#/user-manual/corpus-configuration"
-        >
-          Corpus Configuration
-        </a>
-      </template>
-    </i18n-t>
-  </HelpBox>
+  <CorpusConfigCustomHelp />
 
   <div class="flex flex-wrap gap-4 items-start">
     <LayoutBox class="w-96 grow" :title="$t('upload')">
@@ -52,12 +41,14 @@ async function upload(files: File[]) {
         <PhWarning class="inline mb-1 mr-1" />
         {{ $t("config.custom.upload.caution") }}
       </HelpBox>
+
       <HelpBox important>
         <PhWarning class="inline mb-1 mr-1" />
         {{ $t("config.custom.upload.overwrite") }}
       </HelpBox>
+
       <PendingContent :on="`corpus/${corpusId}/config`" blocking>
-        <FileUpload :file-handler="upload" accept=".yaml,.yml" />
+        <FileUpload :file-handler="upload" accept=".yaml,.yml" primary />
       </PendingContent>
     </LayoutBox>
 
@@ -65,6 +56,16 @@ async function upload(files: File[]) {
       <PendingContent :on="`corpus/${corpusId}/config`">
         <SyntaxHighlight v-if="config" language="yaml" :code="config" />
       </PendingContent>
+
+      <template #controls>
+        <RouteButton
+          :to="`/library/corpus/${corpusId}/config/custom/edit`"
+          class="button-primary"
+        >
+          <PhPencilSimple weight="bold" class="inline mb-1 mr-1" />
+          {{ $t("edit") }}
+        </RouteButton>
+      </template>
     </LayoutBox>
   </div>
 </template>
diff --git a/src/corpus/config/CorpusConfigCustomEdit.vue b/src/corpus/config/CorpusConfigCustomEdit.vue
new file mode 100644
index 0000000..b84087a
--- /dev/null
+++ b/src/corpus/config/CorpusConfigCustomEdit.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import Yaml from "js-yaml";
+import { useAuth } from "@/auth/auth.composable";
+import useConfig from "./config.composable";
+import useCorpusIdParam from "../corpusIdParam.composable";
+import { ref, watchEffect } from "vue";
+import useMessenger from "@/message/messenger.composable";
+import type { AxiosError } from "axios";
+import type { MinkResponse } from "@/api/api.types";
+import LayoutBox from "@/components/LayoutBox.vue";
+import HelpBox from "@/components/HelpBox.vue";
+import { PhFileX, PhWarning } from "@phosphor-icons/vue";
+import PendingContent from "@/spin/PendingContent.vue";
+import ActionButton from "@/components/ActionButton.vue";
+import { getException } from "@/util";
+import CorpusConfigCustomHelp from "./CorpusConfigCustomHelp.vue";
+import RouteButton from "@/components/RouteButton.vue";
+
+const corpusId = useCorpusIdParam();
+const { requireAuthentication } = useAuth();
+const { config, uploadConfigRaw } = useConfig(corpusId);
+const { alertError } = useMessenger();
+
+const input = ref(config.value || "");
+const isValid = ref<boolean>();
+
+requireAuthentication();
+
+function validate() {
+  isValid.value = !getException(() => Yaml.load(input.value));
+}
+
+async function upload() {
+  if (input.value == config.value) return;
+  try {
+    await uploadConfigRaw(input.value);
+  } catch (error) {
+    alertError(error as AxiosError<MinkResponse>);
+  }
+}
+
+watchEffect(validate);
+
+// Backend may modify input when saving, then make that visible
+watchEffect(() => (input.value = config.value || ""));
+</script>
+
+<template>
+  <CorpusConfigCustomHelp />
+
+  <div class="flex">
+    <LayoutBox class="w-96 grow" :title="$t('edit')">
+      <template #controls>
+        <RouteButton
+          :to="`/library/corpus/${corpusId}/config/custom`"
+          :class="{ 'button-primary': input == config }"
+        >
+          {{ input == config ? $t("show") : $t("cancel") }}
+        </RouteButton>
+      </template>
+
+      <HelpBox important>
+        <PhWarning class="inline mb-1 mr-1" />
+        {{ $t("config.custom.upload.caution") }}
+      </HelpBox>
+      <HelpBox important>
+        <PhWarning class="inline mb-1 mr-1" />
+        {{ $t("config.custom.upload.overwrite") }}
+      </HelpBox>
+
+      <PendingContent :on="`corpus/${corpusId}/config`" blocking>
+        <div class="flex gap-2 items-baseline my-2">
+          <div class="flex-grow"></div>
+          <div v-if="!isValid" :title="$t('yaml.invalid')">
+            <PhFileX class="inline text-xl text-red-600" />
+          </div>
+          <ActionButton
+            @click="upload"
+            class="button-primary"
+            :disabled="input == config || !isValid"
+            :title="
+              input == config
+                ? $t('save.no_changes')
+                : !isValid
+                  ? $t('yaml.invalid')
+                  : undefined
+            "
+          >
+            {{ $t("save") }}
+          </ActionButton>
+        </div>
+
+        <textarea class="w-full h-96 font-mono text-sm" v-model="input" />
+      </PendingContent>
+    </LayoutBox>
+  </div>
+</template>
diff --git a/src/corpus/config/CorpusConfigCustomHelp.vue b/src/corpus/config/CorpusConfigCustomHelp.vue
new file mode 100644
index 0000000..8a949ff
--- /dev/null
+++ b/src/corpus/config/CorpusConfigCustomHelp.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import HelpBox from "@/components/HelpBox.vue";
+</script>
+
+<template>
+  <HelpBox>
+    <i18n-t scope="global" keypath="config.custom.help">
+      <template #sparv>
+        <a :href="$t('sparv.url')">Sparv</a>
+      </template>
+      <template #topic>
+        <a
+          href="https://spraakbanken.gu.se/sparv/#/user-manual/corpus-configuration"
+        >
+          Corpus Configuration
+        </a>
+      </template>
+    </i18n-t>
+  </HelpBox>
+</template>
diff --git a/src/i18n/locales/en.yaml b/src/i18n/locales/en.yaml
index f3d2855..daf5f87 100644
--- a/src/i18n/locales/en.yaml
+++ b/src/i18n/locales/en.yaml
@@ -189,6 +189,7 @@ load: Load
 not_loaded: Not loaded
 file.archive: Archive
 file.singles: Single files
+save.no_changes: There are no changes to save
 name: Name
 metadata.name.help: You can use spaces and special characters.
 identifier: Identifier
@@ -199,7 +200,7 @@ metadata.description.help: |
   If you aim to share or publish the results, we recommend entering one or two sentences
   to summarize the content or purpose to a potential user.
 fileFormat: Source format
-config.custom: Custom configuration
+config.custom: Custom config
 config.custom.help: Mink uses {sparv}, a modular and configurable pipeline for text analysis, to process your corpus. The standard configuration form only exposes a few of the available Sparv options. On this page, you can view and submit your own config file, written in the YAML format. Please refer to the Sparv documentation on {topic} for more information.
 config.custom.upload.caution: Please note that submitting an invalid config file may cause unexpected behaviour.
 config.custom.upload.overwrite: Saving the standard configuration form may overwrite your custom config.
@@ -245,6 +246,8 @@ accessdenied.contact: If you have questions, or you want to report a bug, please
 notfound: Page not found
 notfound.description: Something went wrong, and there is nothing to see at this address.
 notfound.contact: If you have questions, or you want to report a bug, please contact sb-info{'@'}svenska.gu.se. Thank you!
+yaml.valid: YAML is valid
+yaml.invalid: YAML is invalid
 
 # These correspond to the `return_code` param of backend responses
 api.code.missing_auth_token: Missing authorization token
diff --git a/src/i18n/locales/sv.yaml b/src/i18n/locales/sv.yaml
index 52cb3c8..d621900 100644
--- a/src/i18n/locales/sv.yaml
+++ b/src/i18n/locales/sv.yaml
@@ -190,6 +190,7 @@ load: Ladda in
 not_loaded: Ej laddad
 file.archive: Arkivfil
 file.singles: Enskilda filer
+save.no_changes: Det finns inga ändringar att spara
 name: Namn
 metadata.name.help: Det går bra att använda mellanslag och specialtecken.
 identifier: Identifierare
@@ -200,10 +201,10 @@ metadata.description.help: |
   Om du vill distribuera eller publicera resultatet rekommenderar vi en eller två meningar
   som sammanfattar innehållet eller syftet för en potentiell användare.
 fileFormat: Källformat
-config.custom: Egen konfiguration
+config.custom: Egen config
 config.custom.help: Mink använder {sparv}, en modulär och konfigurerbar pipeline för textanalys, för att processa korpusen. Det vanliga formuläret visar endast en liten del av alla inställningar. På den här sidan kan du undersöka den faktiska configfilen och ladda upp en egen, i formatet YAML. Använd Sparvdokumentationens avsnitt {topic} för att tolka filens struktur.
 config.custom.upload.caution: Notera att en ogiltig configfil kan leda till oväntat beteende.
-config.custom.upload.overwrite: Om du sparar i det vanliga formuläret igen kan den egna konfigurationen skrivas över.
+config.custom.upload.overwrite: Om du sparar i det vanliga formuläret igen kan den egna configen skrivas över.
 config.format.help: Ange vilket filformat källtexterna har. Alla filer måste ha det valda formatet.
 config.format.note.pdf: PDF-formatet är byggt främst för visuell presentation. Text som extraheras från PDF-filer kan ibland ge bristfälliga resultat. OCR-behandling av scannade dokument är (för närvarande) inget som Mink stödjer.
 config.text_annotation: Textelement
@@ -247,6 +248,8 @@ accessdenied.contact: Om du har frågor eller vill rapportera en bugg, kontakta
 notfound: Sidan kan inte hittas
 notfound.description: Något har gått fel, och det finns ingenting att visa på den här adressen.
 notfound.contact: Om du har frågor eller vill rapportera en bugg, kontakta gärna sb-info{'@'}svenska.gu.se. Tack!
+yaml.valid: YAML-koden är giltig
+yaml.invalid: YAML-koden är ogiltig
 
 # These correspond to the `return_code` param of backend responses
 api.code.missing_auth_token: Auktoriseringstoken saknas
diff --git a/src/router/corpus.routes.ts b/src/router/corpus.routes.ts
index 7f60367..5a3a1e6 100644
--- a/src/router/corpus.routes.ts
+++ b/src/router/corpus.routes.ts
@@ -6,6 +6,8 @@ const CorpusConfiguration = () =>
   import("@/corpus/config/CorpusConfiguration.vue");
 const CorpusConfigCustom = () =>
   import("@/corpus/config/CorpusConfigCustom.vue");
+const CorpusConfigCustomEdit = () =>
+  import("@/corpus/config/CorpusConfigCustomEdit.vue");
 const CorpusResult = () => import("@/corpus/exports/CorpusResult.vue");
 const CorpusDelete = () => import("@/corpus/CorpusDelete.vue");
 const SourceView = () => import("@/corpus/sources/SourceView.vue");
@@ -42,6 +44,11 @@ const corpusRoutes: RouteRecordRaw[] = [
         component: CorpusConfigCustom,
         meta: { title: "config.custom" },
       },
+      {
+        path: "config/custom/edit",
+        component: CorpusConfigCustomEdit,
+        meta: { title: "edit" },
+      },
       {
         path: "sources/:filename",
         component: SourceView,
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 59451dd..0819def 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -7,9 +7,6 @@ export default <Config>{
       center: true,
       padding: "2rem",
     },
-    fontFamily: {
-      sans: ['"Source Sans 3 Variable"', "sans-serif"],
-    },
     extend: {
       colors: {
         sborange: {
@@ -26,6 +23,9 @@ export default <Config>{
           100: "#d7ebeb",
         },
       },
+      fontFamily: {
+        sans: ['"Source Sans 3 Variable"', "sans-serif"],
+      },
       keyframes: {
         pulse2: {
           "0%": { opacity: ".8" },