Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use one-way bindings for wpt-metadata and wpt-amend-metadata #4187

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Use one-way bindings for wpt-metadata and wpt-amend-metadata #4187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c834ab1
Use one-way binding for wpt-amend-metadata
past Jan 3, 2025
0126256
Use one-way binding for wpt-metadata
past Jan 4, 2025
d4e2552
Update parent components
past Jan 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion webapp/components/test-file-results-table.js
View file
Open in desktop
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
60 changes: 41 additions & 19 deletions webapp/components/wpt-amend-metadata.js
View file
Open in desktop
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,15 @@ 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.fieldsFilled = {filled: [], numEmpty: 0};
this.dialog.close();
}
Expand Down Expand Up @@ -359,7 +370,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 +388,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 +409,11 @@ 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 path = `displayedMetadata.${index}.url`;
const labelPath = `displayedMetadata.${index}.label`;

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

// Check if the input is empty.
if (url === '' && (label === '' || label === undefined)) {
Expand All @@ -411,6 +428,11 @@ class AmendMetadata extends LoadingState(PathInfo(ProductInfo(PolymerElement)))
this.fieldsFilled.filled[index] = true;
}

this.set(path, event.target.value);
if (labelPath) {
this.set(labelPath, event.target.value);
}

// If all triage items have input, triage can be submitted.
this.triageSubmitDisabled = this.fieldsFilled.numEmpty > 0;
}
Expand All @@ -421,7 +443,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 +486,7 @@ class AmendMetadata extends LoadingState(PathInfo(ProductInfo(PolymerElement)))
toast.open();
});

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

Expand Down
25 changes: 12 additions & 13 deletions webapp/components/wpt-metadata.js
View file
Open in desktop
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,22 +146,17 @@ 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();
Expand All @@ -179,6 +174,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 @@ -308,8 +307,8 @@ class WPTMetadata extends PathInfo(LoadingState(PolymerElement)) {
}
}

this.labelMap = labelMap;
this.metadataMap = metadataMap;
this.set('labelMap', labelMap);
this.set('metadataMap', metadataMap);
this._resetSelectors();
return displayedMetadata;
}
Expand Down
6 changes: 3 additions & 3 deletions webapp/views/wpt-results.js
View file
Open in desktop
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
Loading