Apply UI eng vision to the KeyValueStorageItemsView

To make it work, implement refresh callback in the data grid web component add make VBox understand element as the first parameter.

This could be further improved, but removing the view output and propagate the preview value through this HTML template, but this is left for later.

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

Author: danilsomsikov

front_end/panels/application/ExtensionStorageItemsView.test.ts

@@ -5,14 +5,12 @@
 import type * as Common from '../../core/common/common.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
-import {dispatchKeyDownEvent, raf} from '../../testing/DOMHelpers.js';
 import {createTarget} from '../../testing/EnvironmentHelpers.js';
 import {
   describeWithMockConnection,
 } from '../../testing/MockConnection.js';
-import {getCellElementFromNodeAndColumnId, selectNodeByKey} from '../../testing/StorageItemsViewHelpers.js';
 import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
-import type * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
+import * as UI from '../../ui/legacy/legacy.js';
 
 import * as Resources from './application.js';
 
@@ -86,6 +84,17 @@ describeWithMockConnection('ExtensionStorageItemsView', function() {
         extensionStorageModel, TEST_EXTENSION_ID, TEST_EXTENSION_NAME, Protocol.Extensions.StorageArea.Local);
   });
 
+  function createView(): {view: View.ExtensionStorageItemsView, viewFunction: sinon.SinonStub} {
+    const viewFunction = sinon.stub();
+    viewFunction.callsFake((_input, output, _target) => {
+      output.splitWidget = sinon.createStubInstance(UI.SplitWidget.SplitWidget);
+      output.preview = new UI.Widget.VBox();
+      output.resizer = sinon.createStubInstance(HTMLElement);
+    });
+    const view = new View.ExtensionStorageItemsView(extensionStorage, viewFunction);
+    return {view, viewFunction};
+  }
+
   it('displays items', async () => {
     assert.exists(extensionStorageModel);
     sinon.stub(extensionStorageModel.agent, 'invoke_getStorageItems')
@@ -95,16 +104,13 @@ describeWithMockConnection('ExtensionStorageItemsView', function() {
           getError: () => undefined,
         });
 
-    const view = new View.ExtensionStorageItemsView(extensionStorage);
+    const {view, viewFunction} = createView();
 
     const itemsListener = new ExtensionStorageItemsListener(view.extensionStorageItemsDispatcher);
     await itemsListener.waitForItemsRefreshed();
 
     assert.deepEqual(
-        view.getEntriesForTesting(), Object.keys(EXAMPLE_DATA).map(key => ({key, value: EXAMPLE_DATA[key]})));
-
-    await RenderCoordinator.done();
-    view.detach();
+        viewFunction.lastCall.firstArg.items, Object.keys(EXAMPLE_DATA).map(key => ({key, value: EXAMPLE_DATA[key]})));
   });
 
   it('correctly parses set values as JSON, with string fallback', async () => {
@@ -118,34 +124,21 @@ describeWithMockConnection('ExtensionStorageItemsView', function() {
     const setStorageItems =
         sinon.stub(extensionStorageModel.agent, 'invoke_setStorageItems').resolves({getError: () => undefined});
 
-    const view = new View.ExtensionStorageItemsView(extensionStorage);
-    const dataGrid = view.dataGridForTesting;
+    const {view, viewFunction} = createView();
     const itemsListener = new ExtensionStorageItemsListener(view.extensionStorageItemsDispatcher);
     await itemsListener.waitForItemsRefreshed();
 
-    view.markAsRoot();
-    view.show(document.body);
-    await raf();
-
     const expectedResults = [
       {input: '{foo: "bar"}', parsedValue: {foo: 'bar'}},
       {input: 'value', parsedValue: 'value'},
     ];
 
     for (const {input, parsedValue} of expectedResults) {
       const key = Object.keys(EXAMPLE_DATA)[0];
-      const node = selectNodeByKey(dataGrid, key);
-      assert.exists(node);
-      await raf();
-
-      const selectedNode = node as DataGrid.DataGrid.DataGridNode<Protocol.Storage.SharedStorageEntry>;
-      dataGrid.startEditingNextEditableColumnOfDataGridNode(selectedNode, 'value', true);
-
-      const cellElement = getCellElementFromNodeAndColumnId(dataGrid, selectedNode, 'value');
-      assert.exists(cellElement);
+      viewFunction.lastCall.firstArg.onEdit(new CustomEvent('edit', {
+        detail: {node: {dataset: {key}}, columnId: 'value', valueBeforeEditing: EXAMPLE_DATA[key], newText: input}
+      }));
 
-      cellElement.textContent = input;
-      dispatchKeyDownEvent(cellElement, {key: 'Enter'});
       await itemsListener.waitForItemsEdited();
       setStorageItems.calledOnceWithExactly(
           {id: TEST_EXTENSION_ID, storageArea: Protocol.Extensions.StorageArea.Local, values: {[key]: parsedValue}});

front_end/panels/application/ExtensionStorageItemsView.ts

@@ -39,7 +39,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import type {ExtensionStorage} from './ExtensionStorageModel.js';
-import {KeyValueStorageItemsView} from './KeyValueStorageItemsView.js';
+import {KeyValueStorageItemsView, type View as KeyValueStorageItemsViewFunction} from './KeyValueStorageItemsView.js';
 
 const UIStrings = {
   /**
@@ -72,8 +72,8 @@ export class ExtensionStorageItemsView extends KeyValueStorageItemsView {
   readonly extensionStorageItemsDispatcher:
       Common.ObjectWrapper.ObjectWrapper<ExtensionStorageItemsDispatcher.EventTypes>;
 
-  constructor(extensionStorage: ExtensionStorage) {
-    super(i18nString(UIStrings.extensionStorageItems), 'extension-storage', true);
+  constructor(extensionStorage: ExtensionStorage, view?: KeyValueStorageItemsViewFunction) {
+    super(i18nString(UIStrings.extensionStorageItems), 'extension-storage', true, view);
 
     this.element.setAttribute('jslog', `${VisualLogging.pane().context('extension-storage-data')}`);
     this.element.classList.add('storage-view', 'table');
@@ -183,11 +183,4 @@ export class ExtensionStorageItemsView extends KeyValueStorageItemsView {
           throw new Error('Unable to clear storage.');
         });
   }
-
-  getEntriesForTesting(): Array<{key: string, value: string}> {
-    return this.dataGridForTesting.rootNode().children.filter(node => node.data.key).map(node => (node.data as {
-                                                                                           key: string,
-                                                                                           value: string,
-                                                                                         }));
-  }
 }

front_end/panels/application/KeyValueStorageItemsView.test.ts

@@ -8,15 +8,13 @@ import {
 } from '../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
 import {expectCalled} from '../../testing/ExpectStubCall.js';
-import {
-  selectNodeByKey,
-} from '../../testing/StorageItemsViewHelpers.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import * as Application from './application.js';
 
 describeWithEnvironment('KeyValueStorageItemsView', () => {
   let keyValueStorageItemsView: Application.KeyValueStorageItemsView.KeyValueStorageItemsView;
+  let viewFunction: sinon.SinonStub;
 
   const MOCK_ITEMS = [
     {key: 'foo', value: 'value1'},
@@ -55,7 +53,14 @@ describeWithEnvironment('KeyValueStorageItemsView', () => {
     container.markAsRoot();
     container.show(div);
 
-    keyValueStorageItemsView = new TestKeyValueStorageItemsView('Items', 'key-value-storage-items-view', true);
+    viewFunction = sinon.stub();
+    viewFunction.callsFake((_input, output, _target) => {
+      output.splitWidget = sinon.createStubInstance(UI.SplitWidget.SplitWidget);
+      output.preview = new UI.Widget.VBox();
+      output.resizer = sinon.createStubInstance(HTMLElement);
+    });
+    keyValueStorageItemsView =
+        new TestKeyValueStorageItemsView('Items', 'key-value-storage-items-view', true, viewFunction);
 
     keyValueStorageItemsView.showItems(MOCK_ITEMS);
   });
@@ -70,29 +75,17 @@ describeWithEnvironment('KeyValueStorageItemsView', () => {
     const createPreviewPromise = expectCreatePreviewCalled(key, value);
 
     // Select the first item by key.
-    const node = selectNodeByKey(keyValueStorageItemsView.dataGridForTesting, key);
-    assert.isNotNull(node);
+    viewFunction.lastCall.firstArg.onSelect(new CustomEvent('select', {detail: {dataset: {key, value}}}));
 
     // Check createPreview function was called.
     await createPreviewPromise;
-
-    // Check preview was updated.
-    await raf();
     assert.include(keyValueStorageItemsView.previewPanelForTesting.element.innerText, `${key}:${value}`);
   });
 
   it('shows empty preview when no row is selected', async () => {
-    // Select the first item by key.
-    const node = selectNodeByKey(keyValueStorageItemsView.dataGridForTesting, MOCK_ITEMS[0].key);
-    assert.isNotNull(node);
-
+    viewFunction.lastCall.firstArg.onSelect(new CustomEvent('select', {detail: {dataset: {key: MOCK_ITEMS[0].key}}}));
     await raf();
-
-    // Deselect node.
-    node.deselect();
-
-    await raf();
-
+    viewFunction.lastCall.firstArg.onSelect(new CustomEvent('select', {detail: null}));
     // Check preview was updated.
     assert.include(
         keyValueStorageItemsView.previewPanelForTesting.element.innerText,
@@ -105,8 +98,7 @@ describeWithEnvironment('KeyValueStorageItemsView', () => {
     let createPreviewPromise = expectCreatePreviewCalled(key, value);
 
     // Select the first item.
-    const node = selectNodeByKey(keyValueStorageItemsView.dataGridForTesting, key);
-    assert.isNotNull(node);
+    viewFunction.lastCall.firstArg.onSelect(new CustomEvent('select', {detail: {dataset: {key, value}}}));
 
     // Check createPreview function was called.
     await createPreviewPromise;