chore: (studio) AI status updates (#32511)

Author: astone123

packages/app/src/runner/SpecRunnerOpenMode.vue

@@ -98,6 +98,9 @@
             :event-manager="eventManager"
             :studio-status="studioStatus"
             :aut-url-selector="autUrlSelector"
+            :user-project-status-store="userProjectStatusStore"
+            :has-requested-project-access="hasRequestedProjectAccess"
+            :request-project-access-mutation="requestProjectAccessMutation"
           />
         </HideDuringScreenshot>
       </template>
@@ -122,7 +125,7 @@ import ScreenshotHelperPixels from './screenshot/ScreenshotHelperPixels.vue'
 import { useScreenshotStore } from '../store/screenshot-store'
 import ChooseExternalEditorModal from '@packages/frontend-shared/src/gql-components/ChooseExternalEditorModal.vue'
 import { useMutation, gql } from '@urql/vue'
-import { SpecRunnerOpenMode_OpenFileInIdeDocument, StudioStatus_ChangeDocument } from '../generated/graphql'
+import { SpecRunnerOpenMode_OpenFileInIdeDocument, StudioStatus_ChangeDocument, SpecRunner_Studio_RequestAccessDocument } from '../generated/graphql'
 import type { SpecRunnerFragment } from '../generated/graphql'
 import { usePreferences } from '../composables/usePreferences'
 import ScriptError from './ScriptError.vue'
@@ -136,6 +139,7 @@ import { runnerConstants } from './runner-constants'
 import { useStudioStore } from '../store/studio-store'
 import StudioPanel from '../studio/StudioPanel.vue'
 import { useSubscription } from '../graphql'
+import { useUserProjectStatusStore } from '@packages/frontend-shared/src/store/user-project-status-store'
 
 // this is used by the StudioPanel to access the AUT URL input
 const autUrlSelector = '.aut-url-input'
@@ -149,6 +153,8 @@ const {
   collapsedNavBarWidth,
 } = runnerConstants
 
+const userProjectStatusStore = useUserProjectStatusStore()
+
 gql`
 fragment SpecRunner_Preferences on Query {
   localSettings {
@@ -167,6 +173,32 @@ fragment SpecRunner_Preferences on Query {
 gql`
 fragment SpecRunner_Studio on Query {
   cloudStudioRequested
+  currentProject {
+    id
+    projectId
+    cloudProject {
+      __typename
+      ... on CloudProjectUnauthorized {
+        message
+        hasRequestedAccess
+      }
+      ... on CloudProject {
+        id
+      }
+    }
+  }
+}
+`
+
+gql`
+mutation SpecRunner_Studio_RequestAccess( $projectId: String! ) {
+  cloudProjectRequestAccess(projectSlug: $projectId) {
+    __typename
+    ... on CloudProjectUnauthorized {
+      message
+      hasRequestedAccess
+    }
+  }
 }
 `
 
@@ -232,6 +264,12 @@ const {
 
 const studioStore = useStudioStore()
 
+const hasRequestedProjectAccess = computed(() => {
+  return (props.gql.currentProject?.cloudProject?.__typename === 'CloudProjectUnauthorized' && props.gql.currentProject?.cloudProject?.hasRequestedAccess) ?? false
+})
+
+const requestProjectAccessMutation = useMutation(SpecRunner_Studio_RequestAccessDocument)
+
 const handleStudioPanelClose = () => {
   eventManager.emit('studio:cancel', undefined)
 }

packages/app/src/studio/StudioPanel.vue

@@ -28,10 +28,11 @@
 import { ref, onMounted, onBeforeUnmount, watch } 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 } from '@urql/vue'
+import { useMutation, gql, UseMutationResponse } from '@urql/vue'
 
 // Mirrors the ReactDOM.Root type since incorporating those types
 // messes up vue typing elsewhere
@@ -53,6 +54,9 @@ const props = defineProps<{
   studioStatus: string | null
   cloudStudioSessionId?: string
   autUrlSelector: string
+  userProjectStatusStore: UserProjectStatusStore
+  hasRequestedProjectAccess: boolean
+  requestProjectAccessMutation: UseMutationResponse<any, any>
 }>()
 
 interface StudioApp { default: StudioAppDefaultShape }
@@ -79,6 +83,9 @@ const maybeRenderReactComponent = () => {
     onStudioPanelClose: props.onStudioPanelClose,
     studioSessionId: props.cloudStudioSessionId,
     autUrlSelector: props.autUrlSelector,
+    userProjectStatusStore: props.userProjectStatusStore,
+    hasRequestedProjectAccess: props.hasRequestedProjectAccess,
+    requestProjectAccessMutation: props.requestProjectAccessMutation,
   })
 
   // Store the react root in a weak map keyed by the container. We do this so that we have a reference

packages/app/src/studio/studio-app-types.ts

@@ -2,8 +2,38 @@
 // `studio` bundle. It is downloaded and copied to the app.
 // It should not be modified directly in the app.
 
+import type { CloudStatus } from '@cy/store/user-project-status-store'
+
 export type RecordingState = 'recording' | 'paused' | 'disabled'
 
+export interface UserProjectStatusStore {
+  user: {
+    isLoggedIn: boolean
+  }
+  project: {
+    isProjectConnected: boolean
+    isNotAuthorized: boolean
+  }
+  openLoginConnectModal: (options: { utmMedium: string }) => void
+  cloudStatus: CloudStatus
+  projectId: string
+}
+
+export interface RequestProjectAccessMutationResult {
+  data?: {
+    cloudProjectRequestAccess: {
+      hasRequestedAccess: boolean
+    }
+  }
+  error?: any
+}
+
+export interface RequestProjectAccessMutation {
+  executeMutation: (variables: {
+    projectId: string
+  }) => Promise<RequestProjectAccessMutationResult>
+}
+
 export interface StudioPanelProps {
   canAccessStudioAI: boolean
   onStudioPanelClose?: () => void
@@ -13,6 +43,10 @@ export interface StudioPanelProps {
   useCypress?: CypressShape
   autUrlSelector?: string
   studioAiAvailable?: boolean
+  userProjectStatusStore: UserProjectStatusStore
+  hasRequestedProjectAccess: boolean
+  requestProjectAccessMutation: RequestProjectAccessMutation
+
 }
 
 export type StudioPanelShape = (props: StudioPanelProps) => JSX.Element