Fix the file status header column

There was not enough space to render two digit patchset numbers.

* We have decided to drop the `PS` prefix.
* We are adding the arrow in the header, as well.
* We are using the same width and text-alignment as in the file rows.
* We are adding a DOM test for the header row.

Screenshots uploaded to https://imgur.com/a/wCNzmEV

Release-Notes: skip
Google-Bug-Id: b/239148764
Change-Id: If411685ac1822ebefb74718475ed625c620b4de0

polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.ts

diff --git a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.ts b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.ts
index a2522a1..49526d2 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.ts
+++ b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.ts
@@ -404,15 +404,16 @@
           width: 20px;
           justify-content: flex-end;
         }
-        .header-row .status {
-          justify-content: space-between;
-        }
         .status.extended {
           width: 56px;
         }
         .status > * {
           display: block;
         }
+        .header-row .status .content {
+          width: 20px;
+          text-align: center;
+        }
         .path {
           cursor: pointer;
           flex: 1;
@@ -1077,7 +1078,7 @@
   private renderDivWithTooltip(content: string, tooltip: string) {
     return html`
       <gr-tooltip-content title=${tooltip} has-tooltip>
-        <div>${content}</div>
+        <div class="content">${content}</div>
       </gr-tooltip-content>
     `;
   }
@@ -1088,7 +1089,7 @@
     if (!file) {
       const psNum = this.patchRange?.patchNum;
       return hasExtendedStatus
-        ? this.renderDivWithTooltip(`PS${psNum}`, `Patchset ${psNum}`)
+        ? this.renderDivWithTooltip(`${psNum}`, `Patchset ${psNum}`)
         : nothing;
     }
     if (isMagicPath(file.__path)) return nothing;
@@ -1113,7 +1114,10 @@
     // no path means "header row"
     const psNum = this.patchRange?.basePatchNum;
     if (!path) {
-      return this.renderDivWithTooltip(`PS${psNum}`, `Patchset ${psNum}`);
+      return html`
+        ${this.renderDivWithTooltip(`${psNum}`, `Patchset ${psNum}`)}
+        <div class="material-icon file-status-arrow">arrow_right_alt</div>
+      `;
     }
     if (isMagicPath(path)) return nothing;
     const file = this.filesLeftBase.find(info => info.__path === path);
@@ -1127,7 +1131,7 @@
         .status=${status}
         .labelPostfix=${postfix}
       ></gr-file-status>
-      <span class="material-icon file-status-arrow">arrow_right_alt</span>
+      <div class="material-icon file-status-arrow">arrow_right_alt</div>
     `;
   }
 

polygerrit-ui/app/elements/change/gr-file-list/gr-file-list_test.ts

diff --git a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list_test.ts b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list_test.ts
index c6cf17d..a3aa8e6 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list_test.ts
+++ b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list_test.ts
@@ -46,7 +46,7 @@
   queryAndAssert,
 } from '../../../utils/common-util';
 import {GrFileList, NormalizedFileInfo} from './gr-file-list';
-import {FileInfo} from '../../../api/rest-api';
+import {FileInfo, PatchSetNumber} from '../../../api/rest-api';
 import {GrButton} from '../../shared/gr-button/gr-button';
 import * as MockInteractions from '@polymer/iron-test-helpers/mock-interactions';
 import {ParsedChangeInfo} from '../../../types/types';
@@ -260,12 +260,33 @@
       expect(statusCol).dom.equal(/* HTML */ `
         <div class="extended status" role="gridcell">
           <gr-file-status></gr-file-status>
-          <span class="material-icon file-status-arrow">arrow_right_alt</span>
+          <div class="material-icon file-status-arrow">arrow_right_alt</div>
           <gr-file-status></gr-file-status>
         </div>
       `);
     });
 
+    test('renders file status column header', async () => {
+      stubFlags('isEnabled').returns(true);
+      element.files = createFiles(1, {lines_inserted: 9});
+      element.filesLeftBase = createFiles(1, {lines_inserted: 9});
+      element.patchRange!.basePatchNum = 1 as PatchSetNumber;
+      await element.updateComplete;
+      const fileRows = queryAll<HTMLDivElement>(element, '.header-row');
+      const statusCol = queryAndAssert(fileRows?.[0], '.status');
+      expect(statusCol).dom.equal(/* HTML */ `
+        <div class="extended status" role="gridcell">
+          <gr-tooltip-content has-tooltip="" title="Patchset 1">
+            <div class="content">1</div>
+          </gr-tooltip-content>
+          <div class="material-icon file-status-arrow">arrow_right_alt</div>
+          <gr-tooltip-content has-tooltip="" title="Patchset 2">
+            <div class="content">2</div>
+          </gr-tooltip-content>
+        </div>
+      `);
+    });
+
     test('correct number of files are shown', async () => {
       element.fileListIncrement = 300;
       element.files = createFiles(500);