Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: let users type custom ports manually #353

Merged
merged 2 commits into from
Jan 15, 2025
+82 −22
Merged

feat: let users type custom ports manually #353

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e2d7d30
feat: let users type custom ports manually
hcavarsan Jan 15, 2025
809f0bd
fix: publish release only if is a tag
hcavarsan Jan 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file added diff
View file
Open in desktop
Empty file.
98 changes: 77 additions & 21 deletions frontend/src/components/AddConfigModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
Expand Down Expand Up @@ -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 }))
}
hcavarsan marked this conversation as resolved.
Show resolved Hide resolved

return
}

const option = newValue as StringOption | null

switch (actionMeta.name) {
Expand Down Expand Up @@ -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],
)

Expand Down Expand Up @@ -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)
}
hcavarsan marked this conversation as resolved.
Show resolved Hide resolved
}}
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}
/>
)}
hcavarsan marked this conversation as resolved.
Show resolved Hide resolved
{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
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading