Merge pull request #578 from lukecotter/feat-table-action-buttons

lcottercertinia · web-flow · commit 32a4a5a0e0db · 2025-04-07T14:56:28.000+01:00
feat: table action buttons
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Column totals for Grouped rows will now be shown inside the groups instead of on a seperate row ([#583][#583]).
+- Table actions: Copy to clipboard and Export to CSV directly from the button above the Analysis and Database table ([#589]).
 
 ### Changed
 
@@ -384,6 +385,7 @@ Skipped due to adopting odd numbering for pre releases and even number for relea
 [#582]: https://github.com/certinia/debug-log-analyzer/issues/582
 [#588]: https://github.com/certinia/debug-log-analyzer/issues/588
 [#583]: https://github.com/certinia/debug-log-analyzer/issues/583
+[#589]: https://github.com/certinia/debug-log-analyzer/issues/589
 
 <!-- 1.16.1 -->
 
diff --git a/README.md b/README.md
@@ -7,6 +7,8 @@
 
 Apex Log Analyzer makes performance analysis of Salesforce debug logs much easier and quicker. Visualize code execution via a Flame chart and Call Tree, identify and resolve performance and SOQL/DML problems via Method and Database Analysis.
 
+Visualize code execution via a Flame chart and identify performance and SOQL/DML problems via Method and Database analysis
+
 ![preview](https://raw.githubusercontent.com/certinia/debug-log-analyzer/main/lana/dist/images/lana-preview.gif)
 
 ## WARNING
@@ -163,8 +165,8 @@ The rows can be grouped by Type or Namespace
 
 #### Export to CSV + copy to clipboard
 
-Click the header menu,`⋮`, and use `Export to CSV` to save the table content to a file.
-Focus the Analysis table and use `CMD / CTRL + c` to copy the table content to clipboard. This can then be pasted into a spreadsheet or other file.
+Use `Export to CSV` above the table to save the table content to a file or `Copy to Clipboard`.
+You can also focus the Analysis table and use `CMD / CTRL + c` to copy the table content to clipboard. This can then be pasted into a spreadsheet or other file.
 
 ### Database
 
@@ -202,8 +204,8 @@ For SOQL rows, to the right of the Call Stack is SOQL Analysis which shows infor
 
 #### Export to CSV + copy to clipboard
 
-Click the header menu,`⋮`, and use `Export to CSV` to save the table content to a file.
-Focus the Analysis table and use `CMD / CTRL + c` to copy the table content to clipboard. This can then be pasted into a spreadsheet or other file.
+Use `Export to CSV` above the table to save the table content to a file or `Copy to Clipboard`.
+You can also focus the DML/ SOQL tables and use `CMD / CTRL + c` to copy the table content to clipboard. This can then be pasted into a spreadsheet or other file.
 
 ### Find
 
diff --git a/lana-docs-site/docs/docs/features.md b/lana-docs-site/docs/docs/features.md
@@ -91,8 +91,8 @@ The rows can be grouped by Type or Namespace
 
 ### Export to CSV + copy to clipboard
 
-Click the header menu,`⋮`, and use `Export to CSV` to save the table content to a file.
-Focus the Analysis table and use `CMD / CTRL + c` to copy the table content to clipboard. This can then be pasted into a spreadsheet or other file.
+Use `Export to CSV` above the table to save the table content to a file or `Copy to Clipboard`.
+You can also focus the Analysis tables and use `CMD / CTRL + c` to copy the table content to clipboard. This can then be pasted into a spreadsheet or other file.
 
 ## 💾 Database
 
@@ -130,8 +130,8 @@ For SOQL rows, to the right of the Call Stack is SOQL Analysis which shows infor
 
 ### Export to CSV + copy to clipboard
 
-Click the header menu,`⋮`, and use `Export to CSV` to save the table content to a file.
-Focus the Analysis table and use `CMD / CTRL + c` to copy the table content to clipboard. This can then be pasted into a spreadsheet or other file.
+Use `Export to CSV` above the table to save the table content to a file or `Copy to Clipboard`.
+You can also focus the DML/ SOQL tables and use `CMD / CTRL + c` to copy the table content to clipboard. This can then be pasted into a spreadsheet or other file.
 
 ## 🔍 Find
 
diff --git a/log-viewer/modules/components/analysis-view/AnalysisView.ts b/log-viewer/modules/components/analysis-view/AnalysisView.ts
@@ -3,39 +3,47 @@
  */
 import {
   provideVSCodeDesignSystem,
+  vsCodeButton,
   vsCodeCheckbox,
   vsCodeDropdown,
   vsCodeOption,
 } from '@vscode/webview-ui-toolkit';
 import { LitElement, css, html, unsafeCSS, type PropertyValues } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { Tabulator, type ColumnComponent, type RowComponent } from 'tabulator-tables';
-import * as CommonModules from '../../datagrid/module/CommonModules.js';
-
-import NumberAccessor from '../../datagrid/dataaccessor/Number.js';
-import { progressFormatter } from '../../datagrid/format/Progress.js';
-import { RowKeyboardNavigation } from '../../datagrid/module/RowKeyboardNavigation.js';
-import dataGridStyles from '../../datagrid/style/DataGrid.scss';
 import { ApexLog, LogLine } from '../../parsers/ApexLogParser.js';
 import { vscodeMessenger } from '../../services/VSCodeExtensionMessenger.js';
 import { globalStyles } from '../../styles/global.styles.js';
-import { isVisible } from '../../Util.js';
 
+// Tabulator custom modules, imports + styles
+import { Tabulator, type RowComponent } from 'tabulator-tables';
+import { isVisible } from '../../Util.js';
+import NumberAccessor from '../../datagrid/dataaccessor/Number.js';
+import { progressFormatter } from '../../datagrid/format/Progress.js';
+import { GroupCalcs } from '../../datagrid/group-calcs/GroupCalcs.js';
+import * as CommonModules from '../../datagrid/module/CommonModules.js';
+import { RowKeyboardNavigation } from '../../datagrid/module/RowKeyboardNavigation.js';
 import { RowNavigation } from '../../datagrid/module/RowNavigation.js';
+import dataGridStyles from '../../datagrid/style/DataGrid.scss';
+import codiconStyles from '../../styles/codicon.css';
 import { Find, formatter } from '../calltree-view/module/Find.js';
 import { callStackSum } from './column-calcs/CallStackSum.js';
 
-import { GroupCalcs } from '../../datagrid/group-calcs/GroupCalcs.js';
-
 // Components
+import '../datagrid/datagrid-filter-bar.js';
 import '../skeleton/GridSkeleton.js';
 
-provideVSCodeDesignSystem().register(vsCodeCheckbox(), vsCodeDropdown(), vsCodeOption());
+provideVSCodeDesignSystem().register(
+  vsCodeButton(),
+  vsCodeCheckbox(),
+  vsCodeDropdown(),
+  vsCodeOption(),
+);
 
 @customElement('analysis-view')
 export class AnalysisView extends LitElement {
   static styles = [
     unsafeCSS(dataGridStyles),
+    unsafeCSS(codiconStyles),
     globalStyles,
     css`
       :host {
@@ -58,15 +66,15 @@ export class AnalysisView extends LitElement {
         flex-flow: column nowrap;
         align-items: flex-start;
         justify-content: flex-start;
-      }
 
-      .dropdown-container label {
-        display: block;
-        color: var(--vscode-foreground);
-        cursor: pointer;
-        font-size: var(--vscode-font-size);
-        line-height: normal;
-        margin-bottom: 2px;
+        label {
+          display: block;
+          color: var(--vscode-foreground);
+          cursor: pointer;
+          font-size: var(--vscode-font-size);
+          line-height: normal;
+          margin-bottom: 2px;
+        }
       }
     `,
   ];
@@ -106,23 +114,51 @@ export class AnalysisView extends LitElement {
     const skeleton = !this.timelineRoot ? html`<grid-skeleton></grid-skeleton>` : '';
 
     return html`
-      <div class="filter-container">
-        <div class="dropdown-container">
-          <label for="groupby-dropdown">Group by</label>
+      <datagrid-filter-bar>
+        <div slot="filters" class="dropdown-container">
+          <label for="groupby-dropdown"><strong>Group by</strong></label>
           <vscode-dropdown id="groupby-dropdown" @change="${this._groupBy}">
             <vscode-option>None</vscode-option>
             <vscode-option>Namespace</vscode-option>
             <vscode-option>Type</vscode-option>
           </vscode-dropdown>
         </div>
-      </div>
+
+        <div slot="actions">
+          <vscode-button
+            appearance="icon"
+            aria-label="Export to CSV"
+            title="Export to CSV"
+            @click=${this._exportToCSV}
+          >
+            <span class="codicon codicon-desktop-download"></span>
+          </vscode-button>
+          <vscode-button
+            appearance="icon"
+            aria-label="Copy to clipboard"
+            title="Copy to clipboard"
+            @click=${this._copyToClipboard}
+          >
+            <span class="codicon codicon-copy"></span>
+          </vscode-button>
+        </div>
+      </datagrid-filter-bar>
+
       <div id="analysis-table-container">
         ${skeleton}
         <div id="analysis-table"></div>
       </div>
     `;
   }
 
+  _copyToClipboard() {
+    this.analysisTable?.copyToClipboard('all');
+  }
+
+  _exportToCSV() {
+    this.analysisTable?.download('csv', 'analysis.csv', { bom: true, delimiter: ',' });
+  }
+
   get _tableWrapper(): HTMLDivElement | null | undefined {
     return (this.tableContainer ??= this.renderRoot?.querySelector('#analysis-table'));
   }
@@ -197,15 +233,6 @@ export class AnalysisView extends LitElement {
     }
     const metricList = groupMetrics(rootMethod);
 
-    const headerMenu = [
-      {
-        label: 'Export to CSV',
-        action: function (_e: PointerEvent, column: ColumnComponent) {
-          column.getTable().download('csv', 'analysis.csv', { bom: true, delimiter: ',' });
-        },
-      },
-    ];
-
     Tabulator.registerModule(Object.values(CommonModules));
     Tabulator.registerModule([RowKeyboardNavigation, RowNavigation, Find, GroupCalcs]);
     this.analysisTable = new Tabulator(this._tableWrapper, {
@@ -254,7 +281,6 @@ export class AnalysisView extends LitElement {
         resizable: true,
         headerSortStartingDir: 'desc',
         headerTooltip: true,
-        headerMenu: headerMenu,
         headerWordWrap: true,
       },
       initialSort: [{ column: 'selfTime', dir: 'desc' }],
diff --git a/log-viewer/modules/components/database-view/DMLView.ts b/log-viewer/modules/components/database-view/DMLView.ts
@@ -1,15 +1,14 @@
 /*
  * Copyright (c) 2022 Certinia Inc. All rights reserved.
  */
-import { provideVSCodeDesignSystem, vsCodeCheckbox } from '@vscode/webview-ui-toolkit';
+import {
+  provideVSCodeDesignSystem,
+  vsCodeButton,
+  vsCodeCheckbox,
+} from '@vscode/webview-ui-toolkit';
 import { LitElement, css, html, render, unsafeCSS, type PropertyValues } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import {
-  Tabulator,
-  type ColumnComponent,
-  type GroupComponent,
-  type RowComponent,
-} from 'tabulator-tables';
+import { Tabulator, type GroupComponent, type RowComponent } from 'tabulator-tables';
 
 // tabulator custom modules
 import * as CommonModules from '../../datagrid/module/CommonModules.js';
@@ -27,6 +26,7 @@ import dataGridStyles from '../../datagrid/style/DataGrid.scss';
 import { DatabaseAccess } from '../../Database.js';
 import { ApexLog, DMLBeginLine } from '../../parsers/ApexLogParser.js';
 import { vscodeMessenger } from '../../services/VSCodeExtensionMessenger.js';
+import codiconStyles from '../../styles/codicon.css';
 import { globalStyles } from '../../styles/global.styles.js';
 import { isVisible } from '../../Util.js';
 import databaseViewStyles from './DatabaseView.scss';
@@ -35,7 +35,7 @@ import databaseViewStyles from './DatabaseView.scss';
 import '../CallStack.js';
 import './DatabaseSection.js';
 
-provideVSCodeDesignSystem().register(vsCodeCheckbox());
+provideVSCodeDesignSystem().register(vsCodeButton(), vsCodeCheckbox());
 
 @customElement('dml-view')
 export class DMLView extends LitElement {
@@ -86,6 +86,7 @@ export class DMLView extends LitElement {
   static styles = [
     unsafeCSS(dataGridStyles),
     unsafeCSS(databaseViewStyles),
+    unsafeCSS(codiconStyles),
     globalStyles,
     css`
       :host {
@@ -112,19 +113,50 @@ export class DMLView extends LitElement {
 
     return html`
       <database-section title="DML Statements" .dbLines="${this.dmlLines}"></database-section>
-      <div>
-        <strong>Group by</strong>
-        <div>
-          <vscode-checkbox @change="${this._dmlGroupBy}" checked>DML</vscode-checkbox>
+
+      <datagrid-filter-bar>
+        <div slot="filters">
+          <strong>Group by</strong>
+          <div>
+            <vscode-checkbox @change="${this._dmlGroupBy}" checked>DML</vscode-checkbox>
+          </div>
         </div>
-      </div>
+
+        <div slot="actions">
+          <vscode-button
+            appearance="icon"
+            aria-label="Export to CSV"
+            title="Export to CSV"
+            @click=${this._exportToCSV}
+          >
+            <span class="codicon codicon-desktop-download"></span>
+          </vscode-button>
+          <vscode-button
+            appearance="icon"
+            aria-label="Copy to clipboard"
+            title="Copy to clipboard"
+            @click=${this._copyToClipboard}
+          >
+            <span class="codicon codicon-copy"></span>
+          </vscode-button>
+        </div>
+      </datagrid-filter-bar>
+
       <div id="dml-table-container">
         ${dmlSkeleton}
         <div id="db-dml-table"></div>
       </div>
     `;
   }
 
+  _copyToClipboard() {
+    this.dmlTable?.copyToClipboard('all');
+  }
+
+  _exportToCSV() {
+    this.dmlTable?.download('csv', 'dml.csv', { bom: true, delimiter: ',' });
+  }
+
   _findEvt = ((event: FindEvt) => this._find(event)) as EventListener;
 
   _dmlGroupBy(event: Event) {
@@ -261,7 +293,6 @@ export class DMLView extends LitElement {
         resizable: true,
         headerSortStartingDir: 'desc',
         headerTooltip: true,
-        headerMenu: this.csvheaderMenu('dml.csv'),
         headerWordWrap: true,
       },
       initialSort: [{ column: 'rowCount', dir: 'desc' }],
@@ -436,17 +467,6 @@ export class DMLView extends LitElement {
     return [...newMap.keys()];
   }
 
-  csvheaderMenu(csvFileName: string) {
-    return [
-      {
-        label: 'Export to CSV',
-        action: function (_e: PointerEvent, column: ColumnComponent) {
-          column.getTable().download('csv', csvFileName, { bom: true, delimiter: ',' });
-        },
-      },
-    ];
-  }
-
   downlodEncoder(defaultFileName: string) {
     return function (fileContents: string, mimeType: string) {
       const vscode = vscodeMessenger.getVsCodeAPI();
diff --git a/log-viewer/modules/components/database-view/SOQLView.ts b/log-viewer/modules/components/database-view/SOQLView.ts
diff --git a/log-viewer/modules/components/datagrid/datagrid-filter-bar.ts b/log-viewer/modules/components/datagrid/datagrid-filter-bar.ts
