Searchable dropdowns for custom events

Author: Blaumaus

web/app/components/FeedbackModal.tsx

@@ -234,7 +234,7 @@ const FeedbackModal = ({ isOpened, onClose }: FeedbackModalProps) => {
             maxLength={MAX_MESSAGE_LENGTH}
             placeholder={t('feedback.placeholder')}
             aria-label={t('feedback.inputLabel')}
-            error={error || false}
+            error={error}
             disabled={isSubmitting}
             classes={{ textarea: 'min-h-32 resize-none' }}
             onChange={(event) => {

web/app/pages/Auth/CreateNewPassword/CreateNewPassword.tsx

@@ -43,6 +43,7 @@ const CreateNewPassword = () => {
               <Input
                 name='password'
                 type='password'
+                autoComplete='new-password'
                 label={t('auth.recovery.newPassword')}
                 hint={t('auth.common.hint', { amount: MIN_PASSWORD_CHARS })}
                 error={actionData?.fieldErrors?.password}
@@ -51,6 +52,7 @@ const CreateNewPassword = () => {
               <Input
                 name='repeat'
                 type='password'
+                autoComplete='new-password'
                 label={t('auth.common.repeat')}
                 error={actionData?.fieldErrors?.repeat}
                 disabled={isSubmitting}

web/app/pages/Auth/ForgotPassword/ForgotPassword.tsx

@@ -58,6 +58,7 @@ const ForgotPassword = () => {
               <Input
                 name='email'
                 type='email'
+                autoComplete='email'
                 label={t('auth.common.email')}
                 error={actionData?.fieldErrors?.email}
                 placeholder='name@company.com'

web/app/pages/Auth/Signin/Signin.tsx

@@ -370,6 +370,7 @@ const Signin = () => {
                 <Input
                   label={t('auth.linkAccount.enterPassword')}
                   type='password'
+                  autoComplete='current-password'
                   value={linkingPassword}
                   onChange={(e) => setLinkingPassword(e.target.value)}
                   disabled={isLinkingLoading}
@@ -384,6 +385,8 @@ const Signin = () => {
                     <Input
                       label={t('auth.linkAccount.enter2FA')}
                       value={linking2FACode}
+                      autoComplete='one-time-code'
+                      inputMode='numeric'
                       placeholder={t('auth.signin.6digitCode')}
                       onChange={(e) => setLinking2FACode(e.target.value)}
                       disabled={isLinkingLoading}
@@ -442,6 +445,8 @@ const Signin = () => {
                 <Input
                   label={t('profileSettings.enter2faToDisable')}
                   value={twoFACode}
+                  autoComplete='one-time-code'
+                  inputMode='numeric'
                   placeholder={t('auth.signin.6digitCode')}
                   onChange={handle2FAInput}
                   disabled={is2FALoading}
@@ -548,6 +553,7 @@ const Signin = () => {
                 <Input
                   name='email'
                   type='email'
+                  autoComplete='email'
                   label={t('auth.common.email')}
                   error={getFieldError('email')}
                   placeholder='name@company.com'
@@ -557,6 +563,7 @@ const Signin = () => {
                 <Input
                   name='password'
                   type='password'
+                  autoComplete='current-password'
                   label={t('auth.common.password')}
                   labelCorner={
                     <Link

web/app/pages/Auth/Signup/InvitationSignup.tsx

@@ -137,6 +137,7 @@ const InvitationSignup = () => {
           <Input
             name='password'
             type='password'
+            autoComplete='new-password'
             label={t('auth.common.password')}
             hint={t('auth.common.hint', { amount: MIN_PASSWORD_CHARS })}
             error={getFieldError('password')}

web/app/pages/Auth/Signup/Signup.tsx

@@ -304,6 +304,7 @@ const Signup = () => {
             <Input
               name='email'
               type='email'
+              autoComplete='email'
               label={t('auth.common.email')}
               error={getFieldError('email')}
               placeholder='name@company.com'
@@ -314,6 +315,7 @@ const Signup = () => {
               <Input
                 name='password'
                 type='password'
+                autoComplete='new-password'
                 label={t('auth.common.password')}
                 hint={t('auth.common.hint', { amount: MIN_PASSWORD_CHARS })}
                 error={getFieldError('password')}

web/app/pages/Project/Settings/Alerts/ProjectAlertsSettings.tsx

@@ -1,6 +1,11 @@
 import {
   CheckCircleIcon,
   ClockIcon,
+  CursorClickIcon,
+  EyeIcon,
+  PulseIcon,
+  UsersIcon,
+  WarningIcon,
   WarningOctagonIcon,
   XCircleIcon,
 } from '@phosphor-icons/react'
@@ -12,22 +17,25 @@ import _size from 'lodash/size'
 import _split from 'lodash/split'
 import _toNumber from 'lodash/toNumber'
 import _values from 'lodash/values'
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation, Trans } from 'react-i18next'
 import { Link } from '~/ui/Link'
 import { useFetcher } from 'react-router'
 import { toast } from 'sonner'
 
+import { getDimensionValues } from '~/api/v2/endpoints'
 import { useDeduplicateFetcherResponse } from '~/hooks/useDeduplicateFetcherResponse'
 import { QUERY_CONDITION, QUERY_METRIC, QUERY_TIME } from '~/lib/constants'
 import { Alerts } from '~/lib/models/Alerts'
 import type { NotificationChannel } from '~/lib/models/NotificationChannel'
 import { useAuth } from '~/providers/AuthProvider'
+import { useTheme } from '~/providers/ThemeProvider'
 import type { NotificationChannelActionData } from '~/routes/notification-channel'
 import type { ProjectViewActionData } from '~/routes/projects.$id'
 import Button from '~/ui/Button'
 import Checkbox from '~/ui/Checkbox'
 import FeedbackButton from '~/ui/FeedbackButton'
+import FilterValueInput from '~/ui/FilterValueInput'
 import Input from '~/ui/Input'
 import Loader from '~/ui/Loader'
 import Alert from '~/ui/Alert'
@@ -45,6 +53,14 @@ import {
 import AlertTemplateEditor from './AlertTemplateEditor'
 import { BackButton } from '../../View/components/BackButton'
 
+const QUERY_METRIC_ICONS: Record<string, React.ReactNode> = {
+  [QUERY_METRIC.PAGE_VIEWS]: <EyeIcon className='size-4' />,
+  [QUERY_METRIC.UNIQUE_PAGE_VIEWS]: <UsersIcon className='size-4' />,
+  [QUERY_METRIC.ONLINE_USERS]: <PulseIcon className='size-4' />,
+  [QUERY_METRIC.CUSTOM_EVENTS]: <CursorClickIcon className='size-4' />,
+  [QUERY_METRIC.ERRORS]: <WarningIcon className='size-4' />,
+}
+
 interface ProjectAlertsSettingsProps {
   alertId?: string | null
   projectId: string
@@ -65,8 +81,12 @@ const ProjectAlertsSettings = ({
   backLink,
 }: ProjectAlertsSettingsProps) => {
   const { isLoading: authLoading } = useAuth()
+  const { theme } = useTheme()
 
-  const { t } = useTranslation('common')
+  const {
+    t,
+    i18n: { language },
+  } = useTranslation('common')
   const fetcher = useFetcher<ProjectViewActionData>()
   const channelsFetcher = useFetcher<NotificationChannelActionData>()
   const shouldHandleFetcherData =
@@ -97,6 +117,35 @@ const ProjectAlertsSettings = ({
   const [availableChannels, setAvailableChannels] = useState<
     NotificationChannel[]
   >([])
+  const [customEvents, setCustomEvents] = useState<string[]>([])
+  const [customEventsLoading, setCustomEventsLoading] = useState(false)
+  const customEventsFetchedRef = useRef(false)
+
+  useEffect(() => {
+    if (
+      form.queryMetric !== QUERY_METRIC.CUSTOM_EVENTS ||
+      customEventsFetchedRef.current
+    ) {
+      return
+    }
+
+    customEventsFetchedRef.current = true
+    setCustomEventsLoading(true)
+    getDimensionValues(projectId, 'event', { type: 'traffic' })
+      .then(({ data }) => {
+        setCustomEvents(
+          (data || []).filter(
+            (item): item is string => typeof item === 'string',
+          ),
+        )
+      })
+      .catch((reason) => {
+        console.error('Failed to fetch custom events:', reason)
+      })
+      .finally(() => {
+        setCustomEventsLoading(false)
+      })
+  }, [form.queryMetric, projectId])
 
   useEffect(() => {
     const fd = new FormData()
@@ -546,40 +595,79 @@ const ProjectAlertsSettings = ({
             <Select
               id='queryMetric'
               label={t('alert.metric')}
-              items={_values(queryMetricTMapping)}
+              items={_values(QUERY_METRIC)}
+              labelExtractor={(item) => queryMetricTMapping[item]}
+              iconExtractor={(item) => (
+                <span className='text-gray-500 dark:text-gray-400'>
+                  {QUERY_METRIC_ICONS[item]}
+                </span>
+              )}
               title={
-                form.queryMetric ? queryMetricTMapping[form.queryMetric] : ''
+                form.queryMetric ? (
+                  <span className='flex items-center gap-2'>
+                    <span className='text-gray-500 dark:text-gray-400'>
+                      {QUERY_METRIC_ICONS[form.queryMetric]}
+                    </span>
+                    {queryMetricTMapping[form.queryMetric]}
+                  </span>
+                ) : (
+                  ''
+                )
               }
               onSelect={(item) => {
-                const key = _findKey(
-                  queryMetricTMapping,
-                  (predicate) => predicate === item,
-                )
-
-                // @ts-expect-error
                 setForm((prevForm) => ({
                   ...prevForm,
-                  queryMetric: key,
+                  queryMetric: item,
                 }))
               }}
               capitalise
-              selectedItem={
-                form.queryMetric
-                  ? queryMetricTMapping[form.queryMetric]
-                  : undefined
-              }
+              selectedItem={form.queryMetric}
             />
           </div>
           {form.queryMetric === QUERY_METRIC.CUSTOM_EVENTS ? (
-            <Input
-              name='queryCustomEvent'
-              label={t('alert.customEvent')}
-              value={form.queryCustomEvent || ''}
-              placeholder={t('alert.customEvent')}
-              className='mt-4'
-              onChange={handleInput}
-              error={beenSubmitted ? errors.queryCustomEvent : null}
-            />
+            <div className='mt-4 flex flex-col gap-1'>
+              <Text
+                as='span'
+                className='flex leading-tight'
+                size='sm'
+                weight='medium'
+                colour='primary'
+              >
+                {t('alert.customEvent')}
+              </Text>
+              <input
+                type='hidden'
+                name='queryCustomEvent'
+                value={form.queryCustomEvent || ''}
+              />
+              <FilterValueInput
+                items={customEvents}
+                value={form.queryCustomEvent || ''}
+                onChange={(value) =>
+                  setForm((prevForm) => ({
+                    ...prevForm,
+                    queryCustomEvent: value,
+                  }))
+                }
+                placeholder={t('project.filterSearchOrType')}
+                column='event'
+                language={language}
+                isLoading={customEventsLoading}
+                theme={theme}
+                commitOnType
+              />
+              {beenSubmitted && errors.queryCustomEvent ? (
+                <Text
+                  as='span'
+                  className='block'
+                  size='sm'
+                  colour='error'
+                  role='alert'
+                >
+                  {errors.queryCustomEvent}
+                </Text>
+              ) : null}
+            </div>
           ) : null}
           {form.queryMetric === QUERY_METRIC.CUSTOM_EVENTS ? (
             <Checkbox

web/app/pages/Project/Settings/ProjectSettings.tsx

@@ -1432,6 +1432,7 @@ const ProjectSettings = () => {
                       }
                       name='captchaSecretKey'
                       type='password'
+                      autoComplete='off'
                       className='mt-4 lg:w-1/2'
                       value={captchaSecretKey}
                       readOnly
@@ -1608,6 +1609,7 @@ const ProjectSettings = () => {
             <Input
               name='password'
               type='password'
+              autoComplete='new-password'
               label={t('project.settings.password')}
               value={form?.password || ''}
               className='mt-4 px-4 sm:px-0'

web/app/pages/Project/Settings/tabs/Revenue.tsx

@@ -284,6 +284,7 @@ const Revenue = ({ projectId }: Props) => {
         <Input
           name={`${provider}ApiKey`}
           type='password'
+          autoComplete='off'
           label={t('project.settings.revenue.providerApiKey', {
             provider: config.label,
           })}

web/app/pages/Project/View/components/PasswordRequiredModal.tsx

@@ -100,6 +100,7 @@ const PasswordRequiredModal = ({
           <Input
             name='password'
             type='password'
+            autoComplete='current-password'
             label={t('auth.common.password')}
             value={password}
             placeholder={t('auth.common.password')}