feat: prefill URL input with run's URL on permalink pages (#87)

* Initial plan

* Initial exploration and plan setup

Co-authored-by: serhalp <[email protected]>

* Implement URL pre-filling for run page permalinks

Co-authored-by: serhalp <[email protected]>

* Fix loading state and remove package-lock.json per feedback

Co-authored-by: serhalp <[email protected]>

* Simplify loading condition and runUrl logic per code review

Co-authored-by: serhalp <[email protected]>

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: serhalp <[email protected]>

Author: Copilot

app/components/RequestForm.test.ts

@@ -43,4 +43,19 @@ describe('RequestForm', () => {
     await wrapper.find('button').trigger('click')
     expect(wrapper.emitted('submit')).toBeFalsy()
   })
+
+  it('uses default URL when no initialUrl prop is provided', () => {
+    const wrapper = mount(RequestForm)
+    const input = wrapper.find('input')
+    expect(input.element.value).toBe('https://nextjs-netlify-durable-cache-demo.netlify.app/isr-page')
+  })
+
+  it('uses initialUrl prop when provided', () => {
+    const customUrl = 'https://example.com/test-page'
+    const wrapper = mount(RequestForm, {
+      props: { initialUrl: customUrl },
+    })
+    const input = wrapper.find('input')
+    expect(input.element.value).toBe(customUrl)
+  })
 })

app/components/RequestForm.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-const inputUrl = ref(
-  'https://nextjs-netlify-durable-cache-demo.netlify.app/isr-page',
-)
-
 const props = defineProps<{
   loading?: boolean
+  initialUrl?: string
 }>()
 
+const inputUrl = ref(
+  props.initialUrl ?? 'https://nextjs-netlify-durable-cache-demo.netlify.app/isr-page',
+)
+
 const emit = defineEmits(['submit'])
 
 const handleSubmit = () => {

app/pages/run/[runId].vue

@@ -3,7 +3,7 @@ const { runs, error, loading, handleRequestFormSubmit, handleClickClear, getRunF
 
 const route = useRoute()
 
-const { data: initialRuns, pending: _pending, error: preloadedRunsError } = await useAsyncData('preloadedRuns', async () => {
+const { data: initialRuns, pending: initialLoading, error: preloadedRunsError } = await useAsyncData('preloadedRuns', async () => {
   const { runId } = route.params
   if (typeof runId === 'string') {
     const responseBody = await $fetch(`/api/runs/${runId}`)
@@ -18,15 +18,31 @@ if (preloadedRunsError.value) {
 if (initialRuns.value) {
   setRuns(initialRuns.value)
 }
+
+// Get the URL from the loaded run - we know it exists since we successfully loaded the run
+const runUrl = computed(() => {
+  return initialRuns.value?.[0]?.url
+})
 </script>
 
 <template>
   <main>
+    <!-- Only render RequestForm when we have loaded the initial run -->
     <RequestForm
+      v-if="!initialLoading"
       :loading="loading"
+      :initial-url="runUrl"
       @submit="handleRequestFormSubmit"
     />
 
+    <!-- Show loading state while initial run is loading -->
+    <div
+      v-else-if="initialLoading"
+      class="loading-state"
+    >
+      Loading run...
+    </div>
+
     <RunDisplay
       :runs="runs"
       :error="error"
@@ -37,4 +53,9 @@ if (initialRuns.value) {
 </template>
 
 <style scoped>
+.loading-state {
+  padding: 1em;
+  text-align: center;
+  color: #666;
+}
 </style>