Make SharedStorageItemsView a subclass of KeyValueStorageItemsView

Bug: 394287937
Change-Id: I016e90540a68900b9f52ab5d826863b3a7c38ba8
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6264607
Reviewed-by: Benedikt Meurer <[email protected]>
Auto-Submit: Danil Somsikov <[email protected]>
Commit-Queue: Benedikt Meurer <[email protected]>

Author: danilsomsikov

front_end/panels/application/ApplicationPanelSidebar.test.ts

@@ -291,6 +291,7 @@ describeWithMockConnection('ApplicationPanelSidebar', () => {
     addEventListener: () => {},
     securityOrigin: 'https://example.com',
     databaseId: new Application.IndexedDBModel.DatabaseId({storageKey: ''}, ''),
+    getEntries: () => Promise.resolve([]),
   };
 
   const testUiUpdate = <Events, T extends keyof Events>(

front_end/panels/application/KeyValueStorageItemsView.ts

@@ -33,6 +33,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import {Directives as LitDirectives, html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+import type * as ApplicationComponents from './components/components.js';
 import {StorageItemsView} from './StorageItemsView.js';
 
 const {ARIAUtils} = UI;
@@ -101,7 +102,9 @@ export abstract class KeyValueStorageItemsView extends StorageItemsView {
   #isSortOrderAscending = true;
   #editable: boolean;
 
-  constructor(title: string, id: string, editable: boolean, view?: View) {
+  constructor(
+      title: string, id: string, editable: boolean, view?: View,
+      metadataView?: ApplicationComponents.StorageMetadataView.StorageMetadataView) {
     if (!view) {
       view = (input: ViewInput, output: ViewOutput, target: HTMLElement) => {
         // clang-format off
@@ -152,7 +155,7 @@ export abstract class KeyValueStorageItemsView extends StorageItemsView {
             target, {host: input});
       };
     }
-    super(title, id);
+    super(title, id, metadataView);
     this.#editable = editable;
     this.#view = view;
     this.performUpdate();
@@ -267,18 +270,28 @@ export abstract class KeyValueStorageItemsView extends StorageItemsView {
   #createCallback(key: string, value: string): void {
     this.setItem(key, value);
     this.#removeDupes(key, value);
+    void this.#previewEntry({key, value});
+  }
+
+  protected isEditAllowed(_columnIdentifier: string, _oldText: string, _newText: string): boolean {
+    return true;
   }
 
   #editingCallback(editingNode: HTMLElement, columnIdentifier: string, oldText: string, newText: string): void {
+    if (!this.isEditAllowed(columnIdentifier, oldText, newText)) {
+      return;
+    }
     if (columnIdentifier === 'key') {
       if (typeof oldText === 'string') {
         this.removeItem(oldText);
       }
       this.setItem(newText, editingNode.dataset.value || '');
       this.#removeDupes(newText, editingNode.dataset.value || '');
       editingNode.dataset.key = newText;
+      void this.#previewEntry({key: newText, value: editingNode.dataset.value || ''});
     } else {
       this.setItem(editingNode.dataset.key || '', newText);
+      void this.#previewEntry({key: editingNode.dataset.key || '', value: newText});
     }
   }
 
@@ -330,6 +343,10 @@ export abstract class KeyValueStorageItemsView extends StorageItemsView {
     this.performUpdate();
   }
 
+  protected keys(): string[] {
+    return this.#items.map(item => item.key);
+  }
+
   protected abstract setItem(key: string, value: string): void;
   protected abstract removeItem(key: string): void;
   protected abstract createPreview(key: string, value: string): Promise<Widget|null>;