Add "Graph interval" label to interval picker

Author: sanne-san

assets/js/dashboard/components/segmented-control.tsx

@@ -23,7 +23,7 @@ export function SegmentedControl<T extends string>({
     <div
       role="group"
       aria-label={ariaLabel}
-      className="flex-1 inline-flex items-stretch rounded-lg border border-gray-300 p-0.5 dark:border-gray-600"
+      className="inline-flex items-stretch rounded-lg border border-gray-300 p-0.5 dark:border-gray-600"
     >
       {options.map(({ value, label }) => {
         const isSelected = value === selected
@@ -38,7 +38,7 @@ export function SegmentedControl<T extends string>({
             data-testid={getTestId?.(value, isSelected)}
             data-selected={isSelected}
             className={classNames(
-              'flex-1 whitespace-nowrap rounded-md py-1.5 px-2 text-sm font-medium transition-colors',
+              'flex-1 whitespace-nowrap rounded-md py-1 px-1.5 text-xs font-medium transition-colors',
               isSelected
                 ? 'bg-gray-150 text-gray-900 dark:bg-gray-600/80 dark:text-gray-100'
                 : 'text-gray-500 dark:text-gray-300'

assets/js/dashboard/nav-menu/dashboard-options-menu.tsx

@@ -12,7 +12,6 @@ import { useDashboardOptionsContext } from '../stats/graph/dashboard-options-con
 import { useDashboardStateContext } from '../dashboard-state-context'
 import { DashboardPeriod } from '../dashboard-time-periods'
 import { IntervalPicker } from '../stats/graph/interval-picker'
-import { MenuSeparator } from './nav-menu-components'
 import { AppNavigationLink } from '../navigation/use-app-navigate'
 import { useSiteContext } from '../site-context'
 import * as api from '../api'
@@ -150,15 +149,12 @@ function DashboardOptionsMenuItems() {
           )}
         >
           {showIntervalSection && (
-            <div className="flex m-1">
-              <IntervalPicker
-                selectedInterval={selectedInterval}
-                onIntervalClick={onIntervalClick}
-                options={availableIntervals}
-              />
-            </div>
+            <IntervalPicker
+              selectedInterval={selectedInterval}
+              onIntervalClick={onIntervalClick}
+              options={availableIntervals}
+            />
           )}
-          {showIntervalSection && hasActionItems && <MenuSeparator />}
           {!isRealtime && <ExportItem selectedInterval={selectedInterval} />}
           {importedSwitchVisible && (
             <>

assets/js/dashboard/stats/graph/interval-picker.tsx

@@ -144,14 +144,17 @@ export function IntervalPicker({
   }))
 
   return (
-    <SegmentedControl
-      ariaLabel="Graph data interval"
-      options={controlOptions}
-      selected={selectedInterval}
-      onSelect={onIntervalClick}
-      getTestId={(_value, isSelected) =>
-        isSelected ? 'current-graph-interval' : 'graph-interval'
-      }
-    />
+    <div className="flex justify-between items-center gap-x-2 w-full pl-4 pr-2 py-1">
+      <span className="shrink-0 text-sm font-medium text-gray-700 dark:text-gray-100">Graph interval</span>
+      <SegmentedControl
+        ariaLabel="Graph data interval"
+        options={controlOptions}
+        selected={selectedInterval}
+        onSelect={onIntervalClick}
+        getTestId={(_value, isSelected) =>
+          isSelected ? 'current-graph-interval' : 'graph-interval'
+        }
+      />
+    </div>
   )
 }

e2e/tests/dashboard/filtering.spec.ts

@@ -569,7 +569,8 @@ test.describe('location filtering tests', () => {
           name: 'pageview',
           country_code: 'EE',
           subdivision1_code: 'EE-37',
-          city_geoname_id: 588_409
+          city_geoname_id: 588_409,
+          browser: 'Chrome'
         }
       ]
     })
@@ -618,6 +619,18 @@ test.describe('location filtering tests', () => {
     await test.step('filtering by city', async () => {
       const cityFilterRow = filterRow(page, 'city')
       const cityInput = page.getByPlaceholder('Select a City')
+      const browserFilterRow = filterRow(page, 'browser')
+      const browserInput = page.getByPlaceholder('Select a Browser', {
+        exact: true
+      })
+
+      // Add a browser filter so city ends up as the 4th pill. This ensures it overflows
+      // into "See more" regardless of viewport width.
+      await filterButton(page).click()
+      await filterItemButton(page, 'Browser').click()
+      await browserInput.fill('chrom')
+      await suggestedItem(browserFilterRow, 'Chrome').click()
+      await applyFilterButton(page).click()
 
       await filterButton(page).click()
       await locationFilterButton(page).click()
@@ -627,6 +640,7 @@ test.describe('location filtering tests', () => {
 
       await applyFilterButton(page).click()
 
+      await page.getByRole('button', { name: /See.*more/ }).click()
       await expect(
         page.getByRole('link', { name: 'City is Tallinn' })
       ).toBeVisible()
@@ -755,7 +769,9 @@ test.describe('operating system filtering tests', () => {
         {
           name: 'pageview',
           operating_system: 'Windows',
-          operating_system_version: '11'
+          operating_system_version: '11',
+          browser: 'Chrome',
+          browser_version: '14.0.7'
         },
         {
           name: 'pageview',
@@ -795,6 +811,28 @@ test.describe('operating system filtering tests', () => {
       const operatingSystemVersionInput = page.getByPlaceholder(
         'Select an Operating system version'
       )
+      const browserFilterRow = filterRow(page, 'browser')
+      const browserVersionFilterRow = filterRow(page, 'browser_version')
+      const browserInput = page.getByPlaceholder('Select a Browser', {
+        exact: true
+      })
+      const browserVersionInput = page.getByPlaceholder(
+        'Select a Browser Version'
+      )
+
+      // Add browser and browser version filters so OS version ends up as the 4th pill.
+      // This ensures it overflows into "See more" regardless of viewport width
+      await filterButton(page).click()
+      await filterItemButton(page, 'Browser').click()
+      await browserInput.fill('chrom')
+      await suggestedItem(browserFilterRow, 'Chrome').click()
+      await applyFilterButton(page).click()
+
+      await filterButton(page).click()
+      await filterItemButton(page, 'Browser').click()
+      await browserVersionInput.fill('14')
+      await suggestedItem(browserVersionFilterRow, '14.0.7').click()
+      await applyFilterButton(page).click()
 
       await filterButton(page).click()
       await operatingSystemFilterButton(page).click()
@@ -804,6 +842,7 @@ test.describe('operating system filtering tests', () => {
 
       await applyFilterButton(page).click()
 
+      await page.getByRole('button', { name: /See.*more/ }).click()
       await expect(
         page.getByRole('link', { name: 'Operating system version is 11' })
       ).toBeVisible()