new release 2.1.0

.gitignore

@@ -4,3 +4,4 @@ node_modules
 .vscode-test/
 *.vsix
 .env
+.DS_Store

CHANGELOG.md

@@ -5,6 +5,17 @@ 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.1.0] - 2024-01-06
+
+### Added
+
+- Add GCP config webview to activity bar & panel
+- Enhance UI responsive when using activity bar
+
+### Changed
+
+- Change GCP Switch Config LOGO
+
 ## [2.0.3] - 2024-01-05
 
 ### Fixed

README.md

@@ -1,26 +1,40 @@
-# GCP Switch Configuration
+<div align="center">
+    <img src="assets/logo-256.png" alt="gcp form" style="width:150px;" />
+</div>
 
-Simplify your Google Cloud Platform (GCP) experience with the "GCP Switch Configuration" VSCode extension.
+<div align="center">
+    <h1>GCP Switch Configuration</h1>
+</div>
 
-Seamlessly switch between different GCP configurations with just a few clicks!
+<div align="center">
 
-![image](assets/screenshots/dashboard.png)
+![Visual Studio Marketplace Last Updated](https://img.shields.io/visual-studio-marketplace/last-updated/tikou-web.gcp-switch-config?style=for-the-badge)
+![Visual Studio Marketplace Downloads](https://img.shields.io/visual-studio-marketplace/d/tikou-web.gcp-switch-config?style=for-the-badge)
+![Visual Studio Marketplace Installs](https://img.shields.io/visual-studio-marketplace/i/tikou-web.gcp-switch-config?style=for-the-badge)
+![GitHub License](https://img.shields.io/github/license/TikouWeb/gcp-switch-configuration?style=for-the-badge)
+
+</div>
 
-## Features
+### Features
 
 - **Easy Switching**: Quickly toggle between GCP configurations directly from VSCode.
+- **Manage GCP Configurations**: Add, edit and delete configurations.
 - **Convenient Access**: Use commands or a handy status bar button to open the extension's webview.
 - **User-Friendly Interface**: Intuitive webview layout for hassle-free navigation.
 
-## Installation
+### Install
 
 Go to Extensions and Search for `GCP Switch Configuration` and install.
 
 OR:
 
 Visit VScode Marketplace [GCP Switch Configuration](https://marketplace.visualstudio.com/items?itemName=tikou-web.gcp-switch-config)
 
-## Usage
+### Quickstart
+
+Simplify your Google Cloud Platform (GCP) experience with the "GCP Switch Configuration" VSCode extension. Seamlessly switch between different GCP configurations with just a few clicks!
+
+![image](assets/screenshots/dashboard.png)
 
 - **Open via Command**: `Ctrl+Shift+P` and type "GCP Switch"
 
@@ -56,7 +70,6 @@ Search for project to attach to you configuration with autocomplete input in the
 
 <img src="assets/screenshots/responsive.png" alt="gcp form" style="width:600px;" />
 
-
 Enjoy streamlined GCP project management right within VSCode!
 
 ## Feedback

assets/styles.css

@@ -63,6 +63,8 @@ body.vscode-dark {
 
 .button-base {
   display: flex;
+  line-height: 1.3;
+  align-items: center;
   padding: 10px;
   gap: 0.5rem;
   border: none;
@@ -135,6 +137,14 @@ body.vscode-dark {
   justify-content: space-between;
   align-items: center;
   gap: 1.5em;
+
+  .header-notification {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 2em;
+    flex: 1;
+  }
 }
 
 .gcp-config-card {
@@ -162,7 +172,9 @@ body.vscode-dark {
   }
 
   .gcp-config-title {
-    font-weight: bold;
+    font-size: 15px;
+    font-weight: 400;
+    line-height: 1.3;
     margin: 0;
     display: flex;
     align-items: center;
@@ -245,6 +257,7 @@ body.vscode-dark {
 
   > h2 {
     margin: 0;
+    color: var(--text-primary-color);
   }
 
   > p {
@@ -309,6 +322,7 @@ body.vscode-dark {
 
 .gcp-notification {
   position: relative;
+  display: flex;
 }
 
 .gcp-notification-spinner {
@@ -375,6 +389,10 @@ input[type="radio"]:focus {
   padding: 24px;
 }
 
+.gcp-main {
+  padding: 0 24px;
+}
+
 .gcp-configurations-container {
   width: 100%;
   display: grid;
@@ -407,6 +425,55 @@ input[type="radio"]:focus {
   animation: spin 2s linear infinite;
 }
 
+@media (max-width: 450px) {
+  .header {
+    padding: 8px 12px;
+    gap: 1rem;
+
+    .header-searchbar {
+      display: none;
+    }
+    .header-notification {
+      width: 100%;
+    }
+  }
+  .gcp-toolbar {
+    padding: 12px 12px 8px 12px;
+
+    & button {
+      padding: 6px;
+      & span {
+        display: none;
+      }
+    }
+  }
+  .gcp-main {
+    padding: 8px 12px;
+  }
+  .gcp-configurations-container {
+    gap: 0.5rem;
+  }
+  .gcp-config-card {
+    padding: 8px;
+
+    .gcp-config-info {
+      display: none;
+    }
+
+    .gcp-config-badge {
+      top: 9px;
+    }
+
+    & input[type="radio"] {
+      width: 18px;
+      height: 18px;
+    }
+    & input[type="radio"]::before {
+      font: normal normal normal 20px/1 codicon;
+    }
+  }
+}
+
 @media (min-width: 450px) {
   .gcp-configurations-container {
     grid-template-columns: repeat(1, 1fr);

package.json

@@ -2,14 +2,14 @@
   "name": "gcp-switch-config",
   "displayName": "GCP Switch Configuration",
   "description": "Switch gcp configuration with one click just like magic ✨",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "private": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/TikouWeb/gcp-switch-configuration.git"
   },
   "publisher": "tikou-web",
-  "icon": "assets/gcp-logo.png",
+  "icon": "assets/logo-256.png",
   "engines": {
     "vscode": "^1.85.0"
   },
@@ -24,10 +24,28 @@
   "contributes": {
     "commands": [
       {
-        "command": "gcp-switch-config.open-gcp-switch-config",
-        "title": "GCP Switch"
+        "command": "gcp-switch-config.open-dashboard-webview-panel",
+        "title": "GCP Switch Configuration"
       }
-    ]
+    ],
+    "viewsContainers": {
+      "activitybar": [
+        {
+          "id": "gcp-switch-config-activitybar-container-id",
+          "title": "GCP Switch Config",
+          "icon": "$(cloud)"
+        }
+      ]
+    },
+    "views": {
+      "gcp-switch-config-activitybar-container-id": [
+        {
+          "type": "webview",
+          "id": "gcp-switch-config-webview-id",
+          "name": "GCP Switch Config"
+        }
+      ]
+    }
   },
   "scripts": {
     "compile": "tsc -p ./",

src/views/components/gcp-config-card.ts → src/components/config-card.template.ts

@@ -1,4 +1,4 @@
-import { GCP_CONFIGURATION } from "../../types";
+import { GCP_CONFIGURATION } from "../types";
 
 type GcpConfigCardProps = {
   gcpConfig: GCP_CONFIGURATION;
@@ -18,7 +18,7 @@ export const gcpConfigCard = ({
             value="${gcpConfigIndex}" 
             ${gcpConfig.is_active ? "checked" : ""}
           />
-          <h3 class="gcp-config-title">
+          <h4 class="gcp-config-title">
             ${gcpConfig.name}
             <div class="gcp-config-edit-action">
               <button class="button-icon button-text"  onclick="handleEditConfigClick(${gcpConfigIndex});">
@@ -28,7 +28,7 @@ export const gcpConfigCard = ({
                 <i class='codicon codicon-trash'></i>
               </button>
             </div>
-          </h3>
+          </h4>
           <div class="gcp-config-info">
               <div class="gcp-config-info-item">
                   <small class="title">Project</small>

src/components/html-head.template.ts

@@ -0,0 +1,31 @@
+import vscode from "vscode";
+
+export const htmlHeadTemplate = (
+  extensionContext: vscode.ExtensionContext,
+  webview: vscode.Webview
+) => {
+  const codiconsUri = webview.asWebviewUri(
+    vscode.Uri.joinPath(
+      extensionContext.extensionUri,
+      "node_modules",
+      "@vscode/codicons",
+      "dist",
+      "codicon.css"
+    )
+  );
+
+  const stylesUri = webview.asWebviewUri(
+    vscode.Uri.joinPath(extensionContext.extensionUri, "assets", "styles.css")
+  );
+
+  return `
+      <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="Content-Security-Policy" font-src ${webview.cspSource}; style-src ${webview.cspSource};">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>GCP Switch Configuration</title>
+        <link href="${stylesUri}" rel="stylesheet"/>
+        <link href="${codiconsUri}" rel="stylesheet" />
+      </head>
+    `;
+};

src/views/components/gcp-loading-page.ts → src/components/loading-page.template.ts

@@ -1,17 +1,20 @@
 import vscode from "vscode";
-import { createHtmlHead } from "../../helpers";
-import { loadingSpinner } from "./loading-spinner";
+import { loadingSpinner } from "./loading-spinner.template";
+import { htmlHeadTemplate } from "./html-head.template";
 
 type LoadingPageProps = {
   extensionContext: vscode.ExtensionContext;
-  panel: vscode.WebviewPanel;
+  webview: vscode.Webview;
 };
 
-export const loadingPage = ({ extensionContext, panel }: LoadingPageProps) => {
+export const loadingPage = ({
+  extensionContext,
+  webview,
+}: LoadingPageProps) => {
   return `
           <!DOCTYPE html>
           <html lang="en">
-            ${createHtmlHead(extensionContext, panel)}
+            ${htmlHeadTemplate(extensionContext, webview)}
             <style>
                 .loading-container {
                     display: flex;

src/views/components/gcp-topbar.ts → src/components/topbar.template.ts

@@ -1,4 +1,4 @@
-import { GCP_CONFIGURATION } from "../../types";
+import { GCP_CONFIGURATION } from "../types";
 
 export const gcpTopbar = (gcpConfigurations: GCP_CONFIGURATION[]) => {
   const gcpActiveConfig = gcpConfigurations.find(
@@ -13,20 +13,20 @@ export const gcpTopbar = (gcpConfigurations: GCP_CONFIGURATION[]) => {
                 <h2>${gcpActiveConfig?.name}</h2>
             </div>
             </div>
-            <div style="flex: 1;">
+            <div class="header-searchbar" style="flex: 1;">
                 <input class="search-input" id="search-input" autocomplete="off" type="search" spellcheck="false" aria-label="Search for configurations" placeholder="Search for configurations">
             </div>
-            <div style="display: flex; justify-content: flex-end; align-items: center; gap: 2em; flex: 1;">
-            <div class="gcp-notification">
-                <i class='codicon codicon-bell' style="font-size: 24px;"></i>
-                <div class="gcp-notification-spinner"></div>
-            </div>
-            <div class="gcp-current-adc">
-                <i class='codicon codicon-key'></i>
-                <a href="#" onclick="handleADCJsonClick()">
-                ADC.json
-                </a>
-            </div>
+            <div class="header-notification">
+                <div class="gcp-notification">
+                    <i class='codicon codicon-bell' style="font-size: 24px;"></i>
+                    <div class="gcp-notification-spinner"></div>
+                </div>
+                <div class="gcp-current-adc">
+                    <i class='codicon codicon-key'></i>
+                    <a href="#" onclick="handleADCJsonClick()">
+                    ADC.json
+                    </a>
+                </div>
             </div>
         </div>
     `;

src/constants.ts

@@ -1,5 +1,10 @@
 export const APP_NAME = "gcp-switch-config";
-export const GCP_SWITCH_COMMAND = `${APP_NAME}.open-gcp-switch-config`;
+
+// `GCP_SWITCH_COMMAND` 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 WEBVIEW_ID = `${APP_NAME}-webview-id`;
 
 export const ADC_FILE_PATH =
   ".config/gcloud/application_default_credentials.json";