fix: Update "Request Access" button state after requesting access (AC…

…I) (#22499)
cypress-io · Jun 24, 2022 · 0390470 · 0390470
1 parent 44641ba
commit 0390470
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 8 deletions.
diff --git a/packages/app/src/specs/SpecHeaderCloudDataTooltip.cy.tsx b/packages/app/src/specs/SpecHeaderCloudDataTooltip.cy.tsx
@@ -1,4 +1,4 @@
-import { SpecHeaderCloudDataTooltipFragmentDoc } from '../generated/graphql-test'
+import { SpecHeaderCloudDataTooltipFragmentDoc, SpecHeaderCloudDataTooltip_RequestAccessDocument } from '../generated/graphql-test'
 import SpecHeaderCloudDataTooltip from './SpecHeaderCloudDataTooltip.vue'
 import { get, set } from 'lodash'
 import { defaultMessages } from '@cy/i18n'
@@ -136,11 +136,29 @@ describe('SpecHeaderCloudDataTooltip', () => {
           .should('be.visible')
           .and('contain', get(defaultMessages, msgKeys.noAccess).replace('{0}', get(defaultMessages, msgKeys.docs)))
 
+          cy.percySnapshot()
+        })
+
+        it('should update to "Request Sent" when button is triggered', () => {
+          cy.stubMutationResolver(SpecHeaderCloudDataTooltip_RequestAccessDocument, (defineResult) => {
+            return defineResult({
+              cloudProjectRequestAccess: {
+                __typename: 'CloudProjectUnauthorized',
+                message: 'msg',
+                hasRequestedAccess: true,
+              },
+            })
+          })
+
+          cy.get('.v-popper').trigger('mouseenter')
+
           cy.findByTestId('request-access-button')
           .should('be.visible')
           .click()
 
-          cy.percySnapshot()
+          cy.findByTestId('access-requested-button')
+          .should('be.visible')
+          .should('be.disabled')
         })
       })
 

diff --git a/packages/app/src/specs/SpecHeaderCloudDataTooltip.vue b/packages/app/src/specs/SpecHeaderCloudDataTooltip.vue
@@ -100,9 +100,10 @@ import ConnectIcon from '~icons/cy/chain-link_x16.svg'
 import UserOutlineIcon from '~icons/cy/user-outline_x16.svg'
 import SendIcon from '~icons/cy/paper-airplane_x16.svg'
 import ExternalLink from '@cy/gql-components/ExternalLink.vue'
-import { RunsErrorRenderer_RequestAccessDocument, SpecHeaderCloudDataTooltipFragment } from '../generated/graphql'
+import type { SpecHeaderCloudDataTooltipFragment } from '../generated/graphql'
+import { SpecHeaderCloudDataTooltip_RequestAccessDocument } from '../generated/graphql'
 import { useI18n } from '@cy/i18n'
-import { computed } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { gql, useMutation } from '@urql/vue'
 const { t } = useI18n()
 
@@ -138,6 +139,26 @@ fragment SpecHeaderCloudDataTooltip on Query {
 }
 `
 
+gql`
+mutation SpecHeaderCloudDataTooltip_RequestAccess( $projectId: String! ) {
+  cloudProjectRequestAccess(projectSlug: $projectId) {
+    __typename
+    ... on CloudProjectUnauthorized {
+      message
+      hasRequestedAccess
+    }
+  }
+}
+`
+
+const hasRequestedAccess = ref(false)
+
+onMounted(() => {
+  if (props.gql.currentProject?.cloudProject?.__typename === 'CloudProjectUnauthorized') {
+    hasRequestedAccess.value = props.gql.currentProject.cloudProject.hasRequestedAccess ?? false
+  }
+})
+
 const projectConnectionStatus = computed(() => {
   if (!props.gql.cloudViewer) return 'LOGGED_OUT'
 
@@ -146,7 +167,7 @@ const projectConnectionStatus = computed(() => {
   if (props.gql.currentProject?.cloudProject?.__typename === 'CloudProjectNotFound') return 'NOT_FOUND'
 
   if (props.gql.currentProject?.cloudProject?.__typename === 'CloudProjectUnauthorized') {
-    if (props.gql.currentProject.cloudProject.hasRequestedAccess) {
+    if (hasRequestedAccess.value) {
       return 'ACCESS_REQUESTED'
     }
 
@@ -156,13 +177,19 @@ const projectConnectionStatus = computed(() => {
   return 'CONNECTED'
 })
 
-const requestAccessMutation = useMutation(RunsErrorRenderer_RequestAccessDocument)
+const requestAccessMutation = useMutation(SpecHeaderCloudDataTooltip_RequestAccessDocument)
 
-function requestAccess () {
+async function requestAccess () {
   const projectId = props.gql.currentProject?.projectId
 
   if (projectId) {
-    requestAccessMutation.executeMutation({ projectId })
+    const result = await requestAccessMutation.executeMutation({ projectId })
+
+    if (result.data?.cloudProjectRequestAccess?.__typename === 'CloudProjectUnauthorized') {
+      hasRequestedAccess.value = result.data.cloudProjectRequestAccess.hasRequestedAccess ?? false
+    } else {
+      hasRequestedAccess.value = false
+    }
   }
 }