fix(entities-plugins): plugin select (#954)

Kong · Nov 29, 2023 · 8beb7e1 · 8beb7e1
1 parent cd8a020
commit 8beb7e1
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 11 deletions.
diff --git a/packages/entities/entities-plugins/src/components/PluginSelect.cy.ts b/packages/entities/entities-plugins/src/components/PluginSelect.cy.ts
@@ -150,7 +150,7 @@ describe('<PluginSelect />', () => {
       cy.get('.kong-ui-entities-plugin-select-form .plugins-results-container').should('be.visible')
 
       for (const key in disabledPlugins) {
-        cy.get(`.plugin-card.disabled [data-testid="${key}-card"]`).should('be.visible')
+        cy.get(`.plugin-card-content.disabled[data-testid="${key}-card"]`).should('be.visible')
       }
     })
 
@@ -409,7 +409,7 @@ describe('<PluginSelect />', () => {
       cy.get('.kong-ui-entities-plugin-select-form .plugins-results-container').should('be.visible')
 
       for (const key in disabledPlugins) {
-        cy.get(`.plugin-card.disabled [data-testid="${key}-card"]`).should('be.visible')
+        cy.get(`.plugin-card-content.disabled[data-testid="${key}-card"]`).should('be.visible')
       }
     })
 

diff --git a/packages/entities/entities-plugins/src/components/PluginSelect.vue b/packages/entities/entities-plugins/src/components/PluginSelect.vue
@@ -283,10 +283,10 @@ const buildPluginList = (): PluginCardList => {
   // returning an array of unique plugin ids
   // either grab all plugins from metadata file or use list of available plugins provided by API
   return [...new Set(
-    Object.assign(
-      Object.keys({ ...(!props.availableOnServer ? pluginMetaData : {}) }),
-      availablePlugins.value,
-    ),
+    [
+      ...Object.keys({ ...(!props.availableOnServer ? pluginMetaData : {}) }),
+      ...availablePlugins.value,
+    ],
   )]
     // Filter out ignored plugins
     .filter((plugin: string) => !props.ignoredPlugins.includes(plugin))

diff --git a/packages/entities/entities-plugins/src/components/select/PluginSelectCard.vue b/packages/entities/entities-plugins/src/components/select/PluginSelectCard.vue
@@ -1,16 +1,12 @@
 <template>
   <KTooltip
-    class="plugin-card plugin-card-cursor-pointer"
-    :class="{
-      'disabled': isDisabled,
-    }"
     :label="plugin.disabledMessage"
     position-fixed
   >
     <KCard
       class="plugin-card-content"
+      :class="{ disabled: isDisabled }"
       :data-testid="`${plugin.id}-card`"
-      :disabled="isDisabled"
       has-hover
       @click="isDisabled || isCustomPlugin ? undefined : handleClick()"
     >
@@ -218,6 +214,7 @@ const handleCustomClick = (): void => {
 .plugin-card,
 .plugin-card-content {
   color: initial;
+  cursor: pointer;
   display: flex;
   flex-basis: 100%;
   flex-flow: row-wrap;