feat: wire up the manage record keys button (#19829)

packages/app/cypress/e2e/settings.cy.ts

@@ -24,6 +24,27 @@ describe('App: Settings', () => {
     cy.findByText('Project ID').should('be.visible')
   })
 
+  it('shows the recordKeys section', () => {
+    cy.loginUser()
+
+    cy.visitApp()
+    cy.findByText('Settings').click()
+    cy.findByText('Project Settings').click()
+    cy.findByText('Record Key').should('be.visible')
+  })
+
+  it('opens cloud settings when clicking on "Manage Keys"', () => {
+    cy.loginUser()
+    cy.intercept('mutation-ExternalLink_OpenExternal', { 'data': { 'openExternal': true } }).as('OpenExternal')
+    cy.visitApp()
+    cy.findByText('Settings').click()
+    cy.findByText('Project Settings').click()
+    cy.findByText('Manage Keys').click()
+    cy.wait('@OpenExternal')
+    .its('request.body.variables.url')
+    .should('equal', 'http:/test.cloud/cloud-project/settings')
+  })
+
   it('can reconfigure a project', () => {
     cy.visitApp('settings')
 

packages/app/src/settings/project/ProjectSettings.vue

@@ -8,6 +8,7 @@
       v-for="key of props.gql.currentProject.cloudProject.recordKeys"
       :key="key.id"
       :gql="key"
+      :manage-keys-url="props.gql.currentProject.cloudProject.cloudProjectSettingsUrl"
     />
   </template>
   <SpecPatterns :gql="props.gql.currentProject" />
@@ -34,6 +35,7 @@ fragment ProjectSettings on Query {
       __typename
       ... on CloudProject {
         id
+        cloudProjectSettingsUrl
         recordKeys {
           id
           ...RecordKey

packages/app/src/settings/project/RecordKey.cy.tsx

@@ -12,7 +12,7 @@ describe('<RecordKey />', () => {
       },
       render: (gql) => (
         <div class="py-4 px-8">
-          <RecordKey gql={gql} />
+          <RecordKey gql={gql} manageKeysUrl="http://project.cypress.io/settings" />
         </div>
       ),
     })

packages/app/src/settings/project/RecordKey.vue

@@ -20,7 +20,7 @@
     </template>
     <div
       v-if="recordKey"
-      class="inline-flex justify-start gap-10px"
+      class="gap-10px inline-flex justify-start"
     >
       <CodeBox
         :code="recordKey"
@@ -45,16 +45,19 @@
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import { useI18n } from '@cy/i18n'
-import type { RecordKeyFragment } from '../../generated/graphql'
-import SettingsSection from '../SettingsSection.vue'
+import { gql } from '@urql/core'
 import Button from '@cy/components/Button.vue'
+import CopyButton from '@cy/components/CopyButton.vue'
+import ExternalLink from '@cy/gql-components/ExternalLink.vue'
+import { useExternalLink } from '@cy/gql-components/useExternalLink'
 import IconKey from '~icons/cy/placeholder_x16.svg'
 import IconExport from '~icons/cy/export_x16.svg'
-import { gql } from '@urql/core'
-import CopyButton from '@cy/components/CopyButton.vue'
+import type { RecordKeyFragment } from '../../generated/graphql'
+import SettingsSection from '../SettingsSection.vue'
 import CodeBox from './CodeBox.vue'
-import ExternalLink from '@packages/frontend-shared/src/gql-components/ExternalLink.vue'
+import { useI18n } from '@cy/i18n'
+
+const { t } = useI18n()
 
 gql`
 fragment RecordKey on CloudRecordKey {
@@ -65,11 +68,10 @@ fragment RecordKey on CloudRecordKey {
 
 const props = defineProps<{
   gql: RecordKeyFragment
+  manageKeysUrl: string
 }>()
 
-const openManageKeys = () => { }
-const showRecordKey = ref(false)
-const { t } = useI18n()
+const openManageKeys = useExternalLink(props.manageKeysUrl)
 
 const recordKey = computed(() => props.gql.key)
 </script>