mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-22 23:39:45 +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>
99 lines
2.6 KiB
Vue
99 lines
2.6 KiB
Vue
<template>
|
|
<div class="flex justify-end gap-2 w-full">
|
|
<span
|
|
v-if="currentStep === 1"
|
|
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"
|
|
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')"
|
|
/>
|
|
<TextButton
|
|
v-if="currentStep !== 1 && currentStep !== 3"
|
|
:label="$t('g.back')"
|
|
type="transparent"
|
|
size="md"
|
|
:data-attr="`upload-model-step${currentStep}-back-button`"
|
|
:disabled="isFetchingMetadata || isUploading"
|
|
@click="emit('back')"
|
|
/>
|
|
<span v-else />
|
|
|
|
<IconTextButton
|
|
v-if="currentStep === 1"
|
|
:label="$t('g.continue')"
|
|
type="secondary"
|
|
size="md"
|
|
data-attr="upload-model-step1-continue-button"
|
|
:disabled="!canFetchMetadata || isFetchingMetadata"
|
|
@click="emit('fetchMetadata')"
|
|
>
|
|
<template #icon>
|
|
<i
|
|
v-if="isFetchingMetadata"
|
|
class="icon-[lucide--loader-circle] animate-spin"
|
|
/>
|
|
</template>
|
|
</IconTextButton>
|
|
<IconTextButton
|
|
v-else-if="currentStep === 2"
|
|
:label="$t('assetBrowser.upload')"
|
|
type="secondary"
|
|
size="md"
|
|
data-attr="upload-model-step2-confirm-button"
|
|
:disabled="!canUploadModel || isUploading"
|
|
@click="emit('upload')"
|
|
>
|
|
<template #icon>
|
|
<i
|
|
v-if="isUploading"
|
|
class="icon-[lucide--loader-circle] animate-spin"
|
|
/>
|
|
</template>
|
|
</IconTextButton>
|
|
<TextButton
|
|
v-else-if="currentStep === 3 && uploadStatus === 'success'"
|
|
:label="$t('assetBrowser.finish')"
|
|
type="secondary"
|
|
size="md"
|
|
data-attr="upload-model-step3-finish-button"
|
|
@click="emit('close')"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import IconTextButton from '@/components/button/IconTextButton.vue'
|
|
import TextButton from '@/components/button/TextButton.vue'
|
|
|
|
defineProps<{
|
|
currentStep: number
|
|
isFetchingMetadata: boolean
|
|
isUploading: boolean
|
|
canFetchMetadata: boolean
|
|
canUploadModel: boolean
|
|
uploadStatus: 'idle' | 'uploading' | 'success' | 'error'
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'back'): void
|
|
(e: 'fetchMetadata'): void
|
|
(e: 'upload'): void
|
|
(e: 'close'): void
|
|
}>()
|
|
</script>
|