feat(redis): list and detail components

packages/entities/entities-redis-configurations/sandbox/index.ts

@@ -12,11 +12,6 @@ const init = async () => {
     routes: [
       {
         path: '/',
-        name: 'home',
-        component: () => import('./pages/HomePage.vue'),
-      },
-      {
-        path: '/redis-configuration',
         name: 'redis-configuration-list',
         component: () => import('./pages/RedisConfigurationListPage.vue'),
       },
@@ -33,7 +28,7 @@ const init = async () => {
       {
         path: '/redis-configuration/:id',
         name: 'view-redis-configuration',
-        component: () => import('./pages/RedisConfigurationListPage.vue'),
+        component: () => import('./pages/RedisConfigurationDetail.vue'),
       },
     ],
   })

packages/entities/entities-redis-configurations/sandbox/pages/RedisConfigurationDetail.vue

@@ -0,0 +1,39 @@
+<template>
+  <h2>Konnect API</h2>
+  <RedisConfigurationConfigCard
+    :config="konnectConfig"
+  />
+
+  <h2>Kong Manager API</h2>
+  <RedisConfigurationConfigCard
+    :config="kongManagerConfig"
+  />
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+
+import { RedisConfigurationConfigCard } from '../../src'
+import type {
+  KonnectRedisConfigurationEntityConfig,
+  KongManagerRedisConfigurationEntityConfig,
+} from '../../src'
+
+const route = useRoute()
+const controlPlaneId = import.meta.env.VITE_KONNECT_CONTROL_PLANE_ID || ''
+
+const konnectConfig: KonnectRedisConfigurationEntityConfig = {
+  app: 'konnect',
+  apiBaseUrl: '/us/kong-api',
+  controlPlaneId,
+  entityId: route.params.id as string,
+}
+
+const kongManagerConfig: KongManagerRedisConfigurationEntityConfig = {
+  app: 'kongManager',
+  workspace: 'default',
+  apiBaseUrl: '/kong-manager', // For local dev server proxy
+  entityId: route.params.id as string,
+}
+
+</script>

packages/entities/entities-redis-configurations/sandbox/pages/RedisConfigurationFormPage.vue

@@ -5,6 +5,7 @@
     :partial-id="partialId"
     @error="onError"
     @update="onUpdate"
+    @updated="onUpdated"
   />
 
   <h2>Kong Manager API</h2>
@@ -13,6 +14,7 @@
     :partial-id="partialId"
     @error="onError"
     @update="onUpdate"
+    @updated="onUpdated"
   />
 </template>
 
@@ -24,6 +26,7 @@ import { RedisConfigurationForm } from '../../src'
 import type {
   KonnectRedisConfigurationFormConfig,
   KongManagerRedisConfigurationFormConfig,
+  RedisConfigurationResponse,
 } from '../../src'
 
 import type { AxiosError } from 'axios'
@@ -43,7 +46,7 @@ const kongManagerConfig: KongManagerRedisConfigurationFormConfig = {
   app: 'kongManager',
   workspace: 'default',
   apiBaseUrl: '/kong-manager', // For local dev server proxy
-  cancelRoute: { name: 'home' },
+  cancelRoute: { name: 'redis-configuration-list' },
 }
 
 const onError = (error: AxiosError) => {
@@ -55,4 +58,8 @@ const onUpdate = (payload: Record<string, any>) => {
 
   router.push({ name: 'redis-configuration-list' })
 }
+
+const onUpdated = (data: RedisConfigurationResponse) => {
+  router.push({ name: 'view-redis-configuration', params: { id: data.id } })
+}
 </script>

packages/entities/entities-redis-configurations/sandbox/pages/RedisConfigurationListPage.vue

@@ -5,12 +5,26 @@
 
   <h2>Konnect API</h2>
   <RedisConfigurationList
+    v-if="permissions"
+    cache-identifier="konnect"
+    :can-create="permissions.canCreate"
+    :can-delete="permissions.canDelete"
+    :can-edit="permissions.canEdit"
+    :can-retrieve="permissions.canRetrieve"
     :config="konnectConfig"
+    @view-plugin="id => console.log('View plugin', id)"
   />
 
   <h2>Kong Manager API</h2>
   <RedisConfigurationList
+    v-if="permissions"
+    cache-identifier="kong-manager"
+    :can-create="permissions.canCreate"
+    :can-delete="permissions.canDelete"
+    :can-edit="permissions.canEdit"
+    :can-retrieve="permissions.canRetrieve"
     :config="kongManagerConfig"
+    @view-plugin="id => console.log('View plugin', id)"
   />
 </template>
 

packages/entities/entities-redis-configurations/src/components/LinkedPluginList.vue

@@ -0,0 +1,61 @@
+<template>
+  <KTableData
+    :fetcher="fetcher"
+    :headers="headers"
+    :pagination-attributes="{ totalCount: tableData.length, disablePageJump: true }"
+  >
+    <template #name="{ rowValue }">
+      <PluginName :plugin-name="rowValue" />
+    </template>
+
+    <template #action-items="{ row }">
+      <KDropdownItem @click="() => $emit('view-plugin', row.id)">
+        {{ t('actions.view_plugin') }}
+      </KDropdownItem>
+    </template>
+  </KTableData>
+</template>
+
+<script setup lang="ts">
+import composables from '../composables'
+import PluginName from './PluginItem.vue'
+
+import type { TableViewHeader } from '@kong/kongponents/dist/types'
+import type { RedisConfigurationLinkedPlugin } from '../types'
+
+defineProps({
+  redisConfigurationId: {
+    type: String,
+    required: true,
+  },
+})
+
+defineEmits<{
+  (e: 'view-plugin', pluginId: string): void
+}>()
+
+const { i18n: { t } } = composables.useI18n()
+
+const headers: TableViewHeader[] = [
+  { key: 'name', label: t('linked_plugins_modal.headers.plugin') },
+  { key: 'actions', hideLabel: true },
+]
+
+const tableData: RedisConfigurationLinkedPlugin[] = [
+  { name: 'rate-limiting-advanced', instance_name: 'my-rla-1', id: '90ffda46-273c-4c20-8ad5-2b7a169c1818' },
+  { name: 'rate-limiting', instance_name: 'my-rla-1', id: '62dc8be8-c75a-4211-ad41-ff4f3b6caacb' },
+]
+
+const fetcher = async (): Promise<any> => {
+  // const { rows } = tableData.value
+
+  // isLoading.value = false
+
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+
+  return {
+    total: Number(tableData.length) || 0,
+    data: tableData,
+  }
+}
+</script>

packages/entities/entities-redis-configurations/src/components/LinkedPluginListModal.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="linked-plugins-modal">
+    <KModal
+      :action-button-text="t('actions.done')"
+      hide-cancel-button
+      :title="title"
+      :visible="visible"
+      @cancel="cancel"
+      @proceed="proceed"
+    >
+      <LinkedPluginList
+        :redis-configuration-id="redisConfigurationId"
+        @view-plugin="($event) => emit('view-plugin', $event)"
+      />
+    </KModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import composables from '../composables'
+import LinkedPluginList from './LinkedPluginList.vue'
+
+defineProps({
+  redisConfigurationId: {
+    type: String,
+    required: true,
+  },
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+})
+
+const emit = defineEmits<{
+  (e: 'cancel'): void
+  (e: 'proceed'): void
+  (e: 'view-plugin', pluginId: string): void
+}>()
+
+const { i18n: { t } } = composables.useI18n()
+
+const title = computed(() => t('linked_plugins_modal.title', { count: 100 }))
+
+const cancel = () => {
+  emit('cancel')
+}
+
+const proceed = () => {
+  emit('proceed')
+}
+</script>
+
+<style scoped lang="scss">
+.linked-plugins-modal {
+  :deep(.k-table-view) {
+    background-color: transparent;
+  }
+
+  :deep(.modal-container) {
+    min-width: 640px;
+  }
+}
+
+@media (max-width: $kui-breakpoint-mobile) {
+  .linked-plugins-modal {
+    :deep(.modal-container) {
+      min-width: 100%;
+    }
+  }
+}
+</style>

packages/entities/entities-redis-configurations/src/components/LinkedPluginsInline.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="linked-plugins">
+    <PluginIcon
+      name="rate-limiting-advanced"
+      :size="24"
+    />
+    <PluginIcon
+      name="rate-limiting"
+      :size="24"
+    />
+    <KBadge appearance="info">
+      +5
+    </KBadge>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PluginIcon } from '@kong-ui-public/entities-plugins'
+
+</script>
+
+
+<style scoped lang="scss">
+.linked-plugins {
+  display: flex;
+  gap: $kui-space-40;
+}
+</style>

packages/entities/entities-redis-configurations/src/components/PluginItem.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="plugin-item">
+    <PluginIcon
+      :name="pluginName"
+      :size="24"
+    />
+    <span>{{ pluginName }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PluginIcon } from '@kong-ui-public/entities-plugins'
+
+defineProps({
+  pluginName: {
+    type: String,
+    required: true,
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.plugin-item {
+  align-items: center;
+  display: flex;
+  gap: $kui-space-40;
+}
+</style>