feat(s3,web-ui): add S3 deletePrefix and getObjectUrl endpoints and add context menus in UI for S3 and Mongo views

ts_web/elements/tsview-mongo-collections.ts

@@ -4,6 +4,7 @@ import { formatCount } from '../utilities/index.js';
 import { themeStyles } from '../styles/index.js';
 
 const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
+const { DeesContextmenu } = plugins.deesCatalog;
 
 declare global {
   interface HTMLElementEventMap {
@@ -89,29 +90,6 @@ export class TsviewMongoCollections extends DeesElement {
         font-size: 12px;
         font-style: italic;
       }
-
-      .delete-btn {
-        opacity: 0;
-        padding: 4px;
-        background: transparent;
-        border: none;
-        color: #888;
-        cursor: pointer;
-        border-radius: 4px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 0.15s;
-      }
-
-      .collection-item:hover .delete-btn {
-        opacity: 1;
-      }
-
-      .delete-btn:hover {
-        background: rgba(239, 68, 68, 0.2);
-        color: #f87171;
-      }
     `,
   ];
 
@@ -149,8 +127,7 @@ export class TsviewMongoCollections extends DeesElement {
     );
   }
 
-  private async deleteCollection(name: string, e: Event) {
-    e.stopPropagation();
+  private async deleteCollection(name: string) {
     if (!confirm(`Delete collection "${name}"? This will delete all documents.`)) return;
 
     const success = await apiService.dropCollection(this.databaseName, name);
@@ -166,6 +143,27 @@ export class TsviewMongoCollections extends DeesElement {
     }
   }
 
+  private handleCollectionContextMenu(event: MouseEvent, collection: IMongoCollection) {
+    event.preventDefault();
+    DeesContextmenu.openContextMenuWithOptions(event, [
+      {
+        name: 'View Documents',
+        iconName: 'lucide:fileText',
+        action: async () => {
+          this.selectCollection(collection.name);
+        },
+      },
+      { divider: true },
+      {
+        name: 'Delete Collection',
+        iconName: 'lucide:trash2',
+        action: async () => {
+          await this.deleteCollection(collection.name);
+        },
+      },
+    ]);
+  }
+
   public async refresh() {
     await this.loadCollections();
   }
@@ -186,6 +184,7 @@ export class TsviewMongoCollections extends DeesElement {
             <div
               class="collection-item ${this.selectedCollection === coll.name ? 'selected' : ''}"
               @click=${() => this.selectCollection(coll.name)}
+              @contextmenu=${(e: MouseEvent) => this.handleCollectionContextMenu(e, coll)}
             >
               <span class="collection-name">
                 <svg class="collection-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -193,17 +192,9 @@ export class TsviewMongoCollections extends DeesElement {
                 </svg>
                 ${coll.name}
               </span>
-              <span style="display: flex; align-items: center; gap: 4px;">
-                ${coll.count !== undefined
-                  ? html`<span class="collection-count">${formatCount(coll.count)}</span>`
-                  : ''}
-                <button class="delete-btn" @click=${(e: Event) => this.deleteCollection(coll.name, e)} title="Delete collection">
-                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <polyline points="3 6 5 6 21 6"></polyline>
-                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-                  </svg>
-                </button>
-              </span>
+              ${coll.count !== undefined
+                ? html`<span class="collection-count">${formatCount(coll.count)}</span>`
+                : ''}
             </div>
           `
         )}