merge in unified-desktop-gui

Author: lmiller1990

apollo.config.js

@@ -9,6 +9,6 @@ module.exports = {
       localSchemaFile: path.join(__dirname, 'packages/graphql/schemas/schema.graphql'),
     },
     tagName: 'gql',
-    includes: [path.join(__dirname, 'packages/{launchpad,app}/src/**/*.vue')],
+    includes: [path.join(__dirname, 'packages/{launchpad,app,frontend-shared}/src/**/*.vue')],
   },
 }

autobarrel.json

@@ -5,6 +5,7 @@
     "packages/data-context/src/**/*"
   ],
   "ignore": [
+    "packages/data-context/src/gen",
     "packages/graphql/src/stitching",
     "packages/graphql/src/testing",
     "packages/graphql/src/gen"

graphql-codegen.yml

@@ -44,6 +44,24 @@ config:
     DateTime: string
     JSON: any  
 generates:
+  './packages/data-context/src/gen/all-operations.gen.ts':
+    config:
+      <<: *documentFilters
+      flattenGeneratedTypes: true
+    schema: 'packages/graphql/schemas/schema.graphql'
+    documents:
+      - './packages/frontend-shared/src/gql-components/**/*.vue'
+      - './packages/app/src/**/*.vue'
+      - './packages/launchpad/src/**/*.vue'
+    plugins:
+      - add:
+          content: '/* eslint-disable */'
+      - 'typescript':
+          noExport: true
+      - 'typescript-operations':
+          noExport: true
+      - 'typed-document-node'
+
   ###
   # Generates types for us to infer the correct "source types" when we mock out on the frontend
   # This ensures we have proper type checking when we're using cy.mountFragment in component tests
@@ -78,11 +96,15 @@ generates:
   # files for useQuery / useMutation, as well as types associated with the fragments
   ###
   './packages/launchpad/src/generated/graphql.ts':
-    documents: './packages/launchpad/src/**/*.vue'
+    documents: 
+      - './packages/launchpad/src/**/*.vue'
+      - './packages/frontend-shared/src/**/*.vue'
     <<: *vueOperations
 
   './packages/app/src/generated/graphql.ts':
-    documents: './packages/app/src/**/*.vue'
+    documents: 
+      - './packages/app/src/**/*.vue'
+      - './packages/frontend-shared/src/**/*.vue'
     <<: *vueOperations
 
   './packages/frontend-shared/src/generated/graphql.ts':
@@ -94,11 +116,15 @@ generates:
   # so we can actually use the document in cy.mountFragment
   ###
   './packages/launchpad/src/generated/graphql-test.ts':
-    documents: './packages/launchpad/src/**/*.vue'
+    documents: 
+      - './packages/launchpad/src/**/*.vue'
+      - './packages/frontend-shared/src/**/*.vue'
     <<: *vueTesting
 
   './packages/app/src/generated/graphql-test.ts':
-    documents: './packages/app/src/**/*.vue'
+    documents: 
+      - './packages/app/src/**/*.vue'
+      - './packages/frontend-shared/src/**/*.vue'
     <<: *vueTesting
 
   './packages/frontend-shared/src/generated/graphql-test.ts':

npm/create-cypress-tests/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0-development",
   "description": "Cypress smart installation wizard",
   "private": false,
-  "main": "index.js",
+  "main": "dist/src/main.js",
   "scripts": {
     "build": "yarn prepare-example && tsc -p ./tsconfig.json && node scripts/example copy-to ./dist/initial-template && yarn prepare-copy-templates",
     "build-prod": "yarn build",
@@ -41,6 +41,10 @@
     "snap-shot-it": "7.9.3",
     "typescript": "^4.2.3"
   },
+  "files": [
+    "dist",
+    "bin"
+  ],
   "bin": {
     "create-cypress-tests": "dist/src/index.js"
   },

npm/create-cypress-tests/src/main.ts

@@ -102,3 +102,5 @@ export async function main ({ useNpm, ignoreTs, setupComponentTesting, ignoreExa
 
   console.log(`\nHappy testing with ${chalk.green('cypress.io')} 🌲\n`)
 }
+
+export { scanFSForAvailableDependency }

packages/app/cypress/e2e/integration/new-spec.spec.ts

@@ -33,17 +33,17 @@ describe('Button', () => {
     const { Primary } = composedStories
     mount(<Primary />)
   })
-  
+
   it('should render Secondary', () => {
     const { Secondary } = composedStories
     mount(<Secondary />)
   })
-  
+
   it('should render Large', () => {
     const { Large } = composedStories
     mount(<Large />)
   })
-  
+
   it('should render Small', () => {
     const { Small } = composedStories
     mount(<Small />)
@@ -54,7 +54,7 @@ import Button from "./Button"
 
 describe('<Button />', () => {
   it('renders', () => {
-    see: https://reactjs.org/docs/test-utils.html
+    // see: https://reactjs.org/docs/test-utils.html
     mount(<Button />)
   })
 })`,

packages/app/cypress/e2e/integration/runs.spec.ts

@@ -0,0 +1,67 @@
+describe('App', () => {
+  beforeEach(() => {
+    cy.setupE2E('component-tests')
+
+    cy.initializeApp()
+  })
+
+  it('resolves the runs page', () => {
+    cy.loginUser()
+    cy.visitApp()
+    cy.wait(1000)
+    cy.get('[href="#/runs"]').click()
+    cy.get('[data-cy="runs"]')
+  })
+
+  it('shows the loader', () => {
+    cy.loginUser()
+    cy.remoteGraphQLIntercept(async (obj) => {
+      await new Promise((resolve) => setTimeout(resolve, 200))
+
+      return obj.result
+    })
+
+    cy.visitApp()
+    cy.get('[href="#/runs"]').click()
+    cy.get('[data-cy="runs-loader"]')
+    cy.get('[data-cy="runs"]')
+  })
+
+  it('when no runs, shows call to action', () => {
+    cy.loginUser()
+    cy.remoteGraphQLIntercept(async (obj) => {
+      // Currently, all remote requests go through here, we want to use this to modify the
+      // remote request before it's used and avoid touching the login query
+      if (obj.result.data?.cloudProjectsBySlugs) {
+        for (const proj of obj.result.data.cloudProjectsBySlugs) {
+          if (proj.runs?.nodes) {
+            proj.runs.nodes = []
+          }
+        }
+      }
+
+      return obj.result
+    })
+
+    cy.visitApp()
+    cy.get('[href="#/runs"]').click()
+    cy.get('[data-cy="no-runs"]')
+  })
+
+  it('when logged out, shows call to action', () => {
+    cy.visitApp()
+    cy.get('[href="#/runs"]').click()
+    cy.contains('Log in').should('exist')
+  })
+
+  it('when no project Id in the config file, shows call to action', () => {
+    cy.loginUser()
+    cy.visitApp()
+    cy.withCtx(async (ctx) => {
+      await ctx.actions.file.writeFileInProject('cypress.json', '{}')
+    })
+
+    cy.get('[href="#/runs"]').click()
+    cy.contains('Connect your project').should('exist')
+  })
+})

packages/app/src/layouts/default.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-screen overflow-hidden flex flex-row">
-    <main class="min-w-0 flex-1 border-t border-gray-200 lg:flex">
+    <main class="h-screen min-w-0 flex-1 border-t border-gray-200 lg:flex">
       <section
         aria-labelledby="primary-heading"
         class="min-w-0 flex-1 h-full flex flex-col overflow-hidden lg:order-last"
@@ -40,7 +40,7 @@
 
 <script lang="ts" setup>
 import SidebarNavigation from '../navigation/SidebarNavigation.vue'
-import HeaderBar from '@cy/gql-components//HeaderBar.vue'
+import HeaderBar from '@cy/gql-components/HeaderBar.vue'
 import { useRoute } from 'vue-router'
 import { computed } from 'vue'
 

packages/app/src/main.ts

@@ -7,6 +7,8 @@ import { makeUrqlClient } from '@packages/frontend-shared/src/graphql/urqlClient
 import { createI18n } from '@cy/i18n'
 import { createRouter } from './router/router'
 import { createPinia } from './store'
+import Toast, { POSITION } from 'vue-toastification'
+import 'vue-toastification/dist/index.css'
 
 // set a global so we can run
 // conditional code in the vite branch
@@ -16,6 +18,10 @@ window.__vite__ = true
 
 const app = createApp(App)
 
+app.use(Toast, {
+  position: POSITION.BOTTOM_RIGHT,
+})
+
 app.use(urql, makeUrqlClient('app'))
 app.use(createRouter())
 app.use(createI18n())

packages/app/src/navigation/SidebarNavigation.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex relative flex-col flex-1 min-h-0 bg-gray-1000">
     <div
-      class="absolute cursor-pointer bg-gray-1000 w-8px bottom-0 top-0 right-0 hover:bg-indigo-300"
+      class="absolute cursor-pointer bg-gray-800 w-2px hover:w-8px bottom-0 top-0 right-0 hover:bg-indigo-300"
       @click="mainStore.toggleNavBar"
     />
     <div class="flex flex-col flex-1 pt-5 pb-4 overflow-y-auto">
@@ -41,13 +41,14 @@
 import SidebarNavigationRow from './SidebarNavigationRow.vue'
 import SpecsIcon from '~icons/cy/test-results_x24'
 import CodeIcon from '~icons/cy/code-editor_x24'
+import RunsIcon from '~icons/cy/runs_x24'
 import SettingsIcon from '~icons/cy/settings_x24'
 import { useMainStore } from '../store'
 
 const navigation = [
   { name: 'Home', icon: SpecsIcon, href: '/' },
   { name: 'Specs', icon: CodeIcon, href: '/specs' },
-  { name: 'Runs', icon: CodeIcon, href: '/runs' },
+  { name: 'Runs', icon: RunsIcon, href: '/runs' },
   { name: 'Settings', icon: SettingsIcon, href: '/settings' },
   { name: 'New Spec', icon: SettingsIcon, href: '/newspec' },
 ]

packages/app/src/pages/Runs.vue

@@ -1,12 +1,33 @@
 <template>
-  <div>
-    <h2>Runs Page</h2>
+  <div class="relative p-24px h-full overflow-y-scroll">
+    <TransitionQuickFade>
+      <RunsSkeleton v-if="query.fetching.value || !query.data.value" />
+      <RunsPage
+        v-else
+        :gql="query.data.value"
+      />
+    </TransitionQuickFade>
   </div>
 </template>
 
+<script lang="ts" setup>
+import { gql, useQuery } from '@urql/vue'
+import { RunsDocument } from '../generated/graphql'
+import RunsSkeleton from '../runs/RunsSkeleton.vue'
+import RunsPage from '../runs/RunsPage.vue'
+import TransitionQuickFade from '@cy/components/transitions/TransitionQuickFade.vue'
+
+gql`
+query Runs {
+  ...RunsPage
+}`
+
+const query = useQuery({ query: RunsDocument })
+</script>
+
 <route>
 {
-  name: "Runs Page",
+  name: "Runs",
   meta: {
     title: "Runs"
   }

packages/launchpad/src/runs/RunCard.spec.tsx packages/app/src/runs/RunCard.spec.tsx

@@ -1,12 +1,10 @@
 <template>
   <button
+    :data-e2e="run.id"
     class="block w-full overflow-hidden mb-4 border border-gray-100
   rounded bg-light-50 hocus-default"
   >
-    <ListRowHeader>
-      <template #icon>
-        <RunIcon :gql="props.gql" />
-      </template>
+    <ListRowHeader :icon="icon">
       <template #header>
         {{ run.commitInfo?.summary }}
       </template>
@@ -40,26 +38,30 @@
       </template>
       <template #right>
         <RunResults
-          :gql="props.gql"
+          :gql="run"
         />
       </template>
     </ListRowHeader>
   </button>
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue'
 import ListRowHeader from '@cy/components/ListRowHeader.vue'
 import { gql } from '@urql/core'
-import RunIcon from './RunIcon.vue'
 import RunResults from './RunResults.vue'
 import type { RunCardFragment } from '../generated/graphql'
-import { computed } from 'vue-demi'
+import PassedIcon from '~icons/cy/status-passed-solid_x24.svg'
+import FailedIcon from '~icons/cy/status-failed-solid_x24.svg'
+import ErroredIcon from '~icons/cy/status-errored-solid_x24.svg'
+import SkippedIcon from '~icons/cy/status-skipped_x24.svg'
+import PendingIcon from '~icons/cy/status-pending_x24.svg'
 
 gql`
 fragment RunCard on CloudRun {
 	id
 	createdAt
-	...RunIcon
+	status
 	...RunResults
 	commitInfo {
 		authorName
@@ -74,6 +76,19 @@ const props = defineProps<{
 	gql: RunCardFragment
 }>()
 
+const ICON_MAP = {
+  PASSED: PassedIcon,
+  FAILED: FailedIcon,
+  TIMEDOUT: ErroredIcon,
+  ERRORED: ErroredIcon,
+  OVERLIMIT: ErroredIcon,
+  CANCELLED: SkippedIcon,
+  NOTESTS: SkippedIcon,
+  RUNNING: PendingIcon,
+} as const
+
+const icon = computed(() => ICON_MAP[props.gql.status!])
+
 const run = computed(() => props.gql)
 
 </script>