feat(plugin-form): hide scoped plugin's scope change

Kong · Sep 12, 2024 · f88f7f8 · f88f7f8
1 parent 60b5a81
commit f88f7f8
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 41 deletions.
diff --git a/src/pages/plugins/Form.vue b/src/pages/plugins/Form.vue
@@ -11,6 +11,7 @@
     :config="config"
     :plugin-type="pluginType"
     :plugin-id="pluginId"
+    :hide-scope-selection="hideScopeSelection"
     @error:fetch-schema="onFetchSchemaError"
     @update="onSave"
   />
@@ -66,6 +67,8 @@ const entityScope = computed(() => {
   return null
 })
 
+const hideScopeSelection = computed(() => !!entityScope.value)
+
 const redirectPath = useURLFromRouteQuery('redirect')
 
 const cancelRoute = computed(() => {

diff --git a/tests/playwright/specs/consumers/03-ConsumerPlugins.spec.ts b/tests/playwright/specs/consumers/03-ConsumerPlugins.spec.ts
@@ -34,7 +34,6 @@ test.describe('consumer plugins', () => {
 
   test('install a plugin from the Plugins tab', async ({ page }) => {
     await withNavigation(page, async () => await clickEntityListAction(page, 'view'))
-    const uuid = await page.locator('.copy-container').innerText()
 
     await switchDetailTab(page, 'plugins')
     await withNavigation(
@@ -45,8 +44,8 @@ test.describe('consumer plugins', () => {
       page,
       async () => await page.getByTestId('datadog-card').click(),
     )
-    await expect(page.locator('.autosuggest input#consumer-id')).toBeVisible()
-    await expect(page.locator('.autosuggest input#consumer-id')).toHaveValue(new RegExp(`${mockConsumerName}\\s*-\\s*${uuid}`))
+    await page.waitForSelector('.vue-form-generator')
+    await expect(page.locator('.selection-group')).toHaveCount(0)
     await withNavigation(
       page,
       async () => await page.locator('[data-testid="form-actions"] .primary').click(),

diff --git a/tests/playwright/specs/plugins/01-Plugins.spec.ts b/tests/playwright/specs/plugins/01-Plugins.spec.ts
@@ -69,10 +69,6 @@ test.describe('plugins', () => {
 
     await serviceListPage.goto()
     await withNavigation(page, async () => await clickEntityListAction(page, 'view'))
-    const uuid = (await page
-      .locator('[data-testid="id-property-value"]')
-      .locator('.copy-container')
-      .innerText() ?? '').trim()
 
     await switchDetailTab(page, 'plugins')
 
@@ -86,8 +82,8 @@ test.describe('plugins', () => {
       async () => await page.getByTestId('basic-auth-card').click(),
     )
 
-    await expect(page.locator('.autosuggest input#service-id')).toBeVisible()
-    await expect(page.locator('.autosuggest input#service-id')).toHaveValue(new RegExp(`${mockServiceName}\\s*-\\s*${uuid}`))
+    await page.waitForSelector('.vue-form-generator')
+    await expect(page.locator('.selection-group')).toHaveCount(0)
 
     await expandAdvancedFields(page)
     await page.locator('#config-anonymous').type('anon')
@@ -186,10 +182,6 @@ test.describe('plugins', () => {
 
     await routeListPage.goto()
     await withNavigation(page, async () => await clickEntityListAction(page, 'view'))
-    const uuid = (await page
-      .locator('[data-testid="id-property-value"]')
-      .locator('.copy-container')
-      .innerText() ?? '').trim()
 
     await switchDetailTab(page, 'plugins')
 
@@ -203,8 +195,8 @@ test.describe('plugins', () => {
       async () => await page.getByTestId('basic-auth-card').click(),
     )
 
-    await expect(page.locator('.autosuggest input#route-id')).toBeVisible()
-    await expect(page.locator('.autosuggest input#route-id')).toHaveValue(new RegExp(`${mockRouteName}\\s*-\\s*${uuid}`))
+    await page.waitForSelector('.vue-form-generator')
+    await expect(page.locator('.selection-group')).toHaveCount(0)
 
     await withNavigation(
       page,
@@ -222,10 +214,6 @@ test.describe('plugins', () => {
     await consumerListPage.goto()
 
     await withNavigation(page, async () => await clickEntityListAction(page, 'view'))
-    const uuid = (await page
-      .locator('[data-testid="id-property-value"]')
-      .locator('.copy-container')
-      .innerText() ?? '').trim()
 
     await switchDetailTab(page, 'plugins')
     await withNavigation(
@@ -236,8 +224,8 @@ test.describe('plugins', () => {
       page,
       async () => await page.getByTestId('datadog-card').click(),
     )
-    await expect(page.locator('.autosuggest input#consumer-id')).toBeVisible()
-    await expect(page.locator('.autosuggest input#consumer-id')).toHaveValue(new RegExp(`${mockConsumerName}\\s*-\\s*${uuid}`))
+    await page.waitForSelector('.vue-form-generator')
+    await expect(page.locator('.selection-group')).toHaveCount(0)
     await withNavigation(
       page,
       async () => await page.locator('[data-testid="form-actions"] .primary').click(),

diff --git a/tests/playwright/specs/routes/02-RoutesPlugins.spec.ts b/tests/playwright/specs/routes/02-RoutesPlugins.spec.ts
@@ -52,11 +52,6 @@ test.describe('routes plugins', () => {
   test(`install a plugin for the route "${mockRouteName} from the plugins tab"`, async ({ page }) => {
     await withNavigation(page, async () => await clickEntityListAction(page, 'view'))
 
-    const uuid = (await page
-      .locator('[data-testid="id-property-value"]')
-      .locator('.copy-container')
-      .innerText() ?? '').trim()
-
     await switchDetailTab(page, 'plugins')
 
     await withNavigation(
@@ -69,8 +64,8 @@ test.describe('routes plugins', () => {
       async () => await page.getByTestId('basic-auth-card').click(),
     )
 
-    await expect(page.locator('.autosuggest input#route-id')).toBeVisible()
-    await expect(page.locator('.autosuggest input#route-id')).toHaveValue(new RegExp(`${mockRouteName}\\s*-\\s*${uuid}`))
+    await page.waitForSelector('.vue-form-generator')
+    await expect(page.locator('.selection-group')).toHaveCount(0)
 
     await withNavigation(
       page,

diff --git a/tests/playwright/specs/services/03-ServicePlugins.spec.ts b/tests/playwright/specs/services/03-ServicePlugins.spec.ts
@@ -11,8 +11,6 @@ import { withNavigation } from '@pw/commands/withNavigation'
 import { PluginListPage } from '@pw/pages/plugins'
 import { ServiceListPage } from '@pw/pages/services'
 
-let testService: { id: string; name: string; url: string } | undefined
-
 const test = baseTest().extend<{
   pluginListPage: PluginListPage
   serviceListPage: ServiceListPage
@@ -27,10 +25,10 @@ test.describe('service plugins', () => {
     await clearKongResources('/routes')
     await clearKongResources('/services')
 
-    testService = (await createKongResource('/services', {
+    await createKongResource('/services', {
       name: 'testService',
       url: 'http://example.com:8080/test',
-    }))?.data
+    })
   })
 
   test.afterAll(async () => {
@@ -39,15 +37,6 @@ test.describe('service plugins', () => {
     await clearKongResources('/services')
   })
 
-  test('service plugin has service id prefilled', async ({ page }) => {
-    await page.goto(`/services/${testService?.id}/plugins`)
-    await withNavigation(page, () =>
-      page.click('.kong-ui-entities-plugins-list [data-testid="new-plugin"]'),
-    )
-    await page.getByTestId('hmac-auth-card').click()
-    await expect(page.locator('.autosuggest input#service-id')).toHaveValue(new RegExp(`${testService?.name}\\s*-\\s*${testService?.id}`))
-  })
-
   test('create an service-associated plugin via tab', async ({ page, serviceListPage }) => {
     await serviceListPage.goto()
     await withNavigation(page, () => clickEntityListAction(page, 'view'))
@@ -60,6 +49,8 @@ test.describe('service plugins', () => {
       page.getByTestId('basic-auth-card').click(),
     )
 
+    await page.waitForSelector('.vue-form-generator')
+    await expect(page.locator('.selection-group')).toHaveCount(0)
     await fillEntityForm({ page })
     await withNavigation(page, () => page.getByTestId('form-actions').locator('.k-button.primary').click())
     await waitAndDismissToasts(page)
@@ -85,6 +76,10 @@ test.describe('service plugins', () => {
   test("edit action should bring the user to the plugin's edit page", async ({ page }) => {
     await withNavigation(page, () => clickEntityListAction(page, 'edit'))
     await page.waitForSelector('.kong-ui-entities-plugin-form-container')
+
+    // The scope selction should be hidden in UI
+    await page.waitForSelector('.vue-form-generator')
+    await expect(page.locator('.selection-group')).toHaveCount(0)
   })
 
   test('cancel button on the edit page should bring the user back to the plugin tab', async ({ page }) => {