master: update docs for dep manager

docs/src/components/RenderSettings/index.tsx

@@ -3,6 +3,18 @@ import get from 'lodash/get';
 import pkgJson from '../../../../packages/extension/package.json';
 import Setting from './Setting';
 import styled from 'styled-components';
+import components from '../../components';
+
+function getQueryParams() {
+  const queryString = window.location.search;
+  var query: any = {};
+  var pairs = (queryString[0] === '?' ? queryString.substr(1) : queryString).split('&');
+  for (var i = 0; i < pairs.length; i++) {
+      var pair = pairs[i].split('=');
+      query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
+  }
+  return query;
+}
 
 const SearchIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>;
 
@@ -34,7 +46,9 @@ const Search = styled.input`
 `
 
 interface Props {
-  path: string;
+  path?: string;
+  disableSearch?: boolean;
+  title?: string;
 }
 
 class RenderSettings extends React.Component<Props> {
@@ -45,7 +59,7 @@ class RenderSettings extends React.Component<Props> {
 
   constructor(props: any) {
     super(props);
-    const jsonProps = get(pkgJson, props.path);
+    const jsonProps = get(pkgJson, `contributes.configuration.properties${props.path || ''}`);
     if (jsonProps) {
       this.state = {
         search: '',
@@ -56,6 +70,23 @@ class RenderSettings extends React.Component<Props> {
     }
   }
   inputRef = React.createRef<HTMLInputElement>();
+
+  renderSearchContainer = () => this.props.disableSearch ? null : (
+    <SearchContainer onClick={() => this.inputRef && this.inputRef.current && this.inputRef.current.focus()}>
+      <SearchIcon />
+      <Search placeholder="Type to search..." onChange={e => this.setState({ search: e.target.value || '' })} value={this.state.search} ref={this.inputRef}/>
+    </SearchContainer>
+  );
+
+  renderTitle = () => this.props.title ? (
+    <components.h2 id={this.props.title.toLowerCase().replace(/\s/g, '-')}>{this.props.title}</components.h2>
+  ) : null;
+
+  componentDidMount() {
+    const { q = '' } = getQueryParams();
+    q && this.setState({ search: q });
+  }
+
   render() {
     const search = this.state.search.toLowerCase();
     let propsList = this.state.jsonProps;
@@ -65,10 +96,8 @@ class RenderSettings extends React.Component<Props> {
 
     return (
       <>
-        <SearchContainer onClick={() => this.inputRef && this.inputRef.current && this.inputRef.current.focus()}>
-          <SearchIcon />
-          <Search placeholder="Type to search..." onChange={e => this.setState({ search: e.target.value || '' })} ref={this.inputRef}/>
-        </SearchContainer>
+        {this.renderTitle()}
+        {this.renderSearchContainer()}
         {propsList.map(prop => {
           return <Setting {...prop} key={prop.name} />;
         })}

docs/src/components/index.ts

@@ -1,2 +1,9 @@
-export { default as editor } from './Editor'
-export { default as h3 } from './h3'
+import editor from './Editor'
+import h3 from './h3'
+
+import { components } from 'docz-theme-default';
+
+components.editor = editor;
+(<any>components).h3 = h3;
+
+export default components;

docs/src/docs-theme.js

@@ -1,13 +1,27 @@
-// src/theme.js
 import React from 'react';
-import { components } from 'docz-theme-default';
-import * as customComponents from './components';
+import './components';
 
-Object.keys(customComponents).forEach(key => {
-  components[key] = customComponents[key]
-})
+let loaded = null;
+const checkLocationHash = () => {
+  if (loaded) return;
+  loaded = true;
+  const prevOnLoad = window.onload;
+  window.onload = (...args) => {
+    prevOnLoad && prevOnLoad(...args);
+    setTimeout(() => {
+      try {
+        if (!window.location.hash) return;
+        const el = document.getElementById(window.location.hash.substr(1));
+        el.scrollIntoView({
+          behavior: 'smooth',
+        });
+      } catch (error) {}
+    }, 1000);
+  }
+}
 
 const ThemeWrapper = ({ children }) => {
+  checkLocationHash();
   return <>{children}</>;
 };
 

docs/src/pages/dependency-manager.mdx

@@ -3,14 +3,17 @@ name: Dependency Manager
 menu: Settings
 route: /settings/dependency-manager
 ---
+import RenderSettings from '../components/RenderSettings/index.tsx'
 
 # Dependency Manager
 
 SQLTools can automaticaly install dependencies required by its drivers. We use node package managers like npm and yarn to get this done.
 
 Below you can see configurations you can do to use your favorite package manager.
 
-## NPM
+<RenderSettings path="['sqltools.dependencyManager'].properties" disableSearch title="sqltools.dependencyManager options"/>
+
+## NPM Example
 
 By default SQLTools relies on `npm` to install dependencies. Here is the an example of configuration to make SQLTools use `npm`:
 
@@ -20,19 +23,21 @@ By default SQLTools relies on `npm` to install dependencies. Here is the an exam
   "sqltools.dependencyManager": {
     "packageManager": "npm",
     "installArgs": ["install"],
-    "runScriptArgs": ["run"]
+    "runScriptArgs": ["run"],
+    "autoAccept": false
   },
   ...
   // advanced configuration
   "sqltools.dependencyManager": {
     "packageManager": "/usr/bin/npm",
     "installArgs": ["--registry=https://registry.npmjs.org/", "install"], // this will be executed as `npm --registry=https://registry.npmjs.org/ install <package_name>
-    "runScriptArgs": ["run"]
+    "runScriptArgs": ["run"],
+    "autoAccept": true
   },
 }
 ```
 
-## Yarn
+## Yarn Example
 
 You can easily setup SQLTools to use `yarn` to install dependencies. Here is the an example of configuration:
 
@@ -42,14 +47,16 @@ You can easily setup SQLTools to use `yarn` to install dependencies. Here is the
   "sqltools.dependencyManager": {
     "packageManager": "yarn",
     "installArgs": ["add"],
-    "runScriptArgs": ["run"]
+    "runScriptArgs": ["run"],
+    "autoAccept": false
   },
   ...
   // advanced configuration
   "sqltools.dependencyManager": {
     "packageManager": "/usr/bin/yarn",
     "installArgs": ["--registry", "https://registry.npmjs.org/", "add"], // this will be executed as `yarn --registry https://registry.npmjs.org/ add <package_name>
-    "runScriptArgs": ["run"]
+    "runScriptArgs": ["run"],
+    "autoAccept": false
   },
 }
 ```
@@ -66,14 +73,16 @@ Let's say you want to use `CNPM` as package manager for SQLTools, you can easily
   "sqltools.dependencyManager": {
     "packageManager": "/usr/bin/cnpm",
     "installArgs": ["--registry=https://registry.npm.taobao.org", "install"],
-    "runScriptArgs": ["run"]
+    "runScriptArgs": ["run"],
+    "autoAccept": false
   },
   ...
   // or with taobao mirror
   "sqltools.dependencyManager": {
     "packageManager": "/usr/bin/cnpm",
     "installArgs": ["--registry=https://registry.npm.taobao.org", "install"],
-    "runScriptArgs": ["run"]
+    "runScriptArgs": ["run"],
+    "autoAccept": false
   },
 }
 ```

docs/src/pages/settings.mdx

@@ -8,4 +8,4 @@ import RenderSettings from '../components/RenderSettings/index.tsx'
 
 # Settings
 
-<RenderSettings path="contributes.configuration.properties" />
+<RenderSettings />