Skip to content

Commit 5719115

Browse files
[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 <[email protected]>
1 parent fe2676e commit 5719115

File tree

4 files changed

+15
-3
lines changed

4 files changed

+15
-3
lines changed

src/platform/assets/components/AssetBrowserModal.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
type="accent"
3535
size="md"
3636
class="!h-10 [&>span]:hidden md:[&>span]:inline"
37+
data-attr="upload-model-button"
3738
:label="$t('assetBrowser.uploadModel')"
3839
:on-click="showUploadDialog"
3940
>

src/platform/assets/components/UploadModelConfirmation.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"
2727
:options="modelTypes"
2828
:disabled="isLoading"
29+
data-attr="upload-model-step2-type-selector"
2930
/>
3031
<div class="flex items-center gap-2">
3132
<i class="icon-[lucide--circle-question-mark]" />

src/platform/assets/components/UploadModelFooter.vue

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,20 @@
55
class="text-muted-foreground mr-auto underline flex items-center gap-2"
66
>
77
<i class="icon-[lucide--circle-question-mark]" />
8-
<a href="#" target="_blank" class="text-muted-foreground">{{
9-
$t('How do I find this?')
10-
}}</a>
8+
<a
9+
href="#"
10+
target="_blank"
11+
class="text-muted-foreground"
12+
data-attr="upload-model-step1-help-link"
13+
>{{ $t('How do I find this?') }}</a
14+
>
1115
</span>
1216
<TextButton
1317
v-if="currentStep === 1"
1418
:label="$t('g.cancel')"
1519
type="transparent"
1620
size="md"
21+
data-attr="upload-model-step1-cancel-button"
1722
:disabled="isFetchingMetadata || isUploading"
1823
@click="emit('close')"
1924
/>
@@ -22,6 +27,7 @@
2227
:label="$t('g.back')"
2328
type="transparent"
2429
size="md"
30+
:data-attr="`upload-model-step${currentStep}-back-button`"
2531
:disabled="isFetchingMetadata || isUploading"
2632
@click="emit('back')"
2733
/>
@@ -32,6 +38,7 @@
3238
:label="$t('g.continue')"
3339
type="secondary"
3440
size="md"
41+
data-attr="upload-model-step1-continue-button"
3542
:disabled="!canFetchMetadata || isFetchingMetadata"
3643
@click="emit('fetchMetadata')"
3744
>
@@ -47,6 +54,7 @@
4754
:label="$t('assetBrowser.upload')"
4855
type="secondary"
4956
size="md"
57+
data-attr="upload-model-step2-confirm-button"
5058
:disabled="!canUploadModel || isUploading"
5159
@click="emit('upload')"
5260
>
@@ -62,6 +70,7 @@
6270
:label="$t('assetBrowser.finish')"
6371
type="secondary"
6472
size="md"
73+
data-attr="upload-model-step3-finish-button"
6574
@click="emit('close')"
6675
/>
6776
</div>

src/platform/assets/components/UploadModelUrlInput.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
autofocus
1818
:placeholder="$t('assetBrowser.civitaiLinkPlaceholder')"
1919
class="w-full bg-secondary-background border-0 p-4"
20+
data-attr="upload-model-step1-url-input"
2021
/>
2122
<p v-if="error" class="text-xs text-error">
2223
{{ error }}

0 commit comments

Comments
 (0)