From 17053bb638c48babb3554accf38818d507d5af7d Mon Sep 17 00:00:00 2001 From: Philip Carneiro Date: Tue, 29 Oct 2024 10:38:12 +0000 Subject: [PATCH 1/3] migrate from vscode ui to sl --- src/models/connectionsModels.ts | 6 +- src/models/messages.ts | 7 +- src/panels/newConnection.ts | 19 +- .../components/kdbNewConnectionView.ts | 531 ++++++++++-------- src/webview/components/styles.ts | 9 + src/webview/styles/style.css | 1 - 6 files changed, 313 insertions(+), 260 deletions(-) diff --git a/src/models/connectionsModels.ts b/src/models/connectionsModels.ts index d200d5b8..c9db79bf 100644 --- a/src/models/connectionsModels.ts +++ b/src/models/connectionsModels.ts @@ -11,7 +11,11 @@ * specific language governing permissions and limitations under the License. */ -//TODO: start to migrate all connections models to here +export const enum ConnectionType { + BundledQ, + Kdb, + Insights, +} export enum ServerType { INSIGHTS, diff --git a/src/models/messages.ts b/src/models/messages.ts index 222ebe4f..751a5382 100644 --- a/src/models/messages.ts +++ b/src/models/messages.ts @@ -11,6 +11,7 @@ * specific language governing permissions and limitations under the License. */ +import { ConnectionType } from "./connectionsModels"; import { DataSourceFiles } from "./dataSource"; import { MetaObjectPayload } from "./meta"; @@ -44,12 +45,6 @@ export interface DataSourceMessage2 { dataSourceFile: DataSourceFiles; } -export const enum ConnectionType { - BundledQ, - Kdb, - Insights, -} - export interface EditConnectionMessage { connType: ConnectionType; serverName: string; diff --git a/src/panels/newConnection.ts b/src/panels/newConnection.ts index b20fb989..9d2a3670 100644 --- a/src/panels/newConnection.ts +++ b/src/panels/newConnection.ts @@ -16,8 +16,9 @@ import { getUri } from "../utils/getUri"; import { getNonce } from "../utils/getNonce"; import { ext } from "../extensionVariables"; import { InsightsNode, KdbNode } from "../services/kdbTreeProvider"; -import { ConnectionType, EditConnectionMessage } from "../models/messages"; +import { EditConnectionMessage } from "../models/messages"; import { retrieveConnLabelsNames } from "../utils/connLabel"; +import { ConnectionType } from "../models/connectionsModels"; export class NewConnectionPannel { public static currentPanel: NewConnectionPannel | undefined; @@ -176,17 +177,25 @@ export class NewConnectionPannel { webview: vscode.Webview, extensionUri: vscode.Uri, ) { - const webviewUri = getUri(webview, extensionUri, ["out", "webview.js"]); - const nonce = getNonce(); + const getResource = (resource: string) => + getUri(webview, extensionUri, ["out", resource]); return /* html */ ` - + New Connection - + + + diff --git a/src/webview/components/kdbNewConnectionView.ts b/src/webview/components/kdbNewConnectionView.ts index de8b957c..55e91abf 100644 --- a/src/webview/components/kdbNewConnectionView.ts +++ b/src/webview/components/kdbNewConnectionView.ts @@ -13,12 +13,13 @@ import { LitElement, html } from "lit"; import { customElement } from "lit/decorators.js"; - -import { kdbStyles, newConnectionStyles, vscodeStyles } from "./styles"; +import { live } from "lit/directives/live.js"; +import { kdbStyles, newConnectionStyles, shoelaceStyles } from "./styles"; import { EditConnectionMessage } from "../../models/messages"; import { repeat } from "lit/directives/repeat.js"; import { LabelColors, Labels } from "../../models/labels"; import { + ConnectionType, InsightDetails, ServerDetails, ServerType, @@ -26,7 +27,8 @@ import { @customElement("kdb-new-connection-view") export class KdbNewConnectionView extends LitElement { - static styles = [vscodeStyles, kdbStyles, newConnectionStyles]; + static styles = [shoelaceStyles, kdbStyles, newConnectionStyles]; + selectedTab = ConnectionType.BundledQ; lblColorsList: LabelColors[] = []; lblNamesList: Labels[] = []; newLblName = ""; @@ -178,33 +180,30 @@ export class KdbNewConnectionView extends LitElement { renderServerNameField(serverType: ServerType, isBundleQ?: boolean) { return isBundleQ - ? html`Server Name - ` + label="Server Name">` : serverType === ServerType.KDB - ? html`Server Name - ` - : html`` + : html`Server Name - `; + label="Server Name">`; } renderServerName(serverType: ServerType, isBundleQ?: boolean) { @@ -233,19 +232,22 @@ export class KdbNewConnectionView extends LitElement { renderPortNumber(isBundleQ?: boolean) { return html`
- Set port number + label="Set port number">
${this.renderPortNumberDesc(isBundleQ)} @@ -266,39 +268,39 @@ export class KdbNewConnectionView extends LitElement { return isBundleQ ? html`
- Define connection address + label="Define connection address">
-
+
${this.renderConnAddDesc(serverType)}
` : html`
- Define connection address + label="Define connection address">
-
+
${this.renderConnAddDesc(serverType)}
`; @@ -307,20 +309,19 @@ export class KdbNewConnectionView extends LitElement { renderRealm() { return html`
- Define Realm (optional) + label="Define Realm (optional)">
-
+
Specify the Keycloak realm for authentication. Use this field to connect to a specific realm as configured on your server.
@@ -337,19 +338,19 @@ export class KdbNewConnectionView extends LitElement { renderLblDropdownColorOptions() { return html` - No Color Selected + No Color Selected ${repeat( this.lblColorsList, (color) => color, (color) => - html` + html`
${color.name} - `, + `, )} `; } @@ -357,27 +358,26 @@ export class KdbNewConnectionView extends LitElement { renderLblsDropdown(pos: number) { return html`
- ${this.renderLblDropdownOptions(pos)} - - + -- - ++
`; @@ -385,23 +385,25 @@ export class KdbNewConnectionView extends LitElement { renderLblDropdownOptions(pos: number) { return html` - No Label Selected - ${repeat( - this.lblNamesList, - (lbl) => lbl.name, - (lbl) => html` - - -
- ${lbl.name} - - - `, - )} + + No Label Selected + ${repeat( + this.lblNamesList, + (lbl) => lbl.name, + (lbl) => html` + + +
+ ${lbl.name} + + + `, + )} + `; } @@ -412,48 +414,49 @@ export class KdbNewConnectionView extends LitElement {

Add a New Label

- Label name + id="label-name">
Label color
- ${this.renderLblDropdownColorOptions()} - +
- Cancel - - + Create - +
@@ -462,13 +465,14 @@ export class KdbNewConnectionView extends LitElement { renderNewLblBtn() { return html` - Create New Label - + `; } @@ -489,6 +493,124 @@ export class KdbNewConnectionView extends LitElement {
`; } + renderNewBundleqConnectionForm() { + return html` +
+
+
+ ${this.renderServerName(ServerType.KDB, true)} +
+
+
+
+ ${this.renderConnAddress(ServerType.KDB, true)} +
+
+
+
${this.renderPortNumber(true)}
+
+ ${this.renderConnectionLabelsSection()} + ${this.renderCreateConnectionBtn()} +
+ `; + } + + renderNewMyQConnectionForm() { + return html`
+
+
${this.renderServerName(ServerType.KDB)}
+
+
+
${this.renderConnAddress(ServerType.KDB)}
+
+
+
${this.renderPortNumber()}
+
+
Add Authentication if enabled
+
+
+
+ Username +
+
+ Password +
+
+ Add required authentication to get access to the server connection + if enabled. +
+
+
+
+
+
Optional: Enable TLS Encryption
+
+ Enable TLS Encryption on the kdb connection +
+
+
+ ${this.renderConnectionLabelsSection()} + ${this.renderCreateConnectionBtn()} +
`; + } + + renderNewInsightsConnectionForm() { + return html`
+
+
+ ${this.renderServerName(ServerType.INSIGHTS)} +
+
+
+
+ ${this.renderConnAddress(ServerType.INSIGHTS)} +
+
+
+
+
+ Advanced + ${this.renderRealm()} +
+ Accept insecure SSL certifcates +
+
+
+
+ ${this.renderConnectionLabelsSection()} + ${this.renderCreateConnectionBtn()} +
`; + } + renderNewConnectionForm() { return html`
@@ -525,160 +647,70 @@ export class KdbNewConnectionView extends LitElement {
- - Bundled q - My q - Insights connection - -
-
-
- ${this.renderServerName(ServerType.KDB, true)} -
-
-
-
- ${this.renderConnAddress(ServerType.KDB, true)} -
-
-
-
${this.renderPortNumber(true)}
-
- ${this.renderConnectionLabelsSection()} - ${this.renderCreateConnectionBtn()} -
- - -
-
-
- ${this.renderServerName(ServerType.KDB)} -
-
-
-
- ${this.renderConnAddress(ServerType.KDB)} -
-
-
-
${this.renderPortNumber()}
-
-
- Add Authentication if enabled -
-
-
-
- Username -
-
- Password -
-
- Add required authentication to get access to the server - connection if enabled. -
-
-
-
-
-
- Optional: Enable TLS Encryption -
-
- Enable TLS Encryption on the kdb - connection -
-
-
- ${this.renderConnectionLabelsSection()} - ${this.renderCreateConnectionBtn()} -
- - -
-
-
- ${this.renderServerName(ServerType.INSIGHTS)} -
-
-
-
- ${this.renderConnAddress(ServerType.INSIGHTS)} -
-
-
-
-
- Advanced - ${this.renderRealm()} -
- Accept insecure SSL certifcates -
-
-
-
- ${this.renderConnectionLabelsSection()} - ${this.renderCreateConnectionBtn()} -
- - +
+ + Bundle q + My q + + Insights connection + + + ${this.renderNewBundleqConnectionForm()} + + + ${this.renderNewMyQConnectionForm()} + + + ${this.renderNewInsightsConnectionForm()} + + +
-
`; } renderCreateConnectionBtn() { return html`
- Create ConnectionCreate Connection
`; } @@ -687,11 +719,13 @@ export class KdbNewConnectionView extends LitElement { if (!this.connectionData) { return html`
No connection found to be edited
`; } - this.isBundledQ = this.connectionData.connType === 0; + this.isBundledQ = this.connectionData.connType === ConnectionType.BundledQ; this.oldAlias = this.connectionData.serverName; const connTypeName = this.defineConnTypeName(this.connectionData.connType); this.serverType = - this.connectionData.connType === 2 ? ServerType.INSIGHTS : ServerType.KDB; + this.connectionData.connType === ConnectionType.Insights + ? ServerType.INSIGHTS + : ServerType.KDB; return html`
${this.isModalOpen ? this.renderNewLabelModal() : ""} @@ -711,8 +745,11 @@ export class KdbNewConnectionView extends LitElement {
${this.renderEditConnFields()}
${this.renderConnectionLabelsSection()}
- Update ConnectionUpdate Connection
@@ -721,9 +758,9 @@ export class KdbNewConnectionView extends LitElement { } defineConnTypeName(connType: number) { - if (connType === 0) { + if (connType === ConnectionType.BundledQ) { return "Bundled q"; - } else if (connType === 1) { + } else if (connType === ConnectionType.Kdb) { return "My q"; } else { return "Insights"; diff --git a/src/webview/components/styles.ts b/src/webview/components/styles.ts index ed6f0ca5..f340968d 100644 --- a/src/webview/components/styles.ts +++ b/src/webview/components/styles.ts @@ -235,6 +235,10 @@ export const newConnectionStyles = css` word-wrap: break-word; } + .tabs { + flex-grow: 1; + } + .option-description { color: var(--vscode-foreground); font-size: 12px; @@ -249,6 +253,11 @@ export const newConnectionStyles = css` .content-wrapper { display: flex; + flex-flow: row nowrap; + overflow-x: auto; + gap: var(--sl-spacing-medium); + padding-left: var(--sl-spacing-medium); + padding-right: var(--sl-spacing-medium); align-content: center; justify-content: center; font-family: var(--vscode-font-family); diff --git a/src/webview/styles/style.css b/src/webview/styles/style.css index d887b3e8..07194abc 100644 --- a/src/webview/styles/style.css +++ b/src/webview/styles/style.css @@ -48,7 +48,6 @@ body { } body { - overflow: hidden; box-sizing: border-box; font-family: var(--vscode-font-family); font-weight: var(--vscode-font-weight); From b5857c00071b6bec819f7814ca7389805b393c9c Mon Sep 17 00:00:00 2001 From: Philip Carneiro Date: Tue, 29 Oct 2024 11:05:09 +0000 Subject: [PATCH 2/3] fix coverage --- src/webview/components/kdbNewConnectionView.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/webview/components/kdbNewConnectionView.ts b/src/webview/components/kdbNewConnectionView.ts index 55e91abf..b28b4316 100644 --- a/src/webview/components/kdbNewConnectionView.ts +++ b/src/webview/components/kdbNewConnectionView.ts @@ -178,6 +178,7 @@ export class KdbNewConnectionView extends LitElement { >`; } + /* istanbul ignore next */ renderServerNameField(serverType: ServerType, isBundleQ?: boolean) { return isBundleQ ? html` @@ -433,7 +440,9 @@ export class KdbNewConnectionView extends LitElement { id="label-color" value="${live(this.newLblColorName)}" @sl-change="${(event: Event) => { + /* istanbul ignore next */ this.newLblColorName = (event.target as HTMLInputElement).value; + /* istanbul ignore next */ this.requestUpdate(); }}" class="dropdown" @@ -515,6 +524,7 @@ export class KdbNewConnectionView extends LitElement { `; } + /* istanbul ignore next */ renderNewMyQConnectionForm() { return html`
@@ -596,6 +606,7 @@ export class KdbNewConnectionView extends LitElement { Bundle qMy q @@ -676,6 +689,7 @@ export class KdbNewConnectionView extends LitElement { this.selectedTab === ConnectionType.Insights, )}" @click="${() => { + /* istanbul ignore next */ this.selectedTab = ConnectionType.Insights; }}" >Insights connection From 4ad7c3256c4067fef42eab2f0e19337ae2083365 Mon Sep 17 00:00:00 2001 From: Philip Carneiro Date: Tue, 29 Oct 2024 11:13:49 +0000 Subject: [PATCH 3/3] improve code --- src/webview/components/kdbNewConnectionView.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/webview/components/kdbNewConnectionView.ts b/src/webview/components/kdbNewConnectionView.ts index b28b4316..1578e283 100644 --- a/src/webview/components/kdbNewConnectionView.ts +++ b/src/webview/components/kdbNewConnectionView.ts @@ -27,7 +27,7 @@ import { @customElement("kdb-new-connection-view") export class KdbNewConnectionView extends LitElement { - static styles = [shoelaceStyles, kdbStyles, newConnectionStyles]; + static readonly styles = [shoelaceStyles, kdbStyles, newConnectionStyles]; selectedTab = ConnectionType.BundledQ; lblColorsList: LabelColors[] = []; lblNamesList: Labels[] = [];