New change summary ui - flag, metadata
* add feature flag
* prototype show all/less metadata
Change-Id: I6c779d88cd556e278ffd545b7d76b3d2d4c769cb
diff --git a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.ts b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.ts
index f8a5940..6b04153 100644
--- a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.ts
+++ b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.ts
@@ -76,6 +76,13 @@
import {RestApiService} from '../../../services/services/gr-rest-api/gr-rest-api';
import {GrEditableLabel} from '../../shared/gr-editable-label/gr-editable-label';
import {GrLinkedChip} from '../../shared/gr-linked-chip/gr-linked-chip';
+import {appContext} from '../../../services/app-context';
+import {KnownExperimentId} from '../../../services/flags/flags';
+import {
+ Metadata,
+ isSectionSet,
+ DisplayRules,
+} from '../../../utils/change-metadata-util';
const HASHTAG_ADD_MESSAGE = 'Add Hashtag';
@@ -194,6 +201,25 @@
@property({type: Object})
_CHANGE_ROLE = ChangeRole;
+ @property({type: Object})
+ _SECTION = Metadata;
+
+ @property({type: Boolean})
+ _showAllSections = false;
+
+ @property({type: Boolean})
+ _isNewChangeSummaryUiEnabled = false;
+
+ flagsService = appContext.flagsService;
+
+ /** @override */
+ ready() {
+ super.ready();
+ this._isNewChangeSummaryUiEnabled = this.flagsService.isEnabled(
+ KnownExperimentId.NEW_CHANGE_SUMMARY_UI
+ );
+ }
+
@observe('change.labels')
_labelsChanged(labels?: LabelNameToInfoMap) {
this.labels = {...labels} || null;
@@ -566,6 +592,35 @@
return this._getNonOwnerRole(change, role) ? '' : 'hideDisplay';
}
+ _computeDisplayState(
+ showAllSections: boolean,
+ change: ParsedChangeInfo | undefined,
+ section: Metadata
+ ) {
+ if (
+ !this._isNewChangeSummaryUiEnabled ||
+ showAllSections ||
+ DisplayRules.ALWAYS_SHOW.includes(section) ||
+ (DisplayRules.SHOW_IF_SET.includes(section) &&
+ isSectionSet(section, change))
+ ) {
+ return '';
+ }
+ return 'hideDisplay';
+ }
+
+ _computeShowAllLabelText(showAllSections: boolean) {
+ if (showAllSections) {
+ return 'Show less';
+ } else {
+ return 'Show all';
+ }
+ }
+
+ _onShowAllClick() {
+ this._showAllSections = !this._showAllSections;
+ }
+
/**
* Get the user with the specified role on the change. Returns null if the
* user with that role is the same as the owner.
diff --git a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata_html.ts b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata_html.ts
index f1d1127..88f7351 100644
--- a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata_html.ts
+++ b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata_html.ts
@@ -94,9 +94,31 @@
--account-max-length: 120px;
max-width: 285px;
}
+ .metadata-title {
+ font-weight: var(--font-weight-bold);
+ color: var(--deemphasized-text-color);
+ padding-left: var(--metadata-horizontal-padding);
+ }
+ .metadata-header {
+ display: flex;
+ justify-content: space-between;
+ }
</style>
<gr-external-style id="externalStyle" name="change-metadata">
- <section>
+ <template is="dom-if" if="[[_isNewChangeSummaryUiEnabled]]">
+ <div class="metadata-header">
+ <h3 class="metadata-title">Change Info</h3>
+ <gr-button
+ class="show-all-button"
+ on-click="_onShowAllClick"
+ no-uppercase=""
+ >[[_computeShowAllLabelText(_showAllSections)]]</gr-button
+ >
+ </div>
+ </template>
+ <section
+ class$="[[_computeDisplayState(_showAllSections, change, _SECTION.UPDATED)]]"
+ >
<span class="title">Updated</span>
<span class="value">
<gr-date-formatter
@@ -105,7 +127,9 @@
></gr-date-formatter>
</span>
</section>
- <section>
+ <section
+ class$="[[_computeDisplayState(_showAllSections, change, _SECTION.OWNER)]]"
+ >
<span class="title">Owner</span>
<span class="value">
<gr-account-chip
@@ -156,7 +180,9 @@
</span>
</section>
<template is="dom-if" if="[[_isAssigneeEnabled(serverConfig)]]">
- <section class="assignee">
+ <section
+ class$="assignee [[_computeDisplayState(_showAllSections, change, _SECTION.ASSIGNEE)]]"
+ >
<span class="title">Assignee</span>
<span class="value">
<gr-account-list
@@ -172,7 +198,9 @@
</span>
</section>
</template>
- <section>
+ <section
+ class$="[[_computeDisplayState(_showAllSections, change, _SECTION.REVIEWERS)]]"
+ >
<span class="title">Reviewers</span>
<span class="value">
<gr-reviewer-list
@@ -183,7 +211,9 @@
></gr-reviewer-list>
</span>
</section>
- <section>
+ <section
+ class$="[[_computeDisplayState(_showAllSections, change, _SECTION.CC)]]"
+ >
<span class="title">CC</span>
<span class="value">
<gr-reviewer-list
@@ -198,7 +228,9 @@
is="dom-if"
if="[[_computeShowRepoBranchTogether(change.project, change.branch)]]"
>
- <section>
+ <section
+ class$="[[_computeDisplayState(_showAllSections, change, _SECTION.REPO_BRANCH)]]"
+ >
<span class="title">Repo | Branch</span>
<span class="value">
<a href$="[[_computeProjectUrl(change.project)]]"
@@ -215,7 +247,9 @@
is="dom-if"
if="[[!_computeShowRepoBranchTogether(change.project, change.branch)]]"
>
- <section>
+ <section
+ class$="[[_computeDisplayState(_showAllSections, change, _SECTION.REPO_BRANCH)]]"
+ >
<span class="title">Repo</span>
<span class="value">
<a href$="[[_computeProjectUrl(change.project)]]">
@@ -226,7 +260,9 @@
</a>
</span>
</section>
- <section>
+ <section
+ class$="[[_computeDisplayState(_showAllSections, change, _SECTION.REPO_BRANCH)]]"
+ >
<span class="title">Branch</span>
<span class="value">
<a href$="[[_computeBranchUrl(change.project, change.branch)]]">
@@ -238,7 +274,9 @@
</span>
</section>
</template>
- <section>
+ <section
+ class$="[[_computeDisplayState(_showAllSections, change, _SECTION.PARENT)]]"
+ >
<span class="title">[[_computeParentsLabel(_currentParents)]]</span>
<span class="value">
<ol
@@ -262,7 +300,9 @@
</ol>
</span>
</section>
- <section class="topic">
+ <section
+ class$="topic [[_computeDisplayState(_showAllSections, change, _SECTION.TOPIC)]]"
+ >
<span class="title">Topic</span>
<span class="value">
<template is="dom-if" if="[[_showTopicChip(change.*, _settingTopic)]]">
@@ -288,7 +328,9 @@
</span>
</section>
<template is="dom-if" if="[[_showCherryPickOf(change.*)]]">
- <section>
+ <section
+ class$="[[_computeDisplayState(_showAllSections, change, _SECTION.CHERRY_PICK_OF)]]"
+ >
<span class="title">Cherry pick of</span>
<span class="value">
<a
@@ -304,14 +346,16 @@
</section>
</template>
<section
- class="strategy"
+ class$="strategy [[_computeDisplayState(_showAllSections, change, _SECTION.STRATEGY)]]"
hidden$="[[_computeHideStrategy(change)]]"
hidden=""
>
<span class="title">Strategy</span>
<span class="value">[[_computeStrategy(change)]]</span>
</section>
- <section class="hashtag">
+ <section
+ class$="hashtag [[_computeDisplayState(_showAllSections, change, _SECTION.HASHTAGS)]]"
+ >
<span class="title">Hashtags</span>
<span class="value">
<template is="dom-repeat" items="[[change.hashtags]]">
diff --git a/polygerrit-ui/app/services/flags/flags.ts b/polygerrit-ui/app/services/flags/flags.ts
index e40412d..ba33954 100644
--- a/polygerrit-ui/app/services/flags/flags.ts
+++ b/polygerrit-ui/app/services/flags/flags.ts
@@ -27,4 +27,5 @@
PATCHSET_COMMENTS = 'UiFeature__patchset_comments',
NEW_CONTEXT_CONTROLS = 'UiFeature__new_context_controls',
CI_REBOOT_CHECKS = 'UiFeature__ci_reboot_checks',
+ NEW_CHANGE_SUMMARY_UI = 'UiFeature__new_change_summary_ui',
}
diff --git a/polygerrit-ui/app/utils/change-metadata-util.ts b/polygerrit-ui/app/utils/change-metadata-util.ts
new file mode 100644
index 0000000..6ce1483
--- /dev/null
+++ b/polygerrit-ui/app/utils/change-metadata-util.ts
@@ -0,0 +1,75 @@
+/**
+ * @license
+ * Copyright (C) 2020 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {ParsedChangeInfo} from '../elements/shared/gr-rest-api-interface/gr-reviewer-updates-parser';
+
+export enum Metadata {
+ OWNER = 'Owner',
+ REVIEWERS = 'Reviewers',
+ REPO_BRANCH = 'Repo | Branch',
+ SUBMITTED = 'Submitted',
+ PARENT = 'Parent',
+ STRATEGY = 'Strategy',
+ UPDATED = 'Updated',
+ CC = 'CC',
+ HASHTAGS = 'Hashtags',
+ TOPIC = 'Topic',
+ UPLOADER = 'Uploader',
+ AUTHOR = 'Author',
+ COMMITTER = 'Committer',
+ ASSIGNEE = 'Assignee',
+ CHERRY_PICK_OF = 'Cherry pick of',
+}
+
+export const DisplayRules = {
+ ALWAYS_SHOW: [
+ Metadata.OWNER,
+ Metadata.REVIEWERS,
+ Metadata.REPO_BRANCH,
+ Metadata.SUBMITTED,
+ ],
+ SHOW_IF_SET: [
+ Metadata.CC,
+ Metadata.HASHTAGS,
+ Metadata.TOPIC,
+ Metadata.UPLOADER,
+ Metadata.AUTHOR,
+ Metadata.COMMITTER,
+ Metadata.ASSIGNEE,
+ Metadata.CHERRY_PICK_OF,
+ ],
+ ALWAYS_HIDE: [Metadata.PARENT, Metadata.STRATEGY, Metadata.UPDATED],
+};
+
+export function isSectionSet(section: Metadata, change?: ParsedChangeInfo) {
+ switch (section) {
+ case Metadata.CC:
+ return !!change?.reviewers?.CC?.length;
+ case Metadata.HASHTAGS:
+ return !!change?.hashtags?.length;
+ case Metadata.TOPIC:
+ return !!change?.topic;
+ case Metadata.UPLOADER:
+ case Metadata.AUTHOR:
+ case Metadata.COMMITTER:
+ case Metadata.ASSIGNEE:
+ return false;
+ case Metadata.CHERRY_PICK_OF:
+ return !!change?.cherry_pick_of_change;
+ }
+ return true;
+}
