[react-hooks] result hooks

mtxr · Mar 20, 2021 · e7fa386 · e7fa386
1 parent 309507e
commit e7fa386
Show file tree

Hide file tree

Showing 68 changed files with 852 additions and 688 deletions.
diff --git a/build-tools/webpack/webview.config.js b/build-tools/webpack/webview.config.js
@@ -4,7 +4,7 @@ const setDefaults = require('./../common/set-defaults');
 const webpack = require('webpack');
 const parseEntries = require('./../common/parse-entries');
 
-const { rootdir } = require('../constants');
+const { rootdir, IS_PRODUCTION } = require('../constants');
 
 /**
  *
@@ -65,7 +65,7 @@ module.exports = exports = function getWebviewConfig({ entries, packagePath }) {
               options: {
                 importLoaders: 3,
                 modules: {
-                  // localIdentName: '[local]',
+                  localIdentName: IS_PRODUCTION ? '[hash:base64]' : '[path][name]__[local]-[hash:base64]',
                   exportLocalsConvention: 'camelCaseOnly',
                 },
               }

diff --git a/packages/base-driver/package.json b/packages/base-driver/package.json
@@ -30,7 +30,7 @@
     "@types/node": "^14.0.9",
     "@types/resolve": "^1.17.1",
     "rimraf": "^3.0.0",
-    "typescript": "^3.7.3"
+    "typescript": "~4.0.2"
   },
   "dependencies": {
     "@sqltools/types": "latest",

diff --git a/packages/driver.mssql/package.json b/packages/driver.mssql/package.json
@@ -75,7 +75,7 @@
     "lodash": "^4.17.19",
     "mssql": "^5.0.5",
     "rimraf": "^3.0.2",
-    "typescript": "^3.7.3",
+    "typescript": "~4.0.2",
     "vsce": "1.77.0"
   }
 }
diff --git a/packages/driver.mysql/package.json b/packages/driver.mysql/package.json
@@ -76,7 +76,7 @@
     "lodash": "^4.17.19",
     "mysql": "^2.18.1",
     "rimraf": "^3.0.2",
-    "typescript": "^3.7.3",
+    "typescript": "~4.0.2",
     "vsce": "1.77.0"
   }
 }
diff --git a/packages/driver.pg/package.json b/packages/driver.pg/package.json
@@ -79,7 +79,7 @@
     "lodash": "^4.17.19",
     "pg": "^8.2.1",
     "rimraf": "^3.0.2",
-    "typescript": "^3.7.3",
+    "typescript": "~4.0.2",
     "vsce": "1.77.0"
   }
 }
diff --git a/packages/driver.sqlite/package.json b/packages/driver.sqlite/package.json
@@ -70,7 +70,7 @@
     "concurrently": "^5.2.0",
     "esbuild": "0.6.26",
     "rimraf": "^3.0.2",
-    "typescript": "^3.7.3",
+    "typescript": "~4.0.2",
     "vsce": "1.77.0"
   }
 }
diff --git a/packages/extension/package.json b/packages/extension/package.json
@@ -1191,7 +1191,7 @@
         "jest-cli": "^24.5.0",
         "lodash": "^4.17.19",
         "ts-jest": "^24.0.2",
-        "typescript": "^3.7.3",
+        "typescript": "~4.0.2",
         "vscode-test": "^1.2.3"
     },
     "dependencies": {

diff --git a/packages/language-server/package.json b/packages/language-server/package.json
@@ -23,6 +23,6 @@
     "jest": "^24.5.0",
     "jest-cli": "^24.5.0",
     "ts-jest": "^24.0.2",
-    "typescript": "^3.7.3"
+    "typescript": "~4.0.2"
   }
 }
diff --git a/packages/log/package.json b/packages/log/package.json
@@ -33,6 +33,6 @@
     "@types/pino": "^6.3.0",
     "@types/vscode": "^1.47.0",
     "rimraf": "^3.0.0",
-    "typescript": "^3.7.3"
+    "typescript": "~4.0.2"
   }
 }
diff --git a/packages/plugins/connection-manager/webview/results.ts b/packages/plugins/connection-manager/webview/results.ts
@@ -1,13 +1,13 @@
 import { NSDatabase, InternalID } from '@sqltools/types';
 import WebviewProvider from '@sqltools/vscode/webview-provider';
-import { QueryResultsState } from './ui/screens/Results/interfaces';
+import { ResultsScreenState } from './ui/screens/Results/interfaces';
 import vscode from 'vscode';
 import Config from '@sqltools/util/config-manager';
 import { getNameFromId } from '@sqltools/util/connection';
 import { DISPLAY_NAME } from '@sqltools/util/constants';
-import { UIAction } from '../actions';
+import { UIAction } from './ui/screens/Results/actions';
 
-class ResultsWebview extends WebviewProvider<QueryResultsState> {
+class ResultsWebview extends WebviewProvider<ResultsScreenState> {
   protected id: string = 'Results';
   protected title: string = `${DISPLAY_NAME} Results`;
   protected isOpen = false;
@@ -107,7 +107,7 @@ class ResultsWebview extends WebviewProvider<QueryResultsState> {
       this.title = `${prefix}: ${suffix}`;
     } catch (error) {}
     this.updatePanelName();
-    this.sendMessage(UIAction.RESPONSE_QUERY_RESULTS, payload);
+    this.sendMessage(UIAction.RESPONSE_RESULTS, { resultTabs: payload, hasError: payload.some(p => !!p.error) });
   }
 
   whereToShow = vscode.ViewColumn.Active;

diff --git a/packages/plugins/connection-manager/webview/settings.ts b/packages/plugins/connection-manager/webview/settings.ts
@@ -3,7 +3,7 @@ import { getConnectionId } from '@sqltools/util/connection';
 import WebviewProvider from '@sqltools/vscode/webview-provider';
 import { commands } from 'vscode';
 import { IConnection } from '@sqltools/types';
-import { UIAction } from '../actions';
+import { UIAction } from './ui/screens/Settings/actions';
 import { SettingsScreenState } from './ui/screens/Settings/interfaces';
 import { driverPluginExtension, getInstalledDrivers, getDriverSchemas } from '../extension-util';
 

diff --git a/packages/plugins/connection-manager/webview/ui/components/ErrorBoundary/index.tsx b/packages/plugins/connection-manager/webview/ui/components/ErrorBoundary/index.tsx
@@ -22,11 +22,18 @@ export default class ErrorBoundary extends React.Component {
         <div>
           <h2>Something went wrong.</h2>
           <details style={{ whiteSpace: 'pre-wrap' }} open>
-            <summary><code>{this.state.error && this.state.error.toString()}</code></summary>
+            <summary>
+              <code>{this.state.error && this.state.error.toString()}</code>
+            </summary>
             <pre>
               {this.state.errorInfo && this.state.errorInfo.componentStack}
             </pre>
           </details>
+          <div style={{  marginTop: 30 }}>
+            <a href='command:workbench.action.webview.openDeveloperTools'>
+              Open VSCode DevTools
+            </a>
+          </div>
         </div>
       );
     }

diff --git a/packages/plugins/connection-manager/webview/ui/components/Loading/style.m.scss b/packages/plugins/connection-manager/webview/ui/components/Loading/style.m.scss
@@ -1,7 +1,5 @@
-@import '../../sass/lib/mixins';
-
 .loading {
-  @include full-screen();
+  composes: fullscreenContainer from './../../sass/generic.m.scss';
   position: absolute;
   top: 0;
   bottom: 0;

diff --git a/packages/plugins/connection-manager/webview/ui/components/Themed/theme.tsx b/packages/plugins/connection-manager/webview/ui/components/Themed/theme.tsx
@@ -10,30 +10,33 @@ const theme = createMuiTheme({
   palette: {
     background: {
       default: defaultColors.backgroundColor,
-      paper: defaultColors.backgroundColor
+      paper: defaultColors.backgroundColor,
     },
   },
   overrides: {
     MuiPaper: {
       root: {
         borderCollapse: 'collapse',
-        ...defaultColors
+        ...defaultColors,
+      },
+      elevation0: {
+        zIndex: 0,
       },
       rounded: {
-        borderRadius: '1px'
-      }
+        borderRadius: '1px',
+      },
     },
     MuiTable: {
       root: {
         borderCollapse: 'collapse !important' as any,
         ...defaultColors,
-      }
+      },
     },
     MuiMenu: {
       paper: {
         backgroundColor: 'var(--vscode-menu-background)',
         color: 'var(--vscode-menu-foreground)',
-      }
+      },
     },
     MuiMenuItem: {
       root: {
@@ -44,13 +47,13 @@ const theme = createMuiTheme({
         '&:hover': {
           background: 'var(--vscode-menu-selectionBackground)',
           color: 'var(--vscode-menu-selectionForeground)',
-        }
+        },
       },
     },
     MuiList: {
       padding: {
         padding: '4px 0px',
-      }
+      },
     },
     MuiListItem: {
       root: {
@@ -63,26 +66,26 @@ const theme = createMuiTheme({
         '&:hover': {
           background: 'var(--vscode-menu-selectionBackground)',
           color: 'var(--vscode-menu-selectionForeground)',
-        }
-      }
+        },
+      },
     },
     MuiDivider: {
       root: {
         backgroundColor: 'var(--vscode-menu-separatorBackground)',
         margin: '4px 0',
         opacity: '0.4',
-      }
+      },
     },
 
     MuiListItemIcon: {
       root: {
         color: 'inherit',
-      }
+      },
     },
     MuiListItemText: {
       root: {
         margin: 0,
-      }
+      },
     },
     MuiTab: {
       root: {
@@ -94,7 +97,7 @@ const theme = createMuiTheme({
         '&$selected': {
           color: 'var(--vscode-tab-activeForeground)',
           background: 'var(--vscode-tab-activeBackground)',
-        }
+        },
       },
     },
     MuiTabs: {
@@ -103,14 +106,14 @@ const theme = createMuiTheme({
         background: 'var(--vscode-tab-inactiveBackground)',
       },
       indicator: {
-        backgroundColor: 'var(--vscode-tab-activeModifiedBorder)'
-      }
+        backgroundColor: 'var(--vscode-tab-activeModifiedBorder)',
+      },
     },
     MuiTableCell: {
       root: {
         padding: 'var(--sqltool-table-cell-padding, 2px 4px) !important',
         fontWeight: 'normal',
-        fontSize: 'inherit'
+        fontSize: 'inherit',
       },
       body: {
         color: 'inherit',
@@ -119,54 +122,54 @@ const theme = createMuiTheme({
           fontFamily: 'var(--vscode-editor-font-family, var(--font-family))',
           height: '300px',
           overflow: 'auto',
-        }
+        },
       },
       head: {
         fontWeight: 'bold',
         color: 'inherit',
         border: '1px solid var(--vscode-input-border)',
         background: 'var(--vscode-panelSectionHeader-background)',
         borderBottom: 'none',
-      }
+      },
     },
     MuiInput: {
       root: {
-        margin: '0 !important'
+        margin: '0 !important',
       },
       underline: {
         '&:before': {
           display: 'none',
         },
         '&:after': {
           display: 'none',
-        }
-      }
+        },
+      },
     },
     MuiIconButton: {
       root: {
         color: 'inherit',
         padding: '0 4px',
       },
       label: {
-        color: 'inherit'
-      }
+        color: 'inherit',
+      },
     },
     MuiInputBase: {
       input: {
         color: 'var(--vscode-input-foreground)',
         height: '1em',
         padding: '4px',
-      }
+      },
     },
     MuiTableSortLabel: {
       root: {
         color: 'inherit !important',
       },
       icon: {
-        color: 'inherit !important'
-      }
-    }
-  }
+        color: 'inherit !important',
+      },
+    },
+  },
 });
 
 

diff --git a/packages/plugins/connection-manager/webview/ui/interfaces/index.ts b/packages/plugins/connection-manager/webview/ui/interfaces/index.ts
@@ -8,4 +8,10 @@ export interface IVSCodeWebviewAPI {
   getState<State>(): State,
   setState<State>(newState: State): State,
   postMessage<T>(message: IWebviewMessage<T>): void;
+}
+
+export interface ReducerAction<A extends string = string, S extends object = any> {
+  type: A;
+  payload?: Partial<S> & { [k: string]: any };
+  callback?: () => any;
 }
diff --git a/packages/plugins/connection-manager/webview/ui/sass/_variables.scss b/packages/plugins/connection-manager/webview/ui/sass/_variables.scss
@@ -49,9 +49,9 @@
     --sqltools-WBColor14: rgba(0, 0, 0, 0.70);
     --sqltools-WBColor16: rgba(0, 0, 0, 0.80);
   }
-}
 
-:root {
+
+  // user customizations
   --sqltools-transition: all .3s ease 0s;
   --sqltools-backgroundColor: var(--vscode-editor-background, var(--background-color));
   --sqltools-color: var(--vscode-editor-foreground, var(--color));

diff --git a/packages/plugins/connection-manager/webview/ui/sass/generic.m.scss b/packages/plugins/connection-manager/webview/ui/sass/generic.m.scss
@@ -1,5 +1,4 @@
 @import './variables';
-@import './lib/mixins';
 
 .blur {
   transition: var(--sqltools-transition);
@@ -9,13 +8,7 @@
   filter: blur(5px);
 }
 .fullscreenContainer {
-  @include full-screen();
+  display: flex;
+  width: 100vw;
+  height: 100vh;
 }
-
-.colorError {
-  color: var(--vscode-errorForeground, #f97583);
-}
-
-.cWarning {
-  color: var(--vscode-watningForeground, #cca700);
-}
diff --git a/packages/plugins/connection-manager/webview/ui/sass/lib/_mixins.scss b/packages/plugins/connection-manager/webview/ui/sass/lib/_mixins.scss