Main (#21)

* Add netlify config * Feat/footer (#3) * Add netlify config * feat: add nav * fix: tests * fix(app-reg): show register button even when there is no spec (Kong#234) * fix(spec-renderer): widen sidebar to max 330px (Kong#235) * chore(analytics): remove feature flag [MA-2027] (Kong#238) * fix: add pagination to table view in catalog (Kong#239) * build(deps): bump cypress from 12.17.1 to 13.1.0 (Kong#231) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump eslint from 8.47.0 to 8.49.0 (Kong#241) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(docs): update status badges to use actions that run on main (Kong#243) * chore(docs): fix links in README (Kong#244) * feat: hide spec link in catalog if no versions (Kong#251) * chore(vitals): drop meta query object (Kong#252) * build(deps): bump sass from 1.66.1 to 1.67.0 (Kong#245) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump cypress from 13.1.0 to 13.2.0 (Kong#247) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix: correct document tree request header (Kong#255) * build(deps): bump @kong/kongponents from 8.116.2 to 8.123.3 (Kong#242) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build: bump node version to 18.17.1 in nvmrc (Kong#254) * build(deps): bump semantic-release from 21.1.1 to 22.0.5 (Kong#258) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump lefthook from 1.4.1 to 1.5.0 (Kong#256) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump eslint from 8.49.0 to 8.50.0 (Kong#259) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump sass from 1.67.0 to 1.68.0 (Kong#260) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump eslint-plugin-cypress from 2.14.0 to 2.15.1 (Kong#257) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix: truncate long titles in the sidebar (Kong#253) * style: fix pagination bar alignment (Kong#262) * style: fix pagination bar catalog alignment (Kong#265) * refactor: use table for spec reg modal (Kong#266) * build(deps): bump cypress from 13.2.0 to 13.3.0 (Kong#264) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump eslint from 8.50.0 to 8.51.0 (Kong#274) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump sass from 1.68.0 to 1.69.0 (Kong#273) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump @kong/sdk-portal-js from 2.2.0 to 2.3.4 (Kong#272) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump cypress-split from 1.3.8 to 1.4.0 (Kong#271) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump @vitejs/plugin-vue from 4.3.1 to 4.4.0 (Kong#270) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * style: align nav dropdown to header (Kong#268) Co-authored-by: Mike Swierenga <mike.swierenga@konghq.com> * build(deps): bump @commitlint/cli from 17.7.1 to 17.8.0 (Kong#276) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump cypress-split from 1.4.0 to 1.10.0 (Kong#277) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat: add search to my apps list (Kong#267) * build(deps): bump @commitlint/config-conventional from 17.7.0 to 17.8.0 (Kong#275) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump @vue/eslint-config-typescript from 11.0.3 to 12.0.0 (Kong#250) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump eslint from 8.51.0 to 8.52.0 (Kong#280) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore: bump spec-renderer version to allow languages to be customized (Kong#291) * build(deps): bump @commitlint/cli from 17.8.0 to 18.2.0 (Kong#289) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump vite from 4.4.2 to 4.5.0 (Kong#281) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump eslint-plugin-vue from 9.17.0 to 9.18.1 (Kong#284) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump cypress-split from 1.10.0 to 1.15.4 (Kong#286) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump typescript from 4.9.5 to 5.2.2 (Kong#229) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump @commitlint/config-conventional from 17.8.0 to 18.1.0 (Kong#285) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump eslint from 8.52.0 to 8.53.0 (Kong#294) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump cypress from 13.3.0 to 13.4.0 (Kong#295) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump eslint-plugin-import from 2.28.0 to 2.29.0 (Kong#287) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump @babel/traverse from 7.22.4 to 7.23.2 (Kong#296) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump word-wrap from 1.2.3 to 1.2.5 (Kong#297) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump semver from 5.7.1 to 5.7.2 (Kong#298) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix: bump spec renderer version (Kong#299) * refactor(nav): convert user dropdown into generic reusable nav dropdown (Kong#301) * chore(nav): add data-testid for my-apps-item (Kong#302) * ci: update dependabot.yml (Kong#303) * chore(deps): bump axios from 0.27.2 to 1.6.0 (Kong#309) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Andrew Wylde <andrew.wylde@konghq.com> * build(deps): bump @kong-ui-public/spec-renderer from 0.12.2 to 0.13.1 (Kong#308) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat: remove public /permissions/me usage (Kong#300) * build(deps): bump @commitlint/config-conventional from 18.1.0 to 18.4.0 (Kong#305) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump cypress from 13.4.0 to 13.5.0 (Kong#304) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump @commitlint/cli from 18.2.0 to 18.4.1 (Kong#307) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build(deps): bump @kong-ui-public/analytics-chart from 0.8.31 to 0.10.2 (Kong#246) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: mihai-peteu <mihai.peteu@konghq.com> Co-authored-by: Andrew Wylde <andrew.wylde@konghq.com> * feat: add developer managed scopes to app reg modal (Kong#310) * test: add tests for scope select (Kong#311) * chore(deps): bump eslint from 8.53.0 to 8.54.0 (Kong#312) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump @vitejs/plugin-vue from 4.4.0 to 4.5.0 (Kong#313) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * style: match multiselect scope styling to figma (Kong#316) * feat: send selected scopes in the request (Kong#317) * fix(vite): enable proxied local previews (Kong#318) * chore(deps): bump @vitejs/plugin-vue-jsx from 3.0.1 to 3.1.0 (Kong#314) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat(portal): select granted scopes in multiselect if present (Kong#319) --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Mike Swierenga <mike.swierenga@konghq.com> Co-authored-by: Benjamin PATRON <soulfly.sk8@gmail.com> Co-authored-by: Mihai <103061463+mihai-peteu@users.noreply.github.com> Co-authored-by: David Ma <40131297+davidma415@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Andrew Wylde <andrew.wylde@konghq.com> Co-authored-by: mihai-peteu <mihai.peteu@konghq.com> Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>
rosskukulinski · Nov 27, 2023 · c658c63 · c658c63
1 parent a2cfb0a
commit c658c63
Show file tree

Hide file tree

Showing 52 changed files with 3,390 additions and 2,337 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -6,7 +6,7 @@ updates:
       interval: "weekly"
     open-pull-requests-limit: 10
     commit-message:
-      prefix: build(deps)
+      prefix: chore(deps)
     ignore:
     - dependency-name: "*"
       update-types: ["version-update:semver-patch"]
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-18.16.0
+18.17.1
diff --git a/README.md b/README.md
@@ -3,19 +3,22 @@
 ![Stars](https://img.shields.io/github/stars/Kong/konnect-portal?style=flat-square)
 ![GitHub commit activity](https://img.shields.io/github/commit-activity/m/Kong/konnect-portal?style=flat-square)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
-[![Tests](https://github.com/Kong/konnect-portal/actions/workflows/pr.yml/badge.svg)](https://github.com/Kong/konnect-portal/actions/workflows/pr.yml)
+[![Deploy Example App](https://github.com/Kong/konnect-portal/actions/workflows/github-pages.yml/badge.svg?branch=main)](https://github.com/Kong/konnect-portal/actions/workflows/github-pages.yml)
+[![Semantic Release](https://github.com/Kong/konnect-portal/actions/workflows/release.yml/badge.svg?branch=main)](https://github.com/Kong/konnect-portal/actions/workflows/release.yml)
 ![License](https://img.shields.io/badge/License-Apache%202.0-blue?style=flat-square)
 
 ![Twitter Follow](https://img.shields.io/twitter/follow/thekonginc?style=social)
 
 # Konnect Dev Portal Client
 
-This repo is an [open source][oss-url] reference implementation of a Konnect Developer Portal Client leveraging the [Konnect Developer Portal Client API][portal-api-url] and [JavaScript SDK][javscript-sdk-url].
+This repo is an [open source][oss-url] reference implementation of a Konnect Developer Portal Client leveraging the [Konnect Developer Portal Client API][portal-api-url] and [JavaScript SDK][javascript-sdk-url].
 
 The [Konnect Dev Portal][konnect-docs-url] is a web application for developers to locate, access, and consume API services. The Dev Portal enables developers to browse and search API documentation, test API endpoints, and manage their own credentials.
 
 In [Kong Konnect][kong-konnect-register-url], you have two hosting options for the Dev Portal web user interface: a cloud hosted Dev Portal with Konnect or a self-hosted, open source Dev Portal powered by Konnect APIs.
 
+Check out the [example app](https://konnect-portal.konghq.com/) to get an idea of what this client app looks like out-of-the-box.
+
 ## Self-hosted Dev Portal benefits
 
 There are several benefits to keep in mind when deciding whether to use a Konnect-hosted or self-hosted Dev Portal. The self-hosted portal provides the following benefits:
@@ -149,6 +152,60 @@ Please follow the following branch naming scheme when creating your branch:
 
 This repo uses [Semantic Release](https://github.com/semantic-release/semantic-release) for automated releases once per week. The release is triggered by a GitHub Action on the `main` branch. The release is based on the commit messages, so please follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification.
 
+## Spec Customization
+
+If you need to add or remove languages to the code snippet languages, you can pass in an object to `SpecDetails`.
+
+You may pass in a `themeOverrides` object to `SpecDetails`. Here is an example if you would like to override languages:
+
+```javascript
+        <SpecDetails
+          :theme-overrides="{
+            languages: [
+              {
+                prismLanguage: 'bash',
+                target: 'shell',
+                client: 'curl'
+              },
+              {
+                prismLanguage: 'javascript',
+                target: 'javascript',
+                client: 'xhr'
+              },
+              {
+                prismLanguage: 'java',
+                target: 'java'
+              },
+            ]
+          }"
+        />
+```
+
+The default languages are the following. They will be overridden by what you pass in to `SpecDetails`
+
+```javascript
+      languages = [
+        {
+          prismLanguage: 'bash',
+          target: 'shell',
+          client: 'curl'
+        },
+        {
+          prismLanguage: 'javascript',
+          target: 'javascript',
+          client: 'xhr'
+        },
+        {
+          prismLanguage: 'python',
+          target: 'python'
+        },
+        {
+          prismLanguage: 'ruby',
+          target: 'ruby'
+        }
+      ]
+```
+
 ## [Translations guidelines](./src/locales/README.md)
 
 ## Join the Community
@@ -186,4 +243,4 @@ limitations under the License.
 [konnect-docs-url]: https://docs.konghq.com/konnect/
 [oss-url]: https://en.wikipedia.org/wiki/Open-source_software
 [yarn-install-url]: https://classic.yarnpkg.com/lang/en/docs/install
-[javscript-sdk-url]: https://www.npmjs.com/package/@kong/sdk-portal-js
+[javascript-sdk-url]: https://www.npmjs.com/package/@kong/sdk-portal-js
diff --git a/cypress/e2e/specs/application_registration.spec.ts b/cypress/e2e/specs/application_registration.spec.ts
@@ -91,9 +91,6 @@ Cypress.Commands.add('createNewApplication', (app, productId, versions) => {
   cy.get(submitButton).click()
 
   cy.url().should('include', `/spec/${productId}`)
-  cy.get(selectors.appRegModal).should('exist')
-  cy.get(`${selectors.appRegModal} select`)
-    .should('contain', app.name)
 
   return cy.document().then(document => {
     const params = (new URL(document.location.toString())).searchParams
@@ -138,6 +135,7 @@ describe('Application Registration', () => {
   describe('Create Application', () => {
     it('can create a new applications from spec page', () => {
       mockApplicationWithCredAndReg(apps[0])
+      cy.mockProductVersionAvailableRegistrations(product.id, versions[0].id, [])
       cy.mockApplications([apps[0]], 1)
       cy.createNewApplication(apps[0], product.id, versions)
     })
@@ -171,8 +169,6 @@ describe('Application Registration', () => {
 
       cy.get(submitButton).click()
 
-
-
       cy.wait('@postApplicationRegistration').then(() => {
         cy.get('[data-testid="copy-secret-modal"]').should('exist')
         cy.get('[data-testid="copy-button"]').eq(0).should('exist').should('contain', 'your-client-id')
@@ -501,10 +497,11 @@ describe('Application Registration', () => {
       cy.get('.swagger-ui', { timeout: 12000 })
 
       cy.mockApplications(apps, 4)
+      cy.mockProductVersionAvailableRegistrations(product.id, versions[0].id, apps)
 
       cy.get('[data-testid="register-button"]', { timeout: 12000 }).click()
       cy.get(selectors.appRegModal).should('exist')
-      cy.get(`${selectors.appRegModal} select`).should('contain', apps[0].name)
+      cy.get(`${selectors.appRegModal} [data-testid="register-${apps[0].name}"]`).should('contain', apps[0].name).click()
 
       const mockCreateRegResponse = {
         ...productRegistration,
@@ -527,6 +524,141 @@ describe('Application Registration', () => {
       )
     })
 
+    it('does not show select available scopes if no scopes are available - feature flag on', () => {
+      cy.mockProductDocument()
+      cy.mockProduct()
+      cy.mockLaunchDarklyFlags([
+        {
+          name: 'tdx-3460-developer-managed-scopes',
+          value: true
+        }
+      ])
+      cy.mockProductVersionApplicationRegistration(versions[0])
+      cy.mockGetProductDocuments(product.id)
+      cy.mockProductOperations(product.id, versions[0].id)
+      cy.mockProductVersionSpec(product.id, versions[0].id)
+      cy.mockRegistrations('*', []) // mock with empty so that we add one.
+
+      cy.viewport(1440, 900)
+      cy.visit(`/spec/${product.id}`)
+      cy.get('.swagger-ui', { timeout: 12000 })
+
+      cy.mockApplications(apps, 4)
+      cy.mockProductVersionAvailableRegistrations(product.id, versions[0].id, apps)
+
+      cy.get('[data-testid="register-button"]', { timeout: 12000 }).click()
+      cy.get(selectors.appRegModal).should('exist')
+      cy.get(`${selectors.appRegModal} [data-testid="register-${apps[0].name}"]`).should('contain', apps[0].name).click()
+      cy.get('[data-testid="available-scopes-select"]').should('not.exist')
+    })
+    it('does show select available scopes if scopes are available - feature flag on', () => {
+      cy.mockProductDocument()
+      cy.mockProduct(product.id, product)
+      cy.mockLaunchDarklyFlags([
+        {
+          name: 'tdx-3460-developer-managed-scopes',
+          value: true
+        }
+      ])
+      cy.mockProductVersionApplicationRegistration(versions[0])
+      // Update the version to include registration config
+      const productVersionWithScopes = versions[0]
+
+      productVersionWithScopes.registration_configs = [
+        {
+          name: 'openid-connect',
+          available_scopes: [
+            'scope1',
+            'scope2'
+          ]
+        }
+      ]
+      cy.mockProductVersion(product.id, versions[0].id, productVersionWithScopes)
+      cy.mockGetProductDocuments(product.id)
+      cy.mockProductOperations(product.id, versions[0].id)
+      cy.mockProductVersionSpec(product.id, versions[0].id)
+      cy.mockRegistrations('*', []) // mock with empty so that we add one.
+
+      cy.viewport(1440, 900)
+      cy.visit(`/spec/${product.id}`)
+      cy.get('.swagger-ui', { timeout: 12000 })
+
+      cy.mockApplications(apps, 4)
+      cy.mockProductVersionAvailableRegistrations(product.id, versions[0].id, apps)
+
+      cy.get('[data-testid="register-button"]', { timeout: 12000 }).click()
+      cy.get(selectors.appRegModal).should('exist')
+      cy.get(`${selectors.appRegModal} [data-testid="register-${apps[0].name}"]`).should('contain', apps[0].name).click()
+      cy.get('.available-scopes-select').should('exist')
+    })
+    it('does not show select available scopes if scopes are available - feature flag off', () => {
+      cy.mockProductDocument()
+      cy.mockProduct(product.id, product)
+      cy.mockLaunchDarklyFlags([
+        {
+          name: 'tdx-3460-developer-managed-scopes',
+          value: false
+        }
+      ])
+      cy.mockProductVersionApplicationRegistration(versions[0])
+      // Update the version to include registration config
+      const productVersionWithScopes = versions[0]
+
+      productVersionWithScopes.registration_configs = [
+        {
+          name: 'openid-connect',
+          available_scopes: [
+            'scope1',
+            'scope2'
+          ]
+        }
+      ]
+      cy.mockProductVersion(product.id, versions[0].id, productVersionWithScopes)
+      cy.mockGetProductDocuments(product.id)
+      cy.mockProductOperations(product.id, versions[0].id)
+      cy.mockProductVersionSpec(product.id, versions[0].id)
+      cy.mockRegistrations('*', []) // mock with empty so that we add one.
+
+      cy.viewport(1440, 900)
+      cy.visit(`/spec/${product.id}`)
+      cy.get('.swagger-ui', { timeout: 12000 })
+
+      cy.mockApplications(apps, 4)
+      cy.mockProductVersionAvailableRegistrations(product.id, versions[0].id, apps)
+
+      cy.get('[data-testid="register-button"]', { timeout: 12000 }).click()
+      cy.get(selectors.appRegModal).should('exist')
+      cy.get(`${selectors.appRegModal} [data-testid="register-${apps[0].name}"]`).should('contain', apps[0].name).click()
+      cy.get('.available-scopes-select').should('not.exist')
+    })
+    it('does not show select available scopes if feature flag off', () => {
+      cy.mockProductDocument()
+      cy.mockProduct()
+      cy.mockLaunchDarklyFlags([
+        {
+          name: 'tdx-3460-developer-managed-scopes',
+          value: false
+        }
+      ])
+      cy.mockProductVersionApplicationRegistration(versions[0])
+      cy.mockGetProductDocuments(product.id)
+      cy.mockProductOperations(product.id, versions[0].id)
+      cy.mockProductVersionSpec(product.id, versions[0].id)
+      cy.mockRegistrations('*', []) // mock with empty so that we add one.
+
+      cy.viewport(1440, 900)
+      cy.visit(`/spec/${product.id}`)
+      cy.get('.swagger-ui', { timeout: 12000 })
+
+      cy.mockApplications(apps, 4)
+      cy.mockProductVersionAvailableRegistrations(product.id, versions[0].id, apps)
+
+      cy.get('[data-testid="register-button"]', { timeout: 12000 }).click()
+      cy.get(selectors.appRegModal).should('exist')
+      cy.get(`${selectors.appRegModal} [data-testid="register-${apps[0].name}"]`).should('contain', apps[0].name).click()
+      cy.get('[data-testid="available-scopes-select"]').should('not.exist')
+    })
+
     it('can request registration to a product and is directed to application upon auto_approval', () => {
       cy.mockProductDocument()
       cy.mockProduct()
@@ -540,10 +672,11 @@ describe('Application Registration', () => {
       cy.visit(`/spec/${product.id}`)
 
       cy.mockApplications(apps, 4)
+      cy.mockProductVersionAvailableRegistrations(product.id, versions[0].id, apps)
 
       cy.get('[data-testid="register-button"]', { timeout: 12000 }).click()
       cy.get(selectors.appRegModal).should('exist')
-      cy.get(`${selectors.appRegModal} select`).should('contain', apps[0].name)
+      cy.get(`${selectors.appRegModal} [data-testid="register-${apps[0].name}"]`).should('contain', apps[0].name).click()
 
       cy.intercept(
         'POST',
@@ -563,35 +696,25 @@ describe('Application Registration', () => {
     })
 
     it('cannot duplicate a registration request', () => {
-      cy.createNewApplication(apps[2], product.id, versions)
+      cy.mockProductDocument()
+      cy.mockProduct()
+      cy.mockProductVersionApplicationRegistration(versions[0])
+      cy.mockGetProductDocuments(product.id)
+      cy.mockProductOperations(product.id, versions[0].id)
+      cy.mockProductVersionSpec(product.id, versions[0].id)
+      cy.mockRegistrations('*', [])
+
       cy.viewport(1440, 900)
+      cy.visit(`/spec/${product.id}`)
 
-      cy.mockProductDocument()
-      cy.visit(`/spec/${product.id}`).get('.swagger-ui', {
-        timeout: 12000
-      })
-      cy.get('[data-testid="register-button"]', { timeout: 12000 })
-      cy.mockRegistrations(apps[0].id, [productRegistration])
-      cy.mockRegistrations(apps[1].id, [productRegistration])
-
-      cy.mockApplications(
-        [
-          { ...apps[0] },
-          { ...apps[1] },
-          apps[2]
-        ],
-        3
-      )
+      cy.mockApplications(apps, 3)
+      cy.mockProductVersionAvailableRegistrations(product.id, versions[0].id, [apps[2]])
 
-      cy.get('[data-testid="register-button"]').click()
-      cy.get(`${selectors.appRegModal} select`)
-        .contains(apps[0].name)
-        .should('not.exist')
-      cy.get(`${selectors.appRegModal} select`)
-        .contains(apps[1].name)
-        .should('not.exist')
-      cy.get(`${selectors.appRegModal} select`).should('contain', apps[2].name)
-      cy.get('[data-testid=create-application-2]').should('exist')
+      cy.get('[data-testid="register-button"]', { timeout: 12000 }).click()
+      cy.get(selectors.appRegModal).should('exist')
+      cy.get(`${selectors.appRegModal} [data-testid="register-${apps[0].name}"]`).should('not.exist')
+      cy.get(`${selectors.appRegModal} [data-testid="register-${apps[1].name}"]`).should('not.exist')
+      cy.get(`${selectors.appRegModal} [data-testid="register-${apps[2].name}"]`).should('exist')
     })
   })