From 57191151ac2e243d205e8dc2d29c9d2da9c9889a Mon Sep 17 00:00:00 2001
From: Luke Mino-Altherr <luke@comfy.org>
Date: Thu, 4 Dec 2025 19:04:16 -0800
Subject: [PATCH] [feat] Add PostHog data-attr attributes to Upload Model flow
 (#7173)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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>
---
 .../assets/components/AssetBrowserModal.vue       |  1 +
 .../assets/components/UploadModelConfirmation.vue |  1 +
 .../assets/components/UploadModelFooter.vue       | 15 ++++++++++++---
 .../assets/components/UploadModelUrlInput.vue     |  1 +
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/platform/assets/components/AssetBrowserModal.vue b/src/platform/assets/components/AssetBrowserModal.vue
index 7ffc043b7..8a61e261d 100644
--- a/src/platform/assets/components/AssetBrowserModal.vue
+++ b/src/platform/assets/components/AssetBrowserModal.vue
@@ -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"
         >
diff --git a/src/platform/assets/components/UploadModelConfirmation.vue b/src/platform/assets/components/UploadModelConfirmation.vue
index d3f632523..4a0b8edc5 100644
--- a/src/platform/assets/components/UploadModelConfirmation.vue
+++ b/src/platform/assets/components/UploadModelConfirmation.vue
@@ -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]" />
diff --git a/src/platform/assets/components/UploadModelFooter.vue b/src/platform/assets/components/UploadModelFooter.vue
index 019e68ac2..7bb4cc966 100644
--- a/src/platform/assets/components/UploadModelFooter.vue
+++ b/src/platform/assets/components/UploadModelFooter.vue
@@ -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>
diff --git a/src/platform/assets/components/UploadModelUrlInput.vue b/src/platform/assets/components/UploadModelUrlInput.vue
index e646b09ff..c7e94a8be 100644
--- a/src/platform/assets/components/UploadModelUrlInput.vue
+++ b/src/platform/assets/components/UploadModelUrlInput.vue
@@ -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 }}