Merge branch 'master' into guest-permissions

Author: aerosol

.github/workflows/elixir.yml

@@ -20,24 +20,10 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        mix_env: ["test"]
-        postgres_image: ["postgres:15"]
+        mix_env: ["test", "ce_test"]
+        postgres_image: ["postgres:18"]
         mix_test_partition: [1, 2, 3, 4, 5, 6]
 
-        include:
-          - mix_env: "ce_test"
-            postgres_image: "postgres:16"
-            mix_test_partition: 1
-          - mix_env: "ce_test"
-            postgres_image: "postgres:16"
-            mix_test_partition: 2
-          - mix_env: "ce_test"
-            postgres_image: "postgres:16"
-            mix_test_partition: 3
-          - mix_env: "ce_test"
-            postgres_image: "postgres:16"
-            mix_test_partition: 4
-
     env:
       MIX_ENV: ${{ matrix.mix_env }}
     services:
@@ -128,7 +114,7 @@ jobs:
 
 
       - run: | 
-          mix test --include slow --include migrations --max-failures 1 --warnings-as-errors --partitions 4 | tee test_output.log
+          mix test --include slow --include migrations --max-failures 1 --warnings-as-errors --partitions 6 | tee test_output.log
           if grep -E '\.+[0-9]{2}:[0-9]{2}:[0-9]{2}\.[0-9]{3} \[[^]]+\]' test_output.log | grep -v 'libcluster'; then
             echo "The tests are producing output, this usually indicates some error"
               exit 1

CHANGELOG.md

@@ -14,6 +14,7 @@ All notable changes to this project will be documented in this file.
 ### Changed
 
 - Segment filters are visible to anyone who can view the dashboard with that segment applied, including personal segments on public dashboards
+- Keybind hints are hidden on smaller screens
 
 ### Fixed
 

Makefile

@@ -44,7 +44,7 @@ postgres-client: ## Connect to postgres
 	docker exec -it plausible_db psql -U postgres -d plausible_dev
 
 postgres-prod: ## Start a container with the same version of postgres as the one in prod
-	docker run $(PG_FLAGS) --volume=plausible_db_prod:/var/lib/postgresql/data postgres:15
+	docker run $(PG_FLAGS) --volume=plausible_db_prod:/var/lib/postgresql/data postgres:18
 
 postgres-stop: ## Stop and remove the postgres container
 	docker stop plausible_db && docker rm plausible_db

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

@@ -12,14 +12,14 @@ export const SearchInput = ({
   searchRef,
   onSearch,
   className,
-  placeholderFocused = 'Search',
-  placeholderUnfocused = 'Press / to search'
+  placeholderFocusedOrMobile = 'Search',
+  placeholderUnfocusedOnlyDesktop = 'Press / to search'
 }: {
   searchRef: RefObject<HTMLInputElement>
   onSearch: (value: string) => void
   className?: string
-  placeholderFocused?: string
-  placeholderUnfocused?: string
+  placeholderFocusedOrMobile?: string
+  placeholderUnfocusedOnlyDesktop?: string
 }) => {
   const [isFocused, setIsFocused] = useState(false)
 
@@ -59,18 +59,23 @@ export const SearchInput = ({
         shouldIgnoreWhen={[isModifierPressed, () => isFocused]}
         targetRef="document"
       />
-      <input
-        onBlur={() => setIsFocused(false)}
-        onFocus={() => setIsFocused(true)}
-        ref={searchRef}
-        type="text"
-        placeholder={isFocused ? placeholderFocused : placeholderUnfocused}
-        className={classNames(
-          'text-sm dark:text-gray-100 block border-gray-300 dark:border-gray-750 rounded-md dark:bg-gray-750 max-w-64 w-full dark:placeholder:text-gray-400 focus:outline-none focus:ring-3 focus:ring-indigo-500/20 dark:focus:ring-indigo-500/25 focus:border-indigo-500',
-          className
-        )}
-        onChange={debouncedOnSearchInputChange}
-      />
+      <div className={classNames('relative max-w-64 w-full', className)}>
+        <input
+          onBlur={() => setIsFocused(false)}
+          onFocus={() => setIsFocused(true)}
+          ref={searchRef}
+          type="text"
+          placeholder=" "
+          className="peer w-full text-sm dark:text-gray-100 block border-gray-300 dark:border-gray-750 rounded-md dark:bg-gray-750 dark:placeholder:text-gray-400 focus:outline-none focus:ring-3 focus:ring-indigo-500/20 dark:focus:ring-indigo-500/25 focus:border-indigo-500"
+          onChange={debouncedOnSearchInputChange}
+        />
+        <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-gray-400 dark:text-gray-400 peer-[:not(:placeholder-shown)]:hidden md:peer-[:not(:focus)]:hidden">
+          {placeholderFocusedOrMobile}
+        </span>
+        <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-gray-400 dark:text-gray-400 peer-[:not(:placeholder-shown)]:hidden hidden md:peer-[:not(:focus)]:block peer-focus:hidden">
+          {placeholderUnfocusedOnlyDesktop}
+        </span>
+      </div>
     </>
   )
 }

assets/js/dashboard/components/tabs.tsx

@@ -174,8 +174,7 @@ const Items = ({ options, searchable, closeDropdown }: ItemsProps) => {
         <div className="flex items-center p-1">
           <SearchInput
             searchRef={searchRef}
-            placeholderUnfocused="Press / to search"
-            className="w-full !max-w-none"
+            className="!max-w-none"
             onSearch={handleSearchInput}
           />
         </div>

assets/js/dashboard/keybinding.tsx

@@ -145,7 +145,7 @@ export function KeybindHint({
   return (
     <kbd
       className={classNames(
-        'rounded bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 px-1.5 font-medium text-xs text-gray-400',
+        'hidden md:block rounded bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 px-1.5 font-medium text-xs text-gray-400',
         className
       )}
     >

assets/js/dashboard/nav-menu/segments/searchable-segments-section.tsx

@@ -81,8 +81,7 @@ export const SearchableSegmentsSection = ({
         {showSearch && (
           <SearchInput
             searchRef={searchRef}
-            placeholderUnfocused="Press / to search"
-            className="ml-auto w-full py-1"
+            className="ml-auto py-1"
             onSearch={handleSearchInput}
           />
         )}

assets/js/dashboard/stats/behaviours/index.js

@@ -572,7 +572,9 @@ export default function Behaviours({ importedDataInView }) {
           {isRealtime() && <Pill className="-mt-1">last 30min</Pill>}
           {renderImportedQueryUnsupportedWarning()}
         </div>
-        <MoreLink state={moreLinkState} linkProps={moreLinkProps()} />
+        {mode !== FUNNELS && (
+          <MoreLink state={moreLinkState} linkProps={moreLinkProps()} />
+        )}
       </ReportHeader>
       {renderContent()}
     </ReportLayout>

assets/js/dashboard/stats/modals/breakdown-table.tsx

@@ -56,7 +56,9 @@ export const BreakdownTable = <TListItem extends { name: string }>({
               searchRef={searchRef}
               onSearch={onSearch}
               className={
-                displayError && status === 'error' ? 'pointer-events-none' : ''
+                displayError && status === 'error'
+                  ? '[&_input]:pointer-events-none'
+                  : ''
               }
             />
           )}

assets/js/dashboard/util/tooltip.tsx

@@ -91,7 +91,7 @@ function TooltipMessage({
       ref={setPopperElement}
       style={popperStyle}
       {...popperAttributes}
-      className="z-[99] px-2 py-1 rounded-sm text-sm text-gray-100 font-medium bg-gray-800 dark:bg-gray-700"
+      className="z-[99] [body:has(.modal.is-open)_&]:z-[1000] px-2 py-1 rounded-sm text-sm text-gray-100 font-medium bg-gray-800 dark:bg-gray-700"
       role="tooltip"
     >
       {children}