[WIP] Variant B: Saved segments/edit actions in filters menu

assets/js/dashboard.tsx

@@ -57,8 +57,15 @@ if (container && container.dataset) {
         <ThemeContextProvider>
           <SiteContextProvider site={site}>
             <UserContextProvider
-              role={container.dataset.currentUserRole as Role}
-              loggedIn={container.dataset.loggedIn === 'true'}
+              user={
+                container.dataset.loggedIn === 'true'
+                  ? {
+                      loggedIn: true,
+                      role: container.dataset.currentUserRole! as Role,
+                      id: parseInt(container.dataset.currentUserId!, 10)
+                    }
+                  : { loggedIn: false, role: null, id: null }
+              }
             >
               <RouterProvider router={router} />
             </UserContextProvider>

assets/js/dashboard/components/dropdown.tsx

@@ -13,6 +13,24 @@ import {
   AppNavigationLink,
   AppNavigationTarget
 } from '../navigation/use-app-navigate'
+import { NavigateOptions } from 'react-router-dom'
+
+export const DropdownSubtitle = ({
+  children,
+  className
+}: {
+  children: ReactNode
+  className?: string
+}) => (
+  <div
+    className={classNames(
+      'text-xs px-4 pt-2 pb-1 font-bold uppercase text-indigo-500 dark:text-indigo-400',
+      className
+    )}
+  >
+    {children}
+  </div>
+)
 
 export const ToggleDropdownButton = forwardRef<
   HTMLDivElement,
@@ -109,12 +127,12 @@ export const DropdownMenuWrapper = forwardRef<
   )
 })
 
-export const DropdownLinkGroup = ({
-  className,
-  children,
-  ...props
-}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => (
+export const DropdownLinkGroup = React.forwardRef<
+  HTMLDivElement,
+  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+>(({ className, children, ...props }, ref) => (
   <div
+    ref={ref}
     {...props}
     className={classNames(
       className,
@@ -123,28 +141,55 @@ export const DropdownLinkGroup = ({
   >
     {children}
   </div>
-)
+))
 
 export const DropdownNavigationLink = ({
   children,
   active,
   className,
+  actions,
+  path,
+  params,
+  search,
+  navigateOptions,
+  onLinkClick,
   ...props
 }: AppNavigationTarget & {
-  active?: boolean
-  children: ReactNode
-  className?: string
-  onClick?: () => void
-}) => (
-  <AppNavigationLink
-    {...props}
+  navigateOptions?: NavigateOptions
+} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    active?: boolean
+    onLinkClick?: () => void
+    actions?: ReactNode
+  }) => (
+  <div
     className={classNames(
-      className,
       { 'font-bold': !!active },
       'flex items-center justify-between',
-      `px-4 py-2 text-sm leading-tight hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-900 dark:hover:text-gray-100`
+      'text-sm leading-tight',
+      {
+        'hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-900 dark:hover:text-gray-100':
+          !props['aria-disabled']
+      },
+      'aria-disabled:cursor-not-allowed aria-disabled:text-gray-500',
+      !!actions && 'pr-4',
+      className
     )}
+    {...props}
   >
-    {children}
-  </AppNavigationLink>
+    <AppNavigationLink
+      className={classNames(
+        'flex items-center justify-between w-full py-2 truncate',
+        actions ? 'pl-4' : 'px-4',
+        { 'cursor-not-allowed': props['aria-disabled'] }
+      )}
+      path={path}
+      params={params}
+      search={search}
+      onClick={onLinkClick}
+      {...navigateOptions}
+    >
+      {children}
+    </AppNavigationLink>
+    {!!actions && actions}
+  </div>
 )

assets/js/dashboard/components/search-input.tsx

@@ -6,11 +6,13 @@ import { useDebounce } from '../custom-hooks'
 import classNames from 'classnames'
 
 export const SearchInput = ({
+  className,
   onSearch,
-  className
+  initialValue
 }: {
   className?: string
   onSearch: (value: string) => void
+  initialValue?: string
 }) => {
   const searchBoxRef = useRef<HTMLInputElement>(null)
   const [isFocused, setIsFocused] = useState(false)
@@ -63,6 +65,7 @@ export const SearchInput = ({
         ref={searchBoxRef}
         type="text"
         placeholder={isFocused ? 'Search' : 'Press / to search'}
+        value={initialValue}
         className={classNames(
           'shadow-sm dark:bg-gray-900 dark:text-gray-100 focus:ring-indigo-500 focus:border-indigo-500 block sm:text-sm border-gray-300 dark:border-gray-500 rounded-md dark:bg-gray-800 w-48',
           className

assets/js/dashboard/dashboard-keybinds.tsx

@@ -21,9 +21,5 @@ const ClearFiltersKeybind = () => (
 )
 
 export function DashboardKeybinds() {
-  return (
-    <>
-      <ClearFiltersKeybind />
-    </>
-  )
+  return <>{false && <ClearFiltersKeybind />}</> // temp disable
 }

assets/js/dashboard/datepicker.tsx

@@ -201,7 +201,7 @@ function ComparisonMenu({
         <DropdownNavigationLink
           active={query.comparison === ComparisonMode.custom}
           search={(s) => s}
-          onClick={toggleCompareMenuCalendar}
+          onLinkClick={toggleCompareMenuCalendar}
         >
           {COMPARISON_MODES[ComparisonMode.custom]}
         </DropdownNavigationLink>
@@ -250,7 +250,7 @@ function QueryPeriodsMenu({
                 key={label}
                 active={isActive({ site, query })}
                 search={search}
-                onClick={onClick || closeMenu}
+                onLinkClick={onClick || closeMenu}
               >
                 {label}
                 {!!keyboardKey && <KeybindHint>{keyboardKey}</KeybindHint>}
@@ -352,7 +352,7 @@ export default function QueryPeriodPicker() {
   }, [closeMenu, query])
 
   return (
-    <div className="flex ml-auto pl-2">
+    <div className="flex pl-2 shrink-0">
       <MovePeriodArrows />
       <ToggleDropdownButton
         withDropdownIndicator

assets/js/dashboard/filters.js

@@ -53,18 +53,18 @@ function AppliedFilterPillVertical({filterIndex, filter}) {
     <Menu.Item key={filterIndex}>
       <div className="px-3 md:px-4 sm:py-2 py-3 text-sm leading-tight flex items-center justify-between" key={filterIndex}>
         <AppNavigationLink
-          title={`Edit filter: ${plainFilterText(query, filter)}`}
+          title={`Edit filter: ${plainFilterText(query.labels, filter)}`}
           path={filterRoute.path}
           params={{field: FILTER_GROUP_TO_MODAL_TYPE[type]}}
           search={(search) => search}
           className="group flex w-full justify-between items-center"
           style={{ width: 'calc(100% - 1.5rem)' }}
         >
-          <span className="inline-block w-full truncate">{styledFilterText(query, filter)}</span>
+          <span className="inline-block w-full truncate">{styledFilterText(query.labels, filter)}</span>
           <PencilSquareIcon className="w-4 h-4 ml-1 cursor-pointer group-hover:text-indigo-700 dark:group-hover:text-indigo-500" />
         </AppNavigationLink>
         <b
-          title={`Remove filter: ${plainFilterText(query, filter)}`}
+          title={`Remove filter: ${plainFilterText(query.labels, filter)}`}
           className="ml-2 cursor-pointer hover:text-indigo-700 dark:hover:text-indigo-500"
           onClick={() => removeFilter(filterIndex, navigate, query)}
         >
@@ -184,16 +184,16 @@ function Filters() {
     return (
       <span className="flex bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 shadow text-sm rounded mr-2 items-center">
         <AppNavigationLink
-          title={`Edit filter: ${plainFilterText(query, filter)}`}
+          title={`Edit filter: ${plainFilterText(query.labels, filter)}`}
           className="flex w-full h-full items-center py-2 pl-3"
           path={filterRoute.path}
           params={{field: FILTER_GROUP_TO_MODAL_TYPE[type]}}
           search={(search)=> search}
         >
-          <span className="inline-block max-w-2xs md:max-w-xs truncate">{styledFilterText(query, filter)}</span>
+          <span className="inline-block max-w-2xs md:max-w-xs truncate">{styledFilterText(query.labels, filter)}</span>
         </AppNavigationLink>
         <span
-          title={`Remove filter: ${plainFilterText(query, filter)}`}
+          title={`Remove filter: ${plainFilterText(query.labels, filter)}`}
           className="flex h-full w-full px-2 cursor-pointer hover:text-indigo-700 dark:hover:text-indigo-500 items-center"
           onClick={() => removeFilter(filterIndex, navigate, query)}
         >