wip

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

@@ -16,10 +16,25 @@ const init = async () => {
         component: () => import('./pages/HomePage.vue'),
       },
       {
-        path: '/create',
+        path: '/redis-configuration',
+        name: 'redis-configuration-list',
+        component: () => import('./pages/RedisConfigurationListPage.vue'),
+      },
+      {
+        path: '/redis-configuration/create',
         name: 'create-redis-configuration',
         component: () => import('./pages/RedisConfigurationFormPage.vue'),
       },
+      {
+        path: '/redis-configuration/edit/:id',
+        name: 'edit-redis-configuration',
+        component: () => import('./pages/RedisConfigurationFormPage.vue'),
+      },
+      {
+        path: '/redis-configuration/:id',
+        name: 'view-redis-configuration',
+        component: () => import('./pages/RedisConfigurationListPage.vue'),
+      },
     ],
   })
 

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

@@ -1,8 +1,8 @@
 <template>
   <ul>
     <li>
-      <router-link :to="{ name: 'create-redis-configuration' }">
-        RedisConfigurationForm
+      <router-link :to="{ name: 'redis-configuration-list' }">
+        RedisConfigurationList
       </router-link>
     </li>
   </ul>

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

@@ -1,25 +1,37 @@
 <template>
-  <template v-if="false">
-    <h2>Konnect API</h2>
-    <RedisConfigurationForm
-      :config="konnectConfig"
-    />
-  </template>
+  <h2>Konnect API</h2>
+  <RedisConfigurationForm
+    :config="konnectConfig"
+    :partial-id="partialId"
+    @error="onError"
+    @update="onUpdate"
+  />
 
   <h2>Kong Manager API</h2>
   <RedisConfigurationForm
     :config="kongManagerConfig"
+    :partial-id="partialId"
+    @error="onError"
+    @update="onUpdate"
   />
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
 import { RedisConfigurationForm } from '../../src'
 import type {
   KonnectRedisConfigurationFormConfig,
   KongManagerRedisConfigurationFormConfig,
 } from '../../src'
 
+import type { AxiosError } from 'axios'
+
+const route = useRoute()
+const router = useRouter()
 const controlPlaneId = import.meta.env.VITE_KONNECT_CONTROL_PLANE_ID || ''
+const partialId = computed((): string => route?.params?.id as string || '')
 
 const konnectConfig: KonnectRedisConfigurationFormConfig = {
   app: 'konnect',
@@ -33,4 +45,14 @@ const kongManagerConfig: KongManagerRedisConfigurationFormConfig = {
   apiBaseUrl: '/kong-manager', // For local dev server proxy
   cancelRoute: { name: 'home' },
 }
+
+const onError = (error: AxiosError) => {
+  console.log(`Error: ${error}`)
+}
+
+const onUpdate = (payload: Record<string, any>) => {
+  console.log('update', payload)
+
+  router.push({ name: 'redis-configuration-list' })
+}
 </script>

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

@@ -0,0 +1,57 @@
+<template>
+  <SandboxPermissionsControl
+    @update="handlePermissionsUpdate"
+  />
+
+  <h2>Konnect API</h2>
+  <RedisConfigurationList
+    :config="konnectConfig"
+  />
+
+  <h2>Kong Manager API</h2>
+  <RedisConfigurationList
+    :config="kongManagerConfig"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import SandboxPermissionsControl from '@entities-shared-sandbox/components/SandboxPermissionsControl.vue'
+
+import { RedisConfigurationList } from '../../src'
+
+import type {
+  KonnectRedisConfigurationListConfig,
+  KongManagerRedisConfigurationListConfig,
+} from '../../src'
+import type { PermissionsActions } from '@entities-shared-sandbox/components/SandboxPermissionsControl.vue'
+
+const controlPlaneId = import.meta.env.VITE_KONNECT_CONTROL_PLANE_ID || ''
+
+const konnectConfig: KonnectRedisConfigurationListConfig = {
+  app: 'konnect',
+  apiBaseUrl: '/us/kong-api',
+  controlPlaneId,
+  createRoute: { name: 'create-redis-configuration' },
+  getViewRoute: (id: string) => ({ name: 'view-redis-configuration', params: { id } }),
+  getEditRoute: (id: string) => ({ name: 'edit-redis-configuration', params: { id } }),
+}
+
+const kongManagerConfig: KongManagerRedisConfigurationListConfig = {
+  app: 'kongManager',
+  workspace: 'default',
+  apiBaseUrl: '/kong-manager',
+  createRoute: { name: 'create-redis-configuration' },
+  getViewRoute: (id: string) => ({ name: 'view-redis-configuration', params: { id } }),
+  getEditRoute: (id: string) => ({ name: 'edit-redis-configuration', params: { id } }),
+}
+
+// Remount the tables in the sandbox when the permission props change; not needed outside of a sandbox
+const key = ref(1)
+const permissions = ref<PermissionsActions | null>(null)
+
+const handlePermissionsUpdate = (newPermissions: PermissionsActions) => {
+  permissions.value = newPermissions
+  key.value++
+}
+</script>

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

@@ -9,11 +9,11 @@
       :fetch-url="fetchUrl"
       :form-fields="payload"
       :is-readonly="form.readonly"
-      @cancel="noop"
-      @fetch:error="noop"
+      @cancel="cancelHandler"
+      @fetch:error="fetchErrorHandler"
       @fetch:success="updateFormValues"
-      @loading="noop"
-      @submit="submit"
+      @loading="loadingHandler"
+      @submit="submitHandler"
     >
       <EntityFormSection
         :description="t('form.sections.type.description')"
@@ -321,19 +321,21 @@ import '@kong-ui-public/entities-vaults/dist/style.css'
 import { EntityBaseForm, EntityFormSection, SupportedEntityType } from '@kong-ui-public/entities-shared'
 import { ref, computed } from 'vue'
 import { VaultSecretPicker, VaultSecretPickerProvider } from '@kong-ui-public/entities-vaults'
+import { useRouter } from 'vue-router'
 
 import { RedisType } from '../types'
 import { useRedisConfigurationForm } from '../composables/useRedisConfigurationForm'
 import ClusterNodes from './ClusterNodes.vue'
 import composables from '../composables'
 import SentinelNodes from './SentinelNodes.vue'
-import endpoints from '../partials-endpoints'
 
 import type { PropType } from 'vue'
 import type {
   KongManagerRedisConfigurationFormConfig,
   KonnectRedisConfigurationFormConfig,
+  RedisConfigurationFormState,
 } from '../types'
+import type { AxiosError, AxiosResponse } from 'axios'
 import type { SelectItem } from '@kong/kongponents/dist/types'
 
 const props = defineProps({
@@ -356,7 +358,14 @@ const props = defineProps({
   },
 })
 
+const emit = defineEmits<{
+  (e: 'update', data: RedisConfigurationFormState): void,
+  (e: 'error', error: AxiosError): void,
+  (e: 'loading', isLoading: boolean): void,
+}>()
+
 const { i18n: { t } } = composables.useI18n()
+const router = useRouter()
 
 const vaultSecretPickerSetup = ref<string | false>()
 const vaultSecretPickerAutofillAction = ref<(secretRef: string) => void | undefined>()
@@ -404,8 +413,6 @@ const sentinelRoleOptions = [
   { label: t('form.options.sentinel_role.any'), value: 'any' },
 ]
 
-const noop = () => {}
-
 const getSelectedText = (item: any) => {
   const suffix = item.value === RedisType.HOST_PORT_CE
     ? t('form.options.type.suffix_open_source')
@@ -431,6 +438,26 @@ const {
   config: props.config,
 })
 
+const submitHandler = async () => {
+  try {
+    await submit()
+  } catch (e) {
+    emit('error', e as AxiosError)
+  }
+}
+
+const cancelHandler = (): void => {
+  router.push(props.config?.cancelRoute || { name: 'redis-configuration-list' })
+}
+
+const loadingHandler = (val: boolean): void => {
+  emit('loading', val)
+}
+
+const fetchErrorHandler = (err: AxiosError): void => {
+  emit('error', err)
+}
+
 const updateFormValues = (data: Record<string, any>) => {
   form.fields.config = Object.assign({}, form.fields.config, data.config)
   form.fields.config.sentinel_nodes = data.config.sentinel_nodes ?? []