Align relation chain section with the change info section and button

and align owner in metadata with first related change in first related
section.

After: https://imgur.com/a/SgKQyG7

There must be larger space between title and list of changes. Because
of related list structure and shadow dom, I couldn't make css selector
`section:first-of-kind :host() .container` or
`section:first-of-kind gr-related-collapse .container`

Change-Id: Ifd805f1d9710bb834b5299bb3db531ae0a600232

polygerrit-ui/app/elements/change/gr-related-changes-list-experimental/gr-related-changes-list-experimental.ts

@@ -141,12 +141,17 @@ export class GrRelatedChangesListExperimental extends GrLitElement {
       this.patchNum,
       this.relatedChanges
     );
+    let firstNonEmptySectionFound = false;
+    let isFirstNonEmpty =
+      !firstNonEmptySectionFound && !!this.relatedChanges.length;
+    firstNonEmptySectionFound = firstNonEmptySectionFound || isFirstNonEmpty;
     const relatedChangeSection = html` <section
-      class="relatedChanges"
+      id="relatedChanges"
       ?hidden=${!this.relatedChanges.length}
     >
       <gr-related-collapse
         title="Relation chain"
+        class="${classMap({first: isFirstNonEmpty})}"
         .length=${this.relatedChanges.length}
         .numChangesWhenCollapsed=${sectionSize(Section.RELATED_CHANGES)}
       >
@@ -185,6 +190,11 @@ export class GrRelatedChangesListExperimental extends GrLitElement {
       ),
       sectionSize(Section.SUBMITTED_TOGETHER)
     );
+    isFirstNonEmpty =
+      !firstNonEmptySectionFound &&
+      (!!submittedTogetherChanges?.length ||
+        !!this.submittedTogether?.non_visible_changes);
+    firstNonEmptySectionFound = firstNonEmptySectionFound || isFirstNonEmpty;
     const submittedTogetherSection = html`<section
       id="submittedTogether"
       ?hidden=${!submittedTogetherChanges?.length &&
@@ -192,6 +202,7 @@ export class GrRelatedChangesListExperimental extends GrLitElement {
     >
       <gr-related-collapse
         title="Submitted together"
+        class="${classMap({first: isFirstNonEmpty})}"
         .length=${submittedTogetherChanges.length}
         .numChangesWhenCollapsed=${sectionSize(Section.SUBMITTED_TOGETHER)}
       >
@@ -226,12 +237,16 @@ export class GrRelatedChangesListExperimental extends GrLitElement {
       -1,
       sectionSize(Section.SAME_TOPIC)
     );
+    isFirstNonEmpty =
+      !firstNonEmptySectionFound && !!this.sameTopicChanges?.length;
+    firstNonEmptySectionFound = firstNonEmptySectionFound || isFirstNonEmpty;
     const sameTopicSection = html`<section
       id="sameTopic"
       ?hidden=${!this.sameTopicChanges?.length}
     >
       <gr-related-collapse
         title="Same topic"
+        class="${classMap({first: isFirstNonEmpty})}"
         .length=${this.sameTopicChanges.length}
         .numChangesWhenCollapsed=${sectionSize(Section.SAME_TOPIC)}
       >
@@ -261,12 +276,16 @@ export class GrRelatedChangesListExperimental extends GrLitElement {
       -1,
       sectionSize(Section.MERGE_CONFLICTS)
     );
+    isFirstNonEmpty =
+      !firstNonEmptySectionFound && !!this.conflictingChanges?.length;
+    firstNonEmptySectionFound = firstNonEmptySectionFound || isFirstNonEmpty;
     const mergeConflictsSection = html`<section
       id="mergeConflicts"
       ?hidden=${!this.conflictingChanges?.length}
     >
       <gr-related-collapse
         title="Merge conflicts"
+        class="${classMap({first: isFirstNonEmpty})}"
         .length=${this.conflictingChanges.length}
         .numChangesWhenCollapsed=${sectionSize(Section.MERGE_CONFLICTS)}
       >
@@ -295,12 +314,16 @@ export class GrRelatedChangesListExperimental extends GrLitElement {
       -1,
       sectionSize(Section.CHERRY_PICKS)
     );
+    isFirstNonEmpty =
+      !firstNonEmptySectionFound && !!this.cherryPickChanges?.length;
+    firstNonEmptySectionFound = firstNonEmptySectionFound || isFirstNonEmpty;
     const cherryPicksSection = html`<section
       id="cherryPicks"
       ?hidden=${!this.cherryPickChanges?.length}
     >
       <gr-related-collapse
         title="Cherry picks"
+        class="${classMap({first: isFirstNonEmpty})}"
         .length=${this.cherryPickChanges.length}
         .numChangesWhenCollapsed=${sectionSize(Section.CHERRY_PICKS)}
       >
@@ -676,6 +699,9 @@ export class GrRelatedCollapse extends GrLitElement {
           display: flex;
           margin-bottom: var(--spacing-s);
         }
+        :host(.first) .container {
+          margin-bottom: var(--spacing-m);
+        }
       `,
     ];
   }

polygerrit-ui/app/elements/change/gr-related-changes-list-experimental/gr-related-changes-list-experimental_test.ts

@@ -16,10 +16,24 @@
  */
 
 import '../../../test/common-test-setup-karma';
+import {
+  createChange,
+  createParsedChange,
+  createRelatedChangeAndCommitInfo,
+  createRelatedChangesInfo,
+  createSubmittedTogetherInfo,
+} from '../../../test/test-data-generators';
+import {queryAndAssert, stubRestApi} from '../../../test/test-utils';
+import {
+  PatchSetNum,
+  RelatedChangesInfo,
+  SubmittedTogetherInfo,
+} from '../../../types/common';
 import './gr-related-changes-list-experimental';
 import {
   ChangeMarkersInList,
   GrRelatedChangesListExperimental,
+  GrRelatedCollapse,
   Section,
 } from './gr-related-changes-list-experimental';
 
@@ -155,4 +169,81 @@ suite('gr-related-changes-list-experimental', () => {
       assert.equal(sectionSize2(Section.SAME_TOPIC), 4);
     });
   });
+
+  suite('test first non-empty list', () => {
+    const relatedChangeInfo: RelatedChangesInfo = {
+      ...createRelatedChangesInfo(),
+      changes: [createRelatedChangeAndCommitInfo()],
+    };
+    const submittedTogether: SubmittedTogetherInfo = {
+      ...createSubmittedTogetherInfo(),
+      changes: [createChange()],
+    };
+
+    setup(() => {
+      element.change = createParsedChange();
+      element.patchNum = 1 as PatchSetNum;
+    });
+
+    test('first list', async () => {
+      stubRestApi('getRelatedChanges').returns(
+        Promise.resolve(relatedChangeInfo)
+      );
+      await element.reload();
+      const section = queryAndAssert<HTMLElement>(element, '#relatedChanges');
+      const relatedChanges = queryAndAssert<GrRelatedCollapse>(
+        section,
+        'gr-related-collapse'
+      );
+      assert.isTrue(relatedChanges!.classList.contains('first'));
+    });
+
+    test('first empty second non-empty', async () => {
+      stubRestApi('getRelatedChanges').returns(
+        Promise.resolve(createRelatedChangesInfo())
+      );
+      stubRestApi('getChangesSubmittedTogether').returns(
+        Promise.resolve(submittedTogether)
+      );
+      await element.reload();
+      const relatedChanges = queryAndAssert<GrRelatedCollapse>(
+        queryAndAssert<HTMLElement>(element, '#relatedChanges'),
+        'gr-related-collapse'
+      );
+      assert.isFalse(relatedChanges!.classList.contains('first'));
+      const submittedTogetherSection = queryAndAssert<GrRelatedCollapse>(
+        queryAndAssert<HTMLElement>(element, '#submittedTogether'),
+        'gr-related-collapse'
+      );
+      assert.isTrue(submittedTogetherSection!.classList.contains('first'));
+    });
+
+    test('first non-empty second empty third non-empty', async () => {
+      stubRestApi('getRelatedChanges').returns(
+        Promise.resolve(relatedChangeInfo)
+      );
+      stubRestApi('getChangesSubmittedTogether').returns(
+        Promise.resolve(createSubmittedTogetherInfo())
+      );
+      stubRestApi('getChangeCherryPicks').returns(
+        Promise.resolve([createChange()])
+      );
+      await element.reload();
+      const relatedChanges = queryAndAssert<GrRelatedCollapse>(
+        queryAndAssert<HTMLElement>(element, '#relatedChanges'),
+        'gr-related-collapse'
+      );
+      assert.isTrue(relatedChanges!.classList.contains('first'));
+      const submittedTogetherSection = queryAndAssert<GrRelatedCollapse>(
+        queryAndAssert<HTMLElement>(element, '#submittedTogether'),
+        'gr-related-collapse'
+      );
+      assert.isFalse(submittedTogetherSection!.classList.contains('first'));
+      const cherryPicks = queryAndAssert<GrRelatedCollapse>(
+        queryAndAssert<HTMLElement>(element, '#cherryPicks'),
+        'gr-related-collapse'
+      );
+      assert.isFalse(cherryPicks!.classList.contains('first'));
+    });
+  });
 });

polygerrit-ui/app/test/test-data-generators.ts

@@ -64,6 +64,7 @@ import {
   BasePatchSetNum,
   RelatedChangeAndCommitInfo,
   SubmittedTogetherInfo,
+  RelatedChangesInfo,
 } from '../types/common';
 import {
   AccountsVisibility,
@@ -601,6 +602,12 @@ export function createRelatedChangeAndCommitInfo(): RelatedChangeAndCommitInfo {
   };
 }
 
+export function createRelatedChangesInfo(): RelatedChangesInfo {
+  return {
+    changes: [],
+  };
+}
+
 export function createSubmittedTogetherInfo(): SubmittedTogetherInfo {
   return {
     changes: [],