Merge branch 'dev'

CHANGELOG.md

@@ -13,6 +13,19 @@ As this project is a user-facing application, the places in the semantic version
 
 ## [Unreleased]
 
+## [1.0.3] (2023-10-19)
+
+### Added
+
+- Showing warnings from jobs
+- Messages from jobs are limited in size, but resizeable
+
+### Fixed
+
+- Downloading source file was broken for binary files
+- Correct file size outputs using binary base instead of decimal
+- Translate "Create account" page to Swedish
+
 ## [1.0.2] (2023-10-03)
 
 ### Added
@@ -53,7 +66,8 @@ The frontend is now open to the general public! This version allows users to:
 
 Code changes up until this point are not documented other than in the git commit log.
 
-[unreleased]: https://github.com/spraakbanken/mink-frontend/compare/v1.0.2...HEAD
+[unreleased]: https://github.com/spraakbanken/mink-frontend/compare/v1.0.3...HEAD
+[1.0.3]: https://github.com/spraakbanken/mink-frontend/compare/v1.0.2...v1.0.3
 [1.0.2]: https://github.com/spraakbanken/mink-frontend/compare/v1.0.1...v1.0.2
 [1.0.1]: https://github.com/spraakbanken/mink-frontend/compare/v1.0.0...v1.0.1
 [1.0.0]: https://github.com/spraakbanken/mink-frontend/releases/tag/v1.0.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mink-frontend",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "license": "MIT",
   "scripts": {
     "dev": "vite",

src/api/api.js

@@ -64,9 +64,10 @@ class MinkApi {
     return response.data.contents;
   }
 
-  async downloadSourceFile(corpusId, filename) {
+  async downloadSourceFile(corpusId, filename, binary = false) {
     const response = await this.axios.get("download-sources", {
       params: { corpus_id: corpusId, file: filename, zip: false },
+      responseType: binary ? "arraybuffer" : "text",
     });
     return response.data;
   }

src/api/backend.composable.js

@@ -45,9 +45,9 @@ export default function useMinkBackend() {
       `corpus/${corpusId}/sources`
     );
 
-  const downloadSource = (corpusId, filename) =>
+  const downloadSource = (corpusId, filename, binary) =>
     spin(
-      api.downloadSourceFile(corpusId, filename),
+      api.downloadSourceFile(corpusId, filename, binary),
       t("source.downloading"),
       `corpus/${corpusId}/sources/${filename}`
     );

src/auth/Signup.vue

@@ -6,33 +6,32 @@ import PageTitle from "@/components/PageTitle.vue";
 
 <template>
   <div>
-    <PageTitle>Create account</PageTitle>
+    <PageTitle>{{ $t("signup") }}</PageTitle>
     <div class="flex flex-wrap gap-6">
       <Section
         class="!mt-0 w-64 flex-grow"
-        title="You may already have an account"
+        :title="$t('signup.existing.title')"
       >
         <p>
-          If your university account is connected to eduGAIN, you can directly
-          use Mink by simply signing in:
+          {{ $t("signup.existing.login") }}
         </p>
         <LoginButton />
         <p>
-          (If you are not sure, click the button and search for your university
-          or organization.)
+          {{ $t("signup.existing.tip") }}
         </p>
       </Section>
 
-      <Section class="!mt-0 w-64 flex-grow" title="No account">
-        <p>
-          If you are not affiliated with any of the available identity
-          providers, you can
-          <a href="https://eduid.se/en/" target="_blank"
-            >create an eduID account</a
-          >
-          and then sign in here, selecting <em>eduID Sweden</em> as identity
-          provider.
-        </p>
+      <Section class="!mt-0 w-64 flex-grow" :title="$t('signup.new')">
+        <i18n-t keypath="signup.new.create" scope="global" tag="p">
+          <template #register>
+            <a :href="$t('signup.new.register.url')" target="_blank">
+              {{ $t("signup.new.register.label") }}
+            </a>
+          </template>
+          <template #eduid>
+            <em>{{ $t("signup.new.eduid") }}</em>
+          </template>
+        </i18n-t>
       </Section>
     </div>
   </div>

src/corpus/job/JobStatus.vue

@@ -39,33 +39,52 @@
         </tr>
         <tr v-if="jobStatus.errors">
           <td colspan="2">
-            <TerminalOutput class="whitespace-pre-wrap">{{
-              jobStatus.errors
-            }}</TerminalOutput>
+            <TerminalOutput
+              class="whitespace-pre-wrap mb-2 h-fit max-h-20 resize-y"
+              >{{ jobStatus.errors }}</TerminalOutput
+            >
           </td>
         </tr>
+
+        <tr v-if="jobStatus.warnings">
+          <th colspan="2">{{ $t("warnings") }}</th>
+        </tr>
+        <tr v-if="jobStatus.warnings">
+          <td colspan="2">
+            <TerminalOutput
+              class="whitespace-pre-wrap mb-2 h-fit max-h-20 resize-y"
+              >{{ jobStatus.warnings }}</TerminalOutput
+            >
+          </td>
+        </tr>
+
         <tr v-if="isFailed && jobStatus.sparv_output">
           <th colspan="2">{{ $t("sparvOutput") }}</th>
         </tr>
         <tr v-if="isFailed && jobStatus.sparv_output">
           <td colspan="2">
-            <TerminalOutput class="whitespace-pre-wrap">{{
-              jobStatus.sparv_output
-            }}</TerminalOutput>
+            <TerminalOutput
+              class="whitespace-pre-wrap mb-2 h-fit max-h-20 resize-y"
+              >{{ jobStatus.sparv_output }}</TerminalOutput
+            >
           </td>
         </tr>
+
         <tr v-if="jobStatus.priority > 0">
           <th>{{ $t("job.priority") }}</th>
           <td>{{ jobStatus.priority }}</td>
         </tr>
+
         <tr v-if="jobStatus.last_run_started">
           <th>{{ $t("job.last_run_started") }}</th>
           <td>{{ formatDate(jobStatus.last_run_started) }}</td>
         </tr>
+
         <tr v-if="jobStatus.last_run_ended">
           <th>{{ $t("job.last_run_ended") }}</th>
           <td>{{ formatDate(jobStatus.last_run_ended) }}</td>
         </tr>
+
         <tr v-if="jobStatus.seconds_taken">
           <th>{{ $t("job.time_taken") }}</th>
           <td>{{ formatSeconds(jobStatus.seconds_taken) }}</td>
@@ -104,4 +123,9 @@ async function doRunJob() {
 }
 </script>
 
-<style></style>
+<style scoped>
+/* Override max-height when user is resizing. */
+.resize-y[style*="height"] {
+  max-height: unset;
+}
+</style>

src/corpus/sources/Source.vue

@@ -20,12 +20,12 @@
               <SourceText
                 :load="loadRaw"
                 :filename="metadata.name"
-                :no-load="!isText"
+                :no-load="isBinary"
               />
             </PendingContent>
           </td>
         </tr>
-        <tr v-if="isText && !isPlaintext">
+        <tr v-if="!isPlaintext">
           <th>{{ $t("txt") }}</th>
           <td>
             <PendingContent :on="`corpus/${corpusId}/sources/${filename}`">
@@ -71,11 +71,11 @@ const metadata = computed(() =>
     (source) => source.name === props.filename
   )
 );
-const isText = computed(() => metadata.value.type.indexOf("text/") === 0);
+const isBinary = computed(() => metadata.value.type.indexOf("text/") !== 0);
 const isPlaintext = computed(() => metadata.value.type == "text/plain");
 
 async function loadRaw() {
-  return await downloadSource(metadata.value);
+  return await downloadSource(metadata.value, isBinary.value);
 }
 
 async function loadPlain() {

src/corpus/sources/UploadSizeLimits.vue

@@ -3,6 +3,7 @@ import useMinkBackendInfo from "@/api/backendInfo.composable";
 import useLocale from "@/i18n/locale.composable";
 
 const { hasInfo, findInfo } = useMinkBackendInfo();
+// Use filesize with precision 0 to have "1 MB" instead of "1.0 MB".
 const { filesize } = useLocale();
 </script>
 
@@ -11,19 +12,19 @@ const { filesize } = useLocale();
     <tr>
       <th>{{ $t("source.limit.file.recommended") }}</th>
       <td class="text-right">
-        {{ filesize(findInfo("recommended_file_size", "max_file_length")) }}
+        {{ filesize(findInfo("recommended_file_size", "max_file_length"), 0) }}
       </td>
     </tr>
     <tr>
       <th>{{ $t("source.limit.file.max") }}</th>
       <td class="text-right">
-        {{ filesize(findInfo("file_size_limits", "max_file_length")) }}
+        {{ filesize(findInfo("file_size_limits", "max_file_length"), 0) }}
       </td>
     </tr>
     <tr>
       <th>{{ $t("source.limit.upload.max") }}</th>
       <td class="text-right">
-        {{ filesize(findInfo("file_size_limits", "max_content_length")) }}
+        {{ filesize(findInfo("file_size_limits", "max_content_length"), 0) }}
       </td>
     </tr>
   </table>

src/corpus/sources/sources.composable.js

@@ -16,8 +16,8 @@ export default function useSources(corpusId) {
     corpusStore.corpora[corpusId_].sources = sourcesFetched;
   }
 
-  async function downloadSource(source) {
-    return mink.downloadSource(corpusId, source.name).catch(alertError);
+  async function downloadSource(source, binary) {
+    return mink.downloadSource(corpusId, source.name, binary).catch(alertError);
   }
 
   async function downloadPlaintext(source) {

src/i18n/locale.composable.js

@@ -40,8 +40,10 @@ export default function useLocale() {
     );
   }
 
-  function myFilesize(bytes) {
-    const str = filesize(bytes, { precision: 2, locale: locale.value });
+  /** Wrap the filesize lib with some sane defaults and avoiding exponential notation. */
+  function myFilesize(bytes, precision = 2) {
+    // Default precision is 0 which means up until 2 decimals?
+    const str = filesize(bytes, { precision, base: 2, locale: locale.value });
     // Convert exponential notation to ordinary.
     return str.replace(/[\d.]+e[+\d]+/, parseFloat);
   }

src/i18n/locales/en.yaml

@@ -99,6 +99,7 @@ user.settings: Settings
 user.settings.admin_mode: Enable administration mode
 user.admin_mode.warning: Administration mode is enabled. Please be careful!
 errors: Errors
+warnings: Warnings
 error.message: There was an error
 expand.open: Show more
 expand.close: Show less
@@ -143,6 +144,14 @@ login.help: Most university users can sign in directly.
 logout: Logout
 signup: Create account
 signup.help: Most non-university users need to set up an account first.
+signup.existing.title: You may already have an account
+signup.existing.login: "If your university account is connected to eduGAIN, you can directly use Mink by simply signing in:"
+signup.existing.tip: (If you are not sure, click the button and search for your university or organization.)
+signup.new: No account
+signup.new.create: If you are not affiliated with any of the available identity providers, you can {register} and then sign in here, selecting {eduid} as identity provider.
+signup.new.register.url: https://eduid.se/en/
+signup.new.register.label: create an eduID account
+signup.new.eduid: eduID Sweden
 account: Account
 enable: Enable
 disable: Disable

src/i18n/locales/sv.yaml

@@ -100,6 +100,7 @@ user.settings: Inställningar
 user.settings.admin_mode: Aktivera administratörsläget
 user.admin_mode.warning: Administratörsläget är aktiverat. Var försiktig!
 errors: Fel
+warnings: Varningar
 error.message: Ett fel uppstod
 expand.open: Visa mer
 expand.close: Visa mindre
@@ -144,6 +145,14 @@ login.help: De flesta med akademisk anknytning kan logga in direkt.
 logout: Logga ut
 signup: Skapa konto
 signup.help: Andra användare behöver i regel registrera ett konto.
+signup.existing.title: Du kanske redan har ett konto
+signup.existing.login: "Om ditt universitetskonto är kopplat till Edugain kan du redan nu använda Mink genom att logga in:"
+signup.existing.tip: (Om du inte är säker kan du alltid klicka på knappen och söka efter ditt universitet eller organisation i listan över identitetsintygare.)
+signup.new: Inget konto
+signup.new.create: Om du inte tillhör någon av de kopplade identitetsintygarna kan du {register} och sedan logga in här genom att välja {eduid} som identitetsintygare.
+signup.new.register.url: https://eduid.se/
+signup.new.register.label: skapa ett EduID-konto
+signup.new.eduid: eduID Sweden
 account: Konto
 enable: Aktivera
 disable: Avaktivera

src/util.js

@@ -4,12 +4,18 @@ import round from "lodash/round";
 export const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 
 export function downloadFile(data, filename) {
+  // The url is temporary and bound to the window and document, and represents (does not contain) the data.
+  // https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static
   const url = window.URL.createObjectURL(new Blob([data]));
+
+  // Create an invisible link element and "click" it. This makes the browser save the file.
   const link = document.createElement("a");
   link.href = url;
   link.setAttribute("download", filename);
   document.body.appendChild(link);
   link.click();
+
+  // Clear the temporary url.
   window.URL.revokeObjectURL(url);
 }
 

yarn.lock

@@ -1251,9 +1251,9 @@ get-caller-file@^2.0.5:
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
 get-func-name@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.0.tgz#ead774abee72e20409433a066366023dd6887a41"
-  integrity sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.2.tgz#0d7cf20cd13fda808669ffa88f4ffc7a3943fc41"
+  integrity sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==
 
 get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3:
   version "1.1.3"