Fix UI issues, Enhance modal behavior and add missing translations

.github/workflows/test.yml

@@ -0,0 +1,68 @@
+name: Run Tests
+
+on:
+  push:
+    branches: [ main, develop ]
+  pull_request:
+    branches: [ main, develop ]
+  release:
+    types: [published]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Download CWL files
+        run: |
+          mkdir -p tests/fixtures
+
+          # Format: "owner/repo|folder-path|version(branch/tag)"
+          CONFIGS=(
+            "eoap/application-package-patterns|cwl-workflow|main"
+            "GeoLabs/KindGrove||v0.0.1-rc8"
+            "ZOO-Project/charts|zoo-project-dru/files/example|main"
+          )
+
+          for config in "${CONFIGS[@]}"; do
+            REPO=$(echo "$config" | cut -d'|' -f1)
+            SUB_PATH=$(echo "$config" | cut -d'|' -f2)
+            REF=$(echo "$config" | cut -d'|' -f3)
+
+            if [ -z "$SUB_PATH" ]; then
+              API_URL="https://api.github.com/repos/$REPO/contents?ref=$REF"
+            else
+              API_URL="https://api.github.com/repos/$REPO/contents/$SUB_PATH?ref=$REF"
+            fi
+
+            echo "Fetching from $API_URL"
+
+            curl -s $API_URL \
+            | jq -r '.[] | select(.name | endswith(".cwl")) | .download_url' \
+            | while read url; do
+                filename=$(basename $url)
+
+                echo "Downloading $filename from $REPO"
+
+                curl -L "$url" -o tests/fixtures/${REPO//\//-}-$filename
+              done
+          done
+
+          if [ -z "$(ls -A tests/fixtures)" ]; then
+            echo "No CWL files downloaded!"
+            exit 1
+          fi
+
+      - name: Run tests
+        run: npm run test

components/help/HelpDialog.vue

@@ -1,31 +1,78 @@
 <template>
   <q-dialog
     :model-value="modelValue"
-    @update:model-value="emit('update:modelValue', $event)"
     persistent
+    @update:model-value="val => emit('update:modelValue', val)"
   >
-    <q-card style="max-width: 700px; width: 90vw;">
-      <q-card-section style="background-color: #663e05; color: white;">
+    <q-card class="app-dialog">
+
+      <!-- Fixed header -->
+      <q-card-section class="row items-center dialog-header">
         <div class="text-h6">{{ title }}</div>
+        <q-space />
+        <q-btn
+          icon="close"
+          flat
+          round
+          dense
+          @click="emit('update:modelValue', false)"
+        />
       </q-card-section>
+
       <q-separator />
-      <q-card-section class="q-pt-none">
-        <!-- Used helpContent here -->
-        <div v-html="helpContent"></div>
+
+      <!-- Scrollable body -->
+      <q-card-section class="dialog-body">
+        <slot />
       </q-card-section>
-      <q-card-actions align="right">
-        <q-btn flat label="Close" color="primary" v-close-popup />
-      </q-card-actions>
+
+      <!-- Footer (optional, fixed) -->
+      <q-separator v-if="$slots.footer" />
+      <q-card-section
+        v-if="$slots.footer"
+        class="dialog-footer"
+      >
+        <slot name="footer" />
+      </q-card-section>
+
     </q-card>
   </q-dialog>
 </template>
 
-<script setup>
-const props = defineProps({
-  modelValue: { type: Boolean, required: true },
-  title: { type: String, default: "Help" },
-  helpContent: { type: String, default: "" }
-})
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue: boolean
+  title: string
+}>()
 
-const emit = defineEmits(["update:modelValue"])
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
 </script>
+
+<style scoped>
+.app-dialog {
+  width: 80vw;
+  max-width: 900px;
+  height: 75vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.dialog-header {
+  background: white;
+  flex-shrink: 0;
+}
+
+.dialog-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+.dialog-footer {
+  background: white;
+  flex-shrink: 0;
+}
+
+</style>

components/help/HomepageHelp.js

@@ -1,48 +1,60 @@
 export default `
   <style>
     .help-container {
-      font-family: 'Segoe UI', sans-serif;
+      font-family: inherit;
       color: #333;
       line-height: 1.6;
-      padding: 10px;
     }
     .help-title {
-      font-size: 24px;
-      font-weight: bold;
+      font-size: 20px;
+      font-weight: 600;
       color: #2c3e50;
-      margin-bottom: 10px;
+      margin-bottom: 8px;
       text-align: center;
     }
+    .help-intro {
+      font-size: 14px;
+      text-align: center;
+      margin-bottom: 14px;
+      color: #555;
+    }
     .help-section {
-      margin-bottom: 18px;
-      padding: 10px;
+      margin-bottom: 14px;
+      padding: 10px 12px;
       border-left: 4px solid #663e05;
       background: #f8f9fa;
       border-radius: 6px;
     }
     .help-section h5 {
-      font-size: 18px;
-      margin-bottom: 6px;
+      font-size: 16px;
+      margin: 0 0 6px;
       color: #2980b9;
+      font-weight: 600;
     }
-    .help-section p, .help-section ul {
-      margin: 5px 0;
-      padding-left: 15px;
+    .help-section p {
+      margin: 4px 0 6px;
+      font-size: 14px;
+    }
+    .help-section ul {
+      margin: 0;
+      padding-left: 0;
+      font-size: 14px;
     }
     .help-section ul li {
       list-style: none;
-      margin: 5px 0;
+      margin: 6px 0;
       position: relative;
-      padding-left: 20px;
+      padding-left: 18px;
     }
     .help-section ul li::before {
       content: "✔";
       color: #27ae60;
       position: absolute;
       left: 0;
+      font-size: 12px;
     }
     .highlight {
-      font-weight: bold;
+      font-weight: 600;
       color: #e74c3c;
     }
     .link {
@@ -51,48 +63,70 @@ export default `
     }
     .muted {
       color: #666;
-      font-size: 13px;
+      font-size: 12px;
     }
   </style>
 
   <div class="help-container">
     <div class="help-title">🏠 Home (Landing) Page</div>
-    <p>Summary of the service, API info, and direct links to important endpoints.</p>
+    <div class="help-intro">
+      Summary of the service, API info, and direct links to important endpoints.
+    </div>
 
     <div class="help-section">
       <h5>1. API Information</h5>
       <ul>
-        <li><span class="highlight">Title / Version / Description</span> — general service details from the API spec.</li>
-        <li>License & contact are shown if provided by the server.</li>
+        <li>
+          <span class="highlight">Title / Version / Description</span> —
+          general service details from the API specification.
+        </li>
+        <li>
+          License and contact information are shown if provided by the server.
+        </li>
       </ul>
     </div>
 
     <div class="help-section">
       <h5>2. Landing Links</h5>
       <p>Links are grouped and open in a new tab:</p>
       <ul>
-        <li>API specification (<span class="highlight">/ogc-api/api</span>)</li>
+        <li>API specification — <span class="highlight">/ogc-api/api</span></li>
         <li>Documentation (HTML views)</li>
-        <li>Conformance (<span class="highlight">/ogc-api/conformance</span>)</li>
-        <li>Processes (<span class="highlight">/ogc-api/processes</span>)</li>
-        <li>Jobs (<span class="highlight">/ogc-api/jobs</span>)</li>
+        <li>Conformance — <span class="highlight">/ogc-api/conformance</span></li>
+        <li>Processes — <span class="highlight">/ogc-api/processes</span></li>
+        <li>Jobs — <span class="highlight">/ogc-api/jobs</span></li>
       </ul>
     </div>
 
     <div class="help-section">
       <h5>3. Related Standards</h5>
       <ul>
-        <li><a class="link" href="https://ogcapi.ogc.org/common" target="_blank">OGC API - Common</a></li>
-        <li><a class="link" href="https://ogcapi.ogc.org/processes" target="_blank">OGC API - Processes</a></li>
+        <li>
+          <a class="link" href="https://ogcapi.ogc.org/common" target="_blank">
+            OGC API - Common
+          </a>
+        </li>
+        <li>
+          <a class="link" href="https://ogcapi.ogc.org/processes" target="_blank">
+            OGC API - Processes
+          </a>
+        </li>
       </ul>
     </div>
 
     <div class="help-section">
       <h5>4. FAQ — Why might information be missing?</h5>
       <ul>
-        <li>Server didn't provide expected fields — check the API spec (<span class="highlight">/ogc-api/api</span>).</li>
-        <li>Network/authentication issues — verify server URL and credentials.</li>
-        <li>Browser cache or outdated data — try refreshing the page.</li>
+        <li>
+          Server didn’t provide expected fields — check
+          <span class="highlight">/ogc-api/api</span>.
+        </li>
+        <li>
+          Network or authentication issues — verify server URL and credentials.
+        </li>
+        <li>
+          Browser cache or outdated data — try refreshing the page.
+        </li>
       </ul>
     </div>
   </div>