Replace hand-rolled dropdown on the dashboard and menu-related UI fixes (#5037)

* Try popover

* Pass targetRef instead of target, stop Escape clearing filters

* Stop Escape clearing filters when popover menus active

* Attempt get rid of hand-rolled dropdown

* Fix issue with comparison calendar

* Almost works

* Unify styles

* Focus modals on mount

* Refactor date picker logic

* Replace navigate keybinds with straightforward keybinds

* Remove extraneous Calendar component, better props

* Attempt optimise menu re-renders

* Memoise QueryPeriodsMenu, refactor getDatePeriodGroups

* Refactor ComparisonMenu to Popover

* Refactor QueryPeriodMenu to Popover

* Pull calendar out of components

* Refactor calendar to receive position from JS

* Simpler calendar API

* Add click outside listener for Calendar, fix FiltersBar measurements

* Give back top bar room

* Update tests

* Apply unified button text style

* Close calendar on keyboard nav to othe menus as well

* Kinda works

* Works even better

* Working well

* Sometimes menu stays active

* WIP

* Adapter

* Works with error

* Fixed the error

* Remove handrolled isOpen

* Introduce shared adapter

* Share adapter

Author: apata

assets/css/app.css

@@ -5,7 +5,7 @@
 @import './modal.css';
 @import './loader.css';
 @import './tooltip.css';
-@import './flatpickr.css';
+@import './flatpickr-colors.css';
 @import './chartjs.css';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
@@ -246,11 +246,6 @@ blockquote {
   transition: opacity 100ms ease-in;
 }
 
-.flatpickr-calendar.static.open {
-  right: 2px;
-  top: 12px;
-}
-
 .datamaps-subunit {
   cursor: pointer;
 }

assets/css/flatpickr.css assets/css/flatpickr-colors.cssassets/css/flatpickr.css renamed to assets/css/flatpickr-colors.css

@@ -1,28 +1,6 @@
 /* @format */
 /* stylelint-disable media-feature-range-notation */
 /* stylelint-disable selector-class-pattern */
-.flatpickr-calendar::before,
-.flatpickr-calendar::after {
-  right: 22px !important;
-}
-
-.flatpickr-wrapper {
-  right: 35% !important;
-}
-
-@media (max-width: 768px) {
-  .flatpickr-wrapper {
-    right: 50% !important;
-  }
-}
-
-@media (max-width: 768px) {
-  .flatpickr-wrapper {
-    position: absolute !important;
-    right: 0 !important;
-    left: 0 !important;
-  }
-}
 
 /* Because Flatpickr offers zero support for dynamic theming on its own (outside of third-party plugins) */
 .dark .flatpickr-calendar {

assets/js/dashboard/components/dropdown.tsx

@@ -1,6 +1,6 @@
 /** @format */
 
-import React, { Fragment } from 'react'
+import React, { Fragment, useRef } from 'react'
 
 import {
   FILTER_OPERATIONS,
@@ -12,9 +12,11 @@ import {
 import { Menu, Transition } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import classNames from 'classnames'
+import { BlurMenuButtonOnEscape } from '../keybinding'
 
 export default function FilterOperatorSelector(props) {
   const filterName = props.forFilter
+  const buttonRef = useRef()
 
   function renderTypeItem(operation, shouldDisplay) {
     return (
@@ -46,8 +48,12 @@ export default function FilterOperatorSelector(props) {
       <Menu as="div" className="relative inline-block text-left w-full">
         {({ open }) => (
           <>
+            <BlurMenuButtonOnEscape targetRef={buttonRef} />
             <div className="w-full">
-              <Menu.Button className="inline-flex justify-between items-center w-full rounded-md border border-gray-300 dark:border-gray-500 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-850 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 text-left">
+              <Menu.Button
+                ref={buttonRef}
+                className="inline-flex justify-between items-center w-full rounded-md border border-gray-300 dark:border-gray-500 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-850 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 text-left"
+              >
                 {FILTER_OPERATIONS_DISPLAY_NAMES[props.selectedType]}
                 <ChevronDownIcon
                   className="-mr-2 ml-2 h-4 w-4 text-gray-500 dark:text-gray-400"

assets/js/dashboard/components/filter-operator-selector.js

@@ -0,0 +1,67 @@
+/** @format */
+import { TransitionClasses } from '@headlessui/react'
+import classNames from 'classnames'
+
+const TRANSITION_CONFIG: TransitionClasses = {
+  enter: 'transition ease-out duration-100',
+  enterFrom: 'opacity-0 scale-95',
+  enterTo: 'opacity-100 scale-100',
+  leave: 'transition ease-in duration-75',
+  leaveFrom: 'opacity-100 scale-100',
+  leaveTo: 'opacity-0 scale-95'
+}
+
+const transition = {
+  props: TRANSITION_CONFIG,
+  classNames: { fullwidth: 'z-10 absolute left-0 right-0' }
+}
+
+const panel = {
+  classNames: {
+    roundedSheet:
+      'focus:outline-none rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 font-medium text-gray-800 dark:text-gray-200'
+  }
+}
+
+const toggleButton = {
+  classNames: {
+    rounded: 'flex items-center rounded text-sm leading-tight h-9',
+    shadow:
+      'bg-white dark:bg-gray-800 shadow text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-900',
+    ghost:
+      'text-gray-500 hover:text-gray-800 hover:bg-gray-200 dark:hover:text-gray-200 dark:hover:bg-gray-900',
+    truncatedText: 'truncate block font-medium'
+  }
+}
+
+const items = {
+  classNames: {
+    navigationLink: classNames(
+      'flex items-center justify-between',
+      'px-4 py-2 text-sm leading-tight'
+    ),
+    selectedOption: classNames('data-[selected=true]:font-bold'),
+    hoverLink: classNames(
+      'hover:bg-gray-100',
+      'hover:text-gray-900',
+      'dark:hover:bg-gray-900',
+      'dark:hover:text-gray-100',
+
+      'focus-within:bg-gray-100',
+      'focus-within:text-gray-900',
+      'dark:focus-within:bg-gray-900',
+      'dark:focus-within:text-gray-100'
+    ),
+    roundedStartEnd: classNames(
+      'first-of-type:rounded-t-md',
+      'last-of-type:rounded-b-md'
+    )
+  }
+}
+
+export const popover = {
+  toggleButton,
+  panel,
+  transition,
+  items
+}

assets/js/dashboard/components/popover.tsx

@@ -43,14 +43,14 @@ export const SearchInput = ({
         type="keyup"
         handler={blurSearchBox}
         shouldIgnoreWhen={[isModifierPressed, () => !isFocused]}
-        target={searchBoxRef.current}
+        targetRef={searchBoxRef}
       />
       <Keybind
         keyboardKey="/"
         type="keyup"
         handler={focusSearchBox}
         shouldIgnoreWhen={[isModifierPressed, () => isFocused]}
-        target={document}
+        targetRef="document"
       />
       <input
         onBlur={() => setIsFocused(false)}