Merge pull request #24 from mayank1513:fix-activation

Fix-activation

CHANGELOG.md

@@ -1,5 +1,11 @@
 # trello-kanban-task-board
 
+## 0.2.0
+
+### Minor Changes
+
+- Fix activationEvents; Touched up drawer
+
 ## 0.1.2
 
 ### Patch Changes

README.md

@@ -1,6 +1,6 @@
 # Trello Kanban Board
 
-![Visual Studio Marketplace Version (including pre-releases)](https://img.shields.io/visual-studio-marketplace/v/mayank1513.trello-kanban-task-board) [![test](https://github.com/mayank1513/vscode-extension-trello-kanban-board/actions/workflows/test.yml/badge.svg)](https://github.com/mayank1513/vscode-extension-trello-kanban-board/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/ac44e4371dd3a274285e/maintainability)](https://codeclimate.com/github/mayank1513/vscode-extension-trello-kanban-board/maintainability) [![codecov](https://codecov.io/gh/mayank1513/vscode-extension-trello-kanban-board/graph/badge.svg)](https://codecov.io/gh/mayank1513/vscode-extension-trello-kanban-board) ![Visual Studio Marketplace Installs](https://img.shields.io/visual-studio-marketplace/i/mayank1513.trello-kanban-task-board)
+[![Visual Studio Marketplace Version (including pre-releases)](https://img.shields.io/visual-studio-marketplace/v/mayank1513.trello-kanban-task-board)](https://marketplace.visualstudio.com/items?itemName=mayank1513.trello-kanban-task-board) [![test](https://github.com/mayank1513/vscode-extension-trello-kanban-board/actions/workflows/test.yml/badge.svg)](https://github.com/mayank1513/vscode-extension-trello-kanban-board/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/ac44e4371dd3a274285e/maintainability)](https://codeclimate.com/github/mayank1513/vscode-extension-trello-kanban-board/maintainability) [![codecov](https://codecov.io/gh/mayank1513/vscode-extension-trello-kanban-board/graph/badge.svg)](https://codecov.io/gh/mayank1513/vscode-extension-trello-kanban-board) [![Visual Studio Marketplace Installs](https://img.shields.io/visual-studio-marketplace/i/mayank1513.trello-kanban-task-board)](https://marketplace.visualstudio.com/items?itemName=mayank1513.trello-kanban-task-board)
 
 > Organize your work/ideas with Trello like Kanban board!
 

createPackageJSON.js

@@ -66,6 +66,8 @@ const packageJSON = {
   engines: {
     vscode: "^1.75.0",
   },
+  license: "MIT",
+  categories: ["Visualization", "Notebooks", "Other"],
   repository: {
     type: "git",
     url: "https://github.com/mayank1513/vscode-extension-trello-kanban-board",
@@ -84,11 +86,11 @@ const packageJSON = {
       properties: configs,
     },
   },
-  activationEvents: scopes.map((scope) => `onWebviewPanel:${prefix}${scope}`),
+  activationEvents: ["onStartupFinished"],
   sponsor: {
     url: "https://github.com/sponsors/mayank1513",
   },
-  license: "MIT",
+  keywords: pkg.keywords,
 };
 
 fs.writeFileSync(path.resolve(process.cwd(), "dist", "package.json"), JSON.stringify(packageJSON, null, 2));

extension/index.ts

@@ -8,23 +8,23 @@ const viewButtons: Record<ScopeType, StatusBarItem | null> = {
 };
 
 export function activate(context: ExtensionContext) {
-  scopes.forEach((scope) => {
-    const command = prefix + scope;
-
-    context.subscriptions.push(commands.registerCommand(command, () => Panel.render(context, scope)));
-    window.registerWebviewPanelSerializer(command, {
-      async deserializeWebviewPanel(webviewPanel) {
-        try {
-          Panel.revive(webviewPanel, context, scope);
-        } catch (e) {
-          Panel.render(context, scope);
-        }
-      },
-    });
+  scopes.forEach((scope) => registerCommandAndPanelSerializer(context, scope));
+  scopes.forEach((scope) => createStatusBarButton(context, scope));
+  listenConfigChange(context);
+}
 
-    createStatusBarButton(context, scope);
+function registerCommandAndPanelSerializer(context: ExtensionContext, scope: ScopeType) {
+  const command = prefix + scope;
+  context.subscriptions.push(commands.registerCommand(command, () => Panel.render(context, scope)));
+  window.registerWebviewPanelSerializer(command, {
+    async deserializeWebviewPanel(webviewPanel) {
+      try {
+        Panel.revive(webviewPanel, context, scope);
+      } catch (e) {
+        Panel.render(context, scope);
+      }
+    },
   });
-  listenConfigChange(context);
 }
 
 function listenConfigChange(context: ExtensionContext) {

extension/interface.ts

@@ -1,5 +1,6 @@
+export * from "./constants";
 export interface MessageType {
-  action: "save" | "load" | "info" | "warn" | "error" | "success" | "settings";
+  action: "save" | "load" | "info" | "warn" | "error" | "success" | "settings" | "showPanel";
   data?: BoardType;
   text?: string;
 }

extension/panel.ts

@@ -117,6 +117,9 @@ export class Panel {
       case "settings":
         commands.executeCommand("workbench.action.openSettings", "mayank1513.trello-kanban-task-board");
         break;
+      case "showPanel":
+        commands.executeCommand(prefix + (scope === "Global" ? "Workspace" : "Global"));
+        break;
     }
   }
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "trello-kanban-task-board",
   "private": true,
-  "version": "0.1.2",
+  "version": "0.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite --port 3000",
@@ -26,27 +26,43 @@
     "@changesets/cli": "^2.27.1",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
-    "@types/node": "^20.10.4",
+    "@types/node": "^20.10.5",
     "@types/react": "^18.2.45",
     "@types/react-beautiful-dnd": "^13.1.7",
-    "@types/react-dom": "^18.2.17",
+    "@types/react-dom": "^18.2.18",
     "@types/vscode": "^1.85.0",
     "@types/vscode-webview": "^1.57.4",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
+    "@typescript-eslint/eslint-plugin": "^6.15.0",
+    "@typescript-eslint/parser": "^6.15.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/coverage-v8": "^1.0.4",
+    "@vitest/coverage-v8": "^1.1.0",
     "@vscode/vsce": "^2.22.0",
-    "eslint": "^8.55.0",
+    "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "jsdom": "^23.0.1",
     "octokit": "^3.1.2",
     "sass": "^1.69.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.3.3",
-    "vite": "^5.0.8",
+    "vite": "^5.0.10",
     "vite-tsconfig-paths": "^4.2.2",
-    "vitest": "^1.0.4"
-  }
+    "vitest": "^1.1.0"
+  },
+  "keywords": [
+    "project-management",
+    "productivity",
+    "agile",
+    "scrum",
+    "sprint",
+    "drag-and-drop",
+    "Global Scope",
+    "Workspace Scope",
+    "trello",
+    "kanban",
+    "board",
+    "project",
+    "management",
+    "todo-list"
+  ]
 }

src/App.test.tsx

@@ -4,6 +4,7 @@ import { afterEach, beforeEach, describe, test } from "vitest";
 import boardStyles from "./components/board.module.scss";
 import taskStyles from "./components/task/task.module.scss";
 import columnListStyles from "./components/column-list/column-list.module.scss";
+import Drawer from "components/drawer";
 
 describe("Test Board", () => {
   afterEach(cleanup);
@@ -89,4 +90,23 @@ describe("Test Board", () => {
     act(() => fireEvent.blur(inputEl));
     expect(taskEl.textContent).toContain("Task 1");
   });
+
+  test("Drawer", ({ expect }) => {
+    render(<Drawer open scope="Global" />);
+    act(() => fireEvent.click(screen.getByText("⚙")));
+    expect(screen.getByText("Settings")).toBeDefined();
+  });
+  test("Drawer -> Global", ({ expect }) => {
+    render(<Drawer open scope="Global" />);
+    const el = screen.getByText("📋 Open TKB (Workspace)");
+    expect(el).toBeDefined();
+    act(() => fireEvent.click(el));
+  });
+
+  test("Drawer -> Workspace", ({ expect }) => {
+    render(<Drawer open scope="Workspace" />);
+    const el = screen.getByText("📋 Open TKB (Global)");
+    expect(el).toBeDefined();
+    act(() => fireEvent.click(el));
+  });
 });

src/components/board.tsx

@@ -14,7 +14,6 @@ export default function Board() {
   const [open, setOpen] = useState(false);
 
   const onDragEnd = (result: DropResult) => handleDragEnd(result, state, setState);
-  const isBrowser = state.scope === "Browser";
   return (
     <DragDropContext onDragEnd={onDragEnd}>
       <div className={[styles.board, styles.dark].join(" ")}>
@@ -24,10 +23,10 @@ export default function Board() {
           <hr />
         </header>
         <main className={styles.main}>
-          <Drawer open={open} isBrowser={isBrowser} />
+          <Drawer open={open} scope={state.scope} />
           <ColumnList columns={state.columns} />
         </main>
-        {isBrowser && <BrowserOnlyUI />}
+        {state.scope === "Browser" && <BrowserOnlyUI />}
       </div>
     </DragDropContext>
   );

src/components/drawer/drawer.module.scss

@@ -15,10 +15,18 @@
     color: inherit;
     font-weight: 500;
     cursor: pointer;
+    transition: all 0.3s;
     &:hover {
       box-shadow: 0 0 5px gray;
+      letter-spacing: 1px;
+      padding: 22px 20px;
+      font-size: 1.2em;
     }
   }
+  b {
+    font-size: 1.2em;
+    padding-right: 5px;
+  }
 }
 .open {
   width: 320px;

src/components/drawer/index.tsx

@@ -1,9 +1,10 @@
 import { vscode } from "utils/vscode";
 import styles from "./drawer.module.scss";
+import { MouseEventHandler } from "react";
 
 const links = [
   {
-    text: "🌟 Rate me on VSCode Marketplace",
+    text: "🌟 Rate me on Marketplace",
     href: "https://marketplace.visualstudio.com/items?itemName=mayank1513.trello-kanban-task-board",
   },
   { text: "🌏 Web Version", href: "https://vscode-extension-trello-kanban-board.vercel.app/" },
@@ -12,29 +13,56 @@ const links = [
   { text: "🤝 Get in touch", href: "https://mayank-chaudhari.vercel.app/" },
 ];
 
-export default function Drawer({ open, isBrowser }: { open: boolean; isBrowser: boolean }) {
+export default function Drawer({ open, scope }: { open: boolean; scope: string }) {
   return (
     <aside className={[styles.drawer, open ? styles.open : ""].join(" ")}>
       <ul>
+        {scope !== "Browser" && <ExtensionOnlyUI scope={scope} />}
         {links.map(({ text, href }) => (
           <li key={href}>
             <a href={href} target="_blank">
               {text}
             </a>
           </li>
         ))}
-        {!isBrowser && (
-          <li>
-            <a
-              onClick={(e) => {
-                e.preventDefault();
-                vscode.openSettings();
-              }}>
-              ⚙ Settings
-            </a>
-          </li>
-        )}
       </ul>
     </aside>
   );
 }
+
+/** Keeping this funciton outside is Equivalent to useCallback */
+const openSettings: MouseEventHandler<HTMLAnchorElement> = (e) => {
+  e.preventDefault();
+  vscode.openSettings();
+};
+
+const showGlobalPanel: MouseEventHandler<HTMLAnchorElement> = (e) => {
+  e.preventDefault();
+  vscode.showPanel("Global");
+};
+
+const showWorkspacePanel: MouseEventHandler<HTMLAnchorElement> = (e) => {
+  e.preventDefault();
+  vscode.showPanel("Workspace");
+};
+
+function ExtensionOnlyUI({ scope }: { scope: string }) {
+  return (
+    <>
+      <li>
+        <a onClick={openSettings}>
+          <b>⚙</b> Settings
+        </a>
+      </li>
+      {scope === "Global" ? (
+        <li>
+          <a onClick={showWorkspacePanel}>📋 Open TKB (Workspace)</a>
+        </li>
+      ) : (
+        <li>
+          <a onClick={showGlobalPanel}>📋 Open TKB (Global)</a>
+        </li>
+      )}
+    </>
+  );
+}

src/utils/vscode.ts

@@ -1,5 +1,5 @@
 import type { WebviewApi } from "vscode-webview";
-import type { BoardType, MessageType } from "@/interface";
+import type { BoardType, MessageType, ScopeType } from "@/interface";
 import { defaultBoard } from "./data";
 import { toast as _toast } from "react-toastify";
 
@@ -25,6 +25,10 @@ class VSCodeAPIWrapper {
     else _toast("Open Settings", { type: "info" });
   }
 
+  public showPanel(scope: ScopeType) {
+    if (this.vsCodeApi) this._postMessage({ action: "showPanel" });
+    else _toast(`Open TKB(${scope})`, { type: "info" });
+  }
   /**
    * Get the persistent state stored for this webview.
    *