[persistence] Migrate WorkspaceSettingsTab to UI vision

This CL converts `WorkspaceSettingsTab` into a presenter with a
view function. Conceptually, the view function is rather trivial:
It renders the exclude pattern regex setting and one
`EditFileSystemView` widget per file system.

Note that the number of file systems is generally rather small, so
we don't bother in maintaining a list of them in the presenter and
surgically add/remove entries. Instead, we re-calculate the full
list on every update.

Drive-by: Support RegExp settings in `bindToSetting`.

R=dsv@chromium.org

Fixed: 407736174
Change-Id: Ibfcc332f495ca58af516219183d93e39e8e138b5
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6563568
Commit-Queue: Simon Zünd <szuend@chromium.org>
Reviewed-by: Danil Somsikov <dsv@chromium.org>

Author: szuend

front_end/models/persistence/BUILD.gn

@@ -106,6 +106,7 @@ ts_library("unittests") {
     "PersistenceAction.test.ts",
     "PersistenceImpl.test.ts",
     "PlatformFileSystem.test.ts",
+    "WorkspaceSettingsTab.test.ts",
   ]
 
   deps = [

front_end/models/persistence/EditFileSystemView.test.ts

@@ -59,7 +59,7 @@ describeWithEnvironment('EditFileSystemView view', () => {
 describeWithEnvironment('EditFileSystemView widget', () => {
   async function setup(initialExcludedFolders: Set<string>) {
     const view = createViewFunctionStub(EditFileSystemView);
-    const widget = new EditFileSystemView(view);
+    const widget = new EditFileSystemView(undefined, view);
     const fileSystem = sinon.createStubInstance(Persistence.IsolatedFileSystem.IsolatedFileSystem);
     fileSystem.path.returns(urlString`file:///home/user`);
     fileSystem.excludedFolders.returns(initialExcludedFolders as Set<Platform.DevToolsPath.EncodedPathString>);

front_end/models/persistence/EditFileSystemView.ts

@@ -135,8 +135,8 @@ export class EditFileSystemView extends UI.Widget.VBox {
   #excludedFolderPaths: PathWithStatus[] = [];
   readonly #view: View;
 
-  constructor(view: View = DEFAULT_VIEW) {
-    super();
+  constructor(element: HTMLElement|undefined, view: View = DEFAULT_VIEW) {
+    super(undefined, undefined, element);
     this.#view = view;
   }
 

front_end/models/persistence/WorkspaceSettingsTab.test.ts

@@ -0,0 +1,146 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Platform from '../../core/platform/platform.js';
+import {assertScreenshot, renderElementIntoDOM} from '../../testing/DOMHelpers.js';
+import {createFakeRegExpSetting, describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
+import {createViewFunctionStub} from '../../testing/ViewFunctionHelpers.js';
+
+import * as Persistence from './persistence.js';
+
+const {DEFAULT_VIEW, WorkspaceSettingsTab} = Persistence.WorkspaceSettingsTab;
+const {urlString} = Platform.DevToolsPath;
+
+describeWithEnvironment('WorkspaceSettingsTab view', () => {
+  it('renders the exclude regex setting and one card per mapped file system', async () => {
+    const target = document.createElement('div');
+    renderElementIntoDOM(target);
+
+    const fileSystem = sinon.createStubInstance(Persistence.IsolatedFileSystem.IsolatedFileSystem);
+    fileSystem.path.returns(urlString`file:///home/user/foo`);
+    fileSystem.excludedFolders.returns(new Set());
+
+    DEFAULT_VIEW(
+        {
+          excludePatternSetting: createFakeRegExpSetting('fake-exclude-pattern', 'node_modules|.git'),
+          fileSystems: [{displayName: 'foo', fileSystem}],
+          onAddClicked: () => {},
+          onRemoveClicked: () => {},
+        },
+        {}, target);
+
+    await assertScreenshot('persistence/workspace_settings_tab.png');
+  });
+});
+
+describeWithEnvironment('WorkspaceSettingsTab widget', () => {
+  function createStubFileSystem(path: string) {
+    const fileSystem = sinon.createStubInstance(Persistence.IsolatedFileSystem.IsolatedFileSystem);
+    fileSystem.path.returns(urlString(path));
+    return fileSystem;
+  }
+
+  async function setup(initialFileSystemPaths: string[] = []) {
+    const fileSystemManager =
+        Persistence.IsolatedFileSystemManager.IsolatedFileSystemManager.instance({forceNew: true});
+    const fileSystems = initialFileSystemPaths.map(createStubFileSystem);
+    sinon.stub(fileSystemManager, 'fileSystems').returns(fileSystems);
+    const addFileSystemStub = sinon.stub(fileSystemManager, 'addFileSystem');
+    const removeFileSystemStub = sinon.stub(fileSystemManager, 'removeFileSystem');
+    const networkPersistenceManager =
+        sinon.createStubInstance(Persistence.NetworkPersistenceManager.NetworkPersistenceManager);
+    sinon.stub(Persistence.NetworkPersistenceManager.NetworkPersistenceManager, 'instance')
+        .returns(networkPersistenceManager);
+
+    const view = createViewFunctionStub(WorkspaceSettingsTab);
+    const widget = new WorkspaceSettingsTab(view);
+
+    const container = document.createElement('div');
+    renderElementIntoDOM(container);
+    widget.markAsRoot();
+    widget.show(container);
+    await view.nextInput;
+
+    return {view, fileSystemManager, fileSystems, addFileSystemStub, removeFileSystemStub, networkPersistenceManager};
+  }
+
+  it('uses the exclude folder regex pattern', async () => {
+    const {view, fileSystemManager} = await setup();
+
+    assert.strictEqual(view.input.excludePatternSetting, fileSystemManager.workspaceFolderExcludePatternSetting());
+  });
+
+  it('shows the directory name as the card heading', async () => {
+    const {view} = await setup(['file:///home/user/foo']);
+
+    assert.lengthOf(view.input.fileSystems, 1);
+    assert.strictEqual(view.input.fileSystems[0].displayName, 'foo');
+  });
+
+  it('sorts file systems alphabetically', async () => {
+    const {view} = await setup(['file:///home/user/zoo', 'file:///home/user/foo']);
+
+    assert.lengthOf(view.input.fileSystems, 2);
+    assert.strictEqual(view.input.fileSystems[0].fileSystem.path(), 'file:///home/user/foo');
+    assert.strictEqual(view.input.fileSystems[1].fileSystem.path(), 'file:///home/user/zoo');
+  });
+
+  it('listens to FileSystemAdded events', async () => {
+    const {view, fileSystems, fileSystemManager} = await setup();
+    const fileSystem = createStubFileSystem('file:///home/user/dev/foo');
+    fileSystems.push(fileSystem);
+
+    fileSystemManager.dispatchEventToListeners(
+        Persistence.IsolatedFileSystemManager.Events.FileSystemAdded, fileSystem);
+    await view.nextInput;
+
+    assert.lengthOf(view.input.fileSystems, 1);
+    assert.strictEqual(view.input.fileSystems[0].fileSystem, fileSystem);
+  });
+
+  it('listens to FileSystemRemoved events', async () => {
+    const {view, fileSystems, fileSystemManager} = await setup(['file:///home/user/foo']);
+
+    const fileSystem = fileSystems[0];
+    fileSystems.splice(0, 1);
+    fileSystemManager.dispatchEventToListeners(
+        Persistence.IsolatedFileSystemManager.Events.FileSystemRemoved, fileSystem);
+    await view.nextInput;
+
+    assert.lengthOf(view.input.fileSystems, 0);
+  });
+
+  it('filters out the network persistence file system project', async () => {
+    const {view, fileSystems, fileSystemManager, networkPersistenceManager} = await setup();
+    const fileSystem = createStubFileSystem('file:///special-network-fs');
+    fileSystems.push(fileSystem);
+    const project = sinon.createStubInstance(Persistence.FileSystemWorkspaceBinding.FileSystem);
+    project.fileSystemPath.returns(urlString`file:///special-network-fs`);
+    networkPersistenceManager.project.returns(project);
+    sinon.stub(fileSystemManager, 'fileSystem').returns(fileSystem);
+
+    fileSystemManager.dispatchEventToListeners(
+        Persistence.IsolatedFileSystemManager.Events.FileSystemAdded, fileSystem);
+    await view.nextInput;
+
+    assert.lengthOf(view.input.fileSystems, 0);
+  });
+
+  it('wires up addFileSystem', async () => {
+    const {view, addFileSystemStub} = await setup();
+
+    view.input.onAddClicked();
+
+    sinon.assert.calledOnce(addFileSystemStub);
+  });
+
+  it('wires up removeFileSystem', async () => {
+    const {view, fileSystemManager, removeFileSystemStub} = await setup(['file:///home/user/foo']);
+    const fileSystem = fileSystemManager.fileSystems()[0];
+
+    view.input.onRemoveClicked(fileSystem as Persistence.IsolatedFileSystem.IsolatedFileSystem);
+
+    sinon.assert.calledOnceWithExactly(removeFileSystemStub, fileSystem);
+  });
+});