Display connections list (#120)

* Add community link and setup for treeview

* Add icon for tree view

* Add icons to groups

* List docs in activity bar

* Add prefill doc

* Add UI for selected doc

* Create docs on selected doc or input

* Revert ISDev to false

* Remove settings.json

* Add setup to refresh documents

* Add new view for connections

* Add display of connections

* Add connections list display

* Update readme and sidebar title

* Update connections on auth and logout

* Add Discord to README

server/src/routes/links.ts

@@ -12,10 +12,17 @@ linksRouter.get('/', userMiddleware, async (req, res) => {
   const { org } = res.locals.user;
   let matchQuery: any = { org: org._id };
 
-  if (req.query?.repo && req.query?.gitOrg) {
+  if (req.query?.repo) {
     matchQuery.repo = req.query.repo;
+  }
+
+  if (req.query?.gitOrg) {
     matchQuery.gitOrg = req.query.gitOrg;
   }
+
+  if (req.query?.file) {
+    matchQuery.file = req.query.file;
+  }
 
   try {
     const codes = await Code.aggregate([

vscode/README.md

@@ -1,6 +1,6 @@
-# 🌿 Document Connect
+# 🌿 Document Connector
 
-![](https://img.shields.io/github/checks-status/mintlify/mintlify/38f1d5b1fd9397e56f5da3ec2d254b09859a579f) [![Stars](https://img.shields.io/github/stars/mintlify/mintlify?style=social)](https://github.com/mintlify/mintlify) [![Twitter](https://img.shields.io/twitter/follow/mintlify?style=social)](https://twitter.com/mintlify)
+![](https://img.shields.io/github/checks-status/mintlify/mintlify/38f1d5b1fd9397e56f5da3ec2d254b09859a579f) [![discord](https://img.shields.io/discord/911693009253466123?logo=Discord&logoColor=white)](https://discord.gg/6W7GuYuxra) [![Stars](https://img.shields.io/github/stars/mintlify/mintlify?style=social)](https://github.com/mintlify/mintlify) [![Twitter](https://img.shields.io/twitter/follow/mintlify?style=social)](https://twitter.com/mintlify)
 
 Link documentation to your codebase
 

vscode/package.json

@@ -47,8 +47,12 @@
         "title": "Prefill document"
       },
       {
-        "command": "mintlify.refresh-docs",
-        "title": "Refresh documents view"
+        "command": "mintlify.hightlight-connection",
+        "title": "Highlight connection"
+      },
+      {
+        "command": "mintlify.refresh-views",
+        "title": "Refresh views"
       },
       {
         "command": "mintlify.open-doc",
@@ -77,16 +81,20 @@
           "name": "Create connection"
         },
         {
-          "id": "connections",
+          "id": "documents",
           "name": "Documents"
+        },
+        {
+          "id": "connections",
+          "name": "Connections"
         }
       ]
     },
     "viewsContainers": {
       "activitybar": [
         {
           "id": "primary",
-          "title": "Document Connect",
+          "title": "Documents",
           "icon": "assets/icon.png"
         }
       ]

vscode/src/components/viewProvider.ts

@@ -40,7 +40,7 @@ export class ViewProvider implements WebviewViewProvider {
 		this.globalState.setUserId(user.userId);
 		this._view?.webview.postMessage({ command: 'auth', args: user });
 		vscode.commands.executeCommand('mintlify.refresh-links');
-		vscode.commands.executeCommand('mintlify.refresh-docs');
+		vscode.commands.executeCommand('mintlify.refresh-views');
 	}
 
 	public prefillDocWithDocId = (docId: string) => {
@@ -56,7 +56,7 @@ export class ViewProvider implements WebviewViewProvider {
 	public logout(): void {
 		this._view?.webview.postMessage({ command: 'logout' });
 		this.globalState.clearState();
-		vscode.commands.executeCommand('mintlify.refresh-docs');
+		vscode.commands.executeCommand('mintlify.refresh-views');
 	}
 
     public resolveWebviewView(webviewView: WebviewView): void | Thenable<void> {

vscode/src/extension.ts

@@ -1,16 +1,27 @@
 import * as vscode from 'vscode';
-import { ViewProvider } from './components/viewProvider';
+import { Doc, ViewProvider } from './components/viewProvider';
 import { linkCodeCommand, linkDirCommand, refreshLinksCommand, openDocsCommand } from './components/commands';
 import { registerAuthRoute } from './components/authentication';
 import FileCodeLensProvider from './components/codeLensProvider';
 import GlobalState from './utils/globalState';
-import { ConnectionsTreeProvider } from './treeviews/connections';
+import { DocumentsTreeProvider } from './treeviews/documents';
+import { CodeReturned, ConnectionsTreeProvider } from './treeviews/connections';
 
 const createTreeViews = (state: GlobalState): void => {
+	const documentsTreeProvider = new DocumentsTreeProvider(state);
 	const connectionsTreeProvider = new ConnectionsTreeProvider(state);
+	vscode.window.createTreeView('documents', { treeDataProvider: documentsTreeProvider });
 	vscode.window.createTreeView('connections', { treeDataProvider: connectionsTreeProvider });
 
-	vscode.commands.registerCommand('mintlify.refresh-docs', () => {
+	vscode.commands.registerCommand('mintlify.refresh-views', () => {
+		documentsTreeProvider.refresh();
+		connectionsTreeProvider.refresh();
+	});
+
+	vscode.window.onDidChangeActiveTextEditor((editor) => {
+		if (editor == null) {
+			return;
+		}
 		connectionsTreeProvider.refresh();
 	});
 };
@@ -36,10 +47,22 @@ export async function activate(context: vscode.ExtensionContext) {
 		vscode.commands.executeCommand('mintlify.link-code', { editor, scheme: 'file' });
 	});
 
-	vscode.commands.registerCommand('mintlify.prefill-doc', (doc) => {
+	vscode.commands.registerCommand('mintlify.prefill-doc', (doc: Doc) => {
 		viewProvider.prefillDoc(doc);
 	});
 
+	vscode.commands.registerCommand('mintlify.highlight-connection', async (code: CodeReturned) => {
+		if (code.line != null && code.endLine != null) {
+			const rootPath = vscode.workspace.workspaceFolders![0].uri.path;
+			const filePathUri  = vscode.Uri.parse(`${rootPath}/${code.file}`);
+			const selectedRange = new vscode.Range(code.line, 0, code.endLine, 9999);
+			vscode.window.activeTextEditor?.revealRange(selectedRange);
+			await vscode.window.showTextDocument(filePathUri, {
+				selection: selectedRange,
+				preserveFocus: true,
+			});
+		}
+	});
 	createTreeViews(globalState);
 	vscode.commands.executeCommand('mintlify.refresh-links', context);
 }

vscode/src/treeviews/connections.ts

@@ -3,146 +3,86 @@ import * as path from 'path';
 import GlobalState from '../utils/globalState';
 import axios from 'axios';
 import { API_ENDPOINT } from '../utils/api';
+import { Code, getRepoInfo } from '../utils/git';
 import { Doc } from '../components/viewProvider';
 
-type Group = {
-  _id: string;
-  name: string;
-  count: number;
-  lastUpdatedDoc: Doc;
-  tasksCount: number;
-  isLoading: boolean;
-};
+export type CodeReturned = Code & { doc: Doc };
 
-export class ConnectionsTreeProvider implements vscode.TreeDataProvider<GroupOption> {
+export class ConnectionsTreeProvider implements vscode.TreeDataProvider<ConnectionIcon> {
   private state: GlobalState;
-  private _onDidChangeTreeData: vscode.EventEmitter<GroupOption | undefined | null | void> = new vscode.EventEmitter<GroupOption | undefined | null | void>();
-  readonly onDidChangeTreeData: vscode.Event<GroupOption | undefined | null | void> = this._onDidChangeTreeData.event;
+  private _onDidChangeTreeData: vscode.EventEmitter<ConnectionIcon | undefined | null | void> = new vscode.EventEmitter<ConnectionIcon | undefined | null | void>();
+  readonly onDidChangeTreeData: vscode.Event<ConnectionIcon | undefined | null | void> = this._onDidChangeTreeData.event;
 
   constructor(state: GlobalState) {
     this.state = state;
   }
 
-  getTreeItem(element: GroupOption): vscode.TreeItem {
+  getTreeItem(element: ConnectionIcon): vscode.TreeItem {
     return element;
   }
 
-  async getChildren(groupElement: GroupOption): Promise<GroupOption[]> {
+  async getChildren(): Promise<any[]> {
     const userId = this.state.getUserId();
     if (!userId) {
       return [];
     }
 
     const subdomain = this.state.getSubdomain();
 
-    if (groupElement) {
-      const { data: { docs }  } = await axios.get(`${API_ENDPOINT}/docs/method/${groupElement.group._id}`, {
-        params: {
-          userId,
-          subdomain
-        }
-      });
-      return docs.map((doc) => new DocOption(doc, vscode.TreeItemCollapsibleState.None));
+    const editor = vscode.window.activeTextEditor;
+    let gitOrg, file, repo;
+    if (editor) {
+      const fileFsPath: string = editor.document.uri.fsPath;
+      const { gitOrg: activeGitOrg, repo: activeRepo, file: activeFile } = await getRepoInfo(fileFsPath);
+      [gitOrg, file, repo] = [activeGitOrg, activeFile, activeRepo];
     }
 
-    const { data: { groups }  } = await axios.get(`${API_ENDPOINT}/docs/groups`, {
+    const { data: { codes }  } = await axios.get(`${API_ENDPOINT}/links`, {
       params: {
         userId,
-        subdomain
+        subdomain,
+        gitOrg,
+        file,
+        repo
       }
     });
 
-    // Add docs to home level when just 1 group
-    if (groups.length === 1) {
-      const group = groups[0];
-      const { data: { docs }  } = await axios.get(`${API_ENDPOINT}/docs/method/${group._id}`, {
-        params: {
-          userId,
-          subdomain
-        }
-      });
-      return docs.map((doc) => new DocOption(doc, vscode.TreeItemCollapsibleState.None));
+    if (codes.length === 0) {
+      return [new EmptyListIcon()];
     }
 
-    return [...groups.map((group) => new GroupOption(group, vscode.TreeItemCollapsibleState.Collapsed))];
+    return [...codes.map((code) => new ConnectionIcon(code))];
   }
 
   refresh(): void {
     this._onDidChangeTreeData.fire();
   }
 }
 
-class GroupOption extends vscode.TreeItem {
+class ConnectionIcon extends vscode.TreeItem {
   constructor(
-    public readonly group: Group,
-    public readonly collapsibleState: vscode.TreeItemCollapsibleState,
+    public readonly code: CodeReturned,
   ) {
-    super(group.name, collapsibleState);
-    this.tooltip = this.group.name;
-    this.description = `${this.group.count} documents`;
-    this.iconPath = getIconPathForGroup(group._id);
-  }
-}
-
-class DocOption extends vscode.TreeItem {
-  constructor(
-    public readonly doc: Doc,
-    public readonly collapsibleState: vscode.TreeItemCollapsibleState,
-  ) {
-    super(doc.title, collapsibleState);
-    this.tooltip = this.doc.title;
+    super(code.doc.title, vscode.TreeItemCollapsibleState.None);
+    this.tooltip = this.code.doc.title;
     this.iconPath = {
-      light: path.join(__filename, '..', '..', 'assets', 'icons', 'document.svg'),
-      dark: path.join(__filename, '..', '..', 'assets', 'icons', 'document-dark.svg'),
+      light: path.join(__filename, '..', '..', 'assets', 'icons', 'connect.svg'),
+      dark: path.join(__filename, '..', '..', 'assets', 'icons', 'connect-dark.svg'),
     };
 
     const onClickCommand: vscode.Command = {
-      title: 'Prefill Doc',
-      command: 'mintlify.prefill-doc',
-      arguments: [this.doc]
+      title: 'Highlight connection',
+      command: 'mintlify.highlight-connection',
+      arguments: [this.code]
     };
 
     this.command = onClickCommand;
   }
 }
 
-// TBD: Add doc option
-class AddDocOption extends vscode.TreeItem {
+class EmptyListIcon extends vscode.TreeItem {
   constructor() {
-    super('', vscode.TreeItemCollapsibleState.Collapsed);
-    this.tooltip = '';
-    this.description = 'Add new document';
+    super('No connections for this file', vscode.TreeItemCollapsibleState.None);
+    this.tooltip = 'No connections for this file';
   }
 }
-
-const getIconPathForGroup = (id: string): string | { light: string, dark: string } => {
-  switch (id) {
-    case 'github':
-      return {
-        light: path.join(__filename, '..', '..', 'assets', 'icons', 'github.svg'),
-        dark: path.join(__filename, '..', '..', 'assets', 'icons', 'github-dark.svg')
-      };
-    case 'notion-private':
-      return {
-        light: path.join(__filename, '..', '..', 'assets', 'icons', 'notion.svg'),
-        dark: path.join(__filename, '..', '..', 'assets', 'icons', 'notion-dark.svg'),
-      };
-    case 'googledocs-private':
-      return {
-        light: path.join(__filename, '..', '..', 'assets', 'icons', 'google-docs.svg'),
-        dark: path.join(__filename, '..', '..', 'assets', 'icons', 'google-docs.svg'),
-      };
-    case 'confluence-private':
-      return {
-        light: path.join(__filename, '..', '..', 'assets', 'icons', 'confluence.svg'),
-        dark: path.join(__filename, '..', '..', 'assets', 'icons', 'confluence.svg'),
-      };
-    case 'web':
-      return {
-        light: path.join(__filename, '..', '..', 'assets', 'icons', 'web.svg'),
-        dark: path.join(__filename, '..', '..', 'assets', 'icons', 'web-dark.svg'),
-      };
-    default:
-      return '';
-  }
-};