From 2e3fb2001b748f934e144ab94e11fe452ab94c54 Mon Sep 17 00:00:00 2001
From: Makito <i@maki.to>
Date: Tue, 21 May 2024 01:29:58 +0800
Subject: [PATCH 1/7] feat(plugins): redesigned RLA form

---
 packages/core/forms/src/forms/RLAForm.vue     | 341 ++++++++++++++++++
 packages/core/forms/src/forms/index.ts        |   1 +
 .../fields/advanced/FieldSelectionGroup.vue   | 124 +++++--
 packages/core/forms/src/index.ts              |   8 +-
 packages/core/forms/src/locales/en.json       |  31 ++
 .../entities-plugins/docs/plugin-form.md      |   6 +
 .../sandbox/pages/PluginFormPage.vue          |   2 +
 .../src/components/PluginEntityForm.vue       |   3 +-
 .../src/composables/useSchemas.ts             |   4 +-
 .../entities-plugins/src/types/plugin-form.ts |   2 +
 10 files changed, 487 insertions(+), 35 deletions(-)
 create mode 100644 packages/core/forms/src/forms/RLAForm.vue

diff --git a/packages/core/forms/src/forms/RLAForm.vue b/packages/core/forms/src/forms/RLAForm.vue
new file mode 100644
index 0000000000..1241aef2a1
--- /dev/null
+++ b/packages/core/forms/src/forms/RLAForm.vue
@@ -0,0 +1,341 @@
+<template>
+  <div class="rla-form-basic-fields">
+    <VueFormGenerator
+      :model="formModel"
+      :options="formOptions"
+      :schema="scopingSchema"
+      @model-updated="(value: any, model: string) => onModelUpdated(value, model)"
+    />
+
+    <KCard
+      class="rla-form-request-limits"
+    >
+      <template #title>
+        <KLabel
+          class="rla-form-request-limits-title"
+          for="rla-form-request-limits-legend"
+          :info="t('rla.request_limits.help')"
+          required
+          :tooltip-attributes="{
+            maxWidth: '300',
+            placement: 'top',
+            tooltipId: 'rla-form-request-limits-tooltip'
+          }"
+        >
+          {{ t('rla.request_limits.title') }}
+        </KLabel>
+        <div class="rla-form-request-limits-subtitle">
+          {{ t('rla.request_limits.subtitle') }}
+        </div>
+      </template>
+
+      <div class="rla-form-request-limits-items">
+        <div
+          v-for="(requestLimit, index) in requestLimits"
+          :key="index.toString()"
+        >
+          <KLabel
+            :for="`rla-form-request-limits-item-${index}-legend`"
+          >
+            {{ t('rla.request_limits.label', { index: index + 1 }) }}
+          </KLabel>
+          <div class="rla-form-request-limits-row">
+            <legend
+              :id="`rla-form-request-limits-item-${index}-legend`"
+              class="rla-form-request-limits-inputs"
+            >
+              <KInput
+                :model-value="requestLimit.limit && requestLimit.limit.toString()"
+                :placeholder="t('rla.request_limits.request_number')"
+                type="number"
+                @update:model-value="(value: string) => updateRequestLimitLimit(index, Number.parseInt(value))"
+              />
+              <div>{{ t('rla.request_limits.interval_determiner') }}</div>
+              <KInput
+                :model-value="requestLimit.windowSize && requestLimit.windowSize.toString()"
+                :placeholder="t('rla.request_limits.time_interval')"
+                type="number"
+                @update:model-value="(value: string) => updateRequestLimitWindowSize(index, Number.parseInt(value))"
+              />
+              <div>{{ t('rla.request_limits.seconds') }}</div>
+            </legend>
+
+            <div class="rla-form-request-limits-actions">
+              <KButton
+                appearance="tertiary"
+                :disabled="requestLimits.length <= 1"
+                @click="() => removeRequestLimit(index)"
+              >
+                <RemoveIcon />
+              </KButton>
+
+              <KButton
+                appearance="tertiary"
+                @click="() => addRequestLimit(index)"
+              >
+                <AddIcon />
+              </KButton>
+            </div>
+          </div>
+        </div>
+      </div>
+    </KCard>
+
+    <KSelect
+      v-model="identifier"
+      class="rla-form-identifiers"
+      :items="identifierSelectItems"
+      :label="t('rla.identifiers.label')"
+      :label-attributes="{
+        tooltipAttributes: {
+          maxWidth: '300',
+          placement: 'top',
+          tooltipId: 'rla-form-request-limits-tooltip',
+        },
+      }"
+      required
+      @selected="(item: any) => props.onModelUpdated(item.value, 'config-identifier')"
+    >
+      <template #label-tooltip>
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <div v-html="identifierField && identifierField.help" />
+      </template>
+    </KSelect>
+
+    <div>
+      <KLabel
+        for="rla-form-error-legend"
+        :info="t('rla.error_message.help')"
+        required
+        :tooltip-attributes="{
+          maxWidth: '300',
+          placement: 'top',
+          tooltipId: 'rla-form-error-tooltip'
+        }"
+      >
+        {{ t('rla.error_message.label') }}
+      </KLabel>
+      <legend
+        id="rla-form-error-legend"
+        class="rla-form-error-inputs"
+      >
+        <KInput
+          class="input-error-code"
+          :model-value="errorCode && errorCode.toString()"
+          :placeholder="t('rla.error_message.code_placeholder')"
+          type="number"
+          @update:model-value="(value: string) => onModelUpdated(Number.parseInt(value), 'config-error_code')"
+        />
+        <div>:</div>
+        <KInput
+          :model-value="errorMessage"
+          :placeholder="t('rla.error_message.message_placeholder')"
+          @update:model-value="(value: string) => onModelUpdated(value, 'config-error_message')"
+        />
+      </legend>
+    </div>
+  </div>
+
+  <KCollapse
+    v-model="advancedCollapsed"
+    :trigger-label="t('rla.view_advanced_fields')"
+  >
+    <VueFormGenerator
+      :model="formModel"
+      :options="formOptions"
+      :schema="advancedSchema"
+      @model-updated="(value: any, model: string) => onModelUpdated(value, model)"
+    />
+  </KCollapse>
+</template>
+
+<script lang="ts" setup>
+import { createI18n } from '@kong-ui-public/i18n'
+import { AddIcon, RemoveIcon } from '@kong/icons'
+import type { SelectItem } from '@kong/kongponents'
+import cloneDeep from 'lodash-es/cloneDeep'
+import { computed, ref } from 'vue'
+import english from '../locales/en.json'
+
+interface RequestLimit {
+  limit?: number
+  windowSize?: number
+}
+
+const { t } = createI18n<typeof english>('en-us', english)
+
+const props = defineProps<{
+  formSchema: any
+  formModel: Record<string, any>
+  formOptions: any
+  onModelUpdated: (value: any, model: string) => void
+  isEditing?: boolean
+}>()
+
+const scopingSchema = computed(() => {
+  const selectionGroup = props.formSchema?.fields?.find((field: any) => field.model === 'selectionGroup')
+  if (!selectionGroup) {
+    return undefined
+  }
+
+  return {
+    fields: [{
+      ...selectionGroup,
+      horizontalRadios: true,
+    }],
+  }
+})
+
+const advancedSchema = computed(() => {
+  const omittedFields = new Set([
+    'selectionGroup',
+    ...['identifier', 'limit', 'window_size', 'error_code', 'error_message']
+      .map((field) => `config-${field}`),
+  ])
+
+  return {
+    fields: props.formSchema?.fields
+      ?.filter((field: any) => typeof field.model === 'string' && !omittedFields.has(field.model))
+      ?.map((field: any) => {
+        if (field.model === 'config-redis-cluster_addresses') {
+          return {
+            ...field,
+            hint: 'e.g. localhost:6379',
+          }
+        }
+        return field
+      }),
+  }
+})
+
+const identifierField = computed(() => props.formSchema?.fields?.find((field: any) => field.model === 'config-identifier'))
+
+const identifierSelectItems = computed<SelectItem[]>(() =>
+  ((props.formSchema?.fields?.find((field: any) => field.model === 'config-identifier')?.values ?? []) as string[])
+    .map((value: string) => ({
+      label: t(`rla.identifiers.options.${value}` as any),
+      value,
+    })),
+)
+
+const advancedCollapsed = ref(true)
+
+const requestLimits = computed<RequestLimit[]>(() => {
+  const modelValue = props.formModel['config-limit']?.map((limit: number, index: number) => ({
+    limit,
+    windowSize: props.formModel?.['config-window_size']?.[index],
+  }))
+
+  if (!Array.isArray(modelValue) || modelValue.length === 0) {
+    return [{ limit: undefined, windowSize: undefined }]
+  }
+
+  return modelValue
+})
+
+const identifier = computed<string | undefined>(() => props.formModel?.['config-identifier'] ?? props.formSchema?.fields?.find((field: any) => field.model === 'config-identifier')?.default)
+const errorCode = computed<number | undefined>(() => props.formModel?.['config-error_code'] ?? props.formSchema?.fields?.find((field: any) => field.model === 'config-error_code')?.default)
+const errorMessage = computed<string | undefined>(() => props.formModel?.['config-error_message'] ?? props.formSchema?.fields?.find((field: any) => field.model === 'config-error_message')?.default)
+
+const updateRequestLimitLimit = (index: number, limit?: number) => {
+  const limits = cloneDeep(props.formModel?.['config-limit'] ?? [])
+  limits[index] = limit
+  props.onModelUpdated(limits, 'config-limit')
+}
+
+const updateRequestLimitWindowSize = (index: number, windowSize?: number) => {
+  const windowSizes = cloneDeep(props.formModel?.['config-window_size'] ?? [])
+  windowSizes[index] = windowSize
+  props.onModelUpdated(windowSizes, 'config-window_size')
+}
+
+const addRequestLimit = (index: number) => {
+  const limits = cloneDeep(props.formModel?.['config-limit'] ?? [])
+  const windowSizes = cloneDeep(props.formModel?.['config-window_size'] ?? [])
+  limits.splice(index + 1, 0, undefined)
+  windowSizes.splice(index + 1, 0, undefined)
+  props.onModelUpdated(limits, 'config-limit')
+  props.onModelUpdated(windowSizes, 'config-window_size')
+}
+
+const removeRequestLimit = (index: number) => {
+  if (requestLimits.value.length > 1) {
+    const limits = cloneDeep(props.formModel?.['config-limit'] ?? [])
+    const windowSizes = cloneDeep(props.formModel?.['config-window_size'] ?? [])
+    limits.splice(index, 1)
+    windowSizes.splice(index, 1)
+    props.onModelUpdated(limits, 'config-limit')
+    props.onModelUpdated(windowSizes, 'config-window_size')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.rla-form-basic-fields {
+  display: flex;
+  flex-direction: column;
+  gap: $kui-space-80;
+  margin-bottom: $kui-space-80;
+
+  .rla-form-request-limits {
+    &-title {
+      font-size: $kui-font-size-40;
+      font-weight: $kui-font-weight-bold;
+    }
+
+    &-subtitle {
+      color: $kui-color-text-neutral;
+      font-size: $kui-font-size-30;
+      font-weight: $kui-font-weight-regular;
+    }
+
+    &-items {
+      display: flex;
+      flex-direction: column;
+      gap: $kui-space-40;
+    }
+
+    &-row,
+    &-inputs,
+    &-actions {
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+      gap: $kui-space-40;
+      justify-content: space-between;
+    }
+
+    &-inputs {
+      flex-grow: 1;
+    }
+
+    &-actions {
+      flex-shrink: 0;
+    }
+
+    :deep(.form-group) {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  .rla-form-identifiers {
+    :deep(.k-tooltip p) {
+      margin: 0;
+    }
+  }
+
+  .rla-form-error-inputs {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    gap: $kui-space-40;
+    justify-content: space-between;
+
+    .input-error-code {
+      max-width: 200px;
+      min-width: 100px;
+      width: 20%;
+    }
+  }
+}
+</style>
diff --git a/packages/core/forms/src/forms/index.ts b/packages/core/forms/src/forms/index.ts
index d39f6e9dbf..c5612e8404 100644
--- a/packages/core/forms/src/forms/index.ts
+++ b/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'
diff --git a/packages/core/forms/src/generator/fields/advanced/FieldSelectionGroup.vue b/packages/core/forms/src/generator/fields/advanced/FieldSelectionGroup.vue
index 926b83e0bb..3e83bee124 100644
--- a/packages/core/forms/src/generator/fields/advanced/FieldSelectionGroup.vue
+++ b/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>
diff --git a/packages/core/forms/src/index.ts b/packages/core/forms/src/index.ts
index 6a498718cf..8178bd8aa6 100644
--- a/packages/core/forms/src/index.ts
+++ b/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]
diff --git a/packages/core/forms/src/locales/en.json b/packages/core/forms/src/locales/en.json
index 837d7d1a02..4d783c053c 100644
--- a/packages/core/forms/src/locales/en.json
+++ b/packages/core/forms/src/locales/en.json
@@ -61,5 +61,36 @@
     "config-functions": {
       "newElementButtonLabel": "+ Add"
     }
+  },
+  "rla": {
+    "view_advanced_fields": "View Advanced Fields",
+    "request_limits": {
+      "title": "Request Limits",
+      "subtitle": "Maximum number of requests sent through your gateway at specific time intervals",
+      "label": "Limit {index}",
+      "help": "Set one or more requests-per-window limit 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"
+    },
+    "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"
+      }
+    }
   }
 }
diff --git a/packages/entities/entities-plugins/docs/plugin-form.md b/packages/entities/entities-plugins/docs/plugin-form.md
index 736649a453..97e44ce37e 100644
--- a/packages/entities/entities-plugins/docs/plugin-form.md
+++ b/packages/entities/entities-plugins/docs/plugin-form.md
@@ -97,6 +97,12 @@ 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.
+
 The base konnect or kongManger config.
 
 #### `pluginType`
diff --git a/packages/entities/entities-plugins/sandbox/pages/PluginFormPage.vue b/packages/entities/entities-plugins/sandbox/pages/PluginFormPage.vue
index d12a8b1ade..b4bd447704 100644
--- a/packages/entities/entities-plugins/sandbox/pages/PluginFormPage.vue
+++ b/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>) => {
diff --git a/packages/entities/entities-plugins/src/components/PluginEntityForm.vue b/packages/entities/entities-plugins/src/components/PluginEntityForm.vue
index 59ff14d256..47c790be3c 100644
--- a/packages/entities/entities-plugins/src/components/PluginEntityForm.vue
+++ b/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 })
diff --git a/packages/entities/entities-plugins/src/composables/useSchemas.ts b/packages/entities/entities-plugins/src/composables/useSchemas.ts
index f8387836a7..3e10a4fbbb 100644
--- a/packages/entities/entities-plugins/src/composables/useSchemas.ts
+++ b/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 = []
diff --git a/packages/entities/entities-plugins/src/types/plugin-form.ts b/packages/entities/entities-plugins/src/types/plugin-form.ts
index 2f4861207e..0043e41554 100644
--- a/packages/entities/entities-plugins/src/types/plugin-form.ts
+++ b/packages/entities/entities-plugins/src/types/plugin-form.ts
@@ -38,6 +38,8 @@ 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
 }
 
 export interface KongManagerPluginSelectConfig extends BasePluginSelectConfig, KongManagerBaseFormConfig {}

From 844281e810248f9c3b6d70035fae437a770df49a Mon Sep 17 00:00:00 2001
From: Makito <i@maki.to>
Date: Wed, 22 May 2024 12:19:46 +0800
Subject: [PATCH 2/7] fix(forms): address feedback on RLA form

---
 packages/core/forms/src/forms/RLAForm.vue | 93 ++++++++++++++++++++++-
 packages/core/forms/src/locales/en.json   |  6 +-
 2 files changed, 93 insertions(+), 6 deletions(-)

diff --git a/packages/core/forms/src/forms/RLAForm.vue b/packages/core/forms/src/forms/RLAForm.vue
index 1241aef2a1..98a41588d8 100644
--- a/packages/core/forms/src/forms/RLAForm.vue
+++ b/packages/core/forms/src/forms/RLAForm.vue
@@ -79,6 +79,18 @@
           </div>
         </div>
       </div>
+
+      <div class="rla-form-request-limits-examples">
+        <div>Examples:</div>
+        <ol>
+          <li
+            v-for="(example, i) in EXAMPLES"
+            :key="`rla-example-${i}`"
+          >
+            {{ example.description }}<br>Request number: <code>{{ example.config.limit }}</code>, Time interval: <code>{{ example.config.window_size }}</code>, Window type: <code>{{ example.config.window_type }}</code>
+          </li>
+        </ol>
+      </div>
     </KCard>
 
     <KSelect
@@ -157,6 +169,58 @@ import cloneDeep from 'lodash-es/cloneDeep'
 import { computed, ref } from 'vue'
 import english from '../locales/en.json'
 
+const EXAMPLES = [
+  {
+    description: 'A fixed limit of 500 requests per hour resetting sharply on the hour, ensuring no user can exceed this limit.',
+    config: {
+      limit: 500,
+      window_size: 3600,
+      window_type: 'fixed',
+    },
+  },
+  {
+    description: 'Users are allowed 200 requests per 30 minutes, resetting exactly on the 30 minute mark with no carryover of unused limits.',
+    config: {
+      limit: 200,
+      window_size: 1800,
+      window_type: 'fixed',
+    },
+  },
+  {
+    description: 'A strict limit of 5000 requests per day resetting promptly at midnight, preventing any burst traffic or inconsistent user experiences.',
+    config: {
+      limit: 500,
+      window_size: 86400,
+      window_type: 'fixed',
+    },
+  },
+  {
+    description: 'Maximum of 100 requests every rolling hour, continuously adjusting the count over the course of the hour. No hard limit or known reset.',
+    config: {
+      limit: 100,
+      window_size: 3600,
+      window_type: 'sliding',
+    },
+  },
+  {
+    description: 'Each user can make up to 300 requests in any rolling 30 minute period, with older requests dropping off as new requests are made.',
+    config: {
+      limit: 300,
+      window_size: 1800,
+      window_type: 'sliding',
+    },
+  },
+  {
+    description: 'Each user is allowed 500 requests per hour. \nIf the limit is exceeded and the user receives a 429 error, each additional request within the sliding window (hour) \nwill extend the wait time by about 12 minutes, continuously adjusting as new requests are made.',
+    config: {
+      limit: 500,
+      window_size: 3600,
+      window_type: 'sliding',
+      disable_penalty: false,
+    },
+  },
+]
+
 interface RequestLimit {
   limit?: number
   windowSize?: number
@@ -252,6 +316,12 @@ const updateRequestLimitWindowSize = (index: number, windowSize?: number) => {
 const addRequestLimit = (index: number) => {
   const limits = cloneDeep(props.formModel?.['config-limit'] ?? [])
   const windowSizes = cloneDeep(props.formModel?.['config-window_size'] ?? [])
+  if (limits.length === 0) {
+    limits.push(undefined)
+  }
+  if (windowSizes.length === 0) {
+    windowSizes.push(undefined)
+  }
   limits.splice(index + 1, 0, undefined)
   windowSizes.splice(index + 1, 0, undefined)
   props.onModelUpdated(limits, 'config-limit')
@@ -262,6 +332,12 @@ const removeRequestLimit = (index: number) => {
   if (requestLimits.value.length > 1) {
     const limits = cloneDeep(props.formModel?.['config-limit'] ?? [])
     const windowSizes = cloneDeep(props.formModel?.['config-window_size'] ?? [])
+    if (limits.length === 0) {
+      limits.push(undefined)
+    }
+    if (windowSizes.length === 0) {
+      windowSizes.push(undefined)
+    }
     limits.splice(index, 1)
     windowSizes.splice(index, 1)
     props.onModelUpdated(limits, 'config-limit')
@@ -292,7 +368,7 @@ const removeRequestLimit = (index: number) => {
     &-items {
       display: flex;
       flex-direction: column;
-      gap: $kui-space-40;
+      gap: $kui-space-50;
     }
 
     &-row,
@@ -301,7 +377,7 @@ const removeRequestLimit = (index: number) => {
       align-items: center;
       display: flex;
       flex-direction: row;
-      gap: $kui-space-40;
+      gap: $kui-space-50;
       justify-content: space-between;
     }
 
@@ -316,6 +392,17 @@ const removeRequestLimit = (index: number) => {
     :deep(.form-group) {
       margin-bottom: 0 !important;
     }
+
+    &-examples {
+      color: $kui-color-text-neutral;
+      margin-bottom: $kui-space-50;
+      margin-top: $kui-space-50;
+
+      ol {
+        margin-bottom: 0;
+        margin-top: 0;
+      }
+    }
   }
 
   .rla-form-identifiers {
@@ -328,7 +415,7 @@ const removeRequestLimit = (index: number) => {
     align-items: center;
     display: flex;
     flex-direction: row;
-    gap: $kui-space-40;
+    gap: $kui-space-50;
     justify-content: space-between;
 
     .input-error-code {
diff --git a/packages/core/forms/src/locales/en.json b/packages/core/forms/src/locales/en.json
index 4d783c053c..b222e6ebc1 100644
--- a/packages/core/forms/src/locales/en.json
+++ b/packages/core/forms/src/locales/en.json
@@ -66,13 +66,13 @@
     "view_advanced_fields": "View Advanced Fields",
     "request_limits": {
       "title": "Request Limits",
-      "subtitle": "Maximum number of requests sent through your gateway at specific time intervals",
+      "subtitle": "Advanced control on request rate with customizable limits and window sizes.",
       "label": "Limit {index}",
-      "help": "Set one or more requests-per-window limit and window sizes to apply a limit to (defined in seconds). There must be a matching number of window limits and sizes specified.",
+      "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"
+      "seconds": "Seconds"
     },
     "error_message": {
       "label": "Error Message",

From 365f36272b0483058acf67cf02e5c54f7fbe5bb1 Mon Sep 17 00:00:00 2001
From: Makito <i@maki.to>
Date: Wed, 22 May 2024 13:56:11 +0800
Subject: [PATCH 3/7] fix(forms): address feedback

---
 packages/core/forms/src/forms/RLAForm.vue            | 12 +-----------
 .../fields/advanced/FieldSelectionGroup.vue          |  2 +-
 2 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/packages/core/forms/src/forms/RLAForm.vue b/packages/core/forms/src/forms/RLAForm.vue
index 98a41588d8..69bcac5709 100644
--- a/packages/core/forms/src/forms/RLAForm.vue
+++ b/packages/core/forms/src/forms/RLAForm.vue
@@ -19,7 +19,6 @@
           :tooltip-attributes="{
             maxWidth: '300',
             placement: 'top',
-            tooltipId: 'rla-form-request-limits-tooltip'
           }"
         >
           {{ t('rla.request_limits.title') }}
@@ -259,16 +258,7 @@ const advancedSchema = computed(() => {
 
   return {
     fields: props.formSchema?.fields
-      ?.filter((field: any) => typeof field.model === 'string' && !omittedFields.has(field.model))
-      ?.map((field: any) => {
-        if (field.model === 'config-redis-cluster_addresses') {
-          return {
-            ...field,
-            hint: 'e.g. localhost:6379',
-          }
-        }
-        return field
-      }),
+      ?.filter((field: any) => typeof field.model === 'string' && !omittedFields.has(field.model)),
   }
 })
 
diff --git a/packages/core/forms/src/generator/fields/advanced/FieldSelectionGroup.vue b/packages/core/forms/src/generator/fields/advanced/FieldSelectionGroup.vue
index 3e83bee124..024c6663b0 100644
--- a/packages/core/forms/src/generator/fields/advanced/FieldSelectionGroup.vue
+++ b/packages/core/forms/src/generator/fields/advanced/FieldSelectionGroup.vue
@@ -196,7 +196,7 @@ export default {
       align-items: center;
       display: flex;
       flex-direction: row;
-      gap: $kui-space-80
+      gap: $kui-space-80;
     }
   }
 }

From 438299eea0c3274418101732227b227017c8edf6 Mon Sep 17 00:00:00 2001
From: Makito <i@maki.to>
Date: Wed, 22 May 2024 14:14:21 +0800
Subject: [PATCH 4/7] fix(forms): remove redundant props and add hints for
 redis params

---
 packages/core/forms/src/forms/RLAForm.vue | 10 +++++++---
 packages/core/forms/src/locales/en.json   |  3 ++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/core/forms/src/forms/RLAForm.vue b/packages/core/forms/src/forms/RLAForm.vue
index 69bcac5709..09f0ebc78c 100644
--- a/packages/core/forms/src/forms/RLAForm.vue
+++ b/packages/core/forms/src/forms/RLAForm.vue
@@ -101,7 +101,6 @@
         tooltipAttributes: {
           maxWidth: '300',
           placement: 'top',
-          tooltipId: 'rla-form-request-limits-tooltip',
         },
       }"
       required
@@ -121,7 +120,6 @@
         :tooltip-attributes="{
           maxWidth: '300',
           placement: 'top',
-          tooltipId: 'rla-form-error-tooltip'
         }"
       >
         {{ t('rla.error_message.label') }}
@@ -258,7 +256,13 @@ const advancedSchema = computed(() => {
 
   return {
     fields: props.formSchema?.fields
-      ?.filter((field: any) => typeof field.model === 'string' && !omittedFields.has(field.model)),
+      ?.filter((field: any) => typeof field.model === 'string' && !omittedFields.has(field.model))
+      ?.map((field: any) => {
+        if (field.model === 'config-redis-cluster_addresses' || field.model === 'config-redis-sentinel_addresses') {
+          field.hint = t('rla.redis_address_example')
+        }
+        return field
+      }),
   }
 })
 
diff --git a/packages/core/forms/src/locales/en.json b/packages/core/forms/src/locales/en.json
index b222e6ebc1..9822e94bd1 100644
--- a/packages/core/forms/src/locales/en.json
+++ b/packages/core/forms/src/locales/en.json
@@ -91,6 +91,7 @@
         "path": "Path",
         "consumer-group": "Consumer Group"
       }
-    }
+    },
+    "redis_address_example": "e.g. localhost:6379"
   }
 }

From 2064f267622a6dff96dd87e27a8ea222f304f809 Mon Sep 17 00:00:00 2001
From: Makito <i@maki.to>
Date: Wed, 22 May 2024 14:25:49 +0800
Subject: [PATCH 5/7] fix(entities-plugins): config for horizontal radios in
 plugin scoping

---
 packages/entities/entities-plugins/docs/plugin-form.md      | 6 ++++++
 .../entities/entities-plugins/src/components/PluginForm.vue | 1 +
 packages/entities/entities-plugins/src/types/plugin-form.ts | 2 ++
 3 files changed, 9 insertions(+)

diff --git a/packages/entities/entities-plugins/docs/plugin-form.md b/packages/entities/entities-plugins/docs/plugin-form.md
index 97e44ce37e..1c4f2d5480 100644
--- a/packages/entities/entities-plugins/docs/plugin-form.md
+++ b/packages/entities/entities-plugins/docs/plugin-form.md
@@ -103,6 +103,12 @@ A form component for Plugins.
     - 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`
diff --git a/packages/entities/entities-plugins/src/components/PluginForm.vue b/packages/entities/entities-plugins/src/components/PluginForm.vue
index 66f1ab9748..fdc1c7f58e 100644
--- a/packages/entities/entities-plugins/src/components/PluginForm.vue
+++ b/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',
diff --git a/packages/entities/entities-plugins/src/types/plugin-form.ts b/packages/entities/entities-plugins/src/types/plugin-form.ts
index 0043e41554..0dc92a7dee 100644
--- a/packages/entities/entities-plugins/src/types/plugin-form.ts
+++ b/packages/entities/entities-plugins/src/types/plugin-form.ts
@@ -40,6 +40,8 @@ export interface BasePluginFormConfig {
   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 {}

From dd83a6a52d63df8df532c75033c1250d1e94ad25 Mon Sep 17 00:00:00 2001
From: Makito <i@maki.to>
Date: Fri, 24 May 2024 02:23:15 +0800
Subject: [PATCH 6/7] feat(forms): implement use cases for RLA

---
 packages/core/forms/package.json          |   1 +
 packages/core/forms/src/forms/RLAForm.vue | 279 ++++++++++++++++------
 packages/core/forms/src/locales/en.json   |  13 +-
 pnpm-lock.yaml                            |  12 +-
 4 files changed, 228 insertions(+), 77 deletions(-)

diff --git a/packages/core/forms/package.json b/packages/core/forms/package.json
index 4fc668505b..2278ff6296 100644
--- a/packages/core/forms/package.json
+++ b/packages/core/forms/package.json
@@ -60,6 +60,7 @@
     "vue": "^3.4.26"
   },
   "devDependencies": {
+    "@formatjs/intl": "^2.10.2",
     "@kong-ui-public/i18n": "workspace:^",
     "@kong/design-tokens": "1.12.12",
     "@kong/kongponents": "9.0.0-alpha.159",
diff --git a/packages/core/forms/src/forms/RLAForm.vue b/packages/core/forms/src/forms/RLAForm.vue
index 09f0ebc78c..81c10f75d2 100644
--- a/packages/core/forms/src/forms/RLAForm.vue
+++ b/packages/core/forms/src/forms/RLAForm.vue
@@ -7,15 +7,12 @@
       @model-updated="(value: any, model: string) => onModelUpdated(value, model)"
     />
 
-    <KCard
-      class="rla-form-request-limits"
-    >
+    <KCard class="rla-form-request-limits">
       <template #title>
         <KLabel
           class="rla-form-request-limits-title"
           for="rla-form-request-limits-legend"
           :info="t('rla.request_limits.help')"
-          required
           :tooltip-attributes="{
             maxWidth: '300',
             placement: 'top',
@@ -23,72 +20,120 @@
         >
           {{ t('rla.request_limits.title') }}
         </KLabel>
+
         <div class="rla-form-request-limits-subtitle">
           {{ t('rla.request_limits.subtitle') }}
         </div>
       </template>
 
-      <div class="rla-form-request-limits-items">
-        <div
-          v-for="(requestLimit, index) in requestLimits"
-          :key="index.toString()"
-        >
+      <div class="rla-form-request-limits-content">
+        <div class="rla-form-window-type">
           <KLabel
-            :for="`rla-form-request-limits-item-${index}-legend`"
+            class="rla-form-window-type-label"
+            :tooltip-attributes="{
+              maxWidth: '300',
+              placement: 'top',
+            }"
           >
-            {{ t('rla.request_limits.label', { index: index + 1 }) }}
+            {{ t('rla.window_type.label') }}
+
+            <template #tooltip>
+              <!-- eslint-disable-next-line vue/no-v-html -->
+              <div v-html="t('rla.window_type.help')" />
+            </template>
           </KLabel>
-          <div class="rla-form-request-limits-row">
-            <legend
-              :id="`rla-form-request-limits-item-${index}-legend`"
-              class="rla-form-request-limits-inputs"
+
+          <div class="rla-form-window-type-radios">
+            <KRadio
+              v-for="wt in availableWindowTypes"
+              :key="`window-type-${wt}`"
+              :model-value="windowType"
+              :name="wt"
+              :selected-value="wt"
+              @update:model-value="updateWindowType"
             >
-              <KInput
-                :model-value="requestLimit.limit && requestLimit.limit.toString()"
-                :placeholder="t('rla.request_limits.request_number')"
-                type="number"
-                @update:model-value="(value: string) => updateRequestLimitLimit(index, Number.parseInt(value))"
-              />
-              <div>{{ t('rla.request_limits.interval_determiner') }}</div>
-              <KInput
-                :model-value="requestLimit.windowSize && requestLimit.windowSize.toString()"
-                :placeholder="t('rla.request_limits.time_interval')"
-                type="number"
-                @update:model-value="(value: string) => updateRequestLimitWindowSize(index, Number.parseInt(value))"
-              />
-              <div>{{ t('rla.request_limits.seconds') }}</div>
-            </legend>
-
-            <div class="rla-form-request-limits-actions">
-              <KButton
-                appearance="tertiary"
-                :disabled="requestLimits.length <= 1"
-                @click="() => removeRequestLimit(index)"
-              >
-                <RemoveIcon />
-              </KButton>
+              {{ t(`rla.window_type.options.${wt}` as Parameters<typeof t>[0]) }}
+            </KRadio>
+          </div>
+        </div>
 
-              <KButton
-                appearance="tertiary"
-                @click="() => addRequestLimit(index)"
+        <div class="rla-form-request-limits-items">
+          <div
+            v-for="(requestLimit, index) in requestLimits"
+            :key="index.toString()"
+          >
+            <KLabel :for="`rla-form-request-limits-item-${index}-legend`">
+              {{ t('rla.request_limits.label_index', { index: index + 1 }) }}
+            </KLabel>
+            <div class="rla-form-request-limits-row">
+              <legend
+                :id="`rla-form-request-limits-item-${index}-legend`"
+                class="rla-form-request-limits-inputs"
               >
-                <AddIcon />
-              </KButton>
+                <KInput
+                  :model-value="requestLimit.limit && requestLimit.limit.toString()"
+                  :placeholder="t('rla.request_limits.request_number')"
+                  type="number"
+                  @update:model-value="(value: string) => updateRequestLimitLimit(index, Number.parseInt(value))"
+                />
+                <div>{{ t('rla.request_limits.interval_determiner') }}</div>
+                <KInput
+                  :model-value="requestLimit.windowSize && requestLimit.windowSize.toString()"
+                  :placeholder="t('rla.request_limits.time_interval')"
+                  type="number"
+                  @update:model-value="(value: string) => updateRequestLimitWindowSize(index, Number.parseInt(value))"
+                />
+                <div>{{ t('rla.request_limits.seconds') }}</div>
+              </legend>
+
+              <div class="rla-form-request-limits-actions">
+                <KButton
+                  appearance="tertiary"
+                  :disabled="requestLimits.length <= 1"
+                  @click="() => removeRequestLimit(index)"
+                >
+                  <RemoveIcon />
+                </KButton>
+
+                <KButton
+                  appearance="tertiary"
+                  @click="() => addRequestLimit(index)"
+                >
+                  <AddIcon />
+                </KButton>
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <div class="rla-form-request-limits-examples">
-        <div>Examples:</div>
-        <ol>
-          <li
-            v-for="(example, i) in EXAMPLES"
-            :key="`rla-example-${i}`"
-          >
-            {{ example.description }}<br>Request number: <code>{{ example.config.limit }}</code>, Time interval: <code>{{ example.config.window_size }}</code>, Window type: <code>{{ example.config.window_type }}</code>
-          </li>
-        </ol>
+        <div
+          v-if="filteredUseCases.length > 0"
+          class="rla-form-request-limits-examples"
+        >
+          <div>{{ t('rla.try_a_use_case') }}:</div>
+          <div class="rla-form-request-limits-examples-badges">
+            <KTooltip
+              v-for="(useCase, i) in filteredUseCases"
+              :key="`use-case-${i}`"
+              max-width="300"
+            >
+              <KBadge
+                :appearance="selectedUseCase === `${windowType}-${i}` ? 'info' : 'decorative'"
+                class="rla-form-request-limits-examples-badge"
+                @click="() => toggleUseCase(useCase, `${windowType}-${i}`)"
+              >
+                {{ t('rla.use_case_index', { index: i + 1 }) }}
+              </KBadge>
+
+              <template #content>
+                <div>{{ useCase.description }}</div>
+                <br>
+                <div>{{ t('rla.request_limits.label') }}: {{ useCase.config.limit }}</div>
+                <div>{{ t('rla.request_limits.time_interval') }}: {{ useCase.config.window_size }}</div>
+              </template>
+            </KTooltip>
+          </div>
+        </div>
       </div>
     </KCard>
 
@@ -103,7 +148,6 @@
           placement: 'top',
         },
       }"
-      required
       @selected="(item: any) => props.onModelUpdated(item.value, 'config-identifier')"
     >
       <template #label-tooltip>
@@ -124,6 +168,7 @@
       >
         {{ t('rla.error_message.label') }}
       </KLabel>
+
       <legend
         id="rla-form-error-legend"
         class="rla-form-error-inputs"
@@ -163,10 +208,19 @@ import { createI18n } from '@kong-ui-public/i18n'
 import { AddIcon, RemoveIcon } from '@kong/icons'
 import type { SelectItem } from '@kong/kongponents'
 import cloneDeep from 'lodash-es/cloneDeep'
-import { computed, ref } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 import english from '../locales/en.json'
 
-const EXAMPLES = [
+interface UseCase {
+  description: string
+  config: {
+    limit: number
+    window_size:number
+    window_type: string
+  }
+}
+
+const USE_CASES = [
   {
     description: 'A fixed limit of 500 requests per hour resetting sharply on the hour, ensuring no user can exceed this limit.',
     config: {
@@ -266,6 +320,10 @@ const advancedSchema = computed(() => {
   }
 })
 
+const filteredUseCases = computed(() =>
+  USE_CASES.filter((example) => props.formModel['config-window_type'] === example.config.window_type),
+)
+
 const identifierField = computed(() => props.formSchema?.fields?.find((field: any) => field.model === 'config-identifier'))
 
 const identifierSelectItems = computed<SelectItem[]>(() =>
@@ -276,8 +334,24 @@ const identifierSelectItems = computed<SelectItem[]>(() =>
     })),
 )
 
+const selectedUseCase = ref<string | undefined>()
 const advancedCollapsed = ref(true)
 
+const windowType = computed<string>(() =>
+  props.formModel['config-window_type'] ?? props.formSchema?.fields
+    ?.find((field: any) => field.model === 'config-window_type')?.default,
+)
+
+const availableWindowTypes = computed<string[]>(() => {
+  const defaultValue = props.formSchema?.fields?.find((field: any) => field.model === 'config-window_type')?.default
+
+  return (props.formSchema?.fields
+    ?.find((field: any) => field.model === 'config-window_type')?.values ?? [])
+    .sort((a: string, b: string) => {
+      return a === defaultValue ? -1 : b === defaultValue ? 1 : 0
+    })
+})
+
 const requestLimits = computed<RequestLimit[]>(() => {
   const modelValue = props.formModel['config-limit']?.map((limit: number, index: number) => ({
     limit,
@@ -291,23 +365,65 @@ const requestLimits = computed<RequestLimit[]>(() => {
   return modelValue
 })
 
-const identifier = computed<string | undefined>(() => props.formModel?.['config-identifier'] ?? props.formSchema?.fields?.find((field: any) => field.model === 'config-identifier')?.default)
-const errorCode = computed<number | undefined>(() => props.formModel?.['config-error_code'] ?? props.formSchema?.fields?.find((field: any) => field.model === 'config-error_code')?.default)
-const errorMessage = computed<string | undefined>(() => props.formModel?.['config-error_message'] ?? props.formSchema?.fields?.find((field: any) => field.model === 'config-error_message')?.default)
+const identifier = computed<string | undefined>(() =>
+  props.formModel?.['config-identifier'] ?? props.formSchema?.fields
+    ?.find((field: any) => field.model === 'config-identifier')?.default,
+)
+const errorCode = computed<number | undefined>(() =>
+  props.formModel?.['config-error_code'] ?? props.formSchema?.fields
+    ?.find((field: any) => field.model === 'config-error_code')?.default,
+)
+const errorMessage = computed<string | undefined>(() =>
+  props.formModel?.['config-error_message'] ?? props.formSchema?.fields
+    ?.find((field: any) => field.model === 'config-error_message')?.default,
+)
+
+const toggleUseCase = (useCase: UseCase, useCaseKey: string) => {
+  if (useCaseKey === selectedUseCase.value) {
+    // If selected, clear the list
+    props.onModelUpdated([], 'config-limit')
+    props.onModelUpdated([], 'config-window_size')
+    nextTick(() => {
+      selectedUseCase.value = undefined
+    })
+    return
+  }
+  props.onModelUpdated([useCase.config.limit], 'config-limit')
+  props.onModelUpdated([useCase.config.window_size], 'config-window_size')
+  nextTick(() => {
+    selectedUseCase.value = useCaseKey
+  })
+}
+
+const updateWindowType = (newType: string) => {
+  if (selectedUseCase.value !== undefined) {
+    selectedUseCase.value = undefined
+  }
+  props.onModelUpdated(newType, 'config-window_type')
+}
 
 const updateRequestLimitLimit = (index: number, limit?: number) => {
+  if (selectedUseCase.value !== undefined) {
+    selectedUseCase.value = undefined
+  }
   const limits = cloneDeep(props.formModel?.['config-limit'] ?? [])
   limits[index] = limit
   props.onModelUpdated(limits, 'config-limit')
 }
 
 const updateRequestLimitWindowSize = (index: number, windowSize?: number) => {
+  if (selectedUseCase.value !== undefined) {
+    selectedUseCase.value = undefined
+  }
   const windowSizes = cloneDeep(props.formModel?.['config-window_size'] ?? [])
   windowSizes[index] = windowSize
   props.onModelUpdated(windowSizes, 'config-window_size')
 }
 
 const addRequestLimit = (index: number) => {
+  if (selectedUseCase.value !== undefined) {
+    selectedUseCase.value = undefined
+  }
   const limits = cloneDeep(props.formModel?.['config-limit'] ?? [])
   const windowSizes = cloneDeep(props.formModel?.['config-window_size'] ?? [])
   if (limits.length === 0) {
@@ -324,6 +440,9 @@ const addRequestLimit = (index: number) => {
 
 const removeRequestLimit = (index: number) => {
   if (requestLimits.value.length > 1) {
+    if (selectedUseCase.value !== undefined) {
+      selectedUseCase.value = undefined
+    }
     const limits = cloneDeep(props.formModel?.['config-limit'] ?? [])
     const windowSizes = cloneDeep(props.formModel?.['config-window_size'] ?? [])
     if (limits.length === 0) {
@@ -348,6 +467,25 @@ const removeRequestLimit = (index: number) => {
   margin-bottom: $kui-space-80;
 
   .rla-form-request-limits {
+    .rla-form-request-limits-content {
+      display: flex;
+      flex-direction: column;
+      gap: $kui-space-50;
+    }
+
+    .rla-form-window-type {
+      &-radios {
+        display: flex;
+        flex-direction: row;
+        gap: $kui-space-70;
+
+        :deep(.radio-label) {
+          font-size: $kui-font-size-30;
+          font-weight: $kui-font-weight-regular;
+        }
+      }
+    }
+
     &-title {
       font-size: $kui-font-size-40;
       font-weight: $kui-font-weight-bold;
@@ -388,17 +526,24 @@ const removeRequestLimit = (index: number) => {
     }
 
     &-examples {
-      color: $kui-color-text-neutral;
-      margin-bottom: $kui-space-50;
-      margin-top: $kui-space-50;
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+      gap: $kui-space-40;
+
+      &-badges {
+        display: flex;
+        flex-direction: row;
+        gap: $kui-space-40;
 
-      ol {
-        margin-bottom: 0;
-        margin-top: 0;
+        :deep(.rla-form-request-limits-examples-badge) {
+          cursor: pointer;
+        }
       }
     }
   }
 
+  .rla-form-window-type-label,
   .rla-form-identifiers {
     :deep(.k-tooltip p) {
       margin: 0;
diff --git a/packages/core/forms/src/locales/en.json b/packages/core/forms/src/locales/en.json
index 9822e94bd1..6147bf70d7 100644
--- a/packages/core/forms/src/locales/en.json
+++ b/packages/core/forms/src/locales/en.json
@@ -64,16 +64,27 @@
   },
   "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 {index}",
+      "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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e75bce66e7..627de98a2f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -576,6 +576,9 @@ importers:
         specifier: ^4.17.21
         version: 4.17.21
     devDependencies:
+      '@formatjs/intl':
+        specifier: ^2.10.2
+        version: 2.10.2(typescript@5.3.3)
       '@kong-ui-public/i18n':
         specifier: workspace:^
         version: link:../i18n
@@ -2196,13 +2199,11 @@ packages:
     dependencies:
       '@formatjs/intl-localematcher': 0.5.4
       tslib: 2.6.2
-    dev: false
 
   /@formatjs/fast-memoize@2.2.0:
     resolution: {integrity: sha512-hnk/nY8FyrL5YxwP9e4r9dqeM6cAbo8PeU9UjyXojZMNvVad2Z06FAVHyR3Ecw6fza+0GH7vdJgiKIVXTMbSBA==}
     dependencies:
       tslib: 2.6.2
-    dev: false
 
   /@formatjs/icu-messageformat-parser@2.7.6:
     resolution: {integrity: sha512-etVau26po9+eewJKYoiBKP6743I1br0/Ie00Pb/S/PtmYfmjTcOn2YCh2yNkSZI12h6Rg+BOgQYborXk46BvkA==}
@@ -2210,14 +2211,12 @@ packages:
       '@formatjs/ecma402-abstract': 1.18.2
       '@formatjs/icu-skeleton-parser': 1.8.0
       tslib: 2.6.2
-    dev: false
 
   /@formatjs/icu-skeleton-parser@1.8.0:
     resolution: {integrity: sha512-QWLAYvM0n8hv7Nq5BEs4LKIjevpVpbGLAJgOaYzg9wABEoX1j0JO1q2/jVkO6CVlq0dbsxZCngS5aXbysYueqA==}
     dependencies:
       '@formatjs/ecma402-abstract': 1.18.2
       tslib: 2.6.2
-    dev: false
 
   /@formatjs/intl-displaynames@6.6.6:
     resolution: {integrity: sha512-Dg5URSjx0uzF8VZXtHb6KYZ6LFEEhCbAbKoYChYHEOnMFTw/ZU3jIo/NrujzQD2EfKPgQzIq73LOUvW6Z/LpFA==}
@@ -2225,7 +2224,6 @@ packages:
       '@formatjs/ecma402-abstract': 1.18.2
       '@formatjs/intl-localematcher': 0.5.4
       tslib: 2.6.2
-    dev: false
 
   /@formatjs/intl-listformat@7.5.5:
     resolution: {integrity: sha512-XoI52qrU6aBGJC9KJddqnacuBbPlb/bXFN+lIFVFhQ1RnFHpzuFrlFdjD9am2O7ZSYsyqzYRpkVcXeT1GHkwDQ==}
@@ -2233,13 +2231,11 @@ packages:
       '@formatjs/ecma402-abstract': 1.18.2
       '@formatjs/intl-localematcher': 0.5.4
       tslib: 2.6.2
-    dev: false
 
   /@formatjs/intl-localematcher@0.5.4:
     resolution: {integrity: sha512-zTwEpWOzZ2CiKcB93BLngUX59hQkuZjT2+SAQEscSm52peDW/getsawMcWF1rGRpMCX6D7nSJA3CzJ8gn13N/g==}
     dependencies:
       tslib: 2.6.2
-    dev: false
 
   /@formatjs/intl@2.10.2(typescript@5.3.3):
     resolution: {integrity: sha512-raPGWr3JRv3neXV78SqPFrGC05fIbhhNzVghHNxFde27ls2KkXiMhtP7HBybjGpikVSjjhdhaZto+4p1vmm9bQ==}
@@ -2257,7 +2253,6 @@ packages:
       intl-messageformat: 10.5.12
       tslib: 2.6.2
       typescript: 5.3.3
-    dev: false
 
   /@humanwhocodes/config-array@0.11.14:
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
@@ -9711,7 +9706,6 @@ packages:
       '@formatjs/fast-memoize': 2.2.0
       '@formatjs/icu-messageformat-parser': 2.7.6
       tslib: 2.6.2
-    dev: false
 
   /invariant@2.2.4:
     resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}

From a7e33216cdddac120ece43f5db050e2f48eeca05 Mon Sep 17 00:00:00 2001
From: Makito <i@maki.to>
Date: Fri, 24 May 2024 02:42:41 +0800
Subject: [PATCH 7/7] chore(deps): revert unnecessary changes

---
 packages/core/forms/package.json |  1 -
 pnpm-lock.yaml                   | 12 +++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/core/forms/package.json b/packages/core/forms/package.json
index 2278ff6296..4fc668505b 100644
--- a/packages/core/forms/package.json
+++ b/packages/core/forms/package.json
@@ -60,7 +60,6 @@
     "vue": "^3.4.26"
   },
   "devDependencies": {
-    "@formatjs/intl": "^2.10.2",
     "@kong-ui-public/i18n": "workspace:^",
     "@kong/design-tokens": "1.12.12",
     "@kong/kongponents": "9.0.0-alpha.159",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 627de98a2f..e75bce66e7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -576,9 +576,6 @@ importers:
         specifier: ^4.17.21
         version: 4.17.21
     devDependencies:
-      '@formatjs/intl':
-        specifier: ^2.10.2
-        version: 2.10.2(typescript@5.3.3)
       '@kong-ui-public/i18n':
         specifier: workspace:^
         version: link:../i18n
@@ -2199,11 +2196,13 @@ packages:
     dependencies:
       '@formatjs/intl-localematcher': 0.5.4
       tslib: 2.6.2
+    dev: false
 
   /@formatjs/fast-memoize@2.2.0:
     resolution: {integrity: sha512-hnk/nY8FyrL5YxwP9e4r9dqeM6cAbo8PeU9UjyXojZMNvVad2Z06FAVHyR3Ecw6fza+0GH7vdJgiKIVXTMbSBA==}
     dependencies:
       tslib: 2.6.2
+    dev: false
 
   /@formatjs/icu-messageformat-parser@2.7.6:
     resolution: {integrity: sha512-etVau26po9+eewJKYoiBKP6743I1br0/Ie00Pb/S/PtmYfmjTcOn2YCh2yNkSZI12h6Rg+BOgQYborXk46BvkA==}
@@ -2211,12 +2210,14 @@ packages:
       '@formatjs/ecma402-abstract': 1.18.2
       '@formatjs/icu-skeleton-parser': 1.8.0
       tslib: 2.6.2
+    dev: false
 
   /@formatjs/icu-skeleton-parser@1.8.0:
     resolution: {integrity: sha512-QWLAYvM0n8hv7Nq5BEs4LKIjevpVpbGLAJgOaYzg9wABEoX1j0JO1q2/jVkO6CVlq0dbsxZCngS5aXbysYueqA==}
     dependencies:
       '@formatjs/ecma402-abstract': 1.18.2
       tslib: 2.6.2
+    dev: false
 
   /@formatjs/intl-displaynames@6.6.6:
     resolution: {integrity: sha512-Dg5URSjx0uzF8VZXtHb6KYZ6LFEEhCbAbKoYChYHEOnMFTw/ZU3jIo/NrujzQD2EfKPgQzIq73LOUvW6Z/LpFA==}
@@ -2224,6 +2225,7 @@ packages:
       '@formatjs/ecma402-abstract': 1.18.2
       '@formatjs/intl-localematcher': 0.5.4
       tslib: 2.6.2
+    dev: false
 
   /@formatjs/intl-listformat@7.5.5:
     resolution: {integrity: sha512-XoI52qrU6aBGJC9KJddqnacuBbPlb/bXFN+lIFVFhQ1RnFHpzuFrlFdjD9am2O7ZSYsyqzYRpkVcXeT1GHkwDQ==}
@@ -2231,11 +2233,13 @@ packages:
       '@formatjs/ecma402-abstract': 1.18.2
       '@formatjs/intl-localematcher': 0.5.4
       tslib: 2.6.2
+    dev: false
 
   /@formatjs/intl-localematcher@0.5.4:
     resolution: {integrity: sha512-zTwEpWOzZ2CiKcB93BLngUX59hQkuZjT2+SAQEscSm52peDW/getsawMcWF1rGRpMCX6D7nSJA3CzJ8gn13N/g==}
     dependencies:
       tslib: 2.6.2
+    dev: false
 
   /@formatjs/intl@2.10.2(typescript@5.3.3):
     resolution: {integrity: sha512-raPGWr3JRv3neXV78SqPFrGC05fIbhhNzVghHNxFde27ls2KkXiMhtP7HBybjGpikVSjjhdhaZto+4p1vmm9bQ==}
@@ -2253,6 +2257,7 @@ packages:
       intl-messageformat: 10.5.12
       tslib: 2.6.2
       typescript: 5.3.3
+    dev: false
 
   /@humanwhocodes/config-array@0.11.14:
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
@@ -9706,6 +9711,7 @@ packages:
       '@formatjs/fast-memoize': 2.2.0
       '@formatjs/icu-messageformat-parser': 2.7.6
       tslib: 2.6.2
+    dev: false
 
   /invariant@2.2.4:
     resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}