feat: <ExternalLink /> component enhancements (#20903)

* feat: <ExternalLink /> component enhancements

* Update test

* Update test

* Update with feedback

* Update ExternalLink.cy.tsx

packages/app/src/runs/modals/CreateCloudOrgModal.vue

@@ -9,16 +9,15 @@
       <p class=" mb-16px text-gray-700">
         {{ t('runs.connect.modal.createOrg.description') }}
       </p>
-      <div @click="startWaitingOrgToBeCreated()">
-        <ExternalLink
-          class="border rounded mx-auto outline-none py-11px px-16px border-indigo-500 bg-indigo-500 text-white inline-block hocus-default max-h-60px"
-          :href="createOrgUrl"
-          :include-graphql-port="true"
-        >
-          <i-cy-office-building_x16 class="inline-block icon-dark-white" />
-          {{ t('runs.connect.modal.createOrg.button') }}
-        </ExternalLink>
-      </div>
+      <ExternalLink
+        class="border rounded mx-auto outline-none py-11px px-16px border-indigo-500 bg-indigo-500 text-white inline-block hocus-default max-h-60px"
+        :href="createOrgUrl"
+        :include-graphql-port="true"
+        @click="startWaitingOrgToBeCreated()"
+      >
+        <i-cy-office-building_x16 class="inline-block icon-dark-white" />
+        {{ t('runs.connect.modal.createOrg.button') }}
+      </ExternalLink>
     </div>
     <template #footer>
       <div class="flex gap-16px">

packages/frontend-shared/src/gql-components/ExternalLink.cy.tsx

@@ -0,0 +1,93 @@
+import ExternalLink from './ExternalLink.vue'
+import { ExternalLink_OpenExternalDocument } from '../generated/graphql'
+
+describe('<ExternalLink />', () => {
+  beforeEach(() => {
+    const onClickSpy = cy.spy().as('onClickSpy')
+
+    cy.mount(() => (
+      <ExternalLink
+        href='https://on.cypress.io/ci'
+        // @ts-ignore - vue @click isn't represented in JSX
+        onClick={onClickSpy}
+      >
+        Click me!
+      </ExternalLink>
+    ))
+  })
+
+  it('opens external link on click', () => {
+    const urlStub = cy.stub()
+
+    cy.stubMutationResolver(ExternalLink_OpenExternalDocument, (defineResult, { url }) => {
+      urlStub(url)
+
+      return defineResult({
+        openExternal: true,
+      })
+    })
+
+    cy.contains('a', 'Click me!')
+    .click()
+
+    cy.wrap(urlStub).should('have.been.calledWith', 'https://on.cypress.io/ci')
+    cy.get('@onClickSpy').should('have.been.calledOnce')
+  })
+
+  it('opens external link on enter', () => {
+    const urlStub = cy.stub()
+
+    cy.stubMutationResolver(ExternalLink_OpenExternalDocument, (defineResult, { url }) => {
+      urlStub(url)
+
+      return defineResult({
+        openExternal: true,
+      })
+    })
+
+    cy.contains('a', 'Click me!')
+    .focus()
+    .realPress('Enter')
+
+    cy.wrap(urlStub).should('have.been.calledWith', 'https://on.cypress.io/ci')
+    cy.get('@onClickSpy').should('have.been.calledOnce')
+  })
+
+  it('opens external link on click and enter', () => {
+    const urlStub = cy.stub()
+
+    cy.stubMutationResolver(ExternalLink_OpenExternalDocument, (defineResult, { url }) => {
+      urlStub(url)
+
+      return defineResult({
+        openExternal: true,
+      })
+    })
+
+    cy.contains('a', 'Click me!')
+    .click()
+    .realPress('Enter')
+
+    cy.wrap(urlStub).should('have.been.calledTwice')
+    cy.get('@onClickSpy').should('have.been.calledTwice')
+  })
+
+  it('do not open external link on space bar trigger', () => {
+    const urlStub = cy.stub()
+
+    cy.stubMutationResolver(ExternalLink_OpenExternalDocument, (defineResult, { url }) => {
+      urlStub(url)
+
+      return defineResult({
+        openExternal: true,
+      })
+    })
+
+    cy.contains('a', 'Click me!')
+    .focus()
+    .realPress('Space')
+
+    cy.wrap(urlStub).should('not.be.called')
+    cy.get('@onClickSpy').should('not.be.called')
+  })
+})

packages/frontend-shared/src/gql-components/ExternalLink.vue

@@ -4,9 +4,8 @@
     data-cy="external"
     :href="props.href"
     :use-default-hocus="props.useDefaultHocus"
-    role="link"
     @click.prevent="open"
-    @keypress.space.enter.prevent="open"
+    @keypress.enter.prevent="open"
   ><slot /></BaseLink>
 </template>