Merge pull request #4170 from nocodb/feat/custom-header-in-webhook

feat(nc-gui): allow webhook header accept custom input

packages/nc-gui/components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AAlert: typeof import('ant-design-vue/es')['Alert']
+    AAutoComplete: typeof import('ant-design-vue/es')['AutoComplete']
     ABadgeRibbon: typeof import('ant-design-vue/es')['BadgeRibbon']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']

packages/nc-gui/components/api-client/Headers.vue

@@ -7,53 +7,61 @@ const props = defineProps<{
 
 const emits = defineEmits(['update:modelValue'])
 
+interface Option {
+  value: string
+}
+
 const vModel = useVModel(props, 'modelValue', emits)
 
-const headerList = [
+const headerList = ref<Option[]>([
-  'A-IM',
+  { value: 'A-IM' },
-  'Accept',
+  { value: 'Accept' },
-  'Accept-Charset',
+  { value: 'Accept-Charset' },
-  'Accept-Encoding',
+  { value: 'Accept-Encoding' },
-  'Accept-Language',
+  { value: 'Accept-Language' },
-  'Accept-Datetime',
+  { value: 'Accept-Datetime' },
-  'Access-Control-Request-Method',
+  { value: 'Access-Control-Request-Method' },
-  'Access-Control-Request-Headers',
+  { value: 'Access-Control-Request-Headers' },
-  'Authorization',
+  { value: 'Authorization' },
-  'Cache-Control',
+  { value: 'Cache-Control' },
-  'Connection',
+  { value: 'Connection' },
-  'Content-Length',
+  { value: 'Content-Length' },
-  'Content-Type',
+  { value: 'Content-Type' },
-  'Cookie',
+  { value: 'Cookie' },
-  'Date',
+  { value: 'Date' },
-  'Expect',
+  { value: 'Expect' },
-  'Forwarded',
+  { value: 'Forwarded' },
-  'From',
+  { value: 'From' },
-  'Host',
+  { value: 'Host' },
-  'If-Match',
+  { value: 'If-Match' },
-  'If-Modified-Since',
+  { value: 'If-Modified-Since' },
-  'If-None-Match',
+  { value: 'If-None-Match' },
-  'If-Range',
+  { value: 'If-Range' },
-  'If-Unmodified-Since',
+  { value: 'If-Unmodified-Since' },
-  'Max-Forwards',
+  { value: 'Max-Forwards' },
-  'Origin',
+  { value: 'Origin' },
-  'Pragma',
+  { value: 'Pragma' },
-  'Proxy-Authorization',
+  { value: 'Proxy-Authorization' },
-  'Range',
+  { value: 'Range' },
-  'Referer',
+  { value: 'Referer' },
-  'TE',
+  { value: 'TE' },
-  'User-Agent',
+  { value: 'User-Agent' },
-  'Upgrade',
+  { value: 'Upgrade' },
-  'Via',
+  { value: 'Via' },
-  'Warning',
+  { value: 'Warning' },
-  'Non-standard headers',
+  { value: 'Non-standard headers' },
-  'Dnt',
+  { value: 'Dnt' },
-  'X-Requested-With',
+  { value: 'X-Requested-With' },
-  'X-CSRF-Token',
+  { value: 'X-CSRF-Token' },
-]
+])
 
 const addHeaderRow = () => vModel.value.push({})
 
 const deleteHeaderRow = (i: number) => vModel.value.splice(i, 1)
+
+const filterOption = (input: string, option: Option) => {
+  return option.value.toUpperCase().includes(input.toUpperCase())
+}
 </script>
 
 <template>
@@ -89,18 +97,14 @@ const deleteHeaderRow = (i: number) => vModel.value.splice(i, 1)
 
           <td class="px-2 w-min-[400px]">
             <a-form-item>
-              <a-select
+              <a-auto-complete
                 v-model:value="headerRow.name"
                 size="large"
                 placeholder="Key"
                 class="nc-input-hook-header-key"
-                dropdown-class-name="nc-dropdown-webhook-header"
+                :options="headerList"
-                show-search
+                :filter-option="filterOption"
-              >
+              />
-                <a-select-option v-for="header in headerList" :key="header" :value="header">
-                  {{ header }}
-                </a-select-option>
-              </a-select>
             </a-form-item>
           </td>