feat(*): vault secret picker [KM-307]

packages/core/forms/src/components/FormGenerator.vue

@@ -148,18 +148,37 @@
  * @typedef {Record<string, any> & PartialGroup} Group
  */
 
-import { ref } from 'vue'
 import forEach from 'lodash-es/forEach'
 import objGet from 'lodash-es/get'
 import isFunction from 'lodash-es/isFunction'
 import isNil from 'lodash-es/isNil'
-import formMixin from './FormMixin.vue'
+import { ref } from 'vue'
+import { AUTOFILL_SLOT, AUTOFILL_SLOT_NAME } from '../const'
 import formGroup from './FormGroup.vue'
+import formMixin from './FormMixin.vue'
 
 export default {
   name: 'FormGenerator',
   components: { formGroup },
   mixins: [formMixin],
+
+  inject: {
+    // Inject AUTOFILL_SLOT for provide()
+    autofillSlot: {
+      from: AUTOFILL_SLOT,
+      default: undefined,
+    },
+  },
+
+  provide() {
+    return {
+      // Provide AUTOFILL_SLOT only if it is not already provided
+      ...!this.autofillSlot && {
+        [AUTOFILL_SLOT]: this.$slots?.[AUTOFILL_SLOT_NAME],
+      },
+    }
+  },
+
   props: {
     schema: {
       type: Object,

packages/core/forms/src/components/fields/FieldArray.vue

@@ -24,6 +24,7 @@
           @model-updated="modelUpdated"
         />
       </component>
+
       <span v-else-if="schema.items">
         <component
           :is="getFieldType(schema.items)"
@@ -33,6 +34,7 @@
           @model-updated="modelUpdated"
         />
       </span>
+
       <component
         :is="schema.itemContainerComponent"
         v-else-if="schema.itemContainerComponent"
@@ -73,28 +75,33 @@
           :type="schema.inputAttributes?.type || 'text'"
         >
 
+        <template #after>
+          <!-- autofill -->
+          <component
+            :is="autofillSlot"
+            :schema="schema"
+            :update="(val) => value[index] = val"
+            :value="value[index]"
+          />
+        </template>
+      </component>
+
+      <template v-else>
         <input
-          v-if="schema.showRemoveButton"
-          v-bind="schema.removeElementButtonAttributes"
-          type="button"
-          :value="schema.removeElementButtonLabel || removeElementButtonLabel"
-          @click="removeElement(index)"
+          v-bind="schema.inputAttributes"
+          v-model="value[index]"
+          :aria-labelledby="getLabelId(schema)"
+          type="text"
         >
-      </component>
-      <input
-        v-else
-        v-bind="schema.inputAttributes"
-        v-model="value[index]"
-        :aria-labelledby="getLabelId(schema)"
-        type="text"
-      >
-      <input
-        v-if="schema.showRemoveButton"
-        v-bind="schema.removeElementButtonAttributes"
-        type="button"
-        :value="schema.removeElementButtonLabel || removeElementButtonLabel"
-        @click="removeElement(index)"
-      >
+
+        <!-- autofill -->
+        <component
+          :is="autofillSlot"
+          :schema="schema"
+          :update="(val) => value[index] = val"
+          :value="value[index]"
+        />
+      </template>
     </div>
 
     <KButton
@@ -110,17 +117,18 @@
 </template>
 
 <script>
-import abstractField from './abstractField'
-import FieldInput from './FieldInput.vue'
-import FieldSelect from './FieldSelect.vue'
+import { AUTOFILL_SLOT } from '../../const'
 import FieldArrayCardContainer from './FieldArrayCardContainer.vue'
 import FieldArrayItem from './FieldArrayItem.vue'
 import FieldArrayMultiItem from './FieldArrayMultiItem.vue'
 import FieldAutoSuggest from './FieldAutoSuggest.vue'
+import FieldInput from './FieldInput.vue'
 import FieldMetric from './FieldMetric.vue'
 import FieldObject from './FieldObject.vue'
 import FieldObjectAdvanced from './FieldObjectAdvanced.vue'
 import FieldRadio from './FieldRadio.vue'
+import FieldSelect from './FieldSelect.vue'
+import abstractField from './abstractField'
 
 export default {
   name: 'FieldArray',
@@ -137,6 +145,12 @@ export default {
     FieldInput,
   },
   mixins: [abstractField],
+  inject: {
+    autofillSlot: {
+      from: AUTOFILL_SLOT,
+      default: undefined,
+    },
+  },
   props: {
     newElementButtonLabel: {
       type: String,

packages/core/forms/src/components/fields/FieldArrayItem.vue

@@ -1,13 +1,18 @@
 <template>
-  <div class="array-item">
-    <slot />
-    <KButton
-      appearance="tertiary"
-      class="delete"
-      @click="$emit('remove-item')"
-    >
-      <TrashIcon />
-    </KButton>
+  <div class="array-item-wrapper">
+    <div class="array-item">
+      <slot />
+      <KButton
+        appearance="tertiary"
+        class="delete"
+        @click="$emit('remove-item')"
+      >
+        <TrashIcon />
+      </KButton>
+    </div>
+    <div class="array-item-after">
+      <slot name="after" />
+    </div>
   </div>
 </template>
 

packages/core/forms/src/components/fields/FieldInput.vue

@@ -22,18 +22,28 @@
       @blur="onBlur"
       @update:model-value="onInput"
     />
+
+    <!-- autofill -->
+    <component
+      :is="autofillSlot"
+      :schema="schema"
+      :update="handleAutofill"
+      :value="inputValue"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, onBeforeMount, onMounted, toRefs, type PropType } from 'vue'
-import type { DebouncedFunc } from 'lodash-es'
 import fecha from 'fecha'
+import type { DebouncedFunc } from 'lodash-es'
 import debounce from 'lodash-es/debounce'
 import objGet from 'lodash-es/get'
 import isFunction from 'lodash-es/isFunction'
 import isNumber from 'lodash-es/isNumber'
+import { computed, inject, onBeforeMount, onMounted, ref, toRefs, type PropType } from 'vue'
 import composables from '../../composables'
+import { AUTOFILL_SLOT } from '../../const'
+import type { AutofillSlot } from '../../types'
 
 const props = defineProps({
   disabled: {
@@ -76,6 +86,8 @@ const emit = defineEmits<{
 
 const propsRefs = toRefs(props)
 
+const autofillSlot = inject<AutofillSlot | undefined>(AUTOFILL_SLOT, undefined)
+
 const { updateModelValue, getFieldID, clearValidationErrors, value: inputValue } = composables.useAbstractFields({
   model: propsRefs.model,
   schema: props.schema,
@@ -145,6 +157,11 @@ const onInput = (val: string): void => {
   updateModelValue(formattedVal, val)
 }
 
+const handleAutofill = (value: string) => {
+  inputValue.value = value
+  updateModelValue(value, value)
+}
+
 const debouncedFormatFunc = ref<DebouncedFunc<(newValue: string, oldValue: string) => void> | null>(null)
 
 // Clean up debounced calls

packages/core/forms/src/components/fields/FieldKeyValuePairs.vue

@@ -5,22 +5,44 @@
       :key="index"
       class="pair-item"
     >
-      <input
-        class="form-control"
-        :data-testid="`${getFieldID(schema)}-pair-key-${index}`"
-        :placeholder="schema.keyInputPlaceholder ?? 'Key'"
-        type="text"
-        :value="pair.key"
-        @input="(e) => { onInput(e, index, 'key') }"
-      >
-      <input
-        class="form-control"
-        :data-testid="`${getFieldID(schema)}-pair-value-${index}`"
-        :placeholder="schema.valueInputPlaceholder ?? 'Value'"
-        type="text"
-        :value="pair.value"
-        @input="(e) => { onInput(e, index, 'value') }"
-      >
+      <div class="pair-item-cell">
+        <input
+          class="form-control"
+          :data-testid="`${getFieldID(schema)}-pair-key-${index}`"
+          :placeholder="schema.keyInputPlaceholder ?? 'Key'"
+          type="text"
+          :value="pair.key"
+          @input="(e) => { onInput(e, index, 'key') }"
+        >
+
+        <!-- autofill -->
+        <component
+          :is="autofillSlot"
+          :schema="schema"
+          :update="(value) => onInput({ target: { value }}, index, 'key')"
+          :value="pair.key"
+        />
+      </div>
+
+      <div class="pair-item-cell">
+        <input
+          class="form-control"
+          :data-testid="`${getFieldID(schema)}-pair-value-${index}`"
+          :placeholder="schema.valueInputPlaceholder ?? 'Value'"
+          type="text"
+          :value="pair.value"
+          @input="(e) => { onInput(e, index, 'value') }"
+        >
+
+        <!-- autofill -->
+        <component
+          :is="autofillSlot"
+          :schema="schema"
+          :update="(value) => onInput({ target: { value }}, index, 'value')"
+          :value="pair.value"
+        />
+      </div>
+
       <KButton
         appearance="tertiary"
         :data-testid="`${getFieldID(schema)}-remove-pair-${index}`"
@@ -42,8 +64,9 @@
 </template>
 
 <script>
-import abstractField from './abstractField'
 import { TrashIcon } from '@kong/icons'
+import { AUTOFILL_SLOT } from '../../const'
+import abstractField from './abstractField'
 
 export default {
   name: 'FieldKeyValuePairs',
@@ -52,6 +75,13 @@ export default {
 
   mixins: [abstractField],
 
+  inject: {
+    autofillSlot: {
+      from: AUTOFILL_SLOT,
+      default: undefined,
+    },
+  },
+
   data() {
     return {
       pairs: [],
@@ -114,13 +144,15 @@ export default {
 
   .pair-item {
     display: flex;
+    gap: $kui-space-50;
+    justify-content: space-between;
 
     &:not(:first-child) {
-      margin-top: 12px;
+      margin-top: $kui-space-50;
     }
 
-    input {
-      margin-right: 12px;
+    .pair-item-cell {
+      flex-grow: 1;
     }
   }
 }

packages/core/forms/src/components/fields/FieldObjectAdvanced.vue

@@ -48,6 +48,14 @@
             >
               {{ schema.fields[0].schema.hint }}
             </p>
+
+            <!-- autofill -->
+            <component
+              :is="autofillSlot"
+              :schema="(schema.fields && schema.fields[0].schema) || schema.values"
+              :update="(val) => value[index] = val"
+              :value="value[index]"
+            />
           </div>
           <hr class="wide-divider">
         </div>
@@ -86,12 +94,19 @@
 
 <script>
 import { TrashIcon } from '@kong/icons'
+import { AUTOFILL_SLOT } from '../../const'
 import abstractField from './abstractField'
 export default {
   components: {
     TrashIcon,
   },
   mixins: [abstractField],
+  inject: {
+    autofillSlot: {
+      from: AUTOFILL_SLOT,
+      default: undefined,
+    },
+  },
   emits: ['model-updated'],
   data() {
     return {