internal: (studio) display cert error (#32657)

Author: mschile

packages/app/package.json

@@ -24,7 +24,7 @@
   "devDependencies": {
     "@cypress-design/icon-registry": "^1.5.1",
     "@cypress-design/vue-button": "^1.6.0",
-    "@cypress-design/vue-icon": "^1.18.0",
+    "@cypress-design/vue-icon": "^1.33.0",
     "@cypress-design/vue-spinner": "^1.0.0",
     "@cypress-design/vue-statusicon": "^1.0.0",
     "@cypress-design/vue-tabs": "^1.2.2",

packages/app/src/runner/SpecRunnerOpenMode.vue

@@ -107,6 +107,7 @@
             :on-studio-panel-close="handleStudioPanelClose"
             :event-manager="eventManager"
             :studio-status="studioStatus"
+            :is-cert-error="isCertError"
             :aut-url-selector="autUrlSelector"
             :user-project-status-store="userProjectStatusStore"
             :has-requested-project-access="hasRequestedProjectAccess"
@@ -248,6 +249,7 @@ gql`
 subscription StudioStatus_Change {
   studioStatusChange {
     status
+    isCertError
     canAccessStudioAI
   }
 }
@@ -304,12 +306,14 @@ const isSpecsListOpenPreferences = computed(() => {
   return props.gql.localSettings.preferences.isSpecsListOpen ?? false
 })
 
-// Initialize with null and wait for subscription to update
+// Initialize and wait for subscription to update
 const studioStatus = ref<string | null>(null)
+const isCertError = ref<boolean | null>(null)
 
 useSubscription({ query: StudioStatus_ChangeDocument }, (_, data) => {
   if (data?.studioStatusChange) {
     studioStatus.value = data.studioStatusChange.status
+    isCertError.value = data.studioStatusChange.isCertError
     studioStore.setCanAccessStudioAI(data.studioStatusChange.canAccessStudioAI)
   }
 

packages/app/src/studio/StudioErrorPanel.cy.tsx

@@ -1,11 +1,11 @@
 import StudioErrorPanel from './StudioErrorPanel.vue'
 import type { EventManager } from '../runner/event-manager'
+import { IconCypressStudio } from '@cypress-design/vue-icon'
+import { h } from 'vue'
 
 describe('<StudioErrorPanel />', () => {
   it('renders error state with correct content', () => {
-    const mockEventManager = {
-      emit: cy.stub(),
-    } as unknown as EventManager
+    const mockEventManager = {} as unknown as EventManager
 
     cy.mount(
       <StudioErrorPanel
@@ -32,11 +32,59 @@ describe('<StudioErrorPanel />', () => {
     .should('contain', 'Retry')
   })
 
-  it('calls onRetry when retry button is clicked', () => {
+  it('renders error state with custom content', () => {
     const mockEventManager = {
-      emit: cy.stub(),
+      ws: {
+        emit: cy.stub().as('emit'),
+      },
     } as unknown as EventManager
 
+    cy.mount(
+      <StudioErrorPanel
+        eventManager={mockEventManager}
+        onRetry={() => {}}
+        title="Custom title"
+        message="Custom message"
+        icon={() => {
+          return h(IconCypressStudio, {
+            size: '48',
+            'fill-color': 'gray-500',
+          })
+        }}
+        learnMoreUrl="https://on.cypress.io/custom-learn-more-url"
+      />,
+    )
+
+    // Check that the error panel is displayed
+    cy.findByTestId('studio-error-panel').should('be.visible')
+
+    // Check for the error icon
+    cy.findByTestId('studio-error-panel')
+    .find('svg')
+    .should('be.visible')
+
+    // Check for the error title
+    cy.findByTestId('studio-error-title').should('contain.text', 'Custom title')
+    // Check for the error description
+    cy.findByTestId('studio-error-message').should('contain.text', 'Custom message')
+
+    // Check for the learn more button
+    cy.findByTestId('studio-error-learn-more-button')
+    .should('be.visible')
+    .should('contain', 'Learn more')
+    .click()
+
+    cy.get('@emit').should('have.been.calledOnceWith', 'external:open', 'https://on.cypress.io/custom-learn-more-url')
+
+    // Check for the retry button
+    cy.findByTestId('studio-error-retry-button')
+    .should('be.visible')
+    .should('contain', 'Retry')
+  })
+
+  it('calls onRetry when retry button is clicked', () => {
+    const mockEventManager = {} as unknown as EventManager
+
     const onRetry = cy.stub().as('onRetry')
 
     cy.mount(
@@ -52,9 +100,7 @@ describe('<StudioErrorPanel />', () => {
   })
 
   it('shows Studio button in header', () => {
-    const mockEventManager = {
-      emit: cy.stub(),
-    } as unknown as EventManager
+    const mockEventManager = {} as unknown as EventManager
 
     cy.mount(
       <StudioErrorPanel

packages/app/src/studio/StudioErrorPanel.vue

@@ -4,50 +4,80 @@
     data-cy="studio-error-panel"
     container-class="text-center"
   >
-    <div class="relative">
-      <IconTechnologyDashboardFail
-        size="48"
-        stroke-color="gray-500"
-        fill-color="gray-900"
-        secondary-fill-color="red-200"
-        secondary-stroke-color="red-500"
-      />
+    <div
+      data-cy="studio-error-icon"
+      class="relative"
+    >
+      <component :is="props.icon" />
     </div>
 
     <div class="flex flex-col items-center gap-[4px] max-w-[448px]">
-      <h2 class="text-white text-[16px] leading-[24px] font-medium">
-        Something went wrong
+      <h2
+        data-cy="studio-error-title"
+        class="text-white text-[16px] leading-[24px] font-medium"
+      >
+        {{ props.title }}
       </h2>
-      <p class="text-gray-400 text-[16px] leading-[24px]">
-        There was a problem with Cypress Studio. Our team has been notified.
-        If the problem persists, please try again later.
+      <p
+        data-cy="studio-error-message"
+        class="text-gray-400 text-[16px] leading-[24px]"
+      >
+        {{ props.message }}
       </p>
     </div>
 
-    <Button
-      variant="outline-dark"
-      size="32"
-      data-cy="studio-error-retry-button"
-      @click="onRetry"
-    >
-      <IconActionRefresh
-        size="16"
-        class="mr-2 pt-[1px]"
-        stroke-color="gray-500"
-      />
-      Retry
-    </Button>
+    <div class="flex gap-3">
+      <Button
+        v-if="props.learnMoreUrl"
+        variant="outline-dark"
+        size="32"
+        data-cy="studio-error-learn-more-button"
+        @click="() => props.eventManager?.ws?.emit('external:open', props.learnMoreUrl)"
+      >
+        Learn more
+      </Button>
+      <Button
+        variant="outline-dark"
+        size="32"
+        data-cy="studio-error-retry-button"
+        @click="props.onRetry"
+      >
+        <IconActionRefresh
+          size="16"
+          class="mr-2 pt-[1px]"
+          stroke-color="gray-500"
+        />
+        Retry
+      </Button>
+    </div>
   </StudioPanelContainer>
 </template>
 
 <script lang="ts" setup>
+import { withDefaults, h } from 'vue'
 import Button from '@cypress-design/vue-button'
 import { IconTechnologyDashboardFail, IconActionRefresh } from '@cypress-design/vue-icon'
 import StudioPanelContainer from './StudioPanelContainer.vue'
 import type { EventManager } from '../runner/event-manager'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   eventManager: EventManager
+  title?: string
+  message?: string
+  icon?: any
+  learnMoreUrl?: string
   onRetry: () => void
-}>()
+}>(), {
+  title: 'Something went wrong',
+  message: 'There was a problem with Cypress Studio. Our team has been notified. If the problem persists, please try again later.',
+  icon: () => {
+    return h(IconTechnologyDashboardFail, {
+      size: '48',
+      'stroke-color': 'gray-500',
+      'fill-color': 'gray-900',
+      'secondary-fill-color': 'red-200',
+      'secondary-stroke-color': 'red-500',
+    })
+  },
+})
 </script>

packages/app/src/studio/StudioPanel.cy.tsx

@@ -0,0 +1,33 @@
+import type { UserProjectStatusStore } from '@cy/store/user-project-status-store'
+import type { EventManager } from '../runner/event-manager'
+import type { UseMutationResponse } from '@urql/vue'
+import StudioPanel from './StudioPanel.vue'
+
+describe('StudioPanel', () => {
+  it('renders the error panel with a certificate error', () => {
+    const mockEventManager = {} as unknown as EventManager
+    const mockUserProjectStatusStore = {} as unknown as UserProjectStatusStore
+    const mockRequestProjectAccessMutation = {} as unknown as UseMutationResponse<any, any>
+
+    cy.mount(<StudioPanel
+      isCertError={true}
+      eventManager={mockEventManager}
+      studioStatus="IN_ERROR"
+      onStudioPanelClose={() => {}}
+      canAccessStudioAI={true}
+      userProjectStatusStore={mockUserProjectStatusStore}
+      hasRequestedProjectAccess={false}
+      requestProjectAccessMutation={mockRequestProjectAccessMutation}
+      autUrlSelector="https://example.com"
+    />)
+
+    cy.findByTestId('studio-error-panel').should('be.visible')
+    cy.findByTestId('studio-error-icon').should('be.visible')
+    cy.findByTestId('studio-error-title').should('have.text', 'Configure your proxy to use Cypress Studio')
+    cy.findByTestId('studio-error-message').should('have.text', 'Cypress Studio requires an internet connection. To continue, you may need to configure Cypress with your proxy settings.')
+    cy.findByTestId('studio-error-learn-more-button').should('have.text', ' Learn more ')
+    cy.findByTestId('studio-error-retry-button').should('have.text', ' Retry ')
+
+    cy.percySnapshot()
+  })
+})

packages/app/src/studio/StudioPanel.vue

@@ -11,7 +11,11 @@
   <div v-else-if="props.studioStatus === 'IN_ERROR' || error">
     <StudioErrorPanel
       :event-manager="props.eventManager"
-      :on-retry="handleRetry"
+      :title="errorPanelProps.title"
+      :message="errorPanelProps.message"
+      :icon="errorPanelProps.icon"
+      :learn-more-url="errorPanelProps.learnMoreUrl"
+      :on-retry="errorPanelProps.onRetry"
     />
   </div>
   <div
@@ -25,14 +29,15 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
+import { ref, onMounted, onBeforeUnmount, watch, computed, h } from 'vue'
 import { init, loadRemote, registerRemotes } from '@module-federation/runtime'
 import type { StudioAppDefaultShape, StudioPanelShape } from './studio-app-types'
 import type { UserProjectStatusStore } from '@cy/store/user-project-status-store'
 import LoadingStudioPanel from './LoadingStudioPanel.vue'
 import StudioErrorPanel from './StudioErrorPanel.vue'
 import type { EventManager } from '../runner/event-manager'
 import { useMutation, gql, UseMutationResponse } from '@urql/vue'
+import { IconCypressStudio } from '@cypress-design/vue-icon'
 
 // Mirrors the ReactDOM.Root type since incorporating those types
 // messes up vue typing elsewhere
@@ -52,6 +57,7 @@ const props = defineProps<{
   onStudioPanelClose: () => void
   eventManager: EventManager
   studioStatus: string | null
+  isCertError?: boolean | null
   cloudStudioSessionId?: string
   autUrlSelector: string
   userProjectStatusStore: UserProjectStatusStore
@@ -68,6 +74,27 @@ const containerReactRootMap = new WeakMap<HTMLElement, Root>()
 
 const retryStudioMutation = useMutation(retryStudioMutationGql)
 
+const errorPanelProps = computed(() => {
+  if (props.isCertError) {
+    return {
+      title: 'Configure your proxy to use Cypress Studio',
+      message: 'Cypress Studio requires an internet connection. To continue, you may need to configure Cypress with your proxy settings.',
+      icon: () => {
+        return h(IconCypressStudio, {
+          size: '48',
+          'fill-color': 'gray-500',
+        })
+      },
+      learnMoreUrl: 'https://on.cypress.io/proxy-configuration',
+      onRetry: handleRetry,
+    }
+  }
+
+  return {
+    onRetry: handleRetry,
+  }
+})
+
 const maybeRenderReactComponent = () => {
   // Skip rendering if studio is initializing or errored out
   if (props.studioStatus === 'INITIALIZING' || props.studioStatus === 'IN_ERROR') {

packages/data-context/graphql/schemaTypes/objectTypes/gql-Subscription.ts

@@ -11,6 +11,10 @@ export const StudioStatusPayload = objectType({
       type: StudioStatusTypeEnum,
     })
 
+    t.boolean('isCertError', {
+      description: 'Whether the studio status is an IN_ERROR due to a certificate error',
+    })
+
     t.nonNull.boolean('canAccessStudioAI')
   },
 })
@@ -70,6 +74,7 @@ export const Subscription = subscriptionType({
         if (currentStatus === 'IN_ERROR') {
           return {
             status: 'IN_ERROR' as const,
+            isCertError: ctx.coreData.studioLifecycleManager?.getIsCertError(),
             canAccessStudioAI: false,
           }
         }

packages/data-context/schemas/schema.graphql

@@ -2169,12 +2169,14 @@ enum SpecType {
 
 type StudioStatusPayload {
   canAccessStudioAI: Boolean!
+
+  """Whether the studio status is an IN_ERROR due to a certificate error"""
+  isCertError: Boolean
   status: StudioStatusType!
 }
 
 enum StudioStatusType {
   ENABLED
-  INITIALIZED
   INITIALIZING
   IN_ERROR
   NOT_INITIALIZED

packages/driver/cypress/e2e/commands/prompt/prompt-initialization-error.cy.ts

@@ -46,7 +46,7 @@ describe('src/cy/commands/prompt', () => {
     backendStub.withArgs('wait:for:prompt:ready').resolves({ success: false, error })
 
     cy.on('fail', (err) => {
-      expect(err.message).to.include('`cy.prompt` requires an internet connection to work. To continue, you may need to configure Cypress with your proxy settings.')
+      expect(err.message).to.include('`cy.prompt` requires an internet connection. To continue, you may need to configure Cypress with your proxy settings.')
       done()
     })
 

packages/driver/src/cypress/error_messages.ts

@@ -1356,7 +1356,7 @@ export default {
     },
     promptProxyError: {
       message: stripIndent`\
-      \`cy.prompt\` requires an internet connection to work. To continue, you may need to configure Cypress with your proxy settings.
+      \`cy.prompt\` requires an internet connection. To continue, you may need to configure Cypress with your proxy settings.
       `,
       docsUrl: 'https://on.cypress.io/proxy-configuration',
     },