Adding DRB inside DVDT

package.json

@@ -344,6 +344,11 @@
                 "command": "dvdt.commands.createTSFile",
                 "title": "Add Dataverse TS File",
                 "category": "%dvdt.commands.category%"
+            },
+            {
+                "command": "dvdt.commands.openDRB",
+                "title": "Open Dataverse REST Builder",
+                "category": "%dvdt.commands.category%"
             }
         ],
         "keybindings": [

resources/views/drb.html

@@ -0,0 +1,9 @@
+<div id="main_body"></div>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GuidoPreite/DRB@main/css/drb_requirements.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GuidoPreite/DRB@main/css/drb_custom.css" />
+<script src="https://cdn.jsdelivr.net/gh/GuidoPreite/DRB@main/js/drb_requirements.js" type="text/javascript" charset="utf-8"></script>
+<script src="https://cdn.jsdelivr.net/gh/GuidoPreite/DRB@main/js/drb_custom.js" type="text/javascript" charset="utf-8"></script>
+<script>
+    DRB.InsertMainBodyContent();
+    DRB.Initialize();
+</script>

resources/views/js/base.js

@@ -1,6 +1,6 @@
 const vscode = acquireVsCodeApi();
 
-var $table = $("#matchTable");
+var $matchTable = $("#matchTable");
 
 $(document).ready(function () {
     $("#attrSearch").on("keyup", function () {
@@ -9,10 +9,12 @@ $(document).ready(function () {
             $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
         });
     });
-    $table.bootstrapTable();
-    $table.bootstrapTable("refreshOptions", {
-        classes: "table table-bordered",
-    });
+    if ($matchTable && $matchTable.bootstrapTable) {
+        $matchTable.bootstrapTable();
+        $matchTable.bootstrapTable("refreshOptions", {
+            classes: "table table-bordered",
+        });
+    }
 });
 
 document.addEventListener("DOMContentLoaded", function () {

src/commands/registerCommands.ts

@@ -13,6 +13,7 @@ import { ViewBase } from "../views/ViewBase";
 import { addConnection } from "./connections";
 import { openUri } from "../utils/OpenUri";
 import { ErrorHandler } from "../helpers/errorHandler";
+import { DRBHelper } from "../helpers/drbHelper";
 import { WebResourcesTreeItem } from "../trees/webResourcesDataProvider";
 
 let dvStatusBarItem: vscode.StatusBarItem;
@@ -24,6 +25,7 @@ export async function registerCommands(vscontext: vscode.ExtensionContext, tr: T
     const templateHelper = new TemplateHelper(vscontext);
     const wrHelper = new WebResourceHelper(vscontext, dvHelper);
     const typingHelper = new TypingsHelper(vscontext, dvHelper);
+    const drbHelper = new DRBHelper(vscontext);
     const errorHandler = new ErrorHandler(tr);
 
     dvStatusBarItem = vscode.window.createStatusBarItem(connectionStatusBarUniqueId, vscode.StatusBarAlignment.Left);
@@ -165,6 +167,16 @@ export async function registerCommands(vscontext: vscode.ExtensionContext, tr: T
                 }
             },
         },
+        {
+            command: "dvdt.commands.openDRB",
+            callback: async () => {
+                try {
+                    drbHelper.openDRB(views);
+                } catch (error) {
+                    errorHandler.log(error, "openDRB");
+                }
+            },
+        },
         {
             command: "dvdt.explorer.webresources.linkExistingWebResource",
             callback: async (uri: vscode.Uri) => {

src/helpers/drbHelper.ts

@@ -0,0 +1,28 @@
+import * as vscode from "vscode";
+import { connectionCurrentStoreKey } from "../utils/Constants";
+import { ErrorMessages } from "../utils/ErrorMessages";
+import { IConnection } from "../utils/Interfaces";
+import { State } from "../utils/State";
+import { DataverseRestBuilderView } from "../views/DataverseRestBuilderView";
+import { ViewBase } from "../views/ViewBase";
+
+export class DRBHelper {
+    private vsstate: State;
+
+    /**
+     * Initialization constructor for VS Code Context
+     */
+    constructor(private vscontext: vscode.ExtensionContext) {
+        this.vsstate = new State(vscontext);
+    }
+
+    public async openDRB(view: ViewBase): Promise<void> {
+        const connFromWS: IConnection = this.vsstate.getFromWorkspace(connectionCurrentStoreKey);
+        if (connFromWS && connFromWS.currentAccessToken) {
+            const webview = await view.getWebView({ type: "openDRB", title: "Dataverse REST Builder" });
+            new DataverseRestBuilderView(webview, this.vscontext, connFromWS.currentAccessToken);
+        } else {
+            vscode.window.showErrorMessage(ErrorMessages.drbConnectionError);
+        }
+    }
+}

src/utils/ErrorMessages.ts

@@ -11,4 +11,5 @@ export class ErrorMessages {
     public static tsFileNameRequired: string = "TypeScript filename is required.";
     public static tsNamespaceRequired: string = "Namespace for Webpack is required.";
     public static wrCompareError: string = "The selected file is either not linked to a web resources or it does not exists in Dataverse.";
+    public static drbConnectionError: string = "Connect to an environment before trying to load Dataverse REST Builder.";
 }

src/utils/Interfaces.ts

@@ -149,6 +149,8 @@ export interface IPanel {
     panel: vscode.WebviewPanel;
     extensionUri: vscode.Uri;
     webViewFileName: string;
+    excludeExternalCss?: boolean;
+    excludeExternalJs?: boolean;
 }
 
 export interface IViewOption {

src/views/DataverseRestBuilderView.ts

@@ -0,0 +1,33 @@
+import * as vscode from "vscode";
+import * as path from "path";
+import { IConnection } from "../utils/Interfaces";
+import { Panel } from "./PanelBase";
+import { readFileSync } from "../utils/FileSystem";
+import _ = require("lodash");
+import { connectionCurrentStoreKey } from "../utils/Constants";
+import { State } from "../utils/State";
+
+export class DataverseRestBuilderView extends Panel {
+    constructor(webviewPanel: vscode.WebviewPanel, vscontext: vscode.ExtensionContext, currentAccessToken: string) {
+        super({ panel: webviewPanel, extensionUri: vscontext.extensionUri, webViewFileName: "drb.html", excludeExternalCss: true, excludeExternalJs: true });
+        super.update();
+
+        if (currentAccessToken) {
+            webviewPanel.webview.postMessage({ command: "dvdt_connection", token: currentAccessToken });
+        }
+    }
+
+    getHtmlForWebview(webviewFileName: string): string {
+        const pathOnDisk = path.join(this.panelOptions.extensionUri.fsPath, "resources", "views", webviewFileName);
+        const fileHtml = readFileSync(pathOnDisk).toString();
+        _.templateSettings.interpolate = /!!{([\s\S]+?)}/g;
+        const compiled = _.template(fileHtml);
+
+        // const requirementJs = this.getFileUri("resources", "views", "js", "drb_custom.js");
+        // const customJs = this.getFileUri("resources", "views", "js", "drb_requirements.js");
+
+        const viewModel = {};
+
+        return super.render(compiled(viewModel));
+    }
+}

src/views/PanelBase.ts

@@ -56,21 +56,26 @@ export class Panel {
                 <head>
                     <meta charset="UTF-8">
                     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-                    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
                     <link rel="stylesheet" type="text/css" href="${baseCss}" />
-                    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css" />
-                    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
-
-                    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-
-
-                    <link href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css" rel="stylesheet">
-
-                    <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
-                    <script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>
-                    <script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table-locale-all.min.js"></script>
-                    <script src="https://unpkg.com/bootstrap-table@1.19.1/dist/extensions/export/bootstrap-table-export.min.js"></script>
+                    ${
+                        this.panelOptions.excludeExternalCss
+                            ? ""
+                            : ` <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+                                <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css" />
+                                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
+                                <link href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css" rel="stylesheet">`
+                    }
+
+                    ${
+                        this.panelOptions.excludeExternalJs
+                            ? ""
+                            : ` <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+                                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+                                <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
+                                <script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>
+                                <script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table-locale-all.min.js"></script>
+                                <script src="https://unpkg.com/bootstrap-table@1.19.1/dist/extensions/export/bootstrap-table-export.min.js"></script>`
+                    }
                 </head>
                 <body>
                     <div class="main-container">
@@ -108,41 +113,9 @@ export class Panel {
         // }
 
         return this.render(compiled(viewModel));
-
-        // return `<!DOCTYPE html>
-        //         <html lang="en">
-        //             <head>
-        //                 <!-- Required meta tags -->
-        //                 <meta charset="utf-8" />
-        //                 <meta name="viewport" content="width=device-width, initial-scale=1" />
-        //                 <!-- Bootstrap CSS -->
-        //                 <link href="css/base.css" rel="stylesheet" />
-        //                 <title>Hello, world!</title>
-        //             </head>
-        //             <body>
-        //                 <h1>Hello, world!</h1>
-        //                 <form>
-        //                     <div>
-        //                         <label for="exampleInputEmail1" class="form-label">Email address</label>
-        //                         <input type="email" placeholder="Test" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
-        //                         <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
-        //                     </div>
-        //                     <div>
-        //                         <label for="exampleInputPassword1" class="form-label">Password</label>
-        //                         <input type="password" class="form-control" id="exampleInputPassword1" />
-        //                     </div>
-        //                     <div>
-        //                         <input type="checkbox" class="form-check-input" id="exampleCheck1" />
-        //                         <label class="form-check-label" for="exampleCheck1">Check me out</label>
-        //                     </div>
-        //                     <button type="submit" class="btn btn-primary">Submit</button>
-        //                 </form>
-        //                 <!-- <script src="js/materialize.min.js"></script> -->
-        //             </body>
-        //         </html>`;
     }
 
-    private getFileUri(...paths: string[]): vscode.Uri {
+    public getFileUri(...paths: string[]): vscode.Uri {
         const pathOnDisk = vscode.Uri.file(path.join(this.panelOptions.extensionUri.fsPath, ...paths));
         return this.webViewPanel.webview.asWebviewUri(pathOnDisk);
     }