[feat] Add PostHog data-attr attributes to Upload Model flow (#7173)

## Summary
Adds step-specific `data-attr` attributes throughout the Upload Model
wizard to enable PostHog analytics tracking and action creation,
following PostHog's recommended best practices for element labeling.

## Changes
- **What**: Added `data-attr` attributes to all key interactive elements
in the Upload Model flow (buttons, inputs, selectors)
- **Step-based naming**: Attributes include step numbers for funnel
analysis (e.g., `upload-model-step1-continue-button`)
- **Coverage**: Entry button, URL input, help link, navigation buttons
(cancel/back/continue/confirm/finish), and model type selector

## Benefits
- Enables creation of stable PostHog actions using CSS selectors like
`[data-attr="upload-model-step2-confirm-button"]`
- Allows funnel analysis to track user progression through the 3-step
upload wizard
- Identifies drop-off points and help-seeking behavior
- Follows PostHog best practice of using data attributes over CSS
classes (especially important with Tailwind)

## Review Focus
- Naming consistency and clarity of data-attr values
- Completeness of coverage across the upload flow

🤖 Generated with [Claude Code](https://claude.com/claude-code)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7173-feat-Add-PostHog-data-attr-attributes-to-Upload-Model-flow-2c06d73d365081699861d3d910250e32)
by [Unito](https://www.unito.io)

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Luke Mino-Altherr
2025-12-04 19:04:16 -08:00
committed by GitHub
parent fe2676e8cd
commit 57191151ac
4 changed files with 15 additions and 3 deletions

View File

@@ -34,6 +34,7 @@
type="accent"
size="md"
class="!h-10 [&>span]:hidden md:[&>span]:inline"
data-attr="upload-model-button"
:label="$t('assetBrowser.uploadModel')"
:on-click="showUploadDialog"
>

View File

@@ -26,6 +26,7 @@
"
:options="modelTypes"
:disabled="isLoading"
data-attr="upload-model-step2-type-selector"
/>
<div class="flex items-center gap-2">
<i class="icon-[lucide--circle-question-mark]" />

View File

@@ -5,15 +5,20 @@
class="text-muted-foreground mr-auto underline flex items-center gap-2"
>
<i class="icon-[lucide--circle-question-mark]" />
<a href="#" target="_blank" class="text-muted-foreground">{{
$t('How do I find this?')
}}</a>
<a
href="#"
target="_blank"
class="text-muted-foreground"
data-attr="upload-model-step1-help-link"
>{{ $t('How do I find this?') }}</a
>
</span>
<TextButton
v-if="currentStep === 1"
:label="$t('g.cancel')"
type="transparent"
size="md"
data-attr="upload-model-step1-cancel-button"
:disabled="isFetchingMetadata || isUploading"
@click="emit('close')"
/>
@@ -22,6 +27,7 @@
:label="$t('g.back')"
type="transparent"
size="md"
:data-attr="`upload-model-step${currentStep}-back-button`"
:disabled="isFetchingMetadata || isUploading"
@click="emit('back')"
/>
@@ -32,6 +38,7 @@
:label="$t('g.continue')"
type="secondary"
size="md"
data-attr="upload-model-step1-continue-button"
:disabled="!canFetchMetadata || isFetchingMetadata"
@click="emit('fetchMetadata')"
>
@@ -47,6 +54,7 @@
:label="$t('assetBrowser.upload')"
type="secondary"
size="md"
data-attr="upload-model-step2-confirm-button"
:disabled="!canUploadModel || isUploading"
@click="emit('upload')"
>
@@ -62,6 +70,7 @@
:label="$t('assetBrowser.finish')"
type="secondary"
size="md"
data-attr="upload-model-step3-finish-button"
@click="emit('close')"
/>
</div>

View File

@@ -17,6 +17,7 @@
autofocus
:placeholder="$t('assetBrowser.civitaiLinkPlaceholder')"
class="w-full bg-secondary-background border-0 p-4"
data-attr="upload-model-step1-url-input"
/>
<p v-if="error" class="text-xs text-error">
{{ error }}