chore: cleaning up the runner container pattern (#18741)

Author: JessicaSachs

packages/app/src/pages/Index.vue

@@ -1,12 +1,35 @@
 <template>
-  <div>Home page</div>
+  <div v-if="query.data.value?.app">
+    <SpecsList :gql="query.data.value.app" />
+  </div>
+
+  <div v-else>
+    Loading...
+  </div>
 </template>
 
+<script lang="ts" setup>
+import { gql, useQuery } from '@urql/vue'
+import SpecsList from '../specs/SpecsList.vue'
+import { SpecsPageContainerDocument } from '../generated/graphql'
+
+gql`
+query SpecsPageContainer {
+  app {
+    ...Specs_SpecsList
+  }
+}
+`
+
+const query = useQuery({ query: SpecsPageContainerDocument })
+
+</script>
+
 <route>
 {
-  name: "Home Page",
+  name: "Specs Page",
   meta: {
-    title: "Home"
+    title: "Specs"
   }
 }
 </route>

packages/app/src/spec/SpecPageContainer.vue packages/app/src/pages/Runner.vue

@@ -1,15 +1,14 @@
 <template>
-  <div v-if="query.data.value?.app?.activeProject">
-    <SpecRunnerContainer
-      :gql="query.data.value.app"
-    />
-  </div>
+  <SpecRunnerContainer
+    v-if="query.data.value?.app?.activeProject"
+    :gql="query.data.value.app"
+  />
 </template>
 
 <script lang="ts" setup>
 import { gql, useQuery } from '@urql/vue'
 import { SpecPageContainerDocument } from '../generated/graphql'
-import SpecRunnerContainer from './SpecRunnerContainer.vue'
+import SpecRunnerContainer from '../runner/SpecRunnerContainer.vue'
 
 gql`
 query SpecPageContainer {
@@ -21,3 +20,11 @@ query SpecPageContainer {
 
 const query = useQuery({ query: SpecPageContainerDocument })
 </script>
+
+<route>
+  {
+    meta: {
+      header: false
+    }
+  }
+</route>

packages/app/src/pages/Spec.vue

@@ -1,4 +1,4 @@
-import { useSnapshotStore } from '../spec/snapshot-store'
+import { useSnapshotStore } from './snapshot-store'
 import { useAutStore } from '../store'
 
 export interface AutSnapshot {

packages/app/src/pages/Specs.vue

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import type { AutSnapshot } from '../runner/iframe-model'
+import type { AutSnapshot } from './iframe-model'
 import { getAutIframeModel } from '../runner'
 
 export type SnapshotMessageType = 'info' | 'warning' | 'pinned'

packages/app/src/spec/SnapshotButtonGroup.vue packages/app/src/runner/SnapshotButtonGroup.vue

@@ -5,7 +5,7 @@
       :key="spec.node.id"
       class="text-left grid grid-cols-[16px,auto,auto] items-center gap-10px"
       :class="{ 'border-2 border-red-400': isCurrentSpec(spec) }"
-      :to="{ path: 'spec', query: { file: spec.node.relative } }"
+      :to="{ path: 'runner', query: { file: spec.node.relative } }"
     >
       <SpecName :gql="spec.node" />
     </RouterLink>

packages/app/src/spec/SnapshotChangeState.vue packages/app/src/runner/SnapshotChangeState.vue

@@ -14,7 +14,7 @@
         v-for="spec in filteredSpecs"
         :key="spec.node.id"
         class="text-left"
-        :to="{ path: 'spec', query: { file: spec.node.relative } }"
+        :to="{ path: 'runner', query: { file: spec.node.relative } }"
       >
         <SpecsListRow :gql="spec" />
       </RouterLink>