chore(html): display skipped icon for skipped tests (microsoft#36814)

Author: agg23

packages/html-reporter/src/headerView.tsx

@@ -97,7 +97,7 @@ const StatsNavView: React.FC<{
       {!!stats.flaky && statusIcon('flaky')} Flaky <span className='d-inline counter'>{stats.flaky}</span>
     </Link>
     <Link className='subnav-item' click={filterWithQuery(q, 's:skipped', false)} ctrlClick={filterWithQuery(q, 's:skipped', true)}>
-      Skipped <span className='d-inline counter'>{stats.skipped}</span>
+      {!!stats.skipped && statusIcon('skipped')} Skipped <span className='d-inline counter'>{stats.skipped}</span>
     </Link>
   </nav>;
 };

packages/html-reporter/src/icons.tsx

@@ -65,6 +65,12 @@ export const clock = () => {
   </svg>;
 };
 
+export const skip = () => {
+  return <svg aria-hidden='true' viewBox='0 0 16 16' width='16' height='16' data-view-component='true' className='octicon color-fg-muted'>
+    <path d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm9.78-2.22-5.5 5.5a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l5.5-5.5a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z'></path>
+  </svg>;
+};
+
 export const blank = () => {
   return <svg className='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'></svg>;
 };

packages/html-reporter/src/statusIcon.tsx

@@ -32,6 +32,6 @@ export function statusIcon(status: 'failed' | 'timedOut' | 'skipped' | 'passed'
       return icons.warning();
     case 'skipped':
     case 'interrupted':
-      return icons.blank();
+      return icons.skip();
   }
 }