fix(plugins): responsiveness improvements [KHCP-12616] (#1499)

* fix(plugins): display 1 row of plugins by default [KHCP-12616] * fix: stylelint:fix * fix(plugins): monor styling fix [KHCP-12616] * fix: ts * fix(plugins): plugin select loading skeleton [KHCP-12616] * test(plugins): fix component tests [KHCP-12616] * chore(deps): bump @kong/kongponents * fix(plugins): update toggle visibility on resize [KHCP-12616] * fix(plugins): use helpers [KHCP-12616] BREAKING CHANGE: pluginsPerRow prop removed * chore(deps): bump @kong/kongponents * fix(plugins): misc fix [KHCP-12616] * fix: address pr feedback * fix: address pr feedback * fix(plugins): plugin card width [KHCP-12616]
Kong · Jul 18, 2024 · abec71e · abec71e
1 parent b88cc0f
commit abec71e
Show file tree

Hide file tree

Showing 11 changed files with 368 additions and 484 deletions.
diff --git a/packages/entities/entities-plugins/docs/plugin-select.md b/packages/entities/entities-plugins/docs/plugin-select.md
@@ -171,14 +171,6 @@ Example:
 }
 ```
 
-#### `pluginsPerRow`
-
-- type: `number`
-- required: `false`
-- default: `4`
-
-Number of plugins to always have visible (never will be collapsed).
-
 #### `highlightedPluginIds`
 
 - type: `string[]`

diff --git a/packages/entities/entities-plugins/src/components/PluginSelect.cy.ts b/packages/entities/entities-plugins/src/components/PluginSelect.cy.ts
@@ -36,7 +36,7 @@ const baseConfigKonnect: KonnectPluginSelectConfig = {
   }),
 }
 
-const baseConfigKM:KongManagerPluginSelectConfig = {
+const baseConfigKM: KongManagerPluginSelectConfig = {
   app: 'kongManager',
   workspace: 'default',
   apiBaseUrl: '/kong-manager',
@@ -54,14 +54,17 @@ const baseConfigKM:KongManagerPluginSelectConfig = {
 // and displayed separately in Konnect.
 const PLUGIN_GROUPS_IN_USE = PluginGroupArray.filter((group: string) => {
   if (group === PluginGroup.CUSTOM_PLUGINS || group === PluginGroup.DEPLOYMENT ||
-      group === PluginGroup.WEBSOCKET) {
+    group === PluginGroup.WEBSOCKET) {
     return false
   }
 
   return true
 })
 
-describe('<PluginSelect />', () => {
+describe('<PluginSelect />', {
+  viewportWidth: 1024,
+  viewportHeight: 576,
+}, () => {
   describe('Kong Manager', () => {
     const interceptKM = (params?: {
       mockData?: object
@@ -155,33 +158,13 @@ describe('<PluginSelect />', () => {
       cy.get('@highlightedPlugins').findTestId('collapse-trigger-content').click()
       cy.get('@highlightedPlugins').findTestId('collapse-trigger-content')
         .should('be.visible')
-        .should('contain.text', 'View 1 more')
+        .should('contain.text', 'View more')
 
       // highlighted plugins should be hidden
       cy.getTestId('plugins-filter').type('gnok')
       cy.get('@highlightedPlugins').should('not.exist')
     })
 
-    it('should allow customizing the pluginsPerRow', () => {
-      const pluginsPerRow = 3
-      const expectedCount = pluginsPerRow * PLUGIN_GROUPS_IN_USE.length
-
-      interceptKM()
-
-      cy.mount(PluginSelect, {
-        props: {
-          config: baseConfigKM,
-          pluginsPerRow,
-        },
-      })
-
-      cy.wait('@getAvailablePlugins')
-
-      cy.get('.kong-ui-entities-plugin-select-form').should('be.visible')
-      cy.get('.kong-ui-entities-plugin-select-form .plugins-results-container').should('be.visible')
-      cy.get('.collapse-visible-content .plugin-select-card').should('have.length', expectedCount)
-    })
-
     it('should correctly render disabled plugins', () => {
       const disabledPlugins = { 'basic-auth': 'This plugin is disabled' }
 
@@ -497,34 +480,13 @@ describe('<PluginSelect />', () => {
       cy.get('@highlightedPlugins').findTestId('collapse-trigger-content').click()
       cy.get('@highlightedPlugins').findTestId('collapse-trigger-content')
         .should('be.visible')
-        .should('contain.text', 'View 1 more')
+        .should('contain.text', 'View more')
 
       // highlighted plugins should be hidden
       cy.getTestId('plugins-filter').type('gnok')
       cy.get('@highlightedPlugins').should('not.exist')
     })
 
-    it('should allow customizing the pluginsPerRow', () => {
-      const pluginsPerRow = 3
-      const expectedCount = pluginsPerRow * PLUGIN_GROUPS_IN_USE.length
-
-      interceptKonnect()
-
-      cy.mount(PluginSelect, {
-        props: {
-          config: baseConfigKonnect,
-          pluginsPerRow,
-        },
-        router,
-      })
-
-      cy.wait('@getAvailablePlugins')
-
-      cy.get('.kong-ui-entities-plugin-select-form').should('be.visible')
-      cy.get('.kong-ui-entities-plugin-select-form .plugins-results-container').should('be.visible')
-      cy.get('.collapse-visible-content .plugin-select-card').should('have.length', expectedCount)
-    })
-
     it('should correctly render disabled plugins', () => {
       const disabledPlugins = { 'basic-auth': 'This plugin is disabled' }
 

diff --git a/packages/entities/entities-plugins/src/components/PluginSelect.vue b/packages/entities/entities-plugins/src/components/PluginSelect.vue
@@ -11,20 +11,13 @@
     </div>
 
     <section v-if="isLoading">
+      <KSkeletonBox
+        class="plugins-skeleton-title"
+        width="10"
+      />
       <KSkeleton
-        :table-rows="1"
-        type="table"
-      >
-        <KSkeletonBox
-          width="6"
-        />
-        <KSkeletonBox
-          class="title-loading-skeleton"
-          width="6"
-        />
-      </KSkeleton>
-      <PluginCardSkeleton
         :card-count="8"
+        class="plugins-skeleton-cards"
         type="card"
       />
     </section>
@@ -89,7 +82,6 @@
               :highlighted-plugins-title="props.highlightedPluginsTitle"
               :navigate-on-click="navigateOnClick"
               :plugin-list="filteredPlugins"
-              :plugins-per-row="pluginsPerRow"
               @plugin-clicked="(val: PluginType) => $emit('plugin-clicked', val)"
             />
           </div>
@@ -108,7 +100,6 @@
               :config="config"
               :navigate-on-click="navigateOnClick"
               :plugin-list="filteredPlugins"
-              :plugins-per-row="pluginsPerRow"
               @delete:success="(name: string) => $emit('delete-custom:success', name)"
               @plugin-clicked="(val: PluginType) => $emit('plugin-clicked', val)"
               @revalidate="() => pluginsList = buildPluginList()"
@@ -126,7 +117,6 @@
         :highlighted-plugins-title="props.highlightedPluginsTitle"
         :navigate-on-click="navigateOnClick"
         :plugin-list="filteredPlugins"
-        :plugins-per-row="pluginsPerRow"
         @plugin-clicked="(val: PluginType) => $emit('plugin-clicked', val)"
       />
     </section>
@@ -148,7 +138,6 @@ import {
 import { useAxios, useHelpers, useErrors } from '@kong-ui-public/entities-shared'
 import composables from '../composables'
 import endpoints from '../plugins-endpoints'
-import PluginCardSkeleton from './select/PluginCardSkeleton.vue'
 import PluginCustomGrid from './custom-plugins/PluginCustomGrid.vue'
 import PluginSelectGrid from './select/PluginSelectGrid.vue'
 
@@ -225,13 +214,6 @@ const props = defineProps({
     type: Object as PropType<DisabledPlugin>,
     default: () => ({}),
   },
-  /**
-   * Number of plugins to always have visible (never will be collapsed)
-   */
-  pluginsPerRow: {
-    type: Number,
-    default: 4,
-  },
   /**
    * Ids of plugins to show in the highlighted plugins group
    */
@@ -539,8 +521,21 @@ onMounted(async () => {
 
 <style lang="scss" scoped>
 .kong-ui-entities-plugin-select-form {
-  .title-loading-skeleton {
-    margin-left: $kui-space-40;
+  .plugins-skeleton {
+    &-title {
+      margin-bottom: $kui-space-50;
+    }
+
+    &-cards {
+      :deep(.skeleton-card-wrapper) {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(0, 335px));
+
+        .skeleton-card {
+          max-width: none;
+        }
+      }
+    }
   }
 
   .plugins-filter-input-container {