Show topic only if set or can be set by user

Guest cannot add a Topic. Currently if a change doesn't have topic,
guest see section without edit pencil. It is better to hide Topic
section in such case.

Google-Bug-Id: b/216160117
Change-Id: I29462f04cd7a4325eb5657dbf5663ec2b7da7d10

polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.ts

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 c0bbb17..1c97cc3 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
@@ -304,6 +304,14 @@
     return !hasTopic && !settingTopic && topicReadOnly === false;
   }
 
+  _showTopic(
+    changeRecord?: ElementPropertyDeepChange<GrChangeMetadata, 'change'>,
+    topicReadOnly?: boolean
+  ) {
+    const hasTopic = !!changeRecord?.base?.topic;
+    return hasTopic || !topicReadOnly;
+  }
+
   _showTopicChip(
     changeRecord?: ElementPropertyDeepChange<GrChangeMetadata, 'change'>,
     settingTopic?: boolean

polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata_html.ts

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 7ca34d2..a49cebf 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
@@ -379,39 +379,44 @@
         </span>
       </section>
     </template>
-    <section
-      class$="topic [[_computeDisplayState(_showAllSections, change, _SECTION.TOPIC)]]"
-    >
-      <span class="title">Topic</span>
-      <span class="value">
-        <template is="dom-if" if="[[_showTopicChip(change.*, _settingTopic)]]">
-          <gr-linked-chip
-            text="[[change.topic]]"
-            limit="40"
-            href="[[_computeTopicUrl(change.topic)]]"
-            removable="[[!_topicReadOnly]]"
-            on-remove="_handleTopicRemoved"
-          ></gr-linked-chip>
-        </template>
-        <template
-          is="dom-if"
-          if="[[_showAddTopic(change.*, _settingTopic, _topicReadOnly)]]"
-        >
-          <gr-editable-label
-            class="topicEditableLabel"
-            label-text="Add a topic"
-            value="[[change.topic]]"
-            max-length="1024"
-            placeholder="[[_computeTopicPlaceholder(_topicReadOnly)]]"
-            read-only="[[_topicReadOnly]]"
-            on-changed="_handleTopicChanged"
-            show-as-edit-pencil="true"
-            autocomplete="true"
-            query="[[queryTopic]]"
-          ></gr-editable-label>
-        </template>
-      </span>
-    </section>
+    <template is="dom-if" if="[[_showTopic(change.*, _topicReadOnly)]]">
+      <section
+        class$="topic [[_computeDisplayState(_showAllSections, change, _SECTION.TOPIC)]]"
+      >
+        <span class="title">Topic</span>
+        <span class="value">
+          <template
+            is="dom-if"
+            if="[[_showTopicChip(change.*, _settingTopic)]]"
+          >
+            <gr-linked-chip
+              text="[[change.topic]]"
+              limit="40"
+              href="[[_computeTopicUrl(change.topic)]]"
+              removable="[[!_topicReadOnly]]"
+              on-remove="_handleTopicRemoved"
+            ></gr-linked-chip>
+          </template>
+          <template
+            is="dom-if"
+            if="[[_showAddTopic(change.*, _settingTopic, _topicReadOnly)]]"
+          >
+            <gr-editable-label
+              class="topicEditableLabel"
+              label-text="Add a topic"
+              value="[[change.topic]]"
+              max-length="1024"
+              placeholder="[[_computeTopicPlaceholder(_topicReadOnly)]]"
+              read-only="[[_topicReadOnly]]"
+              on-changed="_handleTopicChanged"
+              show-as-edit-pencil="true"
+              autocomplete="true"
+              query="[[queryTopic]]"
+            ></gr-editable-label>
+          </template>
+        </span>
+      </section>
+    </template>
     <template is="dom-if" if="[[_showCherryPickOf(change.*)]]">
       <section
         class$="[[_computeDisplayState(_showAllSections, change, _SECTION.CHERRY_PICK_OF)]]"