main - added project view command

Author: damansdhillon

README.md

@@ -11,10 +11,44 @@ Allows adding updates to the projects owned by the users
 - Valid Commit account, as this is needed to get Authenticated
 - Already existing projects.
 
-## Extension Settings
+## Installing
 
-TBD
+As this extension is private, you need to install it from the VSIX file using the command line as follows:
+
+```bash
+code --install-extension commit-extension-<VERSION NUMBER>.vsix
+```
+
+## Getting Started
+
+Once the extension is installed, you need to authenticate with you Commit account. Follow the steps below to Authenticate:
+
+- Authenticate with your Commit account. You can do this by clicking on the User icon on the left side and then clicking on option `Sign in with Commit to use Commit Extension`.
+- This will show one-time code as a popup in the bottom right corner. Copy this code by click on `Copy` button.
+- Extension will prompt you to open the Commit authentication page in the browser. Click on `Open` button.
+- Paste the code in the browser and click on `Sign in` button.
+- Once the authentication is successful, close the browser tab and go back to VS Code.
+- You will see a message `Welcome <YOUR NAME> to Commit` in the bottom right corner.
+
+Follow the steps below to add an update to your project:
+
+- Press `Ctrl+Shift+P` to open the command palette.
+- Type `Commit: Add Project Update` and press `Enter`.
+- Select the project for which you want to add an update.
+- Type the update message and press `Enter`.
+- You will see a message `Update added successfully` in the bottom right corner.
 
 ## Known Issues
+Following are the known issues with the extension:
+
+- Currently the project structure is not optimized as current version is a POC.
+- There is no testing reports for the extension, thus no CI/CD jobs for that as well.
+
+## Feature Roadmap
+Following are the features that are planned to be added in the future:
+
+- Add ability to link single project to given workspace.
+- Add ability to make other updats such as adding a new project, adding a comment, etc.
+- Update Project View to replicate information from Commit Porject page.
+- Add ability to connect Github repository to the project, in order to pull information from Github repo such as code type, language, etc.
 
-TBD

package.json

@@ -10,7 +10,7 @@
   },
   "displayName": "Commit Extension",
   "description": "Allow developers to log work on Commit Projects as Latest Updates",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "engines": {
     "vscode": "^1.73.0"
   },
@@ -19,14 +19,19 @@
   ],
   "activationEvents": [
     "onStartupFinished",
-    "onCommand:commit-extension.addProjectUpdates"
+    "onCommand:commit-extension.addProjectUpdates",
+    "onCommand:commit-extension.viewProjects"
   ],
   "main": "./dist/extension.js",
   "contributes": {
     "commands": [
       {
         "command": "commit-extension.addProjectUpdates",
         "title": "Commit: Add Project Updates"
+      },
+      {
+        "command": "commit-extension.viewProjects",
+        "title": "Commit: View Projects"
       }
     ]
   },

src/extension.ts

@@ -1,22 +1,21 @@
 import {
   ApolloClient,
   createHttpLink,
+  DefaultOptions,
   InMemoryCache,
 } from "@apollo/client/core";
 import { setContext } from "@apollo/client/link/context";
+import * as fs from "fs";
 import fetch from "node-fetch";
 import * as vscode from "vscode";
 import { API, Project } from "./api";
 import { Auth0AuthenticationProvider, AUTH_TYPE } from "./auth0AuthProvider";
+import path = require("path");
 
 const COMMIT_GRAPHQL_API_URL = "https://api.commit-staging.dev/graphql";
 const COMMIT_API_BASE_URL = "https://app.commit-staging.dev/";
 
 export async function activate(context: vscode.ExtensionContext) {
-  console.log(
-    'Congratulations, your extension "Commit Extension" is now active!'
-  );
-
   const subscriptions = context.subscriptions;
 
   subscriptions.push(new Auth0AuthenticationProvider(context));
@@ -50,9 +49,22 @@ export async function activate(context: vscode.ExtensionContext) {
     };
   });
 
+  // default options for the apollo client
+  const defaultOptions: DefaultOptions = {
+    watchQuery: {
+      fetchPolicy: "no-cache",
+      errorPolicy: "ignore",
+    },
+    query: {
+      fetchPolicy: "no-cache",
+      errorPolicy: "all",
+    },
+  };
+
   const client = new ApolloClient({
     link: authLink.concat(link),
     cache: new InMemoryCache(),
+    defaultOptions,
   });
 
   const api = new API(client);
@@ -116,8 +128,73 @@ export async function activate(context: vscode.ExtensionContext) {
   );
 
   subscriptions.push(addProjectUpdateDisposable);
+
+  // Register a Webview
+  let webviewDisposable = vscode.commands.registerCommand(
+    "commit-extension.viewProjects",
+    async () => {
+      const panel = vscode.window.createWebviewPanel(
+        "commitExtension", // Identifies the type of the webview. Used internally
+        "Commit Projects", // Title
+        vscode.ViewColumn.One,
+        {
+          enableScripts: true, // Enable javascript in the webview
+        }
+      );
+
+      // Send message to webview
+      const sendMessage = (type: string, message: any) => {
+        panel.webview.postMessage({
+          command: type,
+          data: message,
+        });
+      };
+
+      // Handle messages from the webview
+      panel.webview.onDidReceiveMessage(
+        async (message) => {
+          switch (message.command) {
+            case "updateProjects":
+              try {
+                const projects = await api.getUserProjects();
+                sendMessage("projects", JSON.stringify(projects));
+
+                // Show the success message
+                vscode.window.showInformationMessage("Projects Updated");
+              } catch (error: any) {
+                vscode.window.showErrorMessage(error.message);
+              }
+              break;
+            case "showMessage":
+              vscode.window.showInformationMessage(message.data);
+              break;
+          }
+        },
+        undefined,
+        context.subscriptions
+      );
+
+      // Set the webview's content using vsocde-resource URI
+      panel.webview.html = getWebviewContent(context);
+
+      // sendMessage("update", JSON.stringify(await api.getUserProjects()));
+    }
+  );
+
+  subscriptions.push(webviewDisposable);
 }
 
+const getWebviewContent = (context: vscode.ExtensionContext) => {
+  // Read the HTML file
+  const htmlPath = vscode.Uri.file(
+    path.join(context.extensionPath, "src", "webview", "index.html")
+  );
+
+  const html = htmlPath.with({ scheme: "vscode-resource" });
+
+  return fs.readFileSync(html.fsPath, "utf8");
+};
+
 const getAuth0Sessions = async () => {
   const session = await vscode.authentication.getSession(AUTH_TYPE, [], {
     createIfNone: false,
@@ -134,5 +211,5 @@ const getAuth0Sessions = async () => {
 
 // This method is called when your extension is deactivated
 export function deactivate() {
-  console.log("Commit Extension deactivated");
+  // Remove the AUTH_TYPE session
 }

src/webview/index.html

@@ -0,0 +1,81 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="m-5">
+  <div class="">
+    <h1 class="text-3xl font-bold">
+      Your Projects
+    </h1>
+  </div>
+
+  <!-- Button to refresh projects -->
+  <div class="mt-4">
+    <btn id="update-projects" class="bg-blue-500 hover:bg-blue-700 cursor-pointer text-white font-bold py-2 px-4 rounded">
+      Refresh Projects
+    </btn>
+  </div>
+  <!-- Project List table -->
+  <div class="my-2">
+    <table id="projects-table" class="shadow-lg bg-slate-800 border-separate">
+      <thead>
+        <tr>
+          <th class="bg-blue-300 border text-left px-8 py-4">Title</th>
+          <th class="bg-blue-300 border text-left px-8 py-4">Porject ID</th>
+        </tr>
+      </thead>
+      <tbody id="projects-table-body">
+      </tbody>
+    </table>
+  </div>
+  <script>
+    // Import the API, Keyring and some utility functions
+    const vscode = acquireVsCodeApi();
+
+    // Create onload function
+    window.onload = function() {
+      vscode.postMessage({
+        command: 'updateProjects'
+      });
+    };
+
+    // Button to refresh projects
+    const updateProjects = document.getElementById('update-projects');
+    // Add onclick listener to button
+    updateProjects.addEventListener('click', () => {
+      // Send a message back to the extension
+      vscode.postMessage({
+        command: 'updateProjects'
+      });
+    });
+
+    // Handle messages sent from the extension to the webview
+    window.addEventListener('message', event => {
+      const message = event.data; // The JSON data our extension sent
+      switch (message.command) {
+        case 'projects':
+          // Update the projects list
+          const projectsElm = document.getElementById('projects-table-body');
+          projectsElm.innerHTML = '';
+
+          // Load Message JSON String data into an array
+          const projects = JSON.parse(message.data);
+          projects.forEach(project => {
+            const row = document.createElement('tr');
+            row.innerHTML = `
+              <td class="border px-8 py-4">${project.title}</td>
+              <td class="border px-8 py-4">${project.id}</td>
+            `;
+            // Add classes to the row
+            row.classList.add('hover:bg-gray-500', 'cursor-pointer');
+            projectsElm.appendChild(row);
+          });
+          break;
+      }
+    });
+  </script>
+</body>
+</html>