updated webview to include git commit history

Author: damansdhillon

src/authProviders/auth0AuthProvider.ts

@@ -75,7 +75,7 @@ export class Auth0AuthenticationProvider extends AuthProvider {
         id: "commit-" + uuid(),
         accessToken: accessToken,
         account: {
-          label: userInfo.name,
+          label: `${userInfo.name} <${userInfo.email}>`,
           id: userInfo.id,
         },
         scopes: scopes,

src/commands/commit/shareProjectUpdate.ts

@@ -1,5 +1,5 @@
 import * as vscode from "vscode";
-import { API } from "../../@types/git";
+import { API, Commit } from "../../@types/git";
 import { CommitAPI } from "../../commitAPI";
 import { getWebviewContent } from "../../utils";
 
@@ -24,6 +24,11 @@ const shareProjectUpdate = (context: vscode.ExtensionContext) => {
         return;
       }
 
+      if (!projects) {
+        vscode.window.showInformationMessage("No projects found");
+        return;
+      }
+
       // Get default project
       const defaultProject: Project | undefined =
         context.workspaceState.get("defaultProject");
@@ -38,11 +43,6 @@ const shareProjectUpdate = (context: vscode.ExtensionContext) => {
         }
       }
 
-      if (!projects) {
-        vscode.window.showInformationMessage("No projects found");
-        return;
-      }
-
       // Show list of projects and get the selection
       let selectedProjectTitle = await vscode.window.showQuickPick(
         projects.map((project: Project) => {
@@ -72,71 +72,43 @@ const shareProjectUpdate = (context: vscode.ExtensionContext) => {
         vscode.window.showErrorMessage("Project not found");
         return;
       }
-
-      // Prompt user if they want multiline or single line update
-      const isMultilineUpdate = await vscode.window.showQuickPick(
-        ["Yes", "No"],
+      // Create a WebView Panel
+      const shareProjectUpdatePanel = vscode.window.createWebviewPanel(
+        "commitExtension",
+        "Share Project Update",
+        vscode.ViewColumn.One,
         {
-          placeHolder: "Do you want to add a multiline update?",
+          enableScripts: true,
         }
       );
 
-      if (isMultilineUpdate === "No" || isMultilineUpdate === undefined) {
-        // Open TextInput dialog
-        vscode.window
-          .showInputBox({
-            prompt: "Enter the project update",
-            placeHolder: "Implementing new feature ...",
-            value: await getCommitMessage(context),
-          })
-          .then((value) => {
-            if (value) {
-              try {
-                commitAPI.addProjectUpdate(selectedProject!.id, value);
-
-                vscode.window.showInformationMessage(
-                  "Project update successfully added"
-                );
-              } catch (e) {
-                // Show the error message
-                vscode.window.showErrorMessage("Unable to add project update");
-              }
-            }
-          });
-      } else {
-        // Create a WebView Panel
-        const shareProjectUpdatePanel = vscode.window.createWebviewPanel(
-          "commitExtension",
-          "Share Project Update",
-          vscode.ViewColumn.One,
-          {
-            enableScripts: true,
-          }
-        );
+      // Get git commits
+      const repositoryCommits: Commit[] | undefined = await getGitCommits(
+        context
+      );
 
-        // Send Project ID to the WebView
-        shareProjectUpdatePanel.webview.postMessage({
-          command: "setWebViewProject",
-          data: JSON.stringify({
-            projectId: selectedProject.id,
-            lastCommitMessage: await getCommitMessage(context),
-          }),
-        });
-
-        shareProjectUpdatePanel.webview.onDidReceiveMessage(
-          async (message: any) => {
-            await processWebviewMessage(message, context);
-
-            // Close the WebView Panel
-            shareProjectUpdatePanel.dispose();
-          },
-          undefined,
-          context.subscriptions
-        );
+      // Send Project ID to the WebView3
+      shareProjectUpdatePanel.webview.postMessage({
+        command: "setWebViewProject",
+        data: JSON.stringify({
+          projectId: selectedProject.id,
+          repositoryCommits: repositoryCommits || [],
+        }),
+      });
 
-        // Add HTML to the WebView
-        shareProjectUpdatePanel.webview.html = getWebviewContent(context);
-      }
+      shareProjectUpdatePanel.webview.onDidReceiveMessage(
+        async (message: any) => {
+          await processWebviewMessage(message, context);
+
+          // Close the WebView Panel
+          shareProjectUpdatePanel.dispose();
+        },
+        undefined,
+        context.subscriptions
+      );
+
+      // Add HTML to the WebView
+      shareProjectUpdatePanel.webview.html = getWebviewContent(context);
     },
   };
 };
@@ -151,7 +123,6 @@ const processWebviewMessage = async (
     case "submitUpdate":
       const projectId = data.projectId;
       const udpateContent = `${data.updateContent}`;
-      console.log(projectId, udpateContent);
       const commitAPI = context.workspaceState.get("commitAPI") as CommitAPI;
       try {
         await commitAPI.addProjectUpdate(projectId, udpateContent);
@@ -167,33 +138,34 @@ const processWebviewMessage = async (
   }
 };
 
-const getCommitMessage = async (context: vscode.ExtensionContext) => {
+const getGitCommits: (
+  context: vscode.ExtensionContext
+) => Promise<Commit[] | undefined> = async (
+  context: vscode.ExtensionContext,
+  maxEntries: number = 10
+) => {
   const gitAPI = context.workspaceState.get<API>("gitAPI");
+
   if (!gitAPI) {
-    return;
+    return [];
   }
 
-  // Get workspace folder
+  // Get Worspace folder
   const workspaceFolders = vscode.workspace.workspaceFolders;
-  if (!workspaceFolders) {
-    return;
-  }
 
-  // Get root path
-  const rootPath = workspaceFolders[0].uri.fsPath;
-
-  // Get repository
-  const repository = gitAPI.repositories.find(
-    (repo) => repo.rootUri.fsPath === rootPath
-  );
-
-  if (!repository) {
-    return;
+  if (!workspaceFolders || workspaceFolders.length === 0) {
+    return [];
   }
 
-  // Get commit message
-  const commit = await repository.getCommit("HEAD");
-  return commit?.message || "";
+  // Get the respository in the first workspace folder
+  // TODO: At this point this will always pick the the first workspace folder
+  // TODO: Add support for multiple workspace folders
+  const workspaceFolder = workspaceFolders[0];
+  const repository = gitAPI.getRepository(workspaceFolder.uri);
+
+  return await repository?.log({
+    maxEntries,
+  });
 };
 
 export default shareProjectUpdate;

src/commitAPI.ts

@@ -230,6 +230,8 @@ export class CommitAPI {
     // TODO: Get worktree changes and suggest to add update to Commit Project
     const worktreeChanges = repository?.state.workingTreeChanges;
 
+    const repositoryLogs = await repository?.log({ maxEntries: 10 });
+
     if (!worktreeChanges?.length) {
       return;
     }

static/webview/index.html

@@ -6,36 +6,86 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!-- Add bootstrap stylesheet -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
+    <style>
+        body.vscode-light {
+            color: black;
+        }
+        
+        body.vscode-dark {
+            color: white;
+        }
+        
+        body.vscode-high-contrast {
+            color: red;
+        }
+        
+        td,
+        th {
+            padding: 0.5rem;
+        }
+        
+        .my-custom-scrollbar {
+            position: relative;
+            height: 200px;
+            overflow: auto;
+        }
+        
+        .table-wrapper-scroll-y {
+            display: block;
+        }
+    </style>
 </head>
 
-<body class="container bg-transparent text-white">
-    <h1 class="d-flex justify-content-center py-2">Add Update Project</h1>
-    <p class="d-flex justify-content-center fst-italic">Update field is pre populated with last commit message from local git history</p>
-    <!-- Markdown Editor and Preview -->
-    <div class="d-flex justify-content-between">
-        <textarea class="px-2 py-1 rounded" style="width: 47%" id="update-input" rows="20"></textarea>
-        <p class="px-2 py-1 rounded bg-light h-auto m-0 overflow-auto text-black" style="width: 47%" id="update-preview"></p>
-    </div>
-
-    <!-- Button to refresh projects -->
-    <div class="d-flex justify-content-center w-100 pt-4">
-        <button type="button" class="btn btn-primary" id="submit-update" onclick="handleSubmitUpdateClick()">
-        Submit Update
-      </button>
+<body style="background-color: var(--vscode-editor-background);">
+    <div class="container">
+        <div class="d-flex flex-column justify-content-center align-items-center">
+            <h1 class="fs-2">Add Project Updates</h1>
+            <p class="fs-6 fst-italic text-muted">Previous git commits can be a good reference point</p>
+        </div>
+        <div class="table-wrapper-scroll-y my-custom-scrollbar">
+            <table class="table" style="max-height: 100px; overflow-y: scroll; color: var(--vscode-editor-);">
+                <thead>
+                    <tr>
+                        <th scope="col">Author</th>
+                        <th scope="col">Message</th>
+                        <th scope="col">Date</th>
+                        <th scope="col">Hash</th>
+                    </tr>
+                </thead>
+                <tbody id="commit-table-body" class="table-striped">
+                </tbody>
+            </table>
+        </div>
+        <hr class="hr" />
+        <div class="d-flex justify-content-evenly gap-4" style="height: 300px;">
+            <div class="d-flex flex-column w-100 m-0">
+                <p class="text-muted m-0">Enter Update</p>
+                <textarea class="px-2 py-1 rounded" id="update-input" rows="12"></textarea>
+            </div>
+            <div class="d-flex flex-column w-100 m-0">
+                <p class="text-muted m-0">Preview (Markdown Supported)</p>
+                <div class="px-2 py-1 rounded h-100 bg-white m-0 text-black overflow-scroll" style="background-color: var(--vscode-editor-);" id="update-preview"></div>
+            </div>
+        </div>
+        <div class="d-flex justify-content-center w-100 pt-4">
+            <button type="button" class="btn btn-primary" id="submit-update" onclick="handleSubmitUpdateClick()">
+                Submit Update
+            </button>
+        </div>
     </div>
     <script src=" https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.min.js "></script>
     <script>
         // Import the API, Keyring and some utility functions
         const vscode = acquireVsCodeApi();
         var converter = new showdown.Converter();
         let projectId = "";
-        let lastCommitMessage = "";
+        let repositoryCommits = [];
 
         window.onload = () => {
             console.log("Loading")
-                // Set the value of the input field
             const updateInput = document.getElementById("update-input");
-            updateInput.value = lastCommitMessage;
+            const updatePreview = document.getElementById("update-preview");
+
             // Get focus on the input field
             document.getElementById("update-input").focus();
         };
@@ -75,6 +125,36 @@ <h1 class="d-flex justify-content-center py-2">Add Update Project</h1>
             });
         };
 
+        const populatedCommitTable = () => {
+            const tableBody = document.getElementById("commit-table-body");
+            tableBody.innerHTML = "";
+            repositoryCommits.forEach((commit) => {
+                const row = document.createElement("tr");
+                const author = document.createElement("td");
+                const message = document.createElement("td");
+                const date = document.createElement("td");
+                const hash = document.createElement("td");
+
+                // Convert Date to string with format "Wed, 21 Oct 2015 07:28:00 GMT"
+                commit.commitDate = new Date(commit.commitDate).toUTCString();
+
+                // Get shorter hash
+                commit.hash = commit.hash.substring(0, 7);
+
+                author.innerHTML = commit.authorEmail;
+                message.innerHTML = commit.message;
+                date.innerHTML = commit.commitDate;
+                hash.innerHTML = commit.hash;
+
+                row.appendChild(author);
+                row.appendChild(message);
+                row.appendChild(date);
+                row.appendChild(hash);
+
+                tableBody.appendChild(row);
+            });
+        }
+
         // Handle message posted from the extension
         window.addEventListener("message", (event) => {
             const eventData = event.data;
@@ -85,11 +165,10 @@ <h1 class="d-flex justify-content-center py-2">Add Update Project</h1>
                 case "setWebViewProject":
                     // Update the project id
                     const parsedData = JSON.parse(data);
+                    console.log(parsedData);
                     projectId = parsedData.projectId;
-                    lastCommitMessage = parsedData.lastCommitMessage;
-                    // Set the value of the input field
-                    const updateInput = document.getElementById("update-input");
-                    updateInput.value = lastCommitMessage;
+                    repositoryCommits = parsedData.repositoryCommits || [];
+                    populatedCommitTable();
                     break;
                 default:
                     break;