feat(plugins): redesigned RLA form [KM-136]

packages/core/forms/src/forms/index.ts

@@ -2,3 +2,4 @@ export { default as OIDCForm } from './OIDCForm.vue'
 export { default as PostFunction } from './PostFunction.vue'
 export { default as ExitTransformer } from './ExitTransformer.vue'
 export { default as ACMEForm } from './ACMEForm.vue'
+export { default as RLAForm } from './RLAForm.vue'

packages/core/forms/src/generator/fields/advanced/FieldSelectionGroup.vue

@@ -1,42 +1,91 @@
 <template>
   <div class="selection-group">
-    <div
-      v-for="(option, i) in schema.fields"
-      :key="i"
-      class="option-group"
-    >
+    <template v-if="schema.horizontalRadios">
       <!-- Radio button -->
-      <div class="form-group">
-        <label
-          class="k-label"
-          :class="`${option.label}-check`"
-        >
-          <input
-            v-model="checkedGroup"
-            class="k-input"
-            type="radio"
-            :value="i"
+      <div class="form-group horizontal-radios">
+        <div class="radio-group">
+          <div
+            v-for="(option, i) in schema.fields"
+            :key="i"
+            class="option-group"
           >
-          {{ option.label }}
-          <div class="control-help">{{ option.description }}</div>
-        </label>
+            <label
+              class="k-label"
+              :class="`${option.label}-check`"
+            >
+              <input
+                v-model="checkedGroup"
+                class="k-input"
+                type="radio"
+                :value="i"
+              >
+              {{ option.label }}
+              <div class="control-help">{{ option.description }}</div>
+            </label>
+          </div>
+        </div>
       </div>
 
-      <!-- Selected Field -->
       <div
-        v-show="option.fields && checkedGroup === i"
-        class="option-field"
+        v-for="(option, i) in schema.fields"
+        :key="i"
+        class="option-group"
       >
-        <div class="option-field-container">
-          <vue-form-generator
-            :model="model"
-            :options="{ helpAsHtml: true }"
-            :schema="{ fields: option.fields }"
-            @model-updated="updateModel"
-          />
+        <!-- Selected Field -->
+        <div
+          v-show="option.fields && checkedGroup === i"
+          class="option-field"
+        >
+          <div class="option-field-container">
+            <vue-form-generator
+              :model="model"
+              :options="{ helpAsHtml: true }"
+              :schema="{ fields: option.fields }"
+              @model-updated="updateModel"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <div
+        v-for="(option, i) in schema.fields"
+        :key="i"
+        class="option-group"
+      >
+        <!-- Radio button -->
+        <div class="form-group">
+          <label
+            class="k-label"
+            :class="`${option.label}-check`"
+          >
+            <input
+              v-model="checkedGroup"
+              class="k-input"
+              type="radio"
+              :value="i"
+            >
+            {{ option.label }}
+            <div class="control-help">{{ option.description }}</div>
+          </label>
+        </div>
+
+        <!-- Selected Field -->
+        <div
+          v-show="option.fields && checkedGroup === i"
+          class="option-field"
+        >
+          <div class="option-field-container">
+            <vue-form-generator
+              :model="model"
+              :options="{ helpAsHtml: true }"
+              :schema="{ fields: option.fields }"
+              @model-updated="updateModel"
+            />
+          </div>
         </div>
       </div>
-    </div>
+    </template>
   </div>
 </template>
 
@@ -103,21 +152,25 @@ export default {
 
 <style lang="scss">
 .field-selectionGroup {
-  > label {
+  >label {
     display: none;
   }
+
   .control-help {
-    color: rgba(0,0,0,.45);
+    color: rgba(0, 0, 0, .45);
     font-weight: normal;
     margin-left: 32px;
     width: 100%;
   }
+
   .form-check-input {
     margin-bottom: 8px;
     margin-right: 8px;
   }
+
   .option-field {
     margin-top: 16px;
+
     .form-group {
       margin-bottom: 16px;
     }
@@ -137,5 +190,14 @@ export default {
   .option-field-container {
     margin-bottom: 0;
   }
+
+  .form-group.horizontal-radios {
+    .radio-group {
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+      gap: $kui-space-80;
+    }
+  }
 }
 </style>

packages/core/forms/src/index.ts

@@ -12,14 +12,18 @@ export default {
 export { customFields } from './generator/fields/advanced/exports'
 export { VueFormGenerator, sharedForms }
 
-export const getSharedFormName = (modelName: string, enabledAcmeCustomTemplate = false): string => {
+export interface GetSharedFormNameOptions {
+  useRLARedesignedForm?: boolean
+}
+
+export const getSharedFormName = (modelName: string, options?: GetSharedFormNameOptions): string => {
   const mapping:Record<string, string> = {
-    ...(enabledAcmeCustomTemplate && { acme: 'ACMEForm' }),
     'openid-connect': 'OIDCForm',
     'post-function': 'PostFunction',
     // Pre and Post function plugins are using same component
     'pre-function': 'PostFunction',
     'exit-transformer': 'ExitTransformer',
+    ...(options?.useRLARedesignedForm && { 'rate-limiting-advanced': 'RLAForm' }),
   }
 
   return mapping[modelName]

packages/core/forms/src/locales/en.json

@@ -61,5 +61,48 @@
     "config-functions": {
       "newElementButtonLabel": "+ Add"
     }
+  },
+  "rla": {
+    "view_advanced_fields": "View Advanced Fields",
+    "window_type": {
+      "label": "Rate Limit Window Type",
+      "help": "Sets the time window type to either <code>sliding</code> (default) or <code>fixed</code>.<br><ul><li>Sliding windows apply the rate limiting logic while taking into account previous hit rates (from the window that immediately precedes the current) using a dynamic weight.</li><li>Fixed windows consist of buckets that are statically assigned to a definitive time range, each request is mapped to only one fixed window based on its timestamp and will affect only that window&#39;s counters.</li></ul>",
+      "options": {
+        "fixed": "Fixed",
+        "sliding": "Sliding"
+      }
+    },
+    "request_limits": {
+      "title": "Request Limits",
+      "subtitle": "Advanced control on request rate with customizable limits and window sizes.",
+      "label": "Limit",
+      "label_index": "Limit {index}",
+      "help": "Set one or more requests-per-window limits and window sizes to apply a limit to (defined in seconds). There must be a matching number of window limits and sizes specified.",
+      "request_number": "Request number",
+      "time_interval": "Time interval",
+      "interval_determiner": "Every",
+      "seconds": "Seconds"
+    },
+    "try_a_use_case": "Start with a prebuilt use case",
+    "use_case_index": "Use case {index}",
+    "error_message": {
+      "label": "Error Message",
+      "code_placeholder": "Code Message",
+      "message_placeholder": "Error Message",
+      "help": "Set a custom error code and message to be returned when the rate limit is exceeded."
+    },
+    "identifiers": {
+      "label": "Identifiers",
+      "options": {
+        "ip": "IP",
+        "credential": "Credential",
+        "consumer": "Consumer",
+        "service": "Service",
+        "header": "Header",
+        "path": "Path",
+        "consumer-group": "Consumer Group"
+      }
+    },
+    "redis_address_example": "e.g. localhost:6379"
   }
 }

packages/entities/entities-plugins/docs/plugin-form.md

@@ -97,6 +97,18 @@ A form component for Plugins.
     - default: `false`
     - Whether to enable grouping for required and advanced (optional) fields.
 
+  - `useRLARedesignedForm`:
+    - type: `boolean`
+    - required: `false`
+    - default: `false`
+    - Whether to use the redesigned form for the RLA plugin.
+
+  - `useHorizontalRadiosForPluginScoping`:
+    - type: `boolean`
+    - required: `false`
+    - default: `false`
+    - Whether to use the horizontal radios in the plugin scoping section.
+
 The base konnect or kongManger config.
 
 #### `pluginType`

packages/entities/entities-plugins/sandbox/pages/PluginFormPage.vue

@@ -51,6 +51,7 @@ const konnectConfig = ref<KonnectPluginFormConfig>({
   backRoute: { name: 'select-plugin' },
   cancelRoute: { name: 'home' },
   groupFields: true,
+  useRLARedesignedForm: true,
 })
 
 const kongManagerConfig = ref<KongManagerPluginFormConfig>({
@@ -63,6 +64,7 @@ const kongManagerConfig = ref<KongManagerPluginFormConfig>({
   backRoute: { name: 'select-plugin' },
   cancelRoute: { name: 'home' },
   groupFields: true,
+  useRLARedesignedForm: true,
 })
 
 const onUpdate = (payload: Record<string, any>) => {

packages/entities/entities-plugins/src/components/PluginEntityForm.vue

@@ -136,6 +136,7 @@ const { axiosInstance } = useAxios(props.config?.axiosRequestConfig)
 
 const { parseSchema } = composables.useSchemas(props.entityMap.focusedEntity?.id || undefined, {
   groupFields: props.config.groupFields,
+  useRLARedesignedForm: props.config.useRLARedesignedForm,
 })
 const { convertToDotNotation, unFlattenObject, isObjectEmpty, unsetNullForeignKey } = composables.usePluginHelpers()
 
@@ -604,7 +605,7 @@ watch(() => props.schema, (newSchema, oldSchema) => {
 
   formSchema.value = { fields: formSchema.value?.fields?.map((r: Record<string, any>) => { return { ...r, disabled: r.disabled || false } }) }
   Object.assign(originalModel, JSON.parse(JSON.stringify(form.model)))
-  sharedFormName.value = getSharedFormName(form.model.name)
+  sharedFormName.value = getSharedFormName(form.model.name, { useRLARedesignedForm: props.config.useRLARedesignedForm })
 
   initFormModel()
 }, { immediate: true, deep: true })

packages/entities/entities-plugins/src/components/PluginForm.vue

@@ -422,6 +422,7 @@ const defaultFormSchema: DefaultPluginsSchemaRecord = reactive({
       },
     ],
     pinned: true,
+    horizontalRadios: props.config.useHorizontalRadiosForPluginScoping, // KM-136-RLA-Redesign: While enabled, this new horizontal radio design will be applied for ALL plugins
   },
   protocols: {
     id: 'protocols',

packages/entities/entities-plugins/src/composables/useSchemas.ts

@@ -48,6 +48,7 @@ export interface Schema {
 export interface UseSchemasOptions {
   app?: 'konnect' | 'kongManager'
   groupFields?: boolean
+  useRLARedesignedForm?: boolean
 }
 
 /** Sorts non-config fields and place them at the top */
@@ -242,7 +243,8 @@ export const useSchemas = (entityId?: string, options?: UseSchemasOptions) => {
     // No field grouping for:
     // - Plugins with custom layouts
     // - Plugins explicitly marked to use legacy form
-    if (!getSharedFormName(pluginName) && options?.groupFields && !metadata?.useLegacyForm) {
+    // - Redesigned RLA form
+    if (!getSharedFormName(pluginName, { useRLARedesignedForm: options?.useRLARedesignedForm }) && options?.groupFields && !metadata?.useLegacyForm) {
       const pinnedFields = []
       const defaultVisibleFields = []
       const advancedFields = []

packages/entities/entities-plugins/src/types/plugin-form.ts

@@ -38,6 +38,10 @@ export interface BasePluginFormConfig {
   disableConsumerGroupScope?: boolean
   /** Whether to enable grouping for required and advanced (optional) fields. Default: false */
   groupFields?: boolean
+  /** Whether to use the redesigned form for the RLA plugin. Default: false */
+  useRLARedesignedForm?: boolean
+  /** Whether to use the horizontal radios in the plugin scoping section. Default: false */
+  useHorizontalRadiosForPluginScoping?: boolean
 }
 
 export interface KongManagerPluginSelectConfig extends BasePluginSelectConfig, KongManagerBaseFormConfig {}