Skip to content

Commit

Permalink
master: allow type paths for remote development. closes #421
Browse files Browse the repository at this point in the history
  • Loading branch information
@mtxr
mtxr committed Oct 25, 2019
1 parent 076e755 commit 41537e2
Show file tree
Hide file tree
Showing 7 changed files with 47 additions and 29 deletions.
1 change: 0 additions & 1 deletion docs/src/gatsby-theme-docz/index.js
View file
Expand Up @@ -15,7 +15,6 @@ const bsaeComponents = {

const Theme = ({ children }) => {
const config = useConfig();
console.log(config)
return (
<ThemeProvider theme={config.themeConfig}>
<ComponentsProvider components={bsaeComponents}>
Expand Down
12 changes: 7 additions & 5 deletions packages/plugins/connection-manager/screens/settings.ts
View file
Expand Up @@ -7,7 +7,9 @@ import { DatabaseDialect } from '@sqltools/core/interface';

const relativeToWorkspace = (file: string) => {
const fileUri = workspace.asRelativePath(Uri.file(file), true);
return file === fileUri ? file : `.${path.sep}${fileUri}`;
if (file === fileUri) return file;
if (fileUri.startsWith('/') || fileUri.startsWith('.//')) return file;
return `.${path.sep}${fileUri}`;
}

export default class SettingsWebview extends WebviewProvider {
Expand All @@ -34,8 +36,8 @@ export default class SettingsWebview extends WebviewProvider {
});
}

private updateConnection = async ({ connInfo, globalSetting, editId }) => {
if (connInfo.dialect === DatabaseDialect.SQLite) {
private updateConnection = async ({ connInfo, globalSetting, transformToRelative, editId }) => {
if (connInfo.dialect === DatabaseDialect.SQLite && transformToRelative) {
connInfo.database = relativeToWorkspace(connInfo.database);
}
return commands.executeCommand(`${EXT_NAME}.updateConnection`, editId, connInfo, globalSetting ? 'Global' : undefined)
Expand All @@ -49,8 +51,8 @@ export default class SettingsWebview extends WebviewProvider {
});
}

private createConnection = async ({ connInfo, globalSetting }) => {
if (connInfo.dialect === DatabaseDialect.SQLite) {
private createConnection = async ({ connInfo, globalSetting, transformToRelative }) => {
if (connInfo.dialect === DatabaseDialect.SQLite && transformToRelative) {
connInfo.database = relativeToWorkspace(connInfo.database);
}
return commands.executeCommand(`${EXT_NAME}.addConnection`, connInfo, globalSetting ? 'Global' : undefined)
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/screens/Settings/Drivers/SQLite.tsx
View file
Expand Up @@ -2,10 +2,10 @@ import React from 'react';
import Text from '../Fields/Text';
import FileInput from '../Fields/FileInput';

const SQLite = ({ settings, updateSettings }) => (
const SQLite = ({ settings, updateSettings, toggleUseRelative }) => (
<>
<Text label='Connection Name*' onChange={name => updateSettings({ name })} value={settings.name} />
<FileInput label='Database File*' onChange={database => updateSettings({ database })} value={settings.database} />
<FileInput label='Database File*' onChange={({ file: database, transformToRelative }) => (updateSettings({ database }), toggleUseRelative(transformToRelative))} value={settings.database} />
</>
);
// @TODO: add driver specific settings here
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/screens/Settings/Drivers/lib/GenericSettings.tsx
View file
Expand Up @@ -91,7 +91,7 @@ const GenericSettings = ({ settings, updateSettings, dbFieldName = 'Database', d
method === ConnectionMethod.SocketFile &&
<FileInput
label="Socket File*"
onChange={socketPath => updateSettings({ socketPath })}
onChange={({ file: socketPath }) => updateSettings({ socketPath })}
value={settings.socketPath}
hasError={hasError.socketPath}
/>
Expand Down
47 changes: 29 additions & 18 deletions packages/ui/screens/Settings/Fields/FileInput.tsx
View file
Expand Up @@ -3,6 +3,7 @@ import React from 'react';
interface State {
value: string;
name: string;
useRaw: boolean;
}

interface Props {
Expand All @@ -25,11 +26,11 @@ class FileInput extends React.Component<Props, State> {
name = name.substring(1);
}
}
this.state = { value, name };
this.state = { value, name, useRaw: false };
}

onChange = () => {
return this.props.onChange(this.state.value);
return this.props.onChange({ file: this.state.value, transformToRelative: !this.state.useRaw });
};

onChangeFile = () => {
Expand All @@ -39,36 +40,46 @@ class FileInput extends React.Component<Props, State> {
this.setState({
value,
name,
useRaw: false
}, this.onChange);
}

onTypePath = (value) => this.setState({ value, name: value, useRaw: true }, this.onChange);

fileField = React.createRef<HTMLInputElement>();

render() {
return (
<div className={`field ${this.props.hasError ? 'has-error' : ''}`}>
<label>{this.props.label}</label>
<div style={{ position: 'relative', display: 'flex' }} title={this.state.value}>
<div style={{ display: 'flex' }} title={this.state.value}>
<input
style={{ flex: 1 }}
type="text"
placeholder="Click to select a file"
placeholder="File or remote path"
value={this.state.name || ''}
disabled
/>
<input
style={{
opacity: 0,
position: 'absolute',
flex: 1,
cursor: 'pointer',
width: '100%',
padding: '4px 0',
}}
type="file"
ref={this.fileField}
onChange={this.onChangeFile}
onChange={e => this.onTypePath(e.target.value || '')}
disabled={this.props.disabled || false}
/>
<button type="button" style={{ position: 'relative' }}>
<input
style={{
opacity: 0,
position: 'absolute',
flex: 1,
cursor: 'pointer',
width: '100%',
top: 0,
bottom: 0,
left: 0,
right: 0,
}}
type="file"
ref={this.fileField}
onChange={this.onChangeFile}
/>
Select file
</button>
</div>
</div>
);
Expand Down
7 changes: 6 additions & 1 deletion packages/ui/screens/Settings/Screen.tsx
View file
Expand Up @@ -28,6 +28,7 @@ interface SettingsScreenState {
action: 'create' | 'update' | 'updateConnectionSuccess' | 'createConnectionSuccess';
saved?: boolean;
globalSetting?: boolean;
transformToRelative?: boolean;
}

export default class SettingsScreen extends React.Component<{}, SettingsScreenState> {
Expand Down Expand Up @@ -106,6 +107,8 @@ export default class SettingsScreen extends React.Component<{}, SettingsScreenSt

toggleGlobal = globalSetting => this.setState({ globalSetting });

toggleUseRelative = transformToRelative => this.setState({ transformToRelative });

updateConnectionSettings = (options: Partial<ConnectionInterface> = {}, cb?: any) => this.setState({
connectionSettings: {
...this.state.connectionSettings,
Expand Down Expand Up @@ -156,7 +159,8 @@ export default class SettingsScreen extends React.Component<{}, SettingsScreenSt
payload: {
editId,
connInfo,
globalSetting: !!this.state.globalSetting
globalSetting: !!this.state.globalSetting,
transformToRelative: this.state.transformToRelative
}
});
});
Expand Down Expand Up @@ -211,6 +215,7 @@ export default class SettingsScreen extends React.Component<{}, SettingsScreenSt
testConnection={this.testConnection}
state={this.state}
toggleGlobal={this.toggleGlobal}
toggleUseRelative={this.toggleUseRelative}
/>
)}
{step === Step.CONNECTION_CREATED && (
Expand Down
3 changes: 2 additions & 1 deletion packages/ui/screens/Settings/Widget/ConnectionInfo.tsx
View file
Expand Up @@ -5,7 +5,7 @@ import './ConnectionInfo.scss';
import DriverSettings from './../Drivers';
import Checkbox from '../Fields/Checkbox';

const ConnectionInfo = ({ updateSettings, submit, toggleGlobal, testConnection, state: { connectionSettings, errors = {}, defaultMethod = null, ...state } }) => {
const ConnectionInfo = ({ updateSettings, submit, toggleGlobal, toggleUseRelative, testConnection, state: { connectionSettings, errors = {}, defaultMethod = null, ...state } }) => {
const SelectedDriverSettings = DriverSettings[connectionSettings.dialect] || (() => null) as any;
return (
<>
Expand All @@ -18,6 +18,7 @@ const ConnectionInfo = ({ updateSettings, submit, toggleGlobal, testConnection,
updateSettings={updateSettings}
defaultMethod={defaultMethod}
errors={errors}
toggleUseRelative={toggleUseRelative}
/>
{`${state.action || 'create'}`.startsWith('create') && <Checkbox
label='Save To Global Settings?'
Expand Down

0 comments on commit 41537e2

Please sign in to comment.