diff --git a/extensions/gitpod-web/package.json b/extensions/gitpod-web/package.json index 935eadfeb3d2c..db5f9c7846d57 100644 --- a/extensions/gitpod-web/package.json +++ b/extensions/gitpod-web/package.json @@ -415,7 +415,8 @@ "remote": [ { "id": "gitpod.workspace", - "name": "Gitpod Workspace" + "name": "Gitpod Workspace", + "when": "!gitpod.portsView.visible" } ], "portsView": [ @@ -425,7 +426,6 @@ "type": "webview", "contextualTitle": "", "icon": "$(plug)", - "visibility": "visible", "when": "gitpod.portsView.visible" } ] @@ -517,7 +517,7 @@ { "id": "portsView", "title": "Ports", - "icon": "" + "icon": "$(plug)" } ] } diff --git a/extensions/gitpod-web/portsview/src/App.svelte b/extensions/gitpod-web/portsview/src/App.svelte index bc157228e1ade..2be8c7ff57e34 100644 --- a/extensions/gitpod-web/portsview/src/App.svelte +++ b/extensions/gitpod-web/portsview/src/App.svelte @@ -11,11 +11,7 @@ window.addEventListener("message", (event) => { if (event.data.command === "updatePorts") { - // TODO: sort with status first, then port number? - ports = event.data.ports.sort( - (a: GitpodPortObject, b: GitpodPortObject) => - a.status.localPort - b.status.localPort - ); + ports = event.data.ports; } }); vscode.postMessage({ command: "queryPortData" }); diff --git a/extensions/gitpod-web/src/extension.ts b/extensions/gitpod-web/src/extension.ts index 90eb3ab993b42..1f3a68f2dd99c 100644 --- a/extensions/gitpod-web/src/extension.ts +++ b/extensions/gitpod-web/src/extension.ts @@ -284,7 +284,6 @@ type GitpodWorkspaceElement = PortsTreeItem | PortTreeItem; export class GitpodWorkspaceTreeDataProvider implements vscode.TreeDataProvider { readonly ports = new PortsTreeItem('Ports', vscode.TreeItemCollapsibleState.Expanded); - readonly portViewNotice = new PortsTreeItem('Please try new Ports view and provide your feedback', vscode.TreeItemCollapsibleState.None); protected readonly onDidChangeTreeDataEmitter = new vscode.EventEmitter(); readonly onDidChangeTreeData = this.onDidChangeTreeDataEmitter.event; @@ -293,12 +292,11 @@ export class GitpodWorkspaceTreeDataProvider implements vscode.TreeDataProvider< readonly onDidExposeServedPort = this.onDidExposeServedPortEmitter.event; - constructor(private readonly context: GitpodExtensionContext, private readonly isPortsViewExperimentEnable?: boolean) { - this.portViewNotice.iconPath = new vscode.ThemeIcon('info', new vscode.ThemeColor('foreground')); - this.portViewNotice.command = { - title: '', - command: 'gitpod.portsView.focus' - }; + constructor(private readonly context: GitpodExtensionContext, private isPortsViewExperimentEnable?: boolean) { } + + updateIsPortsViewExperimentEnable(value: boolean) { + this.isPortsViewExperimentEnable = value; + this.onDidChangeTreeDataEmitter.fire(undefined); } getTreeItem(element: GitpodWorkspaceElement): vscode.TreeItem { @@ -310,11 +308,7 @@ export class GitpodWorkspaceTreeDataProvider implements vscode.TreeDataProvider< return [this.ports]; } if (element === this.ports) { - const list: GitpodWorkspaceElement[] = [...this.ports.ports.values()]; - if (this.isPortsViewExperimentEnable) { - list.unshift(this.portViewNotice); - } - return list; + return [...this.ports.ports.values()]; } return []; } @@ -398,7 +392,7 @@ export type PortCommand = typeof PortCommands[number]; export class GitpodPortViewProvider implements vscode.WebviewViewProvider { public static readonly viewType = 'gitpod.portsView'; - public _view?: vscode.WebviewView; + private _view?: vscode.WebviewView; readonly portMap = new Map(); @@ -432,11 +426,6 @@ export class GitpodPortViewProvider implements vscode.WebviewViewProvider { const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(this.context.extensionUri, 'portsview', 'public', 'bundle.js')); const styleUri = webview.asWebviewUri(vscode.Uri.joinPath(this.context.extensionUri, 'portsview', 'public', 'bundle.css')); const nonce = getNonce(); - // return ` @@ -527,8 +516,7 @@ export function getNonce() { interface PortItem { port: GitpodWorkspacePort; isWebview?: boolean } export function registerPorts(context: GitpodExtensionContext): void { - const experimentCfg = vscode.workspace.getConfiguration('gitpod.experimental'); - const isPortsViewExperimentEnable = experimentCfg.get('portsView.enabled'); + const isPortsViewExperimentEnable = vscode.workspace.getConfiguration('gitpod.experimental.portsView').get('enabled'); const portMap = new Map(); const tunnelMap = new Map(); @@ -539,12 +527,8 @@ export function registerPorts(context: GitpodExtensionContext): void { context.subscriptions.push(treeView); // register webview - let portViewProvider: GitpodPortViewProvider | undefined; - if (isPortsViewExperimentEnable) { - vscode.commands.executeCommand('setContext', 'gitpod.portsView.visible', true); - portViewProvider = new GitpodPortViewProvider(context); - context.subscriptions.push(vscode.window.registerWebviewViewProvider(GitpodPortViewProvider.viewType, portViewProvider, { webviewOptions: { retainContextWhenHidden: true } })); - } + const portViewProvider = new GitpodPortViewProvider(context); + context.subscriptions.push(vscode.window.registerWebviewViewProvider(GitpodPortViewProvider.viewType, portViewProvider, { webviewOptions: { retainContextWhenHidden: true } })); function openExternal(port: GitpodWorkspacePort) { return vscode.env.openExternal(vscode.Uri.parse(port.localUrl)); @@ -570,7 +554,7 @@ export function registerPorts(context: GitpodExtensionContext): void { const portNumber = e.getLocalPort(); portMap.set(portNumber, new GitpodWorkspacePort(portNumber, context, e, tunnelMap.get(portNumber))); }); - portViewProvider?.updatePortsStatus(update); + portViewProvider.updatePortsStatus(update); gitpodWorkspaceTreeDataProvider.updatePortsStatus(update); }); }); @@ -607,8 +591,8 @@ export function registerPorts(context: GitpodExtensionContext): void { return false; }; if (!tryResolve()) { - const listenerWebview = portViewProvider?.onDidChangePorts(element => { - if (element === portViewProvider?.portMap && tryResolve()) { + const listenerWebview = portViewProvider.onDidChangePorts(element => { + if (element === portViewProvider.portMap && tryResolve()) { listenerWebview?.dispose(); } }); @@ -694,15 +678,13 @@ export function registerPorts(context: GitpodExtensionContext): void { portsStatusBarItem.text = text; portsStatusBarItem.tooltip = tooltip; + const isPortsViewExperimentEnable = vscode.workspace.getConfiguration('gitpod.experimental.portsView').get('enabled'); portsStatusBarItem.command = isPortsViewExperimentEnable ? 'gitpod.portsView.focus' : 'gitpod.ports.reveal'; portsStatusBarItem.show(); } updateStatusBar(); - if (isPortsViewExperimentEnable && !!portViewProvider) { - context.subscriptions.push(portViewProvider.onDidChangePorts(() => updateStatusBar())); - } else { - context.subscriptions.push(gitpodWorkspaceTreeDataProvider.onDidChangeTreeData(() => updateStatusBar())); - } + + context.subscriptions.push(portViewProvider.onDidChangePorts(() => updateStatusBar())); context.subscriptions.push(gitpodWorkspaceTreeDataProvider.onDidChangeTreeData(() => updateStatusBar())); context.subscriptions.push(vscode.commands.registerCommand('gitpod.ports.reveal', () => { @@ -745,11 +727,7 @@ export function registerPorts(context: GitpodExtensionContext): void { preserveFocus: true }); } - let provider: GitpodWorkspaceTreeDataProvider | GitpodPortViewProvider = gitpodWorkspaceTreeDataProvider; - if (isPortsViewExperimentEnable && !!portViewProvider) { - provider = portViewProvider; - } - context.subscriptions.push(provider.onDidExposeServedPort(port => { + const onDidExposeServedPortListener = (port: ExposedServedGitpodWorkspacePort) => { if (port.status.exposed.onExposed === OnPortExposedAction.IGNORE) { return; } @@ -773,7 +751,9 @@ export function registerPorts(context: GitpodExtensionContext): void { showOpenServiceNotification(port, port.status.exposed.visibility !== PortVisibility.PUBLIC); return; } - })); + }; + context.subscriptions.push(gitpodWorkspaceTreeDataProvider.onDidExposeServedPort(onDidExposeServedPortListener)); + context.subscriptions.push(portViewProvider.onDidExposeServedPort(onDidExposeServedPortListener)); let updateTunnelsTokenSource: vscode.CancellationTokenSource | undefined; async function updateTunnels(): Promise { @@ -791,7 +771,7 @@ export function registerPorts(context: GitpodExtensionContext): void { currentTunnels.forEach(tunnel => { tunnelMap.set(tunnel.remoteAddress.port, tunnel); }); - portViewProvider?.updateTunnels(tunnelMap); + portViewProvider.updateTunnels(tunnelMap); gitpodWorkspaceTreeDataProvider.updateTunnels(tunnelMap); } updateTunnels(); @@ -839,6 +819,16 @@ export function registerPorts(context: GitpodExtensionContext): void { vscode.commands.executeCommand('gitpod.api.connectLocalApp', apiPort); } })); + vscode.workspace.onDidChangeConfiguration((e: vscode.ConfigurationChangeEvent) => { + if (!e.affectsConfiguration('gitpod.experimental.portsView.enabled')) { + return; + } + const isPortsViewExperimentEnable = vscode.workspace.getConfiguration('gitpod.experimental.portsView').get('enabled'); + vscode.commands.executeCommand('setContext', 'gitpod.portsView.visible', isPortsViewExperimentEnable); + gitpodWorkspaceTreeDataProvider.updateIsPortsViewExperimentEnable(isPortsViewExperimentEnable ?? false); + updateStatusBar(); + }); + vscode.commands.executeCommand('setContext', 'gitpod.portsView.visible', isPortsViewExperimentEnable); } export function registerWelcomeWalkthroughCommands(context: GitpodExtensionContext): void {