feat(server-routes): add optional checkbox for inputs (#474)

Author: arashsheyda

packages/devtools-kit/src/_types/integrations.ts

@@ -55,6 +55,7 @@ export interface ServerRouteInfo {
 
 export type ServerRouteInputType = 'string' | 'number' | 'boolean' | 'file' | 'date' | 'time' | 'datetime-local'
 export interface ServerRouteInput {
+  active: boolean
   key: string
   value: any
   type?: ServerRouteInputType

packages/devtools/client/components/ServerRouteDetails.vue

@@ -64,9 +64,9 @@ const paramNames = computed(() => parsedRoute.value?.filter(i => i.startsWith(':
 const routeMethod = ref(props.route.method || 'GET')
 const routeParams = ref<{ [key: string]: string }>({})
 const routeInputs = reactive({
-  query: [{ key: '', value: '', type: 'string' }] as ServerRouteInput[],
-  body: [{ key: '', value: '', type: 'string' }] as ServerRouteInput[],
-  headers: [{ key: 'Content-Type', value: 'application/json', type: 'string' }] as ServerRouteInput[],
+  query: [{ active: true, key: '', value: '', type: 'string' }] as ServerRouteInput[],
+  body: [{ active: true, key: '', value: '', type: 'string' }] as ServerRouteInput[],
+  headers: [{ active: true, key: 'Content-Type', value: 'application/json', type: 'string' }] as ServerRouteInput[],
 })
 const routeInputBodyJSON = ref({})
 const {
@@ -151,9 +151,9 @@ const finalPath = computed(() => {
 })
 const finalURL = computed(() => domain.value + finalPath.value)
 
-function parseInputs(inputs: any[]) {
+function parseInputs(inputs: ServerRouteInput[]) {
   const formatted = Object.fromEntries(
-    inputs.filter(({ key, value }) => key && value !== undefined).map(({ key, value }) => [key, value]),
+    inputs.filter(({ active, key, value }) => active && key && value !== undefined).map(({ key, value }) => [key, value]),
   )
   return Object.entries(formatted).length ? formatted : undefined
 }
@@ -236,6 +236,9 @@ ${items.join(',\n').split('\n').map(line => `  ${line}`).join('\n')}
   return snippets
 })
 
+const cookies = ref(getCookies())
+const newCookie = reactive({ key: '', value: '' })
+
 const tabs = computed(() => {
   const items = []
   if (paramNames.value.length) {
@@ -265,6 +268,7 @@ const tabs = computed(() => {
   items.push({
     name: 'Cookies',
     slug: 'cookies',
+    length: cookies.value.length,
   })
   items.push({
     name: 'Snippets',
@@ -273,17 +277,13 @@ const tabs = computed(() => {
   return items
 })
 
-const cookies = ref(getCookies())
-
 function getCookies() {
   return document.cookie.split('; ').map((i) => {
     const [key, value] = i.split('=')
     return { key, value }
-  })
+  }).filter(i => i.key)
 }
 
-const newCookie = reactive({ key: '', value: '' })
-
 function updateCookie(key: string, value: any) {
   if (!key)
     return
@@ -359,7 +359,7 @@ const copy = useCopy()
             />
           </div>
         </div>
-        <NButton n="primary solid" @click="fetchData">
+        <NButton h-full n="primary solid" @click="fetchData">
           <NIcon icon="carbon:send" />
         </NButton>
       </div>
@@ -429,7 +429,7 @@ const copy = useCopy()
           @input="updateCookie(cookie.key, $event.target?.value)"
         />
         <NButton title="Delete" n="red" @click="updateCookie(cookie.key, undefined)">
-          <NIcon icon="i-carbon-delete" />
+          <NIcon icon="i-carbon-trash-can" />
         </NButton>
       </div>
       <div flex="~ gap-4">
@@ -449,7 +449,7 @@ const copy = useCopy()
       </div>
     </div>
     <DefineDefaultInputs>
-      <ServerRouteInputs v-model="currentParams" :default="{ type: 'string' }" max-h-xs of-auto>
+      <ServerRouteInputs v-model="currentParams" :default="{ active: true, type: 'string' }" max-h-xs of-auto>
         <template v-if="inputDefaults[activeTab]?.length">
           <div flex="~ gap2" mb--2 items-center op50>
             <div w-5 x-divider />

packages/devtools/client/components/ServerRouteInputs.vue

@@ -14,7 +14,7 @@ const emit = defineEmits<{ (...args: any): void }>()
 const params = useVModel(props, 'modelValue', emit, { passive: true })
 
 const filteredKeys = computed(() => {
-  return [...props.keys, 'key', 'value', 'type']
+  return [...props.keys, 'active', 'key', 'value', 'type']
 })
 
 const keysObject = computed(() => {
@@ -72,6 +72,12 @@ watch(() => params, (items) => {
       <slot name="input" :item="item" />
 
       <template v-for="key of filteredKeys" :key="key">
+        <NCheckbox
+          v-if="item.type !== null && key === 'active'"
+          v-model="item[key]"
+          n="sm primary"
+          :disabled="disabled"
+        />
         <NTextInput
           v-if="item.type !== null && key === 'key'"
           v-model="item[key]"
@@ -112,7 +118,7 @@ watch(() => params, (items) => {
 
       <slot name="input-actions">
         <NButton n="red" :disabled="disabled" :class="disabled ? 'op0!' : ''" @click="params.splice(index, 1)">
-          <NIcon icon="carbon:delete" />
+          <NIcon icon="carbon:trash-can" />
         </NButton>
       </slot>
     </div>

packages/devtools/client/pages/modules/server-routes.vue

@@ -194,7 +194,7 @@ function capitalize(str: string) {
         :padding="false"
         :icon="ServerRouteTabIcons[tab]"
       >
-        <ServerRouteInputs v-model="inputDefaults[tab]" py0 :default="{ type: 'string' }" />
+        <ServerRouteInputs v-model="inputDefaults[tab]" py0 :default="{ active: true, type: 'string' }" />
       </NSectionBlock>
     </div>
   </NDrawer>