codefori · worksofliam · Jan 7, 2025 · Mar 4, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -128,24 +128,24 @@
   },
   "scripts": {
     "clean": "rimraf dist",
-    "package":"npx @vscode/vsce package --pre-release",
+    "package": "npx @vscode/vsce package --pre-release",
     "vscode:prepublish": "npm run build",
     "compile": "npm run clean && webpack",
     "watch": "npm run clean && webpack --watch",
     "build": "npm run clean && webpack --mode production --devtool hidden-source-map"
   },
   "devDependencies": {
-    "@halcyontech/vscode-ibmi-types": "^2.13",
+    "@halcyontech/vscode-ibmi-types": "^2.15.0",
     "@types/node": "^20",
     "@types/vscode": "^1.90.0",
-    "esbuild": "^0.19.12",
-		"esbuild-loader": "^4.2.2",
+    "esbuild": "^0.25.0",
+    "esbuild-loader": "^4.2.2",
     "rimraf": "^5.0.5",
     "typescript": "^4.9.5",
     "webpack": "^5.94.0",
-		"webpack-cli": "^5.1.4"
+    "webpack-cli": "^5.1.4"
   },
   "dependencies": {
-    "@vscode/webview-ui-toolkit": "^1.4.0"
+    "@vscode-elements/elements": "^1.13.0"
   }
 }
diff --git a/src/tools.ts b/src/tools.ts
@@ -20,11 +20,11 @@ export namespace Code4i {
     } 
 
     export function getConfig() {
-        return codeForIBMi.instance.getConfig();
+        return getConnection().getConfig();
     } 
 
     export function getContent() {
-        return codeForIBMi.instance.getContent();
+        return getConnection().getContent();
     } 
 
     export function getTempLibrary(): string {
@@ -47,5 +47,5 @@ export function getQSYSObjectPath(library: string, name: string, type: string, m
 }
 
 export function makeid(length? : number){
-    return codeForIBMi.tools.makeid(length);
+    return Math.random().toString(36).substring(2, length ? length + 2 : 7);
 }
diff --git a/src/types/bindingDirectory.ts b/src/types/bindingDirectory.ts
@@ -1,6 +1,7 @@
 import * as vscode from 'vscode';
 import Base from "./base";
 import { makeid, Code4i } from '../tools';
+import { Components } from '../webviewToolkit';
 
 enum EntryStatus {
   existed,
@@ -60,92 +61,60 @@ export default class BindingDirectory extends Base {
   }
 
   generateHTML(): string {
-    const entriesTab = /*html*/`<vscode-data-grid>
-    <vscode-data-grid-row row-type="header">
-      <vscode-data-grid-cell cell-type="columnheader" grid-column="1">Object</vscode-data-grid-cell>
-      <vscode-data-grid-cell cell-type="columnheader" grid-column="2">Type</vscode-data-grid-cell>
-      <vscode-data-grid-cell cell-type="columnheader" grid-column="3">Activation</vscode-data-grid-cell>
-      <vscode-data-grid-cell cell-type="columnheader" grid-column="4">Creation</vscode-data-grid-cell>
-      <vscode-data-grid-cell cell-type="columnheader" grid-column="5"></vscode-data-grid-cell>
-    </vscode-data-grid-row>
-    ${this.entries?.filter(entry => entry.status !== EntryStatus.deleted).map(entry => {
-      return /*html*/`
-      <vscode-data-grid-row>
-        <vscode-data-grid-cell grid-column="1">${entry.library}/${entry.object}</vscode-data-grid-cell>
-        <vscode-data-grid-cell grid-column="2">${entry.type}</vscode-data-grid-cell>
-        <vscode-data-grid-cell grid-column="3">${entry.activation}</vscode-data-grid-cell>
-        <vscode-data-grid-cell grid-column="4">${entry.creation.date}</vscode-data-grid-cell>
-        <vscode-data-grid-cell grid-column="5">
-        <vscode-link href="action:delete" entrylibrary="${entry.library}" entryobject="${entry.object}">
-          Delete
-        </vscode-link>
-        </vscode-data-grid-cell>
-      </vscode-data-grid-row>`;
-    }).join("")}
-    </vscode-data-grid>
-    `;
-
+    const entriesTab = Components.dataGrid<Entry>(
+      {columns: [
+        {title: `Object`, cellValue: entry => `${entry.library}/${entry.object}`},
+        {title: `Type`, cellValue: entry => entry.type},
+        {title: `Activation`, cellValue: entry => entry.activation},
+        {title: `Creation`, cellValue: entry => `${entry.creation.date} ${entry.creation.time}`},
+        {title: ``, cellValue: entry => /*html*/`<vscode-link href="action:delete" entrylibrary="${entry.library}" entryobject="${entry.object}">Delete</vscode-link>`}
+      ]},
+      this.entries?.filter(entry => entry.status !== EntryStatus.deleted) || []
+    );
+
+    // We need a form builder!!!
     const addTab = /*html*/`
       <form>
-        <vscode-text-field readonly="false" id="inLibrary" maxlength="10" value="*LIBL">Entry library</vscode-text-field>
+        ${Components.textField(`inLibrary`, `Entry library`, { value: "*LIBL", maxlength: 10 })}
         <br><br>
-        <vscode-text-field readonly="false" id="inObject" maxlength="10" autofocus>Entry library</vscode-text-field>
+        ${Components.textField(`inObject`, `Entry object`, { value: "*ALL", maxlength: 10, focused: true })}
         <br>
         <section>
           <p>Object Type</p>
-          <vscode-dropdown id="inType" readonly="false">
-            <vscode-option>*SRVPGM</vscode-option>
+          <vscode-single-select id="inType" readonly="false">
+            <vscode-option selected>*SRVPGM</vscode-option>
             <vscode-option>*MODULE</vscode-option>
-          </vscode-dropdown>
+          </vscode-single-select>
         </section>
         <br>
         <section>
           <p>Activation</p>
-          <vscode-dropdown id="inActivation" readonly="false">
-            <vscode-option>*IMMED</vscode-option>
+          <vscode-single-select id="inActivation" readonly="false">
+            <vscode-option selected>*IMMED</vscode-option>
             <vscode-option>*DEFER</vscode-option>
-          </vscode-dropdown>
+          </vscode-single-select>
         </section>
         <br><br>
-        <vscode-button type="create" href="action:create" appearance="primary">Create</vscode-button>
+        ${Components.button("Cancel", { action: "cancel" })}
       </form>
     `;
 
-    const exportsTab = /*html*/`<vscode-data-grid>
-    <vscode-data-grid-row row-type="header">
-      <vscode-data-grid-cell cell-type="columnheader" grid-column="1">Symbol</vscode-data-grid-cell>
-      <vscode-data-grid-cell cell-type="columnheader" grid-column="2">Object</vscode-data-grid-cell>
-      <vscode-data-grid-cell cell-type="columnheader" grid-column="3">Usage</vscode-data-grid-cell>
-    </vscode-data-grid-row>
-    ${this.exports?.map(entry => {
-      return /*html*/`
-      <vscode-data-grid-row>
-        <vscode-data-grid-cell grid-column="1">${entry.symbol}</vscode-data-grid-cell>
-        <vscode-data-grid-cell grid-column="2">${entry.library}/${entry.object}</vscode-data-grid-cell>
-        <vscode-data-grid-cell grid-column="3">${entry.usage}</vscode-data-grid-cell>
-      </vscode-data-grid-row>`;
-    }).join("")}
-    </vscode-data-grid>`;
-
-    const panels = /*html*/`
-    <vscode-panels>
-      <vscode-panel-tab id="tab-1">
-        ENTRIES
-        <vscode-badge appearance="secondary">${this.entries?.filter(entry => entry.status !== EntryStatus.deleted).length}</vscode-badge>
-      </vscode-panel-tab>
-      <vscode-panel-tab id="tab-2">
-        ADD
-      </vscode-panel-tab>
-      <vscode-panel-tab id="tab-3">
-        EXPORTS
-        <vscode-badge appearance="secondary">${this.exports?.length}</vscode-badge>
-      </vscode-panel-tab>
-      <vscode-panel-view id="view-1">${entriesTab}</vscode-panel-view>
-      <vscode-panel-view id="view-2">${addTab}</vscode-panel-view>
-      <vscode-panel-view id="view-3">${exportsTab}</vscode-panel-view>
-    </vscode-panels>`;
-
-    return panels;
+    const newExportsTab = Components.dataGrid<ILESymbol>(
+      {columns: [
+        {title: `Symbol`, cellValue: entry => entry.symbol},
+        {title: `Object`, cellValue: entry => `${entry.library}/${entry.object}`},
+        {title: `Usage`, cellValue: entry => entry.usage}
+      ]},
+      this.exports || []
+    );
+
+    const newPanels = Components.panels([
+      { title: "Entries", content: entriesTab },
+      { title: "Add", content: addTab },
+      { title: "Exports", content: newExportsTab }
+    ]);
+
+    return newPanels;
   }
 
   async save(): Promise<void> {

diff --git a/src/types/dataqueue.ts b/src/types/dataqueue.ts
@@ -20,7 +20,7 @@ export namespace DataQueueActions {
         const library = item.library.toUpperCase();
         const name = item.name.toUpperCase();
         if (await vscode.window.showWarningMessage(`Are you sure you want to clear Data Queue ${library}/${name}?`, { modal: true }, "Clear")) {
-            await Code4i.getContent().runSQL(`Call QSYS2.CLEAR_DATA_QUEUE('${name}', '${library}');`);
+            await Code4i.getConnection().runSQL(`Call QSYS2.CLEAR_DATA_QUEUE('${name}', '${library}');`);
             vscode.window.showInformationMessage(`Data Queue ${library}/${name} cleared.`);
             return true;
         }
@@ -208,8 +208,8 @@ export class DataQueue extends Base {
     private renderDataQueuePanel(): string {
         return /*html*/ `${Components.keyValueTable(infoKey, infoValue, Object.entries(this._info))}
         ${Components.divider()}
-        ${Components.button("Send data", { action: ACTION_SEND, icon: { name: "arrow-right", left: true } })}
-        ${Components.button("Clear", { action: ACTION_CLEAR, appearance: "secondary", icon: { name: "clear-all", left: true } })}
+        ${Components.button("Send data", { action: ACTION_SEND, icon: "arrow-right" })}
+        ${Components.button("Clear", { action: ACTION_CLEAR, secondary: true, icon: "clear-all" })}
         `;
     }
 }

diff --git a/src/types/program.ts b/src/types/program.ts
@@ -24,7 +24,7 @@ export default class Program extends Base {
       const name = this.name.toUpperCase();
 
       //https://www.ibm.com/docs/en/i/7.4?topic=services-program-info-view
-      const [programInfo] = await content.runSQL(`Select ${this.selectClause} From QSYS2.PROGRAM_INFO Where PROGRAM_LIBRARY = '${library}' And PROGRAM_NAME = '${name}'`);
+      const [programInfo] = await connection.runSQL(`Select ${this.selectClause} From QSYS2.PROGRAM_INFO Where PROGRAM_LIBRARY = '${library}' And PROGRAM_NAME = '${name}'`);
 
       this.type = String(programInfo.OBJECT_TYPE);
 
@@ -81,45 +81,42 @@ export default class Program extends Base {
   }
 
   generateHTML(): string {
-    const detailTab = /*html*/`<vscode-data-grid>
-    ${Object.entries(this.info).filter(row => row[1]).map(row => {
-      return /*html*/`
-      <vscode-data-grid-row>
-        <vscode-data-grid-cell grid-column="1">${this.columns.get(row[0]) || row[0]}</vscode-data-grid-cell>
-        <vscode-data-grid-cell grid-column="2">${row[1]}</vscode-data-grid-cell>
-      </vscode-data-grid-row>`;
-    }).join("")}
-    </vscode-data-grid>`;
-
-    const boundTab = /*html*/`
-      <section>
-        ${this.boundModules ?
-        Components.dataGrid<ILEModule>({
-          columns: [
-            { title: "Module", cellValue: d => `${d.library}/${d.object}` },
-            { title: "Attribute", cellValue: d => d.attribute },
-            { title: "Created", cellValue: d => d.created },
-            { title: "Debug Data Available", cellValue: d => d.debugData }
-          ]
-        }, this.boundModules)
-        : ``}
-      </section>
-
-      <section>
-        ${Components.divider()}
-      </section>
-
-      <section>
-        ${this.boundServicePrograms ?
-        Components.dataGrid<ILEServiceProgram>({
-          columns: [
-            { title: "Service Program", cellValue: d => `${d.library}/${d.object}` },
-            { title: "Signature", cellValue: d => d.signature },
-          ]
-        }, this.boundServicePrograms)
-        : ``}
-      </section>
-    `;
+
+    const detailTab = Components.dataGrid<any>({
+      columns: [
+        { cellValue: d => this.columns.get(d.name) || d.name },
+        { cellValue: d => d.value }
+      ]},
+      Object.entries(this.info).filter(row => row[1]).map(row => ({
+        name: row[0],
+        value: row[1]
+      }))
+    );
+
+    let boundTab = ``;
+
+    if (this.boundModules) {
+      boundTab += Components.dataGrid<ILEModule>({
+        columns: [
+          { title: "Module", cellValue: d => `${d.library}/${d.object}` },
+          { title: "Attribute", cellValue: d => d.attribute },
+          { title: "Created", cellValue: d => d.created },
+          { title: "Debug Data Available", cellValue: d => d.debugData }
+        ]
+      }, this.boundModules);
+
+      boundTab += Components.divider();
+    }
+
+    if (this.boundServicePrograms) {
+      boundTab += Components.dataGrid<ILEServiceProgram>({
+        columns: [
+          { title: "Service Program", cellValue: d => `${d.library}/${d.object}` },
+          { title: "Signature", cellValue: d => d.signature },
+        ]
+      }, this.boundServicePrograms);
+    }
+
 
     const exportsAvailable = this.type === `*SRVPGM`;
 
@@ -136,30 +133,24 @@ export default class Program extends Base {
 
     const boundCount = (this.boundModules ? this.boundModules.length : 0) + (this.boundServicePrograms ? this.boundServicePrograms.length : 0);
 
-    const panels = /*html*/`
-      <vscode-panels>
-        <vscode-panel-tab id="tab-1">
-          DETAIL
-        </vscode-panel-tab>
-        <vscode-panel-tab id="tab-2">
-          BOUND
-          <vscode-badge appearance="secondary">${boundCount}</vscode-badge>
-        </vscode-panel-tab>
-        ${exportsAvailable ?
-          /*html*/`
-          <vscode-panel-tab id="tab-3">
-            EXPORTS
-            <vscode-badge appearance="secondary">${this.exportedSymbols?.length}</vscode-badge>
-          </vscode-panel-tab>
-          `
-        : ``
-      }
-        <vscode-panel-view id="view-1">${detailTab}</vscode-panel-view>
-        <vscode-panel-view id="view-2">${boundTab}</vscode-panel-view>
-        ${exportsAvailable ? `<vscode-panel-view id="view-3">${exportsTab}</vscode-panel-view>` : ``}
-      </vscode-panels>`;
-
-    return panels;
+    const newPanels = Components.panels([
+      {
+        title: `DETAIL`,
+        content: detailTab,
+      },
+      {
+        title: `BOUND`,
+        content: boundTab,
+        badge: boundCount
+      },
+      ...(exportsAvailable ? [{
+        title: `EXPORTS`,
+        content: exportsTab,
+        badge: this.exportedSymbols?.length
+      }] : [])
+    ])
+
+    return newPanels;
   }
 
   async handleAction(data: any): Promise<HandleActionResult> {
@@ -266,7 +257,7 @@ async function getBoundModules(library: string, object: string): Promise<ILEModu
     `where a.PROGRAM_LIBRARY = '${library}' and a.PROGRAM_NAME = '${object}'`
   ].join(` `);
 
-  const rows = await Code4i.getContent().runSQL(query);
+  const rows = await Code4i.getConnection().runSQL(query);
   return rows.map(row => ({
     library: String(row.BOUND_MODULE_LIBRARY),
     object: String(row.BOUND_MODULE),

diff --git a/src/types/saveFile.ts b/src/types/saveFile.ts
@@ -369,7 +369,7 @@ function renderHeaders(size: string, headers: Header[]): string {
         headers
         )}
     ${Components.divider()}
-    ${Components.button(`Download${size ? ` (${size})` : ''}`, { action: ACTION_DOWNLOAD, icon: { name: "cloud-download" } })}`;
+    ${Components.button(`Download${size ? ` (${size})` : ''}`, { action: ACTION_DOWNLOAD, icon: "cloud-download" })}`;
 }
 
 function renderObjects(objects: Object[]): string {