Adds auto-suggestions + validation for manual filters

CHANGELOG.md

@@ -10,9 +10,9 @@ All notable changes to this project will be documented in this file.
 - To authenticate against a local postgresql via socket authentication, the environment-variables
   `DATABASE_SOCKET_DIR` & `DATABASE_NAME` were added.
 - Time on Page metric available in detailed Top Pages report plausible/analytics#1007
-- Glob (wildcard) based page, entry page and exit page filters plausible/analytics#1067
+- Wildcard based page, entry page and exit page filters plausible/analytics#1067
 - Exclusion filters for page, entry page and exit page filters plausible/analytics#1067
-- Menu to add new and edit existing filters directly plausible/analytics#1067
+- Menu (with auto-complete) to add new and edit existing filters directly plausible/analytics#1089
 - Added `CLICKHOUSE_FLUSH_INTERVAL_MS` and `CLICKHOUSE_MAX_BUFFER_SIZE` configuration parameters plausible/analytics#1073
 
 ### Fixed

assets/css/app.css

@@ -318,3 +318,72 @@ iframe[hidden] {
 .filter-list-text:hover ~ .filter-list-remove {
   display: none;
 }
+
+.filter-select__control:focus-within {
+  box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgb(99, 102, 241) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px; /* indigo-500 */
+}
+
+.filter-select__control {
+  @apply dark:bg-gray-900 border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500;
+}
+
+.filter-select__control:hover {
+  @apply cursor-pointer;
+  border-color: rgb(156, 163, 175) !important; /* gray-400 */
+}
+
+.filter-select__indicator-separator {
+  @apply hidden;
+}
+
+.filter-select__indicator {
+  @apply text-gray-400;
+}
+
+.filter-select__input {
+  @apply w-full;
+}
+
+.filter-select__input input {
+  width: 100% !important;
+  box-shadow: none !important;
+}
+
+.dark .filter-select__input input {
+  color: rgb(209, 213, 219) !important; /* gray-300 */
+}
+
+.filter-select__value-container > :not(.filter-select__single-value) {
+  @apply w-full;
+}
+
+.filter-select__loading-indicator {
+  color: rgb(79, 70, 229) !important; /* indigo-600 */
+}
+
+.filter-select__loading-indicator > span {
+  height: 1.5em;
+  width: 1.5em;
+}
+
+.filter-select__single-value {
+  @apply dark:text-gray-400;
+}
+
+.filter-select__menu-list {
+  @apply dark:bg-gray-900;
+}
+
+.filter-select__option {
+  @apply dark:text-gray-300;
+  cursor: pointer !important;
+}
+
+.filter-select__option--is-focused {
+  background-color: rgb(165, 180, 252) !important; /* indigo-300 */
+}
+
+.dark .filter-select__option--is-focused {
+  background-color: rgb(79, 70, 229) !important; /* indigo-600 */
+}
+

assets/css/modal.css

@@ -38,6 +38,7 @@
 .modal__container {
   background-color: #fff;
   padding: 1rem 2rem;
+  max-width: 860px;
   border-radius: 4px;
   margin: 50px auto;
   box-sizing: border-box;

assets/js/dashboard/datepicker.js

@@ -161,10 +161,10 @@ class DatePicker extends React.Component {
 
     const leftClasses = `flex items-center px-2 border-r border-gray-300 rounded-l
       dark:border-gray-500 dark:text-gray-100 ${
-      disabledLeft ? "bg-gray-300 dark:bg-gray-950" : "hover:bg-gray-200 dark:hover:bg-gray-900"
+      disabledLeft ? "bg-gray-200 dark:bg-gray-900" : ""
     }`;
     const rightClasses = `flex items-center px-2 rounded-r dark:text-gray-100 ${
-      disabledRight ? "bg-gray-300 dark:bg-gray-950" : "hover:bg-gray-200 dark:hover:bg-gray-900"
+      disabledRight ? "bg-gray-200 dark:bg-gray-900" : ""
     }`;
     return (
       <div className="flex rounded shadow bg-white mr-4 cursor-pointer dark:bg-gray-800">
@@ -242,7 +242,7 @@ class DatePicker extends React.Component {
           onKeyPress={this.open}
           className="flex items-center justify-between rounded bg-white dark:bg-gray-800 shadow px-4
           pr-3 py-2 leading-tight cursor-pointer text-sm font-medium text-gray-800
-          dark:text-gray-200 h-full hover:bg-gray-200 dark:hover:bg-gray-900"
+          dark:text-gray-200 h-full"
           tabIndex="0"
           role="button"
           aria-haspopup="true"
@@ -312,7 +312,7 @@ class DatePicker extends React.Component {
         to={{from: false, to: false, period, ...opts}}
         onClick={this.close.bind(this)}
         query={this.props.query}
-        className={`${boldClass  } px-4 py-2 md:text-sm leading-tight hover:bg-gray-200
+        className={`${boldClass  } px-4 py-2 md:text-sm leading-tight hover:bg-gray-100
           dark:hover:bg-gray-900 hover:text-gray-900 dark:hover:text-gray-100 flex items-center justify-between`}
       >
         {text}

assets/js/dashboard/filters.js

@@ -174,7 +174,7 @@ class Filters extends React.Component {
   }
 
   renderDropdownFilter(history, [key, value], query) {
-    if (['goal', 'props'].includes(key)) {
+    if ('props' == key) {
       return (
         <div className="px-4 sm:py-2 py-3 md:text-sm leading-tight flex items-center justify-between" key={key + value}>
           {this.filterText(key, value, query)}
@@ -201,7 +201,7 @@ class Filters extends React.Component {
   renderListFilter(history, [key, value], query) {
     return (
       <span key={key} title={value} className="flex bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 shadow text-sm rounded mr-2 items-center">
-        {['goal', 'props'].includes(key) ? (
+        {'props' == key ? (
           <span className="flex w-full h-full items-center py-2 pl-3">
             {this.filterText(key, value, query)}
           </span>

assets/js/dashboard/historical.js

@@ -34,7 +34,7 @@ class Historical extends React.Component {
             <div className="flex items-center w-full mb-2 sm:mb-0">
               <SiteSwitcher site={this.props.site} loggedIn={this.props.loggedIn} />
               <CurrentVisitors timer={this.props.timer} site={this.props.site} query={this.props.query} />
-              <Filters site={this.props.site} query={this.props.query} history={this.props.history} />
+              <Filters query={this.props.query} history={this.props.history} />
             </div>
             <Datepicker site={this.props.site} query={this.props.query} />
           </div>

assets/js/dashboard/query.js

@@ -162,12 +162,12 @@ export function eventName(query) {
 
 export const formattedFilters = {
   'goal': 'Goal',
-  'props': 'Props',
+  'props': 'Goal properties',
   'source': 'Source',
   'utm_medium': 'UTM Medium',
   'utm_source': 'UTM Source',
   'utm_campaign': 'UTM Campaign',
-  'referrer': 'Referrer',
+  'referrer': 'Referrer URL',
   'screen': 'Screen size',
   'browser': 'Browser',
   'browser_version': 'Browser Version',

assets/js/dashboard/realtime.js

@@ -33,7 +33,7 @@ class Realtime extends React.Component {
           <div className="items-center justify-between w-full sm:flex">
             <div className="flex items-center w-full mb-2 sm:mb-0">
               <SiteSwitcher site={this.props.site} loggedIn={this.props.loggedIn} />
-              <Filters site={this.props.site} query={this.props.query} history={this.props.history} />
+              <Filters query={this.props.query} history={this.props.history} />
             </div>
             <Datepicker site={this.props.site} query={this.props.query} />
           </div>

assets/js/dashboard/router.js

@@ -7,7 +7,6 @@ import PagesModal from './stats/modals/pages'
 import EntryPagesModal from './stats/modals/entry-pages'
 import ExitPagesModal from './stats/modals/exit-pages'
 import CountriesModal from './stats/modals/countries'
-import FilterModal from './stats/modals/filter'
 
 import {BrowserRouter, Switch, Route, useLocation} from "react-router-dom";
 
@@ -51,9 +50,6 @@ export default function Router({site, loggedIn}) {
           <Route path="/:domain/countries">
             <CountriesModal site={site} />
           </Route>
-          <Route path={["/:domain/filter/:field", "/:domain/filter"]}>
-            <FilterModal site={site} />
-          </Route>
         </Switch>
       </Route>
     </BrowserRouter>