Skip to content

Commit

Permalink
realease 2.2.4
Browse files Browse the repository at this point in the history
  • Loading branch information
TikouWeb committed Aug 5, 2024
1 parent d581978 commit e0ccde2
Show file tree
Hide file tree
Showing 13 changed files with 561 additions and 451 deletions.
8 changes: 8 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,14 @@ All notable changes to the "gcp-switch-configuration" extension will be document
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [2.2.4] - 2024-08-03

### Added

- Sync content between diffrent views
- Add refresh button on activity bar
- Refacto webview manager

## [2.2.3] - 2024-08-01

### Fixed
Expand Down
18 changes: 16 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "gcp-switch-config",
"displayName": "GCP Switch Configuration",
"description": "Switch gcp configuration with one click just like magic ✨",
"version": "2.2.3",
"version": "2.2.4",
"private": false,
"repository": {
"type": "git",
Expand All @@ -25,9 +25,23 @@
"commands": [
{
"command": "gcp-switch-config.open-dashboard-webview-panel",
"title": "GCP Switch Configuration"
"title": "gcp switch config: open dashboard",
"icon": "$(cloud)"
},
{
"command": "gcp-switch-config.refresh-dashboard-webview",
"title": "gcp switch: Refresh",
"icon": "$(refresh)"
}
],
"menus": {
"view/title": [
{
"command": "gcp-switch-config.refresh-dashboard-webview",
"group": "navigation"
}
]
},
"viewsContainers": {
"activitybar": [
{
Expand Down
6 changes: 3 additions & 3 deletions src/components/html-head.template.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import vscode from "vscode";

export const htmlHeadTemplate = (
extensionContext: vscode.ExtensionContext,
context: vscode.ExtensionContext,
webview: vscode.Webview
) => {
const codiconsUri = webview.asWebviewUri(
vscode.Uri.joinPath(
extensionContext.extensionUri,
context.extensionUri,
"node_modules",
"@vscode/codicons",
"dist",
Expand All @@ -15,7 +15,7 @@ export const htmlHeadTemplate = (
);

const stylesUri = webview.asWebviewUri(
vscode.Uri.joinPath(extensionContext.extensionUri, "assets", "styles.css")
vscode.Uri.joinPath(context.extensionUri, "assets", "styles.css")
);

return `
Expand Down
9 changes: 3 additions & 6 deletions src/components/loading-page.template.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,15 @@ import { loadingSpinner } from "./loading-spinner.template";
import { htmlHeadTemplate } from "./html-head.template";

type LoadingPageProps = {
extensionContext: vscode.ExtensionContext;
context: vscode.ExtensionContext;
webview: vscode.Webview;
};

export const loadingPage = ({
extensionContext,
webview,
}: LoadingPageProps) => {
export const loadingPage = ({ context, webview }: LoadingPageProps) => {
return `
<!DOCTYPE html>
<html lang="en">
${htmlHeadTemplate(extensionContext, webview)}
${htmlHeadTemplate(context, webview)}
<style>
.loading-container {
display: flex;
Expand Down
7 changes: 4 additions & 3 deletions src/constants.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
export const APP_NAME = "gcp-switch-config";

// `GCP_SWITCH_COMMAND` should be the same in package.json
// --------------------------------------------
// this commands should be the same in package.json
export const OPEN_DASHBOARD_WEBVIEW_PANEL_COMMAND = `${APP_NAME}.open-dashboard-webview-panel`;

// `webviewId` should be the same in package.json
export const REFRESH_DASHBOARD_WEBVIEW_COMMAND = `${APP_NAME}.refresh-dashboard-webview`;
export const WEBVIEW_ID = `${APP_NAME}-webview-id`;
// --------------------------------------------

export const ADC_FILE_PATH =
".config/gcloud/application_default_credentials.json";
Expand Down
69 changes: 42 additions & 27 deletions src/extension.ts
Original file line number Diff line number Diff line change
@@ -1,52 +1,67 @@
import vscode from "vscode";

import { createWebViewPanel } from "./helpers";
import { OPEN_DASHBOARD_WEBVIEW_PANEL_COMMAND, WEBVIEW_ID } from "./constants";
import {
OPEN_DASHBOARD_WEBVIEW_PANEL_COMMAND,
REFRESH_DASHBOARD_WEBVIEW_COMMAND,
WEBVIEW_ID,
} from "./constants";

import { globalCache, refreshGcpConfigurations } from "./global-cache";
import { renderDashbordWebview } from "./webview/dashboard";
import { gcpConfigurationStatusBarItem } from "./gcp-config-status";

export const activate = async (extensionContext: vscode.ExtensionContext) => {
await refreshGcpConfigurations(extensionContext);
globalCache(extensionContext).clearUnusedCache();
import { GcpConfigStatusBarItemManager } from "./gcp-config-status";
import { WebviewManager } from "./webview/webview-manager";

const activeGcpConfiguration =
globalCache(extensionContext).getActiveGcpConfiguration();
export const activate = async (context: vscode.ExtensionContext) => {
/**
* Refresh gcp configurations and clear unused cache
* This is necessary to keep the gcp configurations in sync
* with the global cache .
*/
await refreshGcpConfigurations(context);
globalCache(context).clearUnusedCache();

extensionContext.subscriptions.push(
gcpConfigurationStatusBarItem.create({
configName: activeGcpConfiguration?.name,
})
);
/**
* Initialize and set up the GcpConfigStatusBarItemManager instance.
* This will create a status bar item and associate it with the provided context.
* The status bar item will display the active gcp configuration name.
* The status bar item will be disposed when the context is disposed.
*/
GcpConfigStatusBarItemManager.getInstance(context).initialize();

const webviewManager = new WebviewManager(context);

// Create and Register dashboard webview panel command
extensionContext.subscriptions.push(
context.subscriptions.push(
vscode.commands.registerCommand(
OPEN_DASHBOARD_WEBVIEW_PANEL_COMMAND,
() => {
const dashboardPanel = createWebViewPanel(extensionContext);
return renderDashbordWebview(extensionContext, dashboardPanel.webview);
const dashboardPanel = createWebViewPanel(context);
webviewManager.setPanelView(dashboardPanel);
}
)
);

// Create and Register dashboard webview provider for the activity bar
extensionContext.subscriptions.push(
context.subscriptions.push(
vscode.window.registerWebviewViewProvider(WEBVIEW_ID, {
resolveWebviewView(webviewView: vscode.WebviewView) {
renderDashbordWebview(extensionContext, webviewView.webview);
webviewView.webview.options = {
enableScripts: true,
enableCommandUris: true,
localResourceRoots: [
vscode.Uri.joinPath(extensionContext.extensionUri, "assets"),
vscode.Uri.joinPath(extensionContext.extensionUri, "node_modules"),
],
};
webviewManager.setActivityBarView(webviewView);
},
})
);

context.subscriptions.push(
vscode.commands.registerCommand(REFRESH_DASHBOARD_WEBVIEW_COMMAND, () => {
webviewManager.updateWebviews();
})
);
};

export const deactivate = async () => {};
export const deactivate = async () => {
// Dispose the GcpConfigStatusBarItemManager instance
// This will dispose the status bar item associated with the instance.
GcpConfigStatusBarItemManager.getInstance(
undefined as unknown as vscode.ExtensionContext
).dispose();
};
171 changes: 106 additions & 65 deletions src/gcp-config-status.ts
Original file line number Diff line number Diff line change
@@ -1,68 +1,109 @@
import vscode from "vscode";
import * as vscode from "vscode";
import { OPEN_DASHBOARD_WEBVIEW_PANEL_COMMAND } from "./constants";
import { globalCache } from "./global-cache";

type State = {
configName?: string;
};

type GcpConfigurationStatusBar = {
create: ({ configName }?: State) => vscode.StatusBarItem;
update: ({ configName }?: State) => void;
show: () => void;
hide: () => void;
setPending: (pending?: boolean) => void;
};

const gcpConfigurationStatusBarManager = () => {
let statusBarItem: vscode.StatusBarItem;
const state: State = {
configName: "",
};

const text = () => `$(cloud) | $(check)${state.configName?.slice(0, 15)}`;
const tooltip = () => `Open GCP Config Switch \n Active: ${state.configName}`;
const pendingText = () => `$(cloud) | $(sync~spin) Switching...`;
const updateConfigName = (configName: State["configName"] = "") => {
state.configName = configName ?? "";
};

const gcpConfigurationStatusBarItem: GcpConfigurationStatusBar = {
create: ({ configName } = state) => {
updateConfigName(configName);

statusBarItem = vscode.window.createStatusBarItem(
vscode.StatusBarAlignment.Left,
0
interface GcpStatusBarConfig {
configName: string;
command: string;
alignment: vscode.StatusBarAlignment;
priority: number;
}

export class GcpConfigStatusBarItemManager {
private static instance: GcpConfigStatusBarItemManager;
private statusBarItem: vscode.StatusBarItem | null = null;
private config: GcpStatusBarConfig;

private constructor(private context: vscode.ExtensionContext) {
this.config = {
configName: "",
command: OPEN_DASHBOARD_WEBVIEW_PANEL_COMMAND,
alignment: vscode.StatusBarAlignment.Left,
priority: 0,
};
}

// only one instance of GcpStatusBarManager is allowed to exist
static getInstance(
context: vscode.ExtensionContext
): GcpConfigStatusBarItemManager {
if (!GcpConfigStatusBarItemManager.instance) {
GcpConfigStatusBarItemManager.instance =
new GcpConfigStatusBarItemManager(context);
}
return GcpConfigStatusBarItemManager.instance;
}

initialize(config: Partial<GcpStatusBarConfig> = {}): void {
const activeGcpConfiguration = globalCache(
this.context
).getActiveGcpConfiguration();

this.config = {
...this.config,
...config,
configName: activeGcpConfiguration?.name || "No gcp active config",
};

this.statusBarItem = vscode.window.createStatusBarItem(
this.config.alignment,
this.config.priority
);
this.statusBarItem.command = this.config.command;
this.statusBarItem.show();

this.updateStatusBarItem({ configName: this.config.configName });

this.context.subscriptions.push(this.statusBarItem);
}

updateStatusBarItem(config: Partial<GcpStatusBarConfig>): void {
this.ensureStatusBarItemExists();
this.config = { ...this.config, ...config };
this.statusBarItem!.text = this.getText();
this.statusBarItem!.tooltip = this.getTooltip();
}

showStatusBarItem(): void {
this.ensureStatusBarItemExists();
this.statusBarItem!.show();
}

hideStatusBarItem(): void {
this.ensureStatusBarItemExists();
this.statusBarItem!.hide();
}

setPendingState(isPending: boolean): void {
this.ensureStatusBarItemExists();
this.statusBarItem!.text = isPending
? this.getPendingText()
: this.getText();
}

dispose(): void {
if (this.statusBarItem) {
GcpConfigStatusBarItemManager.instance.dispose();
}
}

private getText(): string {
return `$(cloud) | $(check)${this.config.configName.slice(0, 25)}`;
}

private getTooltip(): string {
return `Open dashboard \n Active config: ${this.config.configName}`;
}

private getPendingText(): string {
return `$(cloud) | $(sync~spin) Switching...`;
}

private ensureStatusBarItemExists(): void {
if (!this.statusBarItem) {
throw new Error(
"Status bar item has not been created. Call createStatusBarItem first."
);
statusBarItem.command = OPEN_DASHBOARD_WEBVIEW_PANEL_COMMAND;
statusBarItem.text = text();
statusBarItem.tooltip = tooltip();
gcpConfigurationStatusBarItem.show();
return statusBarItem;
},
show: () => {
statusBarItem.show();
},
update: ({ configName } = state) => {
updateConfigName(configName);

statusBarItem.text = text();
statusBarItem.tooltip = tooltip();
},
hide: () => {
statusBarItem.hide();
},
setPending: (pending = true) => {
if (pending) {
statusBarItem.text = pendingText();
return;
}

statusBarItem.text = text();
},
};

return gcpConfigurationStatusBarItem;
};

export const gcpConfigurationStatusBarItem = gcpConfigurationStatusBarManager();
}
}
}
Loading

0 comments on commit e0ccde2

Please sign in to comment.