feat: let users type custom ports manually (#353)

* feat: let users type custom ports manually * fix: publish release only if is a tag
hcavarsan · Jan 15, 2025 · 40462ce · 40462ce
1 parent 1879ea6
commit 40462ce
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 22 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -395,6 +395,10 @@ jobs:
     permissions:
       contents: write
     runs-on: ubuntu-24.04
+    if: |
+      startsWith(github.ref, 'refs/tags/v') &&
+      !contains(github.ref, '-beta') &&
+      !contains(github.ref, '-alpha')
     steps:
       - name: Checkout
         uses: actions/checkout@v4

diff --git a/diff b/diff
diff --git a/frontend/src/components/AddConfigModal/index.tsx b/frontend/src/components/AddConfigModal/index.tsx
@@ -47,6 +47,11 @@ const AddConfigModal: React.FC<CustomConfigProps> = ({
     { value: 'proxy', label: 'Proxy' },
   ]
 
+  const CUSTOM_PORT = {
+    value: -1,
+    label: 'Custom Port...',
+  } as const
+
   const protocolOptions: StringOption[] = [
     { value: 'tcp', label: 'TCP' },
     { value: 'udp', label: 'UDP' },
@@ -334,15 +339,22 @@ const AddConfigModal: React.FC<CustomConfigProps> = ({
     if (actionMeta.name === 'remote_port') {
       const portOption = newValue as PortOption | null
 
-      setFormState(prev => ({
-        ...prev,
-        selectedPort: portOption,
-      }))
-      setNewConfig(prev => ({ ...prev, remote_port: portOption?.value }))
+      if (portOption?.value === -1) {
+        setFormState(prev => ({
+          ...prev,
+          selectedPort: portOption,
+        }))
+        setNewConfig(prev => ({ ...prev, remote_port: undefined }))
+      } else {
+        setFormState(prev => ({
+          ...prev,
+          selectedPort: portOption,
+        }))
+        setNewConfig(prev => ({ ...prev, remote_port: portOption?.value }))
+      }
 
       return
     }
-
     const option = newValue as StringOption | null
 
     switch (actionMeta.name) {
@@ -413,11 +425,12 @@ const AddConfigModal: React.FC<CustomConfigProps> = ({
   }
 
   const portOptions: PortOption[] = useMemo(
-    () =>
-      portQuery.data?.map(port => ({
+    () => [
+      ...(portQuery.data?.map(port => ({
         value: port.port,
         label: port.name ? `${port.name} (${port.port})` : port.port.toString(),
-      })) || [],
+      })) || []),
+    ],
     [portQuery.data],
   )
 
@@ -738,24 +751,67 @@ const AddConfigModal: React.FC<CustomConfigProps> = ({
                         <Text fontSize='xs' color='gray.400'>
                           Target Port *
                         </Text>
-                        <Select
-                          name='remote_port'
-                          value={formState.selectedPort}
-                          onChange={handleSelectChange}
-                          options={portOptions}
-                          placeholder='Select port'
-                          isDisabled={
-                            !newConfig.context || !newConfig.namespace
-                          }
-                          styles={selectStyles}
-                        />
+                        {formState.selectedPort?.value === CUSTOM_PORT.value ||
+                        (newConfig.remote_port &&
+                          !portOptions.find(
+                            p => p.value === newConfig.remote_port,
+                          )) ? (
+                            <Input
+                              type='number'
+                              name='remote_port'
+                              value={newConfig.remote_port || ''}
+                              onChange={e => {
+                                const value = parseInt(e.target.value, 10)
+
+                                if (!isNaN(value)) {
+                                  setFormState(prev => ({
+                                    ...prev,
+                                    selectedPort: CUSTOM_PORT,
+                                  }))
+                                  const syntheticEvent = {
+                                    ...e,
+                                    target: {
+                                      ...e.target,
+                                      name: 'remote_port',
+                                      value: value.toString(),
+                                    },
+                                  }
+
+                                  handleInputChange(syntheticEvent)
+                                }
+                              }}
+                              bg='#161616'
+                              border='1px solid rgba(255, 255, 255, 0.08)'
+                              _hover={{
+                                borderColor: 'rgba(255, 255, 255, 0.15)',
+                              }}
+                              _focus={{
+                                borderColor: 'blue.400',
+                                boxShadow: 'none',
+                              }}
+                              height='28px'
+                              fontSize='13px'
+                              placeholder='Enter port number'
+                            />
+                          ) : (
+                            <Select
+                              name='remote_port'
+                              value={formState.selectedPort}
+                              onChange={handleSelectChange}
+                              options={[CUSTOM_PORT, ...portOptions]}
+                              placeholder='Select port'
+                              isDisabled={
+                                !newConfig.context || !newConfig.namespace
+                              }
+                              styles={selectStyles}
+                            />
+                          )}
                         {portQuery.isError && (
                           <Text color='red.300' fontSize='xs'>
                             Error fetching ports
                           </Text>
                         )}
                       </Stack>
-
                       <Stack gap={1.5}>
                         <Text fontSize='xs' color='gray.400'>
                           Local Port

diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
 		"check": "pnpm --filter @kftray/ui run check",
 		"dev": "pnpm --filter @kftray/ui run dev",
 		"format": "pnpm run format:front && pnpm run format:back",
-		"format:back": "cargo fmt",
+		"format:back": "cargo +nightly fmt",
 		"format:front": "pnpm --filter @kftray/ui run format",
 		"generate-icons": "cargo run --bin generate_icons",
 		"lint": "pnpm --filter @kftray/ui run lint && pnpm run lint:back",