improved bar for test settings

BrightspaceUI · Jul 7, 2023 · 079dbdd · 079dbdd
1 parent d68762a
commit 079dbdd
Show file tree

Hide file tree

Showing 5 changed files with 245 additions and 50 deletions.
diff --git a/src/server/report/app.js b/src/server/report/app.js
@@ -1,20 +1,17 @@
-import './test-result.js';
+import './test.js';
 import { css, html, LitElement, nothing } from 'lit';
+import { FILTER_STATUS, FULL_MODE, LAYOUTS } from './common.js';
+import { classMap } from 'lit/directives/class-map.js';
 import data from './data.js';
 import page from 'page';
 
-const FILTER_STATUS = {
-	ALL: 'All',
-	PASSED: 'Passed',
-	FAILED: 'Failed'
-};
-
 class App extends LitElement {
 	static properties = {
 		_files: { state: true },
 		_filterFile: { state: true },
 		_filterTest: { state: true },
-		_mode: { state: true },
+		_fullMode: { state: true },
+		_layout: { state: true },
 		_overlay: { state: true }
 	};
 	static styles = [css`
@@ -26,7 +23,7 @@ class App extends LitElement {
 		}
 		aside {
 			background-color: #fff;
-			border: 1px solid #e6e6e6;
+			border-right: 1px solid #e6e6e6;
 			box-shadow: 0 0 6px rgba(0,0,0,.07);
 			box-sizing: border-box;
 			grid-area: sidebar;
@@ -42,9 +39,6 @@ class App extends LitElement {
 			background-color: #fafafa;
 			grid-area: content;
 		}
-		main > div {
-			padding: 20px;
-		}
 		table {
 			background-color: #ffffff;
 			border-collapse: collapse;
@@ -75,12 +69,16 @@ class App extends LitElement {
 		fieldset > legend {
 			font-weight: bold;
 		}
+		.padding {
+			padding: 20px;
+		}
 	`];
 	constructor() {
 		super();
 		this._filterBrowsers = data.browsers.map(b => b.name);
 		this._filterStatus = data.numFailed > 0 ? FILTER_STATUS.FAILED : FILTER_STATUS.ALL;
-		this._mode = 'sideBySide';
+		this._fullMode = FULL_MODE.GOLDEN.value;
+		this._layout = LAYOUTS.SPLIT.value;
 		this._overlay = true;
 		this._updateFiles();
 	}
@@ -104,7 +102,7 @@ class App extends LitElement {
 		page();
 	}
 	render() {
-		let view;
+		let hasPadding = true, view;
 		if (this._filterFile !== undefined && this._filterTest !== undefined) {
 			const fileData = data.files.find(f => f.name === this._filterFile);
 			if (!fileData) {
@@ -114,7 +112,13 @@ class App extends LitElement {
 				if (!testData) {
 					view = html`<p>Test not found: <b>${this._filterTest}</b>.</p>`;
 				} else {
-					view = this._renderTest(fileData, testData);
+					hasPadding = false;
+					view = html`
+						<d2l-vdiff-report-test full-mode="${this._fullMode}" file="${fileData.name}" layout="${this._layout}" ?show-overlay="${this._overlay}" test="${testData.name}" @setting-change="${this._handleSettingChange}"></d2l-vdiff-report-test>
+						<div class="padding">
+							<button @click="${this._goHome}">Back</button>
+						</div>
+					`;
 				}
 			}
 		} else {
@@ -132,7 +136,7 @@ class App extends LitElement {
 						${this._renderFilters()}
 					</div>
 				</aside>
-				<main><div>${view}</div></main>
+				<main><div class="${classMap({ padding: hasPadding })}">${view}</div></main>
 			</div>
 		`;
 	}
@@ -152,11 +156,8 @@ class App extends LitElement {
 		this._filterStatus = e.target.value;
 		this._updateFiles();
 	}
-	_handleModeChange(e) {
-		this._mode = e.target.options[e.target.selectedIndex].value;
-	}
-	_handleOverlayChange(e) {
-		this._overlay = e.target.checked;
+	_handleSettingChange(e) {
+		this[`_${e.detail.name}`] = e.detail.value;
 	}
 	_renderFile(file) {
 		const renderBrowserCell = (b) => {
@@ -218,25 +219,6 @@ class App extends LitElement {
 		`;
 
 	}
-	_renderTest(file, test) {
-		return html`
-			<h2>${test.name} (${(test.results.length - test.numFailed)}/${test.results.length} passed)</h2>
-			<div>
-				<label>Mode:
-					<select @change="${this._handleModeChange}">
-						<option value="sideBySide" ?selected="${this._mode === 'sideBySide'}">Side-by-side</option>
-						<option value="oneUpOriginal" ?selected="${this._mode === 'oneUpOriginal'}">One-up (original)</option>
-						<option value="oneUpNew" ?selected="${this._mode === 'oneUpNew'}">One-up (new)</option>
-					</select>
-				</label>
-				<label><input type="checkbox" ?checked="${this._overlay}" @change="${this._handleOverlayChange}">Show overlay</label>
-			</div>
-			${test.results.map(r => html`<d2l-vdiff-report-test-result browser="${r.name}" mode="${this._mode}" file="${file.name}" ?show-overlay="${this._overlay}" test="${test.name}"></d2l-vdiff-report-test-result>`)}
-			<div style="margin-top: 20px;">
-				<button @click="${this._goHome}">Back</button>
-			</div>
-		`;
-	}
 	_renderTestResultRow(file, test) {
 		const results = data.browsers.map(b => {
 			if (!this._filterBrowsers.includes(b.name)) return nothing;

diff --git a/src/server/report/common.js b/src/server/report/common.js
@@ -0,0 +1,37 @@
+import { ICON_FULL, ICON_SPLIT } from './icons.js';
+
+export const FILTER_STATUS = {
+	ALL: 'All',
+	PASSED: 'Passed',
+	FAILED: 'Failed'
+};
+
+export const FULL_MODE = {
+	GOLDEN: {
+		label: 'Golden',
+		value: 'golden'
+	},
+	NEW: {
+		label: 'New',
+		value: 'new'
+	}
+};
+
+export const LAYOUTS = {
+	FULL: {
+		label: 'Full',
+		icon: ICON_FULL,
+		value: 'full'
+	},
+	SPLIT: {
+		label: 'Split',
+		icon: ICON_SPLIT,
+		value: 'split'
+	}
+};
+
+let id = 0;
+export function getId() {
+	id++;
+	return `id-${id}`;
+}
diff --git a/src/server/report/icons.js b/src/server/report/icons.js
@@ -0,0 +1,14 @@
+import { svg } from 'lit';
+
+export const ICON_FULL = svg`
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+	<rect width="22" height="18" x="1" y="3" fill="none" stroke="currentColor" stroke-width="2" rx="2"/>
+</svg>
+`;
+
+export const ICON_SPLIT = svg`
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+	<rect width="22" height="18" x="1" y="3" fill="none" stroke="currentColor" stroke-width="2" rx="2"/>
+	<line x1="12" y1="3" x2="12" y2="20" stroke="currentColor" stroke-width="2" />
+</svg>
+`;
diff --git a/src/server/report/test-result.js b/src/server/report/test-result.js
@@ -1,31 +1,33 @@
 import { css, html, LitElement, nothing } from 'lit';
+import { FULL_MODE, LAYOUTS } from './common.js';
 import data from './data.js';
 
 class TestResult extends LitElement {
 	static properties = {
 		browser: { type: String },
-		mode: { type: String },
+		fullMode: { attribute: 'full-mode', type: String },
+		layout: { type: String },
 		file: { type: String },
 		showOverlay: { attribute: 'show-overlay', type: Boolean },
 		test: { type: String },
 	};
 	static styles = [css`
-		.side-by-side {
+		.split {
 			flex-direction: row;
 			flex-wrap: nowrap;
 			display: flex;
 			gap: 10px;
 		}
-		.side-by-side > div {
+		.split > div {
 			flex: 0 1 auto;
 		}
 		img {
 			max-width: 100%;
 		}
 		.diff-container {
-			background: repeating-conic-gradient(#cccccc 0% 25%, #ffffff 0% 50%) 50% / 20px 20px;
+			background: repeating-conic-gradient(#cdd5dc 0% 25%, #ffffff 0% 50%) 50% / 20px 20px;
 			background-position: 0 0;
-			border: 1px solid #cccccc;
+			border: 1px solid #cdd5dc;
 			display: inline-block;
 			line-height: 0;
 		}
@@ -37,9 +39,10 @@ class TestResult extends LitElement {
 			position: absolute;
 			top: 0;
 			left: 0;
+			z-index: 1;
 		}
 		.no-changes {
-			border: 1px solid #cccccc;
+			border: 1px solid #cdd5dc;
 			padding: 20px;
 		}
 	`];
@@ -87,18 +90,18 @@ class TestResult extends LitElement {
 		const overlay = (this.showOverlay && !resultData.passed) ?
 			html`<div class="overlay"><img src="../${resultData.info.diff}" loading="lazy" alt=""></div>` : nothing;
 
-		if (this.mode === 'sideBySide') {
+		if (this.layout === LAYOUTS.SPLIT.value) {
 			const g = html`<div class="diff-container">${goldenImage}</div>`;
 			return html`
-				<div class="side-by-side">
+				<div class="split">
 					${ resultData.passed ? noChanges : g }
 					<div class="diff-container overlay-container">${newImage}${overlay}</div>
 				</div>`;
-		} else {
+		} else if (this.layout === LAYOUTS.FULL.value) {
 			return html`
 				<div>
 					<div class="diff-container overlay-container">
-						${(this.mode === 'oneUpOriginal') ? goldenImage : newImage}
+						${(this.fullMode === FULL_MODE.GOLDEN.value) ? goldenImage : newImage}
 						${overlay}
 					</div>
 				</div>`;