diff --git a/CHANGELOG.md b/CHANGELOG.md index bbd43ee..d1d41db 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,9 @@ ## Unreleased +### Changes +- Proxy hop field now actually lists all known configs to pick from, instead of "TO DO" (#290) + ### Development changes - Webpack setup has been improved quite a bit, mostly to clean up long ugly paths and make builds deterministic: - The custom `ProblemMatcherReporter` plugin is moved to `/webpack.plugin.js` and renamed to `WebpackPlugin` diff --git a/webview/src/ConfigEditor/proxyFields.tsx b/webview/src/ConfigEditor/proxyFields.tsx index 7927252..60f36b6 100644 --- a/webview/src/ConfigEditor/proxyFields.tsx +++ b/webview/src/ConfigEditor/proxyFields.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import { FieldDropdown } from '../FieldTypes/dropdown'; -import { FieldDropdownWithInput } from '../FieldTypes/dropdownwithinput'; import { FieldNumber } from '../FieldTypes/number'; import { FieldString } from '../FieldTypes/string'; +import { connect } from '../redux'; import { FileSystemConfig } from '../types/fileSystemConfig'; import type { FieldFactory, FSCChanged, FSCChangedMultiple } from './fields'; -export function proxy(config: FileSystemConfig, onChange: FSCChanged<'proxy'>): React.ReactElement { +function proxy(config: FileSystemConfig, onChange: FSCChanged<'proxy'>): React.ReactElement { const onChangeHost = (host: string) => onChange('proxy', { ...config.proxy!, host }); const onChangePort = (port: number) => onChange('proxy', { ...config.proxy!, port }); console.log('Current config:', config); @@ -19,12 +19,24 @@ export function proxy(config: FileSystemConfig, onChange: FSCChanged<'proxy'>): ; } -export function hop(config: FileSystemConfig, onChange: FSCChanged<'hop'>): React.ReactElement { - const callback = (newValue?: string) => onChange('hop', newValue); - const description = 'Use another configuration as proxy, using a SSH tunnel through the targeted config to the actual remote system'; - const values = ['TO', ' DO']; - return ; +interface HopFieldProps { + config: FileSystemConfig; + configs: [name: string, label: string][]; + onChange: FSCChanged<'hop'>; } +const HopField = connect(({ config, configs, onChange }: HopFieldProps) => { + const callback = (newValue?: [string, string]) => onChange('hop', newValue?.[0]); + const description = 'Use another configuration as proxy, using a SSH tunnel through the targeted config to the actual remote system'; + const displayName = (item: [string, string]) => item[1]; + const value = config.hop ? [config.hop, configs.find(c => c[0] === config.hop)?.[1] || config.hop] as const : undefined; + return ; +})>(state => { + const pairs = new Map(); + for (const { name, label } of state.data.configs) { + pairs.set(name, label || name); + } + return { configs: Array.from(pairs) }; +}); const ProxyTypeToString = { http: 'HTTP', @@ -39,7 +51,7 @@ const ProxyStringToType = { } as const; type ProxyStrings = keyof typeof ProxyStringToType; -export function merged(config: FileSystemConfig, onChange: FSCChanged, onChangeMultiple: FSCChangedMultiple): React.ReactElement | null { +function merged(config: FileSystemConfig, onChange: FSCChanged, onChangeMultiple: FSCChangedMultiple): React.ReactElement | null { function callback(newValue?: ProxyStrings) { // Fields starting with _ don't get saved to file // We use it here so we know when to display the hop stuff @@ -74,8 +86,8 @@ export function merged(config: FileSystemConfig, onChange: FSCChanged, onChangeM const type = config.proxy && config.proxy.type; const value = showHop ? 'SSH Hop' : (type && ProxyTypeToString[type]); return - key="proxy" label="Proxy" {...{ value, values, description }} onChange={callback} optional={true} /> - {showHop && hop(config, onChange)} + + {showHop && } {config.proxy && proxy(config, onChange)} ; }