Merge pull request #66 from BrightspaceUI/dlockhart/browser-tabs

render browsers as tabs in the the header
BrightspaceUI · Jul 12, 2023 · e261489 · e261489
2 parents 9311dfb + c7cdaa8
commit e261489
Show file tree

Hide file tree

Showing 5 changed files with 466 additions and 33 deletions.
diff --git a/src/server/report/app.js b/src/server/report/app.js
@@ -1,7 +1,6 @@
 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';
 
@@ -42,6 +41,7 @@ class App extends LitElement {
 		table {
 			background-color: #ffffff;
 			border-collapse: collapse;
+			width: 100%;
 		}
 		td, th {
 			border: 1px solid #dfe6ef;
@@ -120,10 +120,15 @@ class App extends LitElement {
 				} else {
 					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>
+						<d2l-vdiff-report-test
+							browsers="${this._filterBrowsers.join(',')}"
+							file="${fileData.name}"
+							full-mode="${this._fullMode}"
+							layout="${this._layout}"
+							@navigation="${this._handleNavigation}"
+							@setting-change="${this._handleSettingChange}"
+							?show-overlay="${this._overlay}"
+							test="${testData.name}"></d2l-vdiff-report-test>
 					`;
 				}
 			}
@@ -134,6 +139,9 @@ class App extends LitElement {
 				view = this._files.map(f => this._renderFile(f));
 			}
 		}
+		if (hasPadding) {
+			view = html`<div class="padding">${view}</div>`;
+		}
 		return html`
 			<div class="container">
 				<aside>
@@ -142,13 +150,10 @@ class App extends LitElement {
 						${this._renderFilters()}
 					</div>
 				</aside>
-				<main><div class="${classMap({ padding: hasPadding })}">${view}</div></main>
+				<main>${view}</main>
 			</div>
 		`;
 	}
-	_goHome() {
-		this._updateSearchParams({ file: undefined, test: undefined });
-	}
 	_handleFilterBrowserChange(e) {
 		const browsers = data.browsers.map(b => b.name).filter(b => {
 			if (b === e.target.value) {
@@ -162,6 +167,13 @@ class App extends LitElement {
 	_handleFilterStatusChange(e) {
 		this._updateSearchParams({ status: e.target.value });
 	}
+	_handleNavigation(e) {
+		switch (e.detail.location) {
+			case 'home':
+				this._updateSearchParams({ file: undefined, test: undefined });
+				break;
+		}
+	}
 	_handleSettingChange(e) {
 		this[`_${e.detail.name}`] = e.detail.value;
 	}
@@ -217,15 +229,18 @@ class App extends LitElement {
 			`;
 		};
 
+		const browserFilter = data.browsers.length > 1 ? html`
+			<fieldset>
+				<legend>Browsers</legend>
+				${ data.browsers.map(b => renderBrowser(b))}
+			</fieldset>` : nothing;
+
 		return html`
 			<fieldset>
 				<legend>Test Status</legend>
 				${statusFilters.map(f => renderStatusFilter(f))}
 			</fieldset>
-			<fieldset>
-				<legend>Browsers</legend>
-				${ data.browsers.map(b => renderBrowser(b))}
-			</fieldset>
+			${browserFilter}
 		`;
 
 	}

diff --git a/src/server/report/button.js b/src/server/report/button.js
@@ -0,0 +1,40 @@
+import { css, html, LitElement } from 'lit';
+
+class Button extends LitElement {
+	static properties = {
+		text: { type: String }
+	};
+	static styles = [css`
+		:host {
+			display: inline-block;
+		}
+		button {
+			align-items: center;
+			background-color: #ffffff;
+			border: 1px solid #cdd5dc;
+			border-radius: 5px;
+			cursor: pointer;
+			display: flex;
+			gap: 5px;
+			line-height: 24px;
+			margin: 0;
+			outline: none;
+			padding: 10px;
+			user-select: none;
+		}
+		button:hover,
+		button:focus {
+			background-color: #007bff;
+			color: #ffffff;
+		}
+		button:focus-visible {
+			border-color: #007bff;
+			box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #007bff;
+		}
+	`];
+	render() {
+		return html`<button type="button"><slot></slot>${this.text}</button>`;
+	}
+}
+
+customElements.define('d2l-vdiff-report-button', Button);