fix: switch to hash location strategy and check for url param

closes #522

e2e/home-page.ts

@@ -12,8 +12,12 @@ export class HomePage {
     this.fileBtn = page.getByRole("button", { name: "File" })
   }
 
-  async goto() {
-    await this.page.goto("http://localhost:8080")
+  async goto(urlQueryParam?: string) {
+    let url = "http://localhost:8080/#/"
+    if (urlQueryParam) {
+      url += `?url=${urlQueryParam}`
+    }
+    await this.page.goto(url)
   }
 
   async hasTitle(expectedTitle: string) {

e2e/smoke.spec.ts

@@ -6,6 +6,7 @@ const filenameSchemaVersion1 = "test-result-v1.json"
 const filenameSchemaVersion2 = "test-result-v2.json"
 const filenameTestManyResults = "test-many-results.json"
 const cveEntries = ["CVE-2021-3450", "CVE-2021-3449", "CVE-2019-14697"]
+const testReportUrl = `https://raw.githubusercontent.com/dbsystel/trivy-vulnerability-explorer/refs/heads/main/public/${filenameSchemaVersion2}`
 
 test("should have the correct title", async ({ page }) => {
   const homePage = new HomePage(page)
@@ -16,9 +17,17 @@ test("should have the correct title", async ({ page }) => {
 test("fetches from URL", async ({ page }) => {
   const homePage = new HomePage(page)
   await homePage.goto()
-  await homePage.fetchTestFileFromUrl(
-    `https://raw.githubusercontent.com/dbsystel/trivy-vulnerability-explorer/refs/heads/main/public/${filenameSchemaVersion2}`,
-  )
+  await homePage.fetchTestFileFromUrl(testReportUrl)
+  await homePage.verifyTableResult(5)
+  await homePage.verifyTrivyignore(cveEntries)
+})
+
+test("fetches from URL passed as query param", async ({ page }) => {
+  const homePage = new HomePage(page)
+  const responsePromise = homePage.page.waitForResponse(testReportUrl)
+  await homePage.goto(testReportUrl)
+  await responsePromise
+
   await homePage.verifyTableResult(5)
   await homePage.verifyTrivyignore(cveEntries)
 })

src/components/ReportUrlFetcher.vue

@@ -72,7 +72,7 @@ import type { ReportError, Version1OrVersion2 } from "@/types"
 
 const props = defineProps<{
   onNewReport: (report: Version1OrVersion2 | { error: ReportError }) => void
-  presetUrl: String
+  presetUrl?: string
 }>()
 
 const url = ref("")

src/pages/index.vue

@@ -46,12 +46,12 @@ import DataInput from "@/components/DataInput.vue"
 import DataTable from "@/components/DataTable.vue"
 import type { Vulnerability } from "@/types"
 
-const props = defineProps({
-  presetUrl: String,
-})
-
 const selectedVulnerabilities = ref<Vulnerability[]>([])
 const reportLoaded = ref(false)
+const query = useRoute().query
+const presetUrl = (Array.isArray(query.url) ? query.url[0] : query.url) as
+  | string
+  | undefined
 
 function reactivelySetNewVulnerabilities(newVulnerabilities: Vulnerability[]) {
   selectedVulnerabilities.value.splice(0)

src/router/index.ts

@@ -5,12 +5,12 @@
  */
 
 // Composables
-import { createRouter, createWebHistory } from "vue-router/auto"
+import { createRouter, createWebHashHistory } from "vue-router/auto"
 import { setupLayouts } from "virtual:generated-layouts"
 import { routes } from "vue-router/auto-routes"
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
+  history: createWebHashHistory(import.meta.env.BASE_URL),
   routes: setupLayouts(routes),
 })