new release 2.2.2

.vscode/settings.json

@@ -7,5 +7,8 @@
         "out": true // set this to false to include "out" folder in search results
     },
     // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
-    "typescript.tsc.autoDetect": "off"
+    "typescript.tsc.autoDetect": "off",
+    "editor.codeActionsOnSave": {
+        "source.removeUnusedImports": "explicit"
+    }
 }

CHANGELOG.md

@@ -5,6 +5,16 @@ 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.2] - 2024-08-01
+
+### Added
+
+- Show spinner in status bar when switching configuration
+
+### Changed
+
+- Refactor status bar item
+
 ## [2.2.0] - 2024-02-09
 
 ### Added

src/extension.ts

@@ -1,19 +1,25 @@
 import vscode from "vscode";
 
 import { createWebViewPanel } from "./helpers";
-import {
-  APP_NAME,
-  OPEN_DASHBOARD_WEBVIEW_PANEL_COMMAND,
-  WEBVIEW_ID,
-} from "./constants";
+import { OPEN_DASHBOARD_WEBVIEW_PANEL_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();
 
+  const activeGcpConfiguration =
+    globalCache(extensionContext).getActiveGcpConfiguration();
+
+  extensionContext.subscriptions.push(
+    gcpConfigurationStatusBarItem.create({
+      configName: activeGcpConfiguration?.name,
+    })
+  );
+
   // Create and Register dashboard webview panel command
   extensionContext.subscriptions.push(
     vscode.commands.registerCommand(
@@ -25,17 +31,6 @@ export const activate = async (extensionContext: vscode.ExtensionContext) => {
     )
   );
 
-  // Create and Register dashboard webview status bar item
-  const statusBarItem = vscode.window.createStatusBarItem(
-    vscode.StatusBarAlignment.Left,
-    0
-  );
-  statusBarItem.command = OPEN_DASHBOARD_WEBVIEW_PANEL_COMMAND;
-  statusBarItem.text = `$(cloud) ${APP_NAME}`;
-  statusBarItem.tooltip = "Switch to another GCP project";
-  statusBarItem.show();
-  extensionContext.subscriptions.push(statusBarItem);
-
   // Create and Register dashboard webview provider for the activity bar
   extensionContext.subscriptions.push(
     vscode.window.registerWebviewViewProvider(WEBVIEW_ID, {

src/gcp-config-status.ts

@@ -0,0 +1,65 @@
+import vscode from "vscode";
+import { OPEN_DASHBOARD_WEBVIEW_PANEL_COMMAND } from "./constants";
+
+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 gcpConfigurationStatusBarItem: GcpConfigurationStatusBar = {
+    create: ({ configName } = {}) => {
+      state.configName = configName;
+
+      statusBarItem = vscode.window.createStatusBarItem(
+        vscode.StatusBarAlignment.Left,
+        0
+      );
+      statusBarItem.command = OPEN_DASHBOARD_WEBVIEW_PANEL_COMMAND;
+      statusBarItem.text = text();
+      statusBarItem.tooltip = tooltip();
+      gcpConfigurationStatusBarItem.show();
+      return statusBarItem;
+    },
+    show: () => {
+      statusBarItem.show();
+    },
+    update: ({ configName } = {}) => {
+      state.configName = 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();

src/global-cache.ts

@@ -47,6 +47,12 @@ const globalCache = (extensionContext: vscode.ExtensionContext) => {
       extensionContext.globalState.update(CACHE_VERSION, cache);
     },
 
+    getActiveGcpConfiguration: () => {
+      return cache["GCP_CONFIGURATIONS"].find(
+        (gcpConfig) => gcpConfig.is_active
+      );
+    },
+
     setGcpProjects: (gcpProjects: GCP_PROJECT[]) => {
       cache["GCP_PROJECTS"] = gcpProjects;
       extensionContext.globalState.update(CACHE_VERSION, cache);
@@ -97,4 +103,4 @@ const refreshGcpProjects = async (
   return gcpProjects;
 };
 
-export { globalCache, refreshGcpProjects, refreshGcpConfigurations };
+export { globalCache, refreshGcpConfigurations, refreshGcpProjects };

src/webview/dashboard/index.ts

@@ -29,6 +29,7 @@ import { configFormTemplate } from "./config-form.template";
 import { dashboardTemplate } from "./dashboard.template";
 
 import { loadingPage } from "../../components/loading-page.template";
+import { gcpConfigurationStatusBarItem } from "../../gcp-config-status";
 
 export const openADCFile = () => {
   const uri = vscode.Uri.parse(createOsAbsolutePath(ADC_FILE_PATH));
@@ -58,6 +59,7 @@ const renderDashbordWebview = (
         }
 
         webview.postMessage({ command: "start_loading" });
+        gcpConfigurationStatusBarItem.setPending();
 
         switchGcpConfig(
           extensionContext,
@@ -296,6 +298,14 @@ const refreshDashboardTemplate = async ({
   });
 
   await webview.postMessage({ command: "stop_loading" });
+  gcpConfigurationStatusBarItem.setPending(false);
+
+  const activeGcpConfiguration =
+    globalCache(extensionContext).getActiveGcpConfiguration();
+
+  gcpConfigurationStatusBarItem.update({
+    configName: activeGcpConfiguration?.name,
+  });
 };
 
 export { renderDashbordWebview };