Improve connection quickpick and status bar item (#1258)

* Deprecate `sqltools.showStatusbar` setting * Clarify ownership of our status bar item * Use `+` codicon for connection picker toolbar button Our dark-mode SVG became invisible on default color theme * Show `+` button on connection quickpick when no connections exist
mtxr · Jan 2, 2024 · 3bb336d · 3bb336d
1 parent b0dd32a
commit 3bb336d
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 11 deletions.
diff --git a/packages/extension/package.json b/packages/extension/package.json
@@ -433,7 +433,8 @@
                 "sqltools.showStatusbar": {
                     "type": "boolean",
                     "default": true,
-                    "description": "Toggle statusbar visibility."
+                    "description": "Toggle statusbar item visibility.",
+                    "deprecationMessage": "Deprecated. Use statusbar context menu option instead."
                 },
                 "sqltools.disableChordKeybindings": {
                     "type": "boolean",

diff --git a/packages/plugins/connection-manager/extension.ts b/packages/plugins/connection-manager/extension.ts
@@ -11,14 +11,13 @@ import { getDataPath, SESSION_FILES_DIRNAME } from '@sqltools/util/path';
 import { extractConnName, getQueryParameters } from '@sqltools/util/query';
 import { isEmpty } from '@sqltools/util/validation';
 import Context from '@sqltools/vscode/context';
-import { getIconPaths } from '@sqltools/vscode/icons';
 import { getOrCreateEditor, getSelectedText, readInput } from '@sqltools/vscode/utils';
 import { getEditorQueryDetails } from '@sqltools/vscode/utils/query';
 import { quickPick, quickPickSearch } from '@sqltools/vscode/utils/quickPick';
 import path from 'path';
 import { promises as fs } from 'fs';
 import { file } from 'tempy';
-import { CancellationTokenSource, commands, ConfigurationTarget, env as vscodeEnv, Progress, ProgressLocation, QuickPickItem, TextDocument, TextEditor, Uri, window, workspace } from 'vscode';
+import { CancellationTokenSource, commands, ConfigurationTarget, env as vscodeEnv, Progress, ProgressLocation, QuickPickItem, TextDocument, TextEditor, ThemeIcon, Uri, window, workspace } from 'vscode';
 import CodeLensPlugin from '../codelens/extension';
 import { ConnectRequest, DisconnectRequest, ForceListRefresh, GetChildrenForTreeItemRequest, GetConnectionPasswordRequest, GetConnectionsRequest, GetInsertQueryRequest, ProgressNotificationComplete, ProgressNotificationCompleteParams, ProgressNotificationStart, ProgressNotificationStartParams, ReleaseResultsRequest, RunCommandRequest, GetResultsRequest, SearchConnectionItemsRequest, TestConnectionRequest } from './contracts';
 import DependencyManager from './dependency-manager/extension';
@@ -568,11 +567,11 @@ export class ConnectionManagerPlugin implements IExtensionPlugin {
       matchOnDescription: true,
       matchOnDetail: true,
       placeHolder: 'Pick a connection',
-      placeHolderDisabled: 'You don\'t have any connections yet.',
-      title: 'Connections',
+      placeHolderDisabled: 'You don\'t have any connections defined yet. Use the \'+\' button above to add one.',
+      title: 'SQLTools Connections',
       buttons: [
         {
-          iconPath: getIconPaths('add-connection'),
+          iconPath: new ThemeIcon('add'),
           tooltip: 'Add New Connection',
           cb: () => commands.executeCommand(`${EXT_NAMESPACE}.openAddConnectionScreen`),
         } as any,

diff --git a/packages/plugins/connection-manager/status-bar.ts b/packages/plugins/connection-manager/status-bar.ts
@@ -5,17 +5,19 @@ import { EXT_NAMESPACE } from '@sqltools/util/constants';
 let statusBar: StatusBarItem & { setText: (text?: string) => void };
 
 statusBar = <typeof statusBar>window.createStatusBarItem(StatusBarAlignment.Left, 10);
-statusBar.tooltip = 'Select a connection';
+statusBar.name = 'SQLTools Connection';
+statusBar.tooltip = 'Select a SQLTools connection';
 statusBar.command = `${EXT_NAMESPACE}.selectConnection`;
 
 statusBar.setText = text => (statusBar.text = `$(database) ${text || 'Connect'}`);
 
 statusBar.setText();
 
+// The sqltools.showStatusbar setting has been deprecated. Use statusbar context menu option instead, which has priority over this one.
 const updateVisibility = () => Config.showStatusbar ? statusBar.show() : statusBar.hide();
 
 updateVisibility();
 
-Config.addOnUpdateHook(({ event }) => event.affectsConfig('showStatusbar') && updateVisibility);
+Config.addOnUpdateHook(({ event }) => event.affectsConfig('showStatusbar') && updateVisibility());
 
 export default statusBar;
diff --git a/packages/types/index.d.ts b/packages/types/index.d.ts
@@ -516,7 +516,7 @@ export interface ISettings {
    */
   autoConnectTo?: string | string[];
   /**
-   * Help SQLTools development.
+   * Deprecated. Use statusbar context menu option instead.
    * @type {boolean}
    * @default true
    * @memberof ISettings

diff --git a/packages/vscode/utils/quickPick.ts b/packages/vscode/utils/quickPick.ts
@@ -39,13 +39,16 @@ export async function quickPick<T = QuickPickItem | any>(
       qPick.hide();
     });
 
+    // Handle case discrepancy between our property name and the vscode one
+    qPick.placeholder = qPickOptions.placeHolder;
+    delete qPickOptions.placeHolder;
+
     Object.keys(qPickOptions).forEach(k => {
       qPick[k] = qPickOptions[k];
     });
     qPick.items = items;
-    qPick.enabled = items.length > 0;
 
-    if (!qPick.enabled) qPick.placeholder = placeHolderDisabled || qPick.placeholder;
+    if (!items.length) qPick.placeholder = placeHolderDisabled || qPick.placeholder;
 
     qPick.title = `${qPickOptions.title || 'Items'} (${items.length})`;