opendev/gerrit
Code Issues Proposed changes

Merge "Refactor to use name instead of index when selecting file tab"

Browse Source
This commit is contained in:
Dhruv Srivastava
2020-02-25 13:10:42 +00:00
committed by Gerrit Code Review
parent 746797a1e5 22f6dd365e
commit 6438b98468
3 changed files with 121 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
View File

@@ -535,25 +535,24 @@ limitations under the License.
</div>
</section>
<template is="dom-if" if="[[_showPrimaryTabs]]">
<paper-tabs id="primaryTabs" on-selected-changed="_handleFileTabChange">
<paper-tab>Files</paper-tab>
<template is="dom-repeat" items="[[_dynamicTabHeaderEndpoints]]"
as="tabHeader">
<paper-tab>
<gr-endpoint-decorator name$="[[tabHeader]]">
<gr-endpoint-param name="change" value="[[_change]]">
</gr-endpoint-param>
<gr-endpoint-param name="revision" value="[[_selectedRevision]]">
</gr-endpoint-param>
</gr-endpoint-decorator>
</paper-tab>
</template>
</paper-tabs>
</template>
<section class="patchInfo">
<div hidden$="[[!_showFileTabContent]]">
<template is="dom-if" if="[[_showPrimaryTabs]]">
<paper-tabs id="primaryTabs" on-selected-changed="_handleFileTabChange">
<paper-tab data-name$="[[_files_tab_name]]">Files</paper-tab>
<template is="dom-repeat" items="[[_dynamicTabHeaderEndpoints]]"
as="tabHeader">
<paper-tab data-name$="[[tabHeader]]">
<gr-endpoint-decorator name$="[[tabHeader]]">
<gr-endpoint-param name="change" value="[[_change]]">
</gr-endpoint-param>
<gr-endpoint-param name="revision" value="[[_selectedRevision]]">
</gr-endpoint-param>
</gr-endpoint-decorator>
</paper-tab>
</template>
</paper-tabs>
</template>
<div hidden$="[[!_findIfTabMatches(_currentTabName, _files_tab_name)]]">
<gr-file-list-header
id="fileListHeader"
account="[[_account]]"
@@ -604,13 +603,13 @@ limitations under the License.
on-reload-drafts="_reloadDraftsWithCallback"></gr-file-list>
</div>
<template is="dom-if" if="[[!_showFileTabContent]]">
<gr-endpoint-decorator name$="[[_selectedFilesTabPluginEndpoint]]">
<gr-endpoint-param name="change" value="[[_change]]">
</gr-endpoint-param>
<gr-endpoint-param name="revision" value="[[_selectedRevision]]">
</gr-endpoint-param>
</gr-endpoint-decorator>
<template is="dom-if" if="[[_findIfTabMatches(_currentTabName, _selectedTabPluginHeader)]]">
<gr-endpoint-decorator name$="[[_selectedTabPluginEndpoint]]">
<gr-endpoint-param name="change" value="[[_change]]">
</gr-endpoint-param>
<gr-endpoint-param name="revision" value="[[_selectedRevision]]">
</gr-endpoint-param>
</gr-endpoint-decorator>
</template>
</section>

62
polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js
View File

@@ -68,6 +68,7 @@
const CHANGE_DATA_TIMING_LABEL = 'ChangeDataLoaded';
const CHANGE_RELOAD_TIMING_LABEL = 'ChangeReloaded';
const SEND_REPLY_TIMING_LABEL = 'SendReply';
const FILES_TAB_NAME = 'files';
/**
* @appliesMixin Gerrit.FireMixin
@@ -322,7 +323,12 @@
_dynamicTabContentEndpoints: {
type: Array,
},
_selectedFilesTabPluginEndpoint: {
// The dynamic content of the plugin added tab
_selectedTabPluginEndpoint: {
type: String,
},
// The dynamic heading of the plugin added tab
_selectedTabPluginHeader: {
type: String,
},
_robotCommentsPatchSetDropdownItems: {
@@ -333,6 +339,14 @@
_currentRobotCommentsPatchSet: {
type: Number,
},
_files_tab_name: {
type: String,
value: FILES_TAB_NAME,
},
_currentTabName: {
type: String,
value: FILES_TAB_NAME,
},
};
}
@@ -503,30 +517,44 @@
return currentView === view;
}
_handleFileTabChange(e) {
const selectedIndex = this.shadowRoot
.querySelector('#primaryTabs').selected;
this._showFileTabContent = selectedIndex === 0;
// Initial tab is the static files list.
const newSelectedTab =
this._dynamicTabContentEndpoints[selectedIndex - 1];
if (newSelectedTab !== this._selectedFilesTabPluginEndpoint) {
this._selectedFilesTabPluginEndpoint = newSelectedTab;
_findIfTabMatches(currentTab, tab) {
return currentTab === tab;
}
const tabName = this._selectedFilesTabPluginEndpoint || 'files';
const source = e && e.type ? e.type : '';
this.$.reporting.reportInteraction('tab-changed', {tabName, source});
_handleFileTabChange(e) {
const selectedIndex = e.target.selected;
const tabs = e.target.querySelectorAll('paper-tab');
this._currentTabName = tabs[selectedIndex] &&
tabs[selectedIndex].dataset.name;
const source = e && e.type ? e.type : '';
const pluginIndex = this._dynamicTabHeaderEndpoints.indexOf(
this._currentTabName);
if (pluginIndex !== -1) {
this._selectedTabPluginEndpoint = this._dynamicTabContentEndpoints[
pluginIndex];
this._selectedTabPluginHeader = this._dynamicTabHeaderEndpoints[
pluginIndex];
} else {
this._selectedTabPluginEndpoint = '';
this._selectedTabPluginHeader = '';
}
this.$.reporting.reportInteraction('tab-changed',
{tabName: this._currentTabName, source});
}
_handleShowTab(e) {
const idx = this._dynamicTabContentEndpoints.indexOf(e.detail.tab);
const primaryTabs = this.shadowRoot.querySelector('#primaryTabs');
const tabs = primaryTabs.querySelectorAll('paper-tab');
let idx = -1;
tabs.forEach((tab, index) => {
if (tab.dataset.name === e.detail.tab) idx = index;
});
if (idx === -1) {
console.warn(e.detail.tab + ' tab not found');
console.error(e.detail.tab + ' tab not found');
return;
}
this.shadowRoot.querySelector('#primaryTabs').selected = idx + 1;
this.shadowRoot.querySelector('#primaryTabs').scrollIntoView();
primaryTabs.selected = idx;
primaryTabs.scrollIntoView();
this.$.reporting.reportInteraction('show-tab', {tabName: e.detail.tab});
}

52
polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.html
View File

@@ -280,6 +280,20 @@ limitations under the License.
element = fixture('basic');
sandbox.stub(element.$.actions, 'reload').returns(Promise.resolve());
Gerrit._loadPlugins([]);
Gerrit.install(
plugin => {
plugin.registerDynamicCustomComponent(
'change-view-tab-header',
'gr-checks-change-view-tab-header-view'
);
plugin.registerDynamicCustomComponent(
'change-view-tab-content',
'gr-checks-view'
);
},
'0.1',
'http://some/plugins/url.html'
);
});
teardown(done => {
@@ -305,6 +319,44 @@ limitations under the License.
assert.isTrue(replaceStateStub.called);
});
suite('plugins adding to file tab', () => {
setup(done => {
// Resolving it here instead of during setup() as other tests depend
// on flush() not being called during setup.
flush(() => done());
});
test('plugin added tab shows up as a dynamic endpoint', () => {
assert(element._dynamicTabHeaderEndpoints.includes(
'change-view-tab-header-url'));
const paperTabs = element.shadowRoot.querySelector('#primaryTabs');
assert.equal(paperTabs.querySelectorAll('paper-tab').length, 2);
assert.equal(paperTabs.querySelectorAll('paper-tab')[1].dataset.name,
'change-view-tab-header-url');
});
test('handleShowTab switched tab correctly', done => {
const paperTabs = element.shadowRoot.querySelector('#primaryTabs');
assert.equal(paperTabs.selected, 0);
element._handleShowTab({detail:
{tab: 'change-view-tab-header-url'}});
flush(() => {
assert.equal(paperTabs.selected, 1);
done();
});
});
test('switching tab sets _selectedTabPluginEndpoint', done => {
const paperTabs = element.shadowRoot.querySelector('#primaryTabs');
MockInteractions.tap(paperTabs.querySelectorAll('paper-tab')[1]);
flush(() => {
assert.equal(element._selectedTabPluginEndpoint,
'change-view-tab-content-url');
done();
});
});
});
suite('keyboard shortcuts', () => {
test('t to add topic', () => {
const editStub = sandbox.stub(element.$.metadata, 'editTopic');