Skip to content

Commit

Permalink
Use one-way bindings for wpt-metadata and wpt-amend-metadata (#4187)
Browse files Browse the repository at this point in the history 
* Use one-way binding for wpt-amend-metadata
* Use one-way binding for wpt-metadata
* Update parent components
* Fix handleFieldInput to use the supplied event value
* Clear selected cells after dismissing the triage dialog
* Remove now unused reference to openCollapsible
* Fix a typo
* Handle updates to metadata and label maps
  • Loading branch information
@past
past authored Jan 23, 2025
1 parent 6c31729 commit a4e4797
Show file tree
Hide file tree
Showing 4 changed files with 101 additions and 42 deletions.
13 changes: 10 additions & 3 deletions webapp/components/test-file-results-table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ class TestFileResultsTable extends WPTFlags(Pluralizer(AmendMetadataMixin(WPTCol
</template>
</tbody>
</table>
<wpt-amend-metadata id="amend" selected-metadata="{{selectedMetadata}}" path="[[path]]"></wpt-amend-metadata>
<wpt-amend-metadata id="amend" selected-metadata="[[selectedMetadata]]" path="[[path]]"></wpt-amend-metadata>
`;
}

Expand Down Expand Up @@ -295,6 +295,7 @@ class TestFileResultsTable extends WPTFlags(Pluralizer(AmendMetadataMixin(WPTCol
this.toggleDiffFilter = () => {
this.onlyShowDifferences = !this.onlyShowDifferences;
};
this.addEventListener('selected-metadata-changed', this.selectedMetadataChanged);
}

computeDisplayedProducts(testRuns) {
Expand Down Expand Up @@ -456,8 +457,14 @@ class TestFileResultsTable extends WPTFlags(Pluralizer(AmendMetadataMixin(WPTCol
return ['FAIL', 'ERROR', 'TIMEOUT'].includes(status);
}

clearSelectedCells(selectedMetadata) {
this.handleClear(selectedMetadata);
clearSelectedCells() {
if (this.selectedMetadata.length === 0) {
this.handleClear(this.selectedMetadata);
}
}

selectedMetadataChanged(e) {
this.selectedMetadata = e.detail.value;
}

handleTriageMode(isTriageMode) {
Expand Down
65 changes: 46 additions & 19 deletions webapp/components/wpt-amend-metadata.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const AmendMetadataMixin = (superClass) => class extends superClass {
}

pathChanged() {
this.selectedMetadata = [];
this.set('selectedMetadata', []);
}

computeHasSelections(selectedMetadata) {
Expand All @@ -53,7 +53,7 @@ const AmendMetadataMixin = (superClass) => class extends superClass {
for (const cell of this.selectedCells) {
cell.removeAttribute('selected');
}
this.selectedCells = [];
this.set('selectedCells', []);
}
}

Expand All @@ -68,17 +68,29 @@ const AmendMetadataMixin = (superClass) => class extends superClass {
td.setAttribute('triage', 'triage');
}

handleSelect(td, browser, test, toast) {
_updateSelectedMetadataAndCells(td, browser, test) {
if (this.selectedMetadata.find(s => s.test === test && s.product === browser)) {
this.selectedMetadata = this.selectedMetadata.filter(s => !(s.test === test && s.product === browser));
this.selectedCells = this.selectedCells.filter(c => c !== td);
const newSelectedMetadata = this.selectedMetadata.filter(s => !(s.test === test && s.product === browser));
this.set('selectedMetadata', newSelectedMetadata);

const newSelectedCells = this.selectedCells.filter(c => c !== td);
this.set('selectedCells', newSelectedCells);

td.removeAttribute('selected');
} else {
const selected = { test: test, product: browser };
this.selectedMetadata = [...this.selectedMetadata, selected];
const newSelectedMetadata = [...this.selectedMetadata, selected];
this.set('selectedMetadata', newSelectedMetadata);

td.setAttribute('selected', 'selected');
this.selectedCells.push(td);

const newSelectedCells = [...this.selectedCells, td];
this.set('selectedCells', newSelectedCells);
}
}

handleSelect(td, browser, test, toast) {
this._updateSelectedMetadataAndCells(td, browser, test);

if (this.selectedMetadata.length) {
toast.show();
Expand All @@ -92,7 +104,7 @@ const AmendMetadataMixin = (superClass) => class extends superClass {
}

if (this.selectedMetadata.length > 0) {
this.selectedMetadata = [];
this.set('selectedMetadata', []);
}
toast.hide();
}
Expand Down Expand Up @@ -163,9 +175,9 @@ class AmendMetadata extends LoadingState(PathInfo(ProductInfo(PolymerElement)))
<div class="metadata-entry">
<img class="browser" src="[[displayMetadataLogo(node.product)]]">
:
<paper-input label="Bug URL" on-input="handleFieldInput" value="{{node.url}}" autofocus></paper-input>
<paper-input label="Bug URL" on-input="handleFieldInput" value="[[node.url]]" autofocus></paper-input>
<template is="dom-if" if="[[!node.product]]">
<paper-input label="Label" on-input="handleFieldInput" value="{{node.label}}"></paper-input>
<paper-input label="Label" on-input="handleFieldInput" value="[[node.label]]"></paper-input>
</template>
</div>
<template is="dom-repeat" items="[[node.tests]]" as="test">
Expand Down Expand Up @@ -198,7 +210,6 @@ class AmendMetadata extends LoadingState(PathInfo(ProductInfo(PolymerElement)))
fieldsFilled: Object,
selectedMetadata: {
type: Array,
notify: true,
},
displayedMetadata: {
type: Array,
Expand All @@ -223,15 +234,20 @@ class AmendMetadata extends LoadingState(PathInfo(ProductInfo(PolymerElement)))
}

open() {
this.dialog.open();
this.populateDisplayData();
this.dialog.open();
this.dialog.addEventListener('keydown', this.enter);
}

close() {
this.dialog.removeEventListener('keydown', this.enter);
this.triageSubmitDisabled = true;
this.selectedMetadata = [];
this.set('selectedMetadata', []);
this.dispatchEvent(new CustomEvent('selected-metadata-changed', {
bubbles: true,
composed: true,
detail: { value: [] }
}));
this.fieldsFilled = {filled: [], numEmpty: 0};
this.dialog.close();
}
Expand Down Expand Up @@ -359,7 +375,7 @@ class AmendMetadata extends LoadingState(PathInfo(ProductInfo(PolymerElement)))
}

populateDisplayData() {
this.displayedMetadata = [];
this.set('displayedMetadata', []);
// Info to keep track of which fields have been filled.
this.fieldsFilled = {filled: [], numEmpty: 0};

Expand All @@ -377,16 +393,19 @@ class AmendMetadata extends LoadingState(PathInfo(ProductInfo(PolymerElement)))
browserMap[entry.product].push(test);
}

const newDisplayedMetadata = [];
for (const key in browserMap) {
let node = { product: key, url: '', tests: browserMap[key] };
// when key (product) is empty, we will set a label field because
// this is a test-level triage.
if (key === '') {
node['label'] = '';
}
this.displayedMetadata.push(node);
newDisplayedMetadata.push(node);
this.fieldsFilled.filled.push(false);
}

this.set('displayedMetadata', newDisplayedMetadata);
// A URL or label must be supplied for every triage item,
// which are all currently empty.
this.fieldsFilled.numEmpty = this.displayedMetadata.length;
Expand All @@ -395,8 +414,16 @@ class AmendMetadata extends LoadingState(PathInfo(ProductInfo(PolymerElement)))
handleFieldInput(event) {
// Detect which input was filled.
const index = event.model.__data.index;
const url = this.displayedMetadata[index].url;
const label = this.displayedMetadata[index].label;
const isLabel = event.target.label === 'Label';
const path = `displayedMetadata.${index}.url`;
const labelPath = `displayedMetadata.${index}.label`;
const updatedPath = isLabel ? labelPath : path;

const newValue = event.target.value;
this.set(updatedPath, newValue);

const url = this.get(path);
const label = this.get(labelPath);

// Check if the input is empty.
if (url === '' && (label === '' || label === undefined)) {
Expand All @@ -421,7 +448,7 @@ class AmendMetadata extends LoadingState(PathInfo(ProductInfo(PolymerElement)))

const triagedMetadataMap = this.getTriagedMetadataMap(this.displayedMetadata);
if (Object.keys(triagedMetadataMap).length === 0) {
this.selectedMetadata = [];
this.set('selectedMetadata', []);
let errMsg = '';
if (this.displayedMetadata.length > 0 && this.displayedMetadata[0].product === '') {
errMsg = 'Failed to triage: Bug URL and Label fields cannot both be empty.';
Expand Down Expand Up @@ -464,7 +491,7 @@ class AmendMetadata extends LoadingState(PathInfo(ProductInfo(PolymerElement)))
toast.open();
});

this.selectedMetadata = [];
this.set('selectedMetadata', []);
}
}

Expand Down
38 changes: 23 additions & 15 deletions webapp/components/wpt-metadata.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
PolymerElement
} from '../node_modules/@polymer/polymer/polymer-element.js';
import { LoadingState } from './loading-state.js';
import { PathInfo } from '../components/path.js';
import { PathInfo } from './path.js';
import { ProductInfo } from './product-info.js';

class WPTMetadataNode extends ProductInfo(PolymerElement) {
Expand Down Expand Up @@ -100,7 +100,7 @@ class WPTMetadata extends PathInfo(LoadingState(PolymerElement)) {
></wpt-metadata-node>
</template>
</iron-collapse>
<paper-button id="metadata-toggle" onclick="[[openCollapsible]]">
<paper-button id="metadata-toggle" on-click="handleOpenCollapsible">
Show more
</paper-button>
</template>
Expand Down Expand Up @@ -146,26 +146,20 @@ class WPTMetadata extends PathInfo(LoadingState(PolymerElement)) {
},
metadataMap: {
type: Object,
notify: true,
},
labelMap: {
type: Object,
notify: true,
},
triageNotifier: Boolean,
triageNotifier: {
type: Boolean,
observer: 'loadPendingMetadata',
},
};
}

static get observers() {
return [
'loadPendingMetadata(triageNotifier)',
];
}

constructor() {
super();
this.loadPendingMetadata();
this.openCollapsible = this.handleOpenCollapsible.bind(this);
}

_resetSelectors() {
Expand All @@ -179,6 +173,10 @@ class WPTMetadata extends PathInfo(LoadingState(PolymerElement)) {

// loadMergedMetadata is called when products is changed.
loadMergedMetadata(products) {
if (!products) {
return;
}

let productVal = [];
for (let i = 0; i < products.length; i++) {
productVal.push(products[i].browser_name);
Expand Down Expand Up @@ -256,7 +254,7 @@ class WPTMetadata extends PathInfo(LoadingState(PolymerElement)) {
}

// This loop constructs both the metadataMap, which is used to show inline
// bug icons in the test results, and displayedMetdata, which is the list of
// bug icons in the test results, and displayedMetadata, which is the list of
// metadata links shown at the bottom of the page.
let metadataMap = {};
let labelMap = {};
Expand Down Expand Up @@ -308,8 +306,18 @@ class WPTMetadata extends PathInfo(LoadingState(PolymerElement)) {
}
}

this.labelMap = labelMap;
this.metadataMap = metadataMap;
this.set('labelMap', labelMap);
this.dispatchEvent(new CustomEvent('label-map-changed', {
bubbles: true,
composed: true,
detail: { value: labelMap }
}));
this.set('metadataMap', metadataMap);
this.dispatchEvent(new CustomEvent('metadata-map-changed', {
bubbles: true,
composed: true,
detail: { value: metadataMap }
}));
this._resetSelectors();
return displayedMetadata;
}
Expand Down
27 changes: 22 additions & 5 deletions webapp/views/wpt-results.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -401,11 +401,11 @@ class WPTResults extends AmendMetadataMixin(Pluralizer(WPTColors(WPTFlags(PathIn
<wpt-metadata products="[[displayedProducts]]"
path="[[path]]"
search-results="[[searchResults]]"
metadata-map="{{metadataMap}}"
label-map="{{labelMap}}"
metadata-map="[[metadataMap]]"
label-map="[[labelMap}]]"
triage-notifier="[[triageNotifier]]"></wpt-metadata>
</template>
<wpt-amend-metadata id="amend" selected-metadata="{{selectedMetadata}}" path="[[path]]"></wpt-amend-metadata>
<wpt-amend-metadata id="amend" selected-metadata="[[selectedMetadata]]" path="[[path]]"></wpt-amend-metadata>
`;
}

Expand Down Expand Up @@ -562,6 +562,9 @@ class WPTResults extends AmendMetadataMixin(Pluralizer(WPTColors(WPTFlags(PathIn
this.dismissToast = e => e.target.closest('paper-toast').close();
this.reloadPendingMetadata = this.handleReloadPendingMetadata.bind(this);
this.sortTestName = this.sortTestName.bind(this);
this.addEventListener('selected-metadata-changed', this.selectedMetadataChanged);
this.addEventListener('metadata-map-changed', this.metadataMapChanged);
this.addEventListener('label-map-changed', this.labelMapChanged);
}

connectedCallback() {
Expand Down Expand Up @@ -1482,8 +1485,22 @@ class WPTResults extends AmendMetadataMixin(Pluralizer(WPTColors(WPTFlags(PathIn
this.handleTriageModeChange(isTriageMode, this.$['selected-toast']);
}

clearSelectedCells(selectedMetadata) {
this.handleClear(selectedMetadata);
clearSelectedCells() {
if (this.selectedMetadata.length === 0) {
this.handleClear(this.selectedMetadata);
}
}

selectedMetadataChanged(e) {
this.selectedMetadata = e.detail.value;
}

metadataMapChanged(e) {
this.metadataMap = e.detail.value;
}

labelMapChanged(e) {
this.labelMap = e.detail.value;
}

handleTriageHover() {
Expand Down

0 comments on commit a4e4797

Please sign in to comment.