Merge branch '10.0-release' into chore/apply-ux-feedback

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

@@ -22,6 +22,14 @@ describe('App: Index', () => {
       // we just can't mock config values in GQL yet.
       cy.contains(defaultMessages.createSpec.page.defaultPatternNoSpecs.title).should('be.visible')
     })
+
+    it('routes to settings spec-pattern section', () => {
+      cy.contains(defaultMessages.createSpec.viewSpecPatternButton).scrollIntoView().click()
+      cy.get('[data-cy="Project Settings"]').within(() => {
+        cy.get('[data-cy="collapsible-header"]').should('have.attr', 'aria-expanded', 'true')
+        cy.contains(defaultMessages.settingsPage.specPattern.title).should('be.visible')
+      })
+    })
   })
 
   context('scaffold example specs', () => {

packages/app/cypress/e2e/integration/top-nav.spec.ts

@@ -28,7 +28,7 @@ describe('App Top Nav Workflows', () => {
         .should('have.attr', 'src')
         .and('contain', 'firefox')
 
-        cy.findByTestId('top-nav-active-browser').should('contain', 'Firefox v5')
+        cy.findByTestId('top-nav-active-browser').should('contain', 'Firefox 5')
       })
     })
 
@@ -50,7 +50,7 @@ describe('App Top Nav Workflows', () => {
         .should('have.attr', 'src')
         .and('contain', 'chrome')
 
-        cy.findByTestId('top-nav-active-browser').should('contain', 'Chrome v1')
+        cy.findByTestId('top-nav-active-browser').should('contain', 'Chrome 1')
       })
 
       it('shows list of browser options in dropdown when selected', () => {

packages/app/src/settings/SettingsCard.vue

@@ -5,6 +5,7 @@
     :max-height="maxHeight"
     lazy
     :data-cy="title"
+    :initially-open="initiallyOpen"
   >
     <template #target="{ open }">
       <ListRowHeader
@@ -48,6 +49,7 @@ defineProps<{
   description: string,
   icon: FunctionalComponent<SVGAttributes, {}>
   maxHeight: string
+  initiallyOpen?: boolean
 }>()
 
 </script>

packages/app/src/settings/SettingsContainer.spec.tsx

@@ -1,13 +1,14 @@
 import { SettingsContainerFragmentDoc } from '../generated/graphql-test'
 import { defaultMessages } from '@cy/i18n'
 import SettingsContainer from './SettingsContainer.vue'
+import { useRoute, useRouter } from 'vue-router'
 
 describe('<SettingsContainer />', { viewportHeight: 800, viewportWidth: 900 }, () => {
-  beforeEach(() => {
-    cy.mountFragment(SettingsContainerFragmentDoc, { render: (gql) => <SettingsContainer gql={gql} /> })
-  })
+  const mountSettingsConatainer = () => cy.mountFragment(SettingsContainerFragmentDoc, { render: (gql) => <SettingsContainer gql={gql} /> })
 
   it('expands and collapses device settings', () => {
+    mountSettingsConatainer()
+
     cy.contains('Device Settings').click()
 
     cy.findByText(defaultMessages.settingsPage.editor.title).should('be.visible')
@@ -20,15 +21,53 @@ describe('<SettingsContainer />', { viewportHeight: 800, viewportWidth: 900 }, (
   })
 
   it('expands and collapses project settings', () => {
+    mountSettingsConatainer()
+
     cy.contains('Project Settings').click()
 
-    cy.findByText(defaultMessages.settingsPage.projectId.title).should('be.visible')
-    cy.findByText(defaultMessages.settingsPage.experiments.title).should('be.visible')
-    cy.findByText(defaultMessages.settingsPage.specPattern.title).should('be.visible')
-    cy.findByText(defaultMessages.settingsPage.config.title).should('be.visible')
+    cy.findByText(defaultMessages.settingsPage.projectId.title).scrollIntoView().should('be.visible')
+    cy.findByText(defaultMessages.settingsPage.experiments.title).scrollIntoView().should('be.visible')
+    cy.findByText(defaultMessages.settingsPage.specPattern.title).scrollIntoView().should('be.visible')
+    cy.findByText(defaultMessages.settingsPage.config.title).scrollIntoView().should('be.visible')
 
     cy.findByText('Project Settings').click()
 
     cy.findByText(defaultMessages.settingsPage.projectId.title).should('not.exist')
   })
+
+  context('scrolls to setting', () => {
+    const sections = [
+      { section: 'device',
+        name: 'Device Settings',
+        settings: ['editor', 'proxy', 'testingPreferences'],
+      },
+      { section: 'project',
+        name: 'Project Settings',
+        settings: ['projectId', 'recordKey', 'specPattern', 'experiments', 'config'],
+      },
+    ]
+
+    sections.forEach(({ section, name, settings }) => settings.forEach((setting) => {
+      it(`should scroll to ${setting}`, () => {
+        cy.mountFragment(SettingsContainerFragmentDoc, {
+          render: (gql) => {
+            const router = useRouter()
+            const route = useRoute()
+
+            router.push({ path: '/settings', query: { section, setting } })
+
+            route.query.section = section
+            route.query.setting = setting
+
+            return <SettingsContainer gql={gql} />
+          },
+        })
+
+        cy.get(`[data-cy="${name}"]`).within(() => {
+          cy.get('[data-cy="collapsible-header"]').should('have.attr', 'aria-expanded', 'true')
+          cy.contains(defaultMessages.settingsPage[setting].title).should('be.visible')
+        })
+      })
+    }))
+  })
 })

packages/app/src/settings/SettingsContainer.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="h-full space-y-32px p-32px"
+    class="space-y-32px h-[calc(100vh-64px)] p-32px overflow-auto"
     data-cy="settings"
   >
     <div class="space-y-24px">
@@ -9,6 +9,7 @@
         :description="t('settingsPage.device.description')"
         :icon="IconLaptop"
         max-height="800px"
+        :initially-open="initiallyOpen.device"
       >
         <ExternalEditorSettings :gql="props.gql" />
         <ProxySettings :gql="props.gql" />
@@ -19,6 +20,7 @@
         :description="t('settingsPage.project.description')"
         :icon="IconFolder"
         max-height="10000px"
+        :initially-open="initiallyOpen.project"
       >
         <ProjectSettings
           v-if="props.gql"
@@ -55,6 +57,8 @@ import { SettingsContainer_ReconfigureProjectDocument, SettingsContainerFragment
 import IconLaptop from '~icons/cy/laptop_x24.svg'
 import IconFolder from '~icons/cy/folder-outline_x24.svg'
 import SettingsIcon from '~icons/cy/settings_x16.svg'
+import { useRoute } from 'vue-router'
+import { computed, onMounted, ref, watchEffect } from 'vue'
 
 const { t } = useI18n()
 
@@ -76,6 +80,29 @@ const props = defineProps<{
   gql: SettingsContainerFragment
 }>()
 
+const route = useRoute()
+
+const isMounted = ref(false)
+
+onMounted(() => isMounted.value = true)
+
+watchEffect(() => {
+  if (route.name === 'Settings' && isMounted.value) {
+    const scrollToElement = document.getElementById(`${(route.query.setting as string)}-anchor`)
+
+    if (scrollToElement) {
+      scrollToElement.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    }
+  }
+})
+
+const initiallyOpen = computed(() => {
+  return {
+    device: route.query.section === 'device',
+    project: route.query.section === 'project',
+  }
+})
+
 const openElectron = useMutation(SettingsContainer_ReconfigureProjectDocument)
 
 function reconfigure () {

packages/app/src/settings/SettingsSection.vue

@@ -1,6 +1,10 @@
 <template>
   <section>
-    <h2 class="font-medium text-size-16px text-gray-900 leading-24px inline-flex items-baseline align-middle">
+    <h2 class="font-medium text-size-16px text-gray-900 leading-24px inline-flex items-baseline align-middle relative">
+      <div
+        :id="`${anchorId}-anchor`"
+        class="top-[-10px] left-0 absolute"
+      />
       <slot name="title" />
       <code
         v-if="code"
@@ -19,5 +23,6 @@
 <script lang="ts" setup>
 defineProps<{
   code?: string
+  anchorId?: string
 }>()
 </script>

packages/app/src/settings/device/ExternalEditorSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <SettingsSection>
+  <SettingsSection anchor-id="editor">
     <template #title>
       {{ t('settingsPage.editor.title') }}
     </template>

packages/app/src/settings/device/ProxySettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <SettingsSection>
+  <SettingsSection anchor-id="proxy">
     <template #title>
       {{ t('settingsPage.proxy.title') }}
     </template>

packages/app/src/settings/device/TestingPreferences.vue

@@ -1,5 +1,5 @@
 <template>
-  <SettingsSection>
+  <SettingsSection anchor-id="testingPreferences">
     <template #title>
       {{ t('settingsPage.testingPreferences.title') }}
     </template>

packages/app/src/settings/project/Config.vue

@@ -1,5 +1,8 @@
 <template>
-  <SettingsSection data-cy="settings-config">
+  <SettingsSection
+    data-cy="settings-config"
+    anchor-id="config"
+  >
     <template #title>
       {{ t('settingsPage.config.title') }}
     </template>

packages/app/src/settings/project/Experiments.vue

@@ -1,5 +1,8 @@
 <template>
-  <SettingsSection data-cy="settings-experiments">
+  <SettingsSection
+    data-cy="settings-experiments"
+    anchor-id="experiments"
+  >
     <template #title>
       {{ t('settingsPage.experiments.title') }}
     </template>

packages/app/src/settings/project/ProjectId.vue

@@ -2,6 +2,7 @@
   <SettingsSection
     code="projectId"
     data-cy="settings-projectId"
+    anchor-id="projectId"
   >
     <template #title>
       {{ t('settingsPage.projectId.title') }}

packages/app/src/settings/project/RecordKey.vue

@@ -1,5 +1,8 @@
 <template>
-  <SettingsSection data-cy="settings-recordKey">
+  <SettingsSection
+    data-cy="settings-recordKey"
+    anchor-id="recordKey"
+  >
     <template #title>
       {{ t('settingsPage.recordKey.title') }}
     </template>

packages/app/src/settings/project/SpecPatterns.vue

@@ -1,5 +1,6 @@
 <template>
   <SettingsSection
+    anchor-id="specPattern"
     code="specPattern"
     data-cy="settings-specPatterns"
   >

packages/app/src/specs/DefaultSpecPatternNoContent.vue

@@ -12,7 +12,7 @@
     >
       {{ t('createSpec.noSpecsMessage') }}
     </p>
-    <OpenConfigFileInIDE :gql="props.gql">
+    <router-link :to="{ path: 'settings', query: { section: 'project', setting: 'specPattern' } }">
       <Button
         data-testid="view-spec-pattern"
         variant="outline"
@@ -22,7 +22,7 @@
       >
         {{ t('createSpec.viewSpecPatternButton') }}
       </Button>
-    </OpenConfigFileInIDE>
+    </router-link>
   </div>
 </template>
 
@@ -33,7 +33,6 @@ import Button from '@cy/components/Button.vue'
 import CreateSpecCards from './CreateSpecCards.vue'
 import { gql } from '@urql/vue'
 import type { CreateSpecContentFragment } from '../generated/graphql'
-import OpenConfigFileInIDE from '@packages/frontend-shared/src/gql-components/OpenConfigFileInIDE.vue'
 
 const { t } = useI18n()
 

packages/frontend-shared/src/gql-components/topnav/TopNav.vue

@@ -114,7 +114,7 @@
       <span
         data-cy="top-nav-active-browser"
         class="font-semibold"
-      >{{ props.gql.currentProject?.currentBrowser?.displayName }} v{{ props.gql.currentProject?.currentBrowser?.majorVersion }}</span>
+      >{{ props.gql.currentProject?.currentBrowser?.displayName }} {{ props.gql.currentProject?.currentBrowser?.majorVersion }}</span>
     </template>
     <TopNavListItem
       v-for="browser in props.gql.currentProject.browsers"

packages/frontend-shared/windi.config.ts

@@ -20,9 +20,9 @@ export const defaultConfig: WindiCssOptions = {
         mono: '"Fira Code", monospace',
       },
       colors,
-    },
-    cursor: {
-      'ew-resize': 'ew-resize',
+      cursor: {
+        'ew-resize': 'ew-resize',
+      },
     },
   },
   safelist,

packages/launchpad/src/setup/OpenBrowserList.vue

@@ -46,6 +46,8 @@
             :class="{ 'text-jade-600': browser.isSelected }"
           >{{ browser.displayName }}</div>
           <div class="text-14px text-gray-500 leading-20px">v{{ browser.majorVersion }}</div>
+          <div class="text-lg pt-2 text-indigo-600">{{ browser.displayName }}</div>
+          <div class="text-xs text-gray-400">v{{ browser.majorVersion }}</div>
         </label>
       </div>
     </div>

packages/reporter/src/header/controls.tsx

@@ -33,13 +33,6 @@ const Controls = observer(({ events = defaultEvents, appState }: Props) => {
 
   return (
     <div className='controls'>
-      {ifThen(appState.isPaused, (
-        <Tooltip placement='bottom' title={<p>Resume <span className='kbd'>C</span></p>} className='cy-tooltip'>
-          <button aria-label='Resume' className='play' onClick={emit('resume')}>
-            <PlayIcon />
-          </button>
-        </Tooltip>
-      ))}
       <Tooltip placement='bottom' title={<p>Open Testing Preferences</p>} className='cy-tooltip'>
         <button
           aria-label='Open testing preferences'
@@ -53,6 +46,13 @@ const Controls = observer(({ events = defaultEvents, appState }: Props) => {
           )}
         </button>
       </Tooltip>
+      {ifThen(appState.isPaused, (
+        <Tooltip placement='bottom' title={<p>Resume <span className='kbd'>C</span></p>} className='cy-tooltip'>
+          <button aria-label='Resume' className='play' onClick={emit('resume')}>
+            <PlayIcon />
+          </button>
+        </Tooltip>
+      ))}
       {ifThen(appState.isRunning && !appState.isPaused, (
         <Tooltip placement='bottom' title={<p>Stop Running <span className='kbd'>S</span></p>} className='cy-tooltip' visible={appState.studioActive ? false : null}>
           <button aria-label='Stop' className='stop' onClick={emit('stop')} disabled={appState.studioActive}>