feat: Improve launchpad browser warning (#18939)

Co-authored-by: Tim Griesser <tgriesser10@gmail.com>

Author: chrisbreiding

packages/data-context/src/actions/AppActions.ts

@@ -35,7 +35,13 @@ export class AppActions {
       browser = (await this.ctx._apis.appApi.ensureAndGetByNameOrPath(browserNameOrPath)) as FoundBrowser | undefined
     } catch (err: unknown?) {
       this.ctx.debug('Error getting browser by name or path (%s): %s', browserNameOrPath, err?.stack || err)
-      this.ctx.coreData.wizard.browserErrorMessage = `The browser '${browserNameOrPath}' was not found on your system or is not supported by Cypress. Choose a browser below.`
+      const message = err.details ? `${err.message}\n\n\`\`\`\n${err.details}\n\`\`\`` : err.message
+
+      this.ctx.coreData.wizard.warnings.push({
+        title: 'Warning: Browser Not Found',
+        message,
+        setupStep: 'setupComplete',
+      })
     }
 
     if (browser) {

packages/data-context/src/data/coreDataShape.ts

@@ -1,4 +1,4 @@
-import { BUNDLERS, FoundBrowser, FoundSpec, FullConfig, Preferences, DevicePreferences, devicePreferenceDefaults, Editor } from '@packages/types'
+import { BUNDLERS, FoundBrowser, FoundSpec, FullConfig, Preferences, DevicePreferences, devicePreferenceDefaults, Editor, Warning } from '@packages/types'
 import type { NexusGenEnums, TestingTypeEnum } from '@packages/graphql/src/gen/nxs.gen'
 import type { BrowserWindow } from 'electron'
 import type { ChildProcess } from 'child_process'
@@ -73,7 +73,7 @@ export interface WizardDataShape {
   chosenLanguage: NexusGenEnums['CodeLanguageEnum']
   chosenManualInstall: boolean
   chosenBrowser: FoundBrowser | null
-  browserErrorMessage: string | null
+  warnings: Warning[]
 }
 
 export interface ElectronShape {
@@ -132,7 +132,7 @@ export function makeCoreData (): CoreDataShape {
       allBundlers: BUNDLERS,
       history: ['welcome'],
       chosenBrowser: null,
-      browserErrorMessage: null,
+      warnings: [],
     },
     user: null,
     electron: {

packages/frontend-shared/cypress/support/mock-graphql/clientTestContext.ts

@@ -37,7 +37,7 @@ export interface ClientTestContext {
     allBundlers: WizardBundler[]
     history: WizardStep[]
     chosenBrowser: null
-    browserErrorMessage: null
+    warnings: []
   }
   user: AuthenticatedUserShape | null
   cloudTypes: typeof cloudTypes
@@ -87,7 +87,7 @@ export function makeClientTestContext (): ClientTestContext {
       allBundlers,
       history: ['welcome'],
       chosenBrowser: null,
-      browserErrorMessage: null,
+      warnings: [],
     },
     user: null,
     cloudTypes,

packages/frontend-shared/cypress/support/mock-graphql/stubgql-Wizard.ts

@@ -46,7 +46,7 @@ export const stubWizard: MaybeResolver<Wizard> = {
       ...testNodeId('WizardSampleConfigFile'),
       filePath: 'cypress/fixtures/example.json',
       description: 'Please do the necessary changes to your file',
-      content: dedent`{ 
+      content: dedent`{
         "foo": 1,
         "bar": 42
       }`,
@@ -97,4 +97,5 @@ export const stubWizard: MaybeResolver<Wizard> = {
       isSelected: idx === 0,
     }
   }),
+  warnings: [],
 }

packages/graphql/schemas/schema.graphql

@@ -598,9 +598,6 @@ type ProjectPreferences {
 type Query {
   baseError: BaseError
 
-  """An error related to finding a browser"""
-  browserErrorMessage: String
-
   """Returns an object conforming to the Relay spec"""
   cloudNode(
     """An ID for a Node conforming to the Relay spec"""
@@ -758,6 +755,13 @@ type VersionData {
   latest: Version!
 }
 
+"""A warning"""
+type Warning {
+  message: String!
+  setupStep: String
+  title: String!
+}
+
 """
 The Wizard is a container for any state associated with initial onboarding to Cypress
 """
@@ -809,6 +813,9 @@ type Wizard {
 
   """The title of the page, given the current step of the wizard"""
   title: String
+
+  """A list of warnings"""
+  warnings: [Warning!]!
 }
 
 """Wizard bundler"""

packages/graphql/src/schemaTypes/objectTypes/gql-Query.ts

@@ -48,13 +48,6 @@ export const Query = objectType({
       resolve: (root, args, ctx) => ctx.appData.projects,
     })
 
-    t.string('browserErrorMessage', {
-      description: 'An error related to finding a browser',
-      resolve: (source, args, ctx) => {
-        return ctx.wizardData.browserErrorMessage
-      },
-    })
-
     t.nonNull.boolean('isInGlobalMode', {
       description: 'Whether the app is in global mode or not',
       resolve: (source, args, ctx) => !ctx.currentProject,

packages/graphql/src/schemaTypes/objectTypes/gql-Wizard.ts

@@ -7,6 +7,20 @@ import { TestingTypeEnum, WizardStepEnum } from '../enumTypes/gql-WizardEnums'
 import { WizardCodeLanguage } from './gql-WizardCodeLanguage'
 import { WizardSampleConfigFile } from './gql-WizardSampleConfigFile'
 
+const Warning = objectType({
+  name: 'Warning',
+  description: 'A warning',
+  definition (t) {
+    t.nonNull.string('title')
+    t.nonNull.string('message')
+    t.string('setupStep')
+  },
+  sourceType: {
+    module: '@packages/types',
+    export: 'Warning',
+  },
+})
+
 export const Wizard = objectType({
   name: 'Wizard',
   description: 'The Wizard is a container for any state associated with initial onboarding to Cypress',
@@ -98,6 +112,14 @@ export const Wizard = objectType({
       description: 'The title of the page, given the current step of the wizard',
       resolve: (source, args, ctx) => ctx.wizard.title ?? null,
     })
+
+    t.nonNull.list.nonNull.field('warnings', {
+      type: Warning,
+      description: 'A list of warnings',
+      resolve: (source, args, ctx) => {
+        return ctx.coreData.wizard.warnings
+      },
+    })
   },
   sourceType: {
     module: '@packages/data-context/src/data/coreDataShape',

packages/launchpad/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "check-ts": "vue-tsc --noEmit",
     "build-prod-ui": "cross-env NODE_ENV=production vite build",
+    "postinstall": "patch-package",
     "clean": "rimraf dist && rimraf ./node_modules/.vite && rimraf dist-e2e && echo 'cleaned'",
     "clean-deps": "rimraf node_modules",
     "test": "yarn cypress:run:ct && yarn types",
@@ -28,6 +29,7 @@
     "@packages/frontend-shared": "0.0.0-development",
     "@percy/cypress": "^3.1.0",
     "@testing-library/cypress": "8.0.0",
+    "@toycode/markdown-it-class": "1.2.4",
     "@urql/core": "2.3.1",
     "@urql/devtools": "2.0.3",
     "@urql/vue": "0.4.3",
@@ -46,6 +48,7 @@
     "graphql-tag": "^2.12.5",
     "gravatar": "1.8.0",
     "javascript-time-ago": "2.3.8",
+    "markdown-it": "12.2.0",
     "rimraf": "3.0.2",
     "rollup-plugin-polyfill-node": "^0.7.0",
     "type-fest": "^2.3.4",
@@ -71,6 +74,11 @@
     "script",
     "src"
   ],
+  "workspaces": {
+    "nohoist": [
+      "@toycode/markdown-it-class"
+    ]
+  },
   "vite": {
     "optimizeDeps": {
       "include": [

packages/launchpad/patches/@toycode+markdown-it-class+1.2.4.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/@toycode/markdown-it-class/index.js b/node_modules/@toycode/markdown-it-class/index.js
+index 8e8c8f4..5e2539d 100644
+--- a/node_modules/@toycode/markdown-it-class/index.js
++++ b/node_modules/@toycode/markdown-it-class/index.js
+@@ -8,7 +8,7 @@ const toArray = a => (Array.isArray(a) ? a : [a])
+
+ function parseTokens(tokens) {
+   tokens.forEach(token => {
+-    if (/(_open$|image)/.test(token.type) && mapping[token.tag]) {
++    if (/(_open$|image|code_inline)/.test(token.type) && mapping[token.tag]) {
+       const orig = splitWithSpace(token.attrGet('class'))
+       const addition = toArray(mapping[token.tag])
+       token.attrSet('class', [...orig, ...addition].join(' '))

packages/launchpad/src/components/markdown/Markdown.spec.tsx

@@ -0,0 +1,44 @@
+import Markdown from './Markdown.vue'
+
+describe('<Markdown />', () => {
+  it('renders styled markdown', () => {
+    const text = `
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec justo feugiat, auctor nunc ac, volutpat arcu. Suspendisse faucibus aliquam ante, sit amet iaculis dolor posuere et. In ut placerat leo.
+
+Has **bold text** and *italic text* and \`code\`.
+
+- list 1
+- list 2
+- list 3
+
+1. numbered list 1
+2. numbered list 2
+3. numbered list 3
+
+[a link](https://example.com)
+
+\`\`\`
+const heres = {
+  some: 'code',
+}
+\`\`\`
+
+    `
+
+    cy.mount(<Markdown
+      text={text}
+      codeClass='bg-gray-100 border-gray-300'
+    />)
+
+    cy.get('code').first().should('have.class', 'bg-gray-100 border-gray-300')
+    cy.get('pre').first().should('have.class', 'bg-gray-100 border-gray-300')
+    cy.get('ul').should('have.class', 'list-disc')
+  })
+})