analytics/lib/plausible_web/templates/site/settings_props.html.heex
hq1 0822bc61df
Props Settings UI to match Goals Settings (#3322)
* Add hint to creatable ComboBoxes without suggestions available

* Load external resources once in funnel settings

* Load external resources once in goal settings

* Make Custom Props Settings UI match Goal Settings

* Remove unnecessary goals query

This should be done only once in the live view

* Remove funnels feature flag

* fixup

* Make the modal scrollable

* By default, focus first suggestion for creatables

* Add sample props to seeds

* Load all suggestions asynchronously, unless `Mix.env == :test`

* ComboBox: Fix inconsistent suggestions

We require "Create ..." element to be only focused
when there are no suggestions available.
This causes some issues, depending on the state,
the least focusable index might be either 0 ("Create...")
or 1. This patch addresses all the quirks with focus.

* Fix ComboBox max results message

So that AlpineJS doesn't think it's a focusable
option.

* Keep the state up to date when changing props

* Update seeds with sensible prop names

* Make escape work for closing combobox suggestions

Co-authored-by: Uku Taht <Uku.taht@gmail.com>

* Revert "Make escape work for closing combobox suggestions"

This reverts commit 306866d2a1.

@ukutaht unfortunately this makes it impossible to select
an suggestion.

* Revert "Revert "Make escape work for closing combobox suggestions""

This reverts commit 4844857812.

* Make ESC great again

* Improve readability

---------

Co-authored-by: Uku Taht <Uku.taht@gmail.com>
2023-09-13 14:55:29 +02:00

65 lines
2.3 KiB
Plaintext

<section class="shadow bg-white dark:bg-gray-800 sm:rounded-md sm:overflow-hidden">
<PlausibleWeb.Components.Generic.notice class="rounded-t-md rounded-b-none">
Properties is an upcoming premium feature that's free-to-use during the
private preview. Pricing will be announced soon. Existing subscribers will
be grandfathered and will keep having access to custom properties without
any change to their plan. See examples and learn more in <.link
class="font-medium text-yellow underline hover:text-yellow-600"
href="https://plausible.io/docs/custom-pageview-props"
target="_blank"
rel="noreferrer"
>our docs</.link>.
</PlausibleWeb.Components.Generic.notice>
<div class="py-6 px-4 sm:p-6">
<header class="w-full flex">
<span class="flex-1">
<h1 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
Custom Properties
</h1>
<p class="mt-2 text-sm leading-5 text-gray-500 dark:text-gray-200">
Attach Custom Properties when sending a Pageview or an Event to
create custom metrics.
</p>
<p class="text-sm leading-5 text-gray-500 dark:text-gray-200">
In order for the properties to show up on your dashboard, you need to
explicitly add them below first.
</p>
</span>
<.link
href="https://plausible.io/docs/custom-props/introduction"
target="_blank"
rel="noreferrer"
>
<svg
class="w-6 h-6 text-gray-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
>
</path>
</svg>
</.link>
</header>
<PlausibleWeb.Components.Site.Feature.toggle
site={@site}
setting={:props_enabled}
label="Show Properties in the Dashboard"
conn={@conn}
>
<%= live_render(@conn, PlausibleWeb.Live.PropsSettings,
id: "props-form",
session: %{"site_id" => @site.id, "domain" => @site.domain}
) %>
</PlausibleWeb.Components.Site.Feature.toggle>
</div>
</section>