pending tests

GoogleChrome · Dec 19, 2024 · 0f525d9 · 0f525d9
1 parent 214db6d
commit 0f525d9
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 7 deletions.
diff --git a/frontend/src/static/js/components/webstatus-overview-cells.ts b/frontend/src/static/js/components/webstatus-overview-cells.ts
@@ -505,6 +505,24 @@ export function renderHeaderCell(
   }
 }
 
+export function renderQueryOrderedHeaderCell(
+  column: ColumnKey,
+  boomarkTitle: string,
+): TemplateResult {
+  const colDef = CELL_DEFS[column];
+
+  let titleDescription = '';
+  let sortIndicator = html``;
+  if (column === ColumnKey.Name) {
+    titleDescription = `Sorted by ${boomarkTitle} query order`;
+    sortIndicator = html` <sl-icon name="arrow-down"></sl-icon> `;
+  }
+
+  return html`
+    <th title=${titleDescription}>${sortIndicator} ${colDef?.headerHtml}</th>
+  `;
+}
+
 export function renderFeatureCell(
   feature: components['schemas']['Feature'],
   routerLocation: {search: string},

diff --git a/frontend/src/static/js/components/webstatus-overview-table.ts b/frontend/src/static/js/components/webstatus-overview-table.ts
@@ -29,6 +29,7 @@ import {
   renderColgroups,
   renderGroupsRow,
   renderHeaderCell,
+  renderQueryOrderedHeaderCell,
 } from './webstatus-overview-cells.js';
 import {TaskTracker} from '../utils/task-tracker.js';
 import {ApiError, BadRequestError} from '../api/errors.js';
@@ -169,15 +170,25 @@ export class WebstatusOverviewTable extends LitElement {
     const sortSpec: string =
       getSortSpec(this.location) || (DEFAULT_SORT_SPEC as string);
 
+    let headerCells: TemplateResult[] = [];
+    if (this.bookmark !== undefined && this.bookmark?.is_ordered) {
+      const bookmarkName = this.bookmark.name;
+      headerCells = columns.map(
+        col => html`${renderQueryOrderedHeaderCell(col, bookmarkName)}`,
+      );
+    } else {
+      headerCells = columns.map(
+        col => html`${renderHeaderCell(this.location, col, sortSpec)}`,
+      );
+    }
+
     return html`
       <table class="data-table">
         ${renderColgroups(columns)}
         <thead>
           ${renderGroupsRow(columns)}
           <tr class="header-row">
-            ${columns.map(
-              col => html`${renderHeaderCell(this.location, col, sortSpec)}`,
-            )}
+            ${headerCells}
           </tr>
         </thead>
         <tbody>

diff --git a/frontend/src/static/js/components/webstatus-sidebar-menu.ts b/frontend/src/static/js/components/webstatus-sidebar-menu.ts
@@ -229,10 +229,20 @@ export class WebstatusSidebarMenu extends LitElement {
     const bookmarkId = `bookmark${index}`;
     const currentLocation = this.getLocation();
     const currentURL = new URL(currentLocation.href);
-    const bookmarkUrl = formatOverviewPageUrl(currentURL, {
-      q: bookmark.query,
-      start: 0,
-    });
+
+    let bookmarkUrl;
+    if (bookmark.override_num_param) {
+      bookmarkUrl = formatOverviewPageUrl(currentURL, {
+        q: bookmark.query,
+        start: 0,
+        num: bookmark.override_num_param,
+      });
+    } else {
+      bookmarkUrl = formatOverviewPageUrl(currentURL, {
+        q: bookmark.query,
+        start: 0,
+      });
+    }
     // The bookmark should only be active when the path is the FEATURES path
     // and the query is set to the active query.
     const isQueryActive =

diff --git a/frontend/src/static/js/utils/constants.ts b/frontend/src/static/js/utils/constants.ts
@@ -30,6 +30,8 @@ export interface Bookmark {
   description?: string;
   // Should display query results in query's order.
   is_ordered?: boolean;
+  // Override the num parameter value, if provided.
+  override_num_param?: number;
 }
 
 export const DEFAULT_BOOKMARKS: Bookmark[] = [
@@ -44,5 +46,7 @@ export const DEFAULT_BOOKMARKS: Bookmark[] = [
       'id:anchor-positioning OR id:container-queries OR id:has OR id:nesting OR id:view-transitions OR id:subgrid OR id:grid OR name:scrollbar OR id:scroll-driven-animations OR id:scope',
     description:
       "This list reflects the top 10 interoperability pain points identified by developers in the State of CSS 2024 survey. We have also included their implementation status across Baseline browsers. You will notice that in some cases the items are already Baseline features, but may not have have been Baseline for long enough for developers to use with their target audience's browser support requirements. Since some voted-on pain points involve multiple web features, the list extends beyond 10 individual items for clarity and comprehensive coverage.",
+    is_ordered: true,
+    override_num_param: 25,
   },
 ];