feat: Select all projects iconbutton (#574)

l10n/bundle.l10n.de.json

@@ -30,5 +30,7 @@
   "SETTINGS": "EINSTELLUNGEN",
   "PROJECTS": "PROJEKTE",
   "TOOLS": "WERKZEUGE",
-  "SETUP": "KONFIGURATION"
+  "SETUP": "KONFIGURATION",
+  "Select All": "Alle auswählen",
+  "Unselect All": "Alle abwählen"
 }

l10n/bundle.l10n.fr.json

@@ -26,5 +26,7 @@
   "Toggle Playwright Configs": "Basculer les configurations Playwright",
   "Update snapshots": "Mettre à jour les captures",
   "Update method" : "Mettre à jour la méthode",
+  "Select All": "Tout sélectionner",
+  "Unselect All": "Tout désélectionner",
   "When enabled, Playwright will reuse the browser instance between tests. This will disable parallel execution.": "Si cette option est activée, Playwright réutilisera l'instance du navigateur entre les tests. Cela désactivera l'exécution parallèle."
 }

l10n/bundle.l10n.it.json

@@ -26,5 +26,7 @@
   "Toggle Playwright Configs": "Attiva/disattiva Playwright Configs",
   "Update snapshots": "Aggiorna snapshots",
   "Update method" : "Aggiorna metodo",
+  "Select All": "Seleziona tutto",
+  "Unselect All": "Deseleziona tutto",
   "When enabled, Playwright will reuse the browser instance between tests. This will disable parallel execution.": "Quando attivata, Playwright riusa l'instanza browser tra i test. Questo disattiva l'esecuzione parallela."
 }

l10n/bundle.l10n.json

@@ -26,5 +26,7 @@
   "Toggle Playwright Configs": "Toggle Playwright Configs",
   "Update snapshots": "Update snapshots",
   "Update method" : "Update method",
+  "Select All": "Select All",
+  "Unselect All": "Unselect All",
   "When enabled, Playwright will reuse the browser instance between tests. This will disable parallel execution.": "When enabled, Playwright will reuse the browser instance between tests. This will disable parallel execution."
 }

l10n/bundle.l10n.zh-CN.json

@@ -26,5 +26,7 @@
   "Toggle Playwright Configs": "切换 Playwright 配置",
   "Update snapshots": "更新快照",
   "Update method" : "更新方法",
+  "Select All": "全选",
+  "Unselect All": "取消全选",
   "When enabled, Playwright will reuse the browser instance between tests. This will disable parallel execution.": "启用后，Playwright 将在测试之间重复使用浏览器实例。这将禁用并行执行。"
 }

media/common.css

@@ -81,9 +81,22 @@ textarea {
 
 .section-header {
   font-size: 11px;
-  margin: 0 8px;
+  margin: 10px 8px 3px 8px;
   font-weight: 700;
   color: var(--vscode-editor-inlineValuesForeground);
+
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.section-toolbar > a {
+  border-radius: 5px;
+  font-size: 16px;
+}
+
+.section-toolbar > a:hover {
+  background-color: var(--vscode-toolbar-hoverBackground);
 }
 
 .action, .combobox {

media/settingsView.js

@@ -19,6 +19,9 @@
 /** @type {Config} */
 let selectConfig;
 
+const selectAllButton = /** @type {HTMLAnchorElement} */ (document.getElementById('selectAll'));
+const unselectAllButton = /** @type {HTMLAnchorElement} */ (document.getElementById('unselectAll'));
+
 /**
  * @param {Array<ProjectEntry>} projects
  */
@@ -41,7 +44,20 @@ function updateProjects(projects) {
     div.appendChild(label);
     projectsElement.appendChild(div);
   }
+
+  const allEnabled = projects.every(p => p.enabled);
+  selectAllButton.hidden = allEnabled;
+  unselectAllButton.hidden = !allEnabled;
+}
+
+/**
+ * @param {boolean} enabled
+ */
+function setAllProjectsEnabled(enabled) {
+  vscode.postMessage({ method: 'setAllProjectsEnabled', params: { configFile: selectConfig.configFile, enabled } });
 }
+selectAllButton.addEventListener('click', () => setAllProjectsEnabled(true));
+unselectAllButton.addEventListener('click', () => setAllProjectsEnabled(false));
 
 for (const input of Array.from(document.querySelectorAll('input[type=checkbox]'))) {
   input.addEventListener('change', event => {

src/settingsView.ts

@@ -80,6 +80,9 @@ export class SettingsView extends DisposableBase implements vscodeTypes.WebviewV
       } else if (data.method === 'setProjectEnabled') {
         const { configFile, projectName, enabled } = data.params;
         this._models.setProjectEnabled(configFile, projectName, enabled);
+      } else if (data.method === 'setAllProjectsEnabled') {
+        const { configFile, enabled } = data.params;
+        this._models.setAllProjectsEnabled(configFile, enabled);
       } else if (data.method === 'selectModel') {
         this._models.selectModel(data.params.configFile);
       }
@@ -221,7 +224,17 @@ function htmlForWebview(vscode: vscodeTypes.VSCode, extensionUri: vscodeTypes.Ur
           <span id="configToolbar"></span>
         </div>
       </div>
-      <div class="section-header">${vscode.l10n.t('PROJECTS')}</div>
+      <div class="section-header">
+        ${vscode.l10n.t('PROJECTS')}
+        <div class="section-toolbar">
+          <a id="selectAll" role="button" title="${vscode.l10n.t('Select All')}">
+            <svg width="48" height="48" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M9 9H4v1h5V9z"/><path d="M7 12V7H6v5h1z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3l1-1h7l1 1v7l-1 1h-2v2l-1 1H3l-1-1V6l1-1h2V3zm1 2h4l1 1v4h2V3H6v2zm4 1H3v7h7V6z"/></svg>
+          </a>
+          <a id="unselectAll" role="button" title="${vscode.l10n.t('Unselect All')}" hidden>
+            <svg width="48" height="48" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M9 9H4v1h5V9z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3l1-1h7l1 1v7l-1 1h-2v2l-1 1H3l-1-1V6l1-1h2V3zm1 2h4l1 1v4h2V3H6v2zm4 1H3v7h7V6z"/></svg>
+          </a>
+        </div>
+      </div>
       <div data-testid="projects" id="projects" class="vbox"></div>
       <div class="section-header">${vscode.l10n.t('SETUP')}</div>
       <div id="rareActions" class="vbox"></div>

src/testModel.ts

@@ -740,6 +740,19 @@ export class TestModelCollection extends DisposableBase {
     this._didUpdate.fire();
   }
 
+  setAllProjectsEnabled(configFile: string, enabled: boolean) {
+    const model = this._models.find(m => m.config.configFile === configFile);
+    if (!model)
+      return;
+    const projectsToUpdate = model.projects().filter(p => p.isEnabled !== enabled);
+    if (projectsToUpdate.length === 0)
+      return;
+    for (const project of projectsToUpdate)
+      project.isEnabled = enabled;
+    this._saveSettings();
+    this._didUpdate.fire();
+  }
+
   testDirs(): Set<string> {
     const result = new Set<string>();
     for (const model of this._models) {

tests/settings.spec.ts

@@ -46,6 +46,52 @@ test('should toggle setting from webview', async ({ activate }) => {
   expect(configuration.get('reuseBrowser')).toBe(true);
 });
 
+test('should select-all/unselect-all', async ({ activate }) => {
+  const { vscode } = await activate({
+    'playwright.config.ts': `
+      import { defineConfig } from '@playwright/test';
+      export default defineConfig({
+        projects: [
+          { name: 'foo', testMatch: 'foo.ts' },
+          { name: 'bar', testMatch: 'bar.ts' },
+        ]
+      });
+    `,
+  });
+
+  const webView = vscode.webViews.get('pw.extension.settingsView')!;
+
+  await expect(webView.locator('body')).toMatchAriaSnapshot(`
+    - text: PROJECTS
+    - button "Select All"
+    - checkbox "foo" [checked]
+    - checkbox "bar" [checked=false]
+  `);
+
+  await webView.getByRole('checkbox', { name: 'bar' }).check();
+
+  await expect(webView.locator('body')).toMatchAriaSnapshot(`
+    - button "Unselect All"
+    - checkbox "foo" [checked]
+    - checkbox "bar" [checked]
+  `);
+
+  await webView.getByRole('button', { name: 'Unselect All' }).click();
+
+  await expect(webView.locator('body')).toMatchAriaSnapshot(`
+    - button "Select All"
+    - checkbox "foo" [checked=false]
+    - checkbox "bar" [checked=false]
+  `);
+
+  await webView.getByRole('button', { name: 'Select All' }).click();
+  await expect(webView.locator('body')).toMatchAriaSnapshot(`
+    - button "Unselect All"
+    - checkbox "foo" [checked]
+    - checkbox "bar" [checked]
+  `);
+});
+
 test('should reflect changes to setting', async ({ activate }) => {
   const { vscode } = await activate({
     'playwright.config.js': `module.exports = {}`,