Merge pull request #180 from amtrack/feat/ui-density-settings

feat: add User Interface -> Density Settings

src/plugins/density-settings/comfy.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../schema.json",
+  "settings": {
+    "densitySettings": {
+      "density": "Comfy"
+    }
+  }
+}

src/plugins/density-settings/compact.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../schema.json",
+  "settings": {
+    "densitySettings": {
+      "density": "Compact"
+    }
+  }
+}

src/plugins/density-settings/index.e2e-spec.ts

@@ -0,0 +1,79 @@
+import * as assert from 'assert';
+import * as child from 'child_process';
+import * as path from 'path';
+import DensitySettings from '.';
+
+describe(DensitySettings.name, () => {
+  it('should set to Compact', function() {
+    this.timeout(1000 * 90);
+    this.slow(1000 * 30);
+    const setCompactCommand = child.spawnSync(path.resolve('bin', 'run'), [
+      'browserforce:apply',
+      '-f',
+      path.resolve(path.join(__dirname, 'compact.json'))
+    ]);
+    assert.deepEqual(
+      setCompactCommand.status,
+      0,
+      setCompactCommand.output.toString()
+    );
+    assert(
+      /to '"Compact"'/.test(setCompactCommand.output.toString()),
+      setCompactCommand.output.toString()
+    );
+  });
+  it('should already be set to Compact', function() {
+    this.timeout(1000 * 90);
+    this.slow(1000 * 30);
+    const setCompactCommand2 = child.spawnSync(path.resolve('bin', 'run'), [
+      'browserforce:apply',
+      '-f',
+      path.resolve(path.join(__dirname, 'compact.json'))
+    ]);
+    assert.deepEqual(
+      setCompactCommand2.status,
+      0,
+      setCompactCommand2.output.toString()
+    );
+    assert(
+      /no action necessary/.test(setCompactCommand2.output.toString()),
+      setCompactCommand2.output.toString()
+    );
+  });
+  it('should set to Comfy', function() {
+    this.timeout(1000 * 90);
+    this.slow(1000 * 30);
+    const setComfyCommand = child.spawnSync(path.resolve('bin', 'run'), [
+      'browserforce:apply',
+      '-f',
+      path.resolve(path.join(__dirname, 'comfy.json'))
+    ]);
+    assert.deepEqual(
+      setComfyCommand.status,
+      0,
+      setComfyCommand.output.toString()
+    );
+    assert(
+      /to '"Comfy"'/.test(setComfyCommand.output.toString()),
+      setComfyCommand.output.toString()
+    );
+  });
+  it('should already be set to Comfy', function() {
+    this.timeout(1000 * 90);
+    this.slow(1000 * 30);
+    const setComfyCommand2 = child.spawnSync(path.resolve('bin', 'run'), [
+      'browserforce:apply',
+      '-f',
+      path.resolve(path.join(__dirname, 'comfy.json'))
+    ]);
+    assert.deepEqual(
+      setComfyCommand2.status,
+      0,
+      setComfyCommand2.output.toString()
+    );
+    assert(
+      /no action necessary/.test(setComfyCommand2.output.toString()),
+      setComfyCommand2.output.toString()
+    );
+  });
+});

src/plugins/density-settings/index.ts

@@ -0,0 +1,95 @@
+import { BrowserforcePlugin } from '../../plugin';
+
+const PATHS = {
+  BASE: 'lightning/setup/DensitySetup/home'
+};
+
+const domWaitForPickerItems = () => {
+  return (
+    document.querySelector('one-density-visual-picker') &&
+    document.querySelector('one-density-visual-picker').shadowRoot &&
+    document
+      .querySelector('one-density-visual-picker')
+      .shadowRoot.querySelectorAll('one-density-visual-picker-item').length >
+      1 &&
+    document
+      .querySelector('one-density-visual-picker')
+      .shadowRoot.querySelectorAll('one-density-visual-picker-item')[1]
+      .shadowRoot &&
+    document
+      .querySelector('one-density-visual-picker')
+      .shadowRoot.querySelectorAll('one-density-visual-picker-item')[1]
+      .shadowRoot.querySelector('input')
+  );
+};
+
+const domGetPickerItemInputs = () => {
+  return Array.from(
+    document
+      .querySelector('one-density-visual-picker')
+      .shadowRoot.querySelectorAll('one-density-visual-picker-item')
+  ).map(item => {
+    return item.shadowRoot.querySelector('input');
+  });
+};
+
+export default class DensitySettings extends BrowserforcePlugin {
+  public async retrieve() {
+    const response = {
+      density: ''
+    };
+    const page = await this.browserforce.openPage(PATHS.BASE, {
+      waitUntil: ['load', 'domcontentloaded', 'networkidle0']
+    });
+    await page.waitForFunction(domWaitForPickerItems);
+    const inputJsHandle = await page.evaluateHandle(domGetPickerItemInputs);
+    // convert JSHandle.getProperties (Map) to Array
+    const inputs = Array.from((await inputJsHandle.getProperties()).values());
+    const checkedRadio = await page.evaluate((...inputElements) => {
+      return inputElements
+        .map(input => {
+          return {
+            value: input.value,
+            checked: input.checked
+          };
+        })
+        .find(input => input.checked);
+    }, ...inputs);
+    if (checkedRadio && checkedRadio.value) {
+      response.density = checkedRadio.value;
+    }
+    return response;
+  }
+
+  public async apply(config) {
+    const page = await this.browserforce.openPage(PATHS.BASE, {
+      waitUntil: ['load', 'domcontentloaded', 'networkidle0']
+    });
+    await page.waitForFunction(domWaitForPickerItems);
+    const inputJsHandle = await page.evaluateHandle(domGetPickerItemInputs);
+    // convert JSHandle.getProperties (Map) to Array
+    const inputs = Array.from((await inputJsHandle.getProperties()).values());
+    await Promise.all([
+      page.waitForResponse(
+        response =>
+          response
+            .url()
+            .includes(
+              'UserSettings.DensityUserSettings.setDefaultDensitySetting=1'
+            ) && response.status() === 200
+      ),
+      page.evaluate(
+        (targetValue, ...inputElements) => {
+          const targetInput = inputElements.find(
+            input => input.value === targetValue
+          );
+          if (targetInput) {
+            targetInput.click();
+          }
+        },
+        config.density,
+        ...inputs
+      )
+    ]);
+  }
+}

src/plugins/density-settings/schema.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "https://github.com/amtrack/sfdx-browserforce-plugin/src/plugins/density-settings/schema.json",
+  "title": "Density Settings",
+  "type": "object",
+  "properties": {
+    "density": {
+      "title": "Density",
+      "description": "Choose the default display setting for your org",
+      "type": "string",
+      "enum": ["Comfy", "Compact"]
+    }
+  }
+}

src/plugins/index.ts

@@ -1,6 +1,7 @@
 import * as communities from './communities';
 import * as companySettings from './company-settings';
 import * as customerPortal from './customer-portal';
+import * as densitySettings from './density-settings';
 import * as homePageLayouts from './home-page-layouts';
 import * as reportsAndDashboards from './reports-and-dashboards';
 import * as salesforceToSalesforce from './salesforce-to-salesforce';
@@ -9,6 +10,7 @@ export {
   communities,
   companySettings,
   customerPortal,
+  densitySettings,
   homePageLayouts,
   reportsAndDashboards,
   salesforceToSalesforce,

src/plugins/schema.json

@@ -16,6 +16,9 @@
         "customerPortal": {
           "$ref": "./customer-portal/schema.json"
         },
+        "densitySettings": {
+          "$ref": "./density-settings/schema.json"
+        },
         "homePageLayouts": {
           "$ref": "./home-page-layouts/schema.json"
         },