mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 06:20:11 +00:00
57191151ac
## 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>
48 lines
1.3 KiB
Vue
48 lines
1.3 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-6 text-sm text-muted-foreground">
|
|
<div class="flex flex-col gap-2">
|
|
<p class="m-0">
|
|
{{ $t('assetBrowser.uploadModelDescription1') }}
|
|
</p>
|
|
<ul class="list-disc space-y-1 pl-5 mt-0">
|
|
<li v-html="$t('assetBrowser.uploadModelDescription2')" />
|
|
<li v-html="$t('assetBrowser.uploadModelDescription3')" />
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<label class="mb-0" v-html="$t('assetBrowser.civitaiLinkLabel')"> </label>
|
|
<InputText
|
|
v-model="url"
|
|
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 }}
|
|
</p>
|
|
<p v-else v-html="$t('assetBrowser.civitaiLinkExample')"></p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import InputText from 'primevue/inputtext'
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
modelValue: string
|
|
error?: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: string]
|
|
}>()
|
|
|
|
const url = computed({
|
|
get: () => props.modelValue,
|
|
set: (value: string) => emit('update:modelValue', value)
|
|
})
|
|
</script>
|