fix: project version page dependencies showing "unknown project" unless refresh (#5366)

* fix not updating stale dependencies

* remove console log

* fix wragnler json formatting

* add proper loading dependencies

* pnpm prepr

* move v-if
This commit is contained in:
Truman Gao
2026-02-13 17:31:17 -07:00
committed by GitHub
parent 9432d6d5e8
commit d1e4c1039f
2 changed files with 96 additions and 75 deletions

View File

@@ -207,62 +207,68 @@
class="version-page__dependencies universal-card"
>
<h3>Dependencies</h3>
<div
v-for="(dependency, index) in sortedDeps.filter((x) => !x.file_name)"
:key="index"
class="dependency"
:class="{ 'button-transparent': !isEditing }"
@click="!isEditing ? router.push(dependency.link) : {}"
>
<Avatar
:src="dependency.project ? dependency.project.icon_url : null"
alt="dependency-icon"
size="sm"
/>
<nuxt-link v-if="!isEditing" :to="dependency.link" class="info">
<span class="project-title">
{{ dependency.project ? dependency.project.title : 'Unknown Project' }}
</span>
<span v-if="dependency.version" class="dep-type" :class="dependency.dependency_type">
Version {{ dependency.version.version_number }} is
{{ dependency.dependency_type }}
</span>
<span v-else class="dep-type" :class="dependency.dependency_type">
{{ dependency.dependency_type }}
</span>
</nuxt-link>
<div v-else class="info">
<span class="project-title">
{{ dependency.project ? dependency.project.title : 'Unknown Project' }}
</span>
<span v-if="dependency.version" class="dep-type" :class="dependency.dependency_type">
Version {{ dependency.version.version_number }} is
{{ dependency.dependency_type }}
</span>
<span v-else class="dep-type" :class="dependency.dependency_type">
{{ dependency.dependency_type }}
</span>
<div v-if="dependenciesLoading"><SpinnerIcon /> Loading dependencies...</div>
<template v-if="!dependenciesLoading">
<div
v-for="(dependency, index) in sortedDeps.filter((x) => !x.file_name)"
:key="index"
class="dependency"
:class="{ 'button-transparent': !isEditing }"
@click="!isEditing ? router.push(dependency.link) : {}"
>
<Avatar
:src="dependency.project ? dependency.project.icon_url : null"
alt="dependency-icon"
size="sm"
/>
<nuxt-link v-if="!isEditing" :to="dependency.link" class="info">
<span class="project-title">
{{ dependency.project ? dependency.project.title : 'Unknown Project' }}
</span>
<span v-if="dependency.version" class="dep-type" :class="dependency.dependency_type">
Version {{ dependency.version.version_number }} is
{{ dependency.dependency_type }}
</span>
<span v-else class="dep-type" :class="dependency.dependency_type">
{{ dependency.dependency_type }}
</span>
</nuxt-link>
<div v-else class="info">
<span class="project-title">
{{ dependency.project ? dependency.project.title : 'Unknown Project' }}
</span>
<span v-if="dependency.version" class="dep-type" :class="dependency.dependency_type">
Version {{ dependency.version.version_number }} is
{{ dependency.dependency_type }}
</span>
<span v-else class="dep-type" :class="dependency.dependency_type">
{{ dependency.dependency_type }}
</span>
</div>
<ButtonStyled v-if="isEditing && project.project_type !== 'modpack'">
<button @click="version.dependencies.splice(index, 1)">
<TrashIcon aria-hidden="true" />
Remove
</button>
</ButtonStyled>
</div>
<ButtonStyled v-if="isEditing && project.project_type !== 'modpack'">
<button @click="version.dependencies.splice(index, 1)">
<TrashIcon aria-hidden="true" />
Remove
</button>
</ButtonStyled>
</div>
<div
v-for="(dependency, index) in sortedDeps.filter((x) => x.file_name)"
:key="index"
class="dependency"
>
<Avatar alt="dependency-icon" size="sm" />
<div class="info">
<span class="project-title">
{{ dependency.file_name }}
</span>
<span class="dep-type" :class="dependency.dependency_type">Added via overrides</span>
<div
v-for="(dependency, index) in sortedDeps.filter((x) => x.file_name)"
:key="index"
class="dependency"
>
<Avatar alt="dependency-icon" size="sm" />
<div class="info">
<span class="project-title">
{{ dependency.file_name }}
</span>
<span class="dep-type" :class="dependency.dependency_type">Added via overrides</span>
</div>
</div>
</div>
</template>
</div>
<div class="version-page__files universal-card">
<h3>Files</h3>
@@ -415,6 +421,7 @@ import {
ReportIcon,
RightArrowIcon,
SaveIcon,
SpinnerIcon,
StarIcon,
TrashIcon,
XIcon,
@@ -465,6 +472,7 @@ const {
versions: contextVersions,
loadVersions,
dependencies: contextDependencies,
dependenciesLoading: contextDependenciesLoading,
loadDependencies,
invalidate,
} = injectProjectPageContext()
@@ -494,6 +502,11 @@ const showKnownErrors = ref(false)
const shouldPreventActions = ref(false)
const uploadedImageIds = ref<string[]>([])
const dependenciesMetaLoading = ref(true)
const dependenciesLoading = computed(
() => contextDependenciesLoading.value || dependenciesMetaLoading.value,
)
// File types constant
const fileTypes = ref([
{
@@ -640,24 +653,32 @@ alternateFile.value = version.value.files?.find(
)
// Process dependencies
const deps = contextDependencies.value ?? { projects: [], versions: [] }
for (const dependency of version.value.dependencies ?? []) {
dependency.version = deps.versions.find((x: any) => x.id === dependency.version_id)
watch(
[contextDependencies],
() => {
const deps = contextDependencies.value ?? { projects: [], versions: [] }
if (dependency.version) {
dependency.project = deps.projects.find((x: any) => x.id === dependency.version.project_id)
}
for (const dependency of version.value.dependencies ?? []) {
dependency.version = deps.versions.find((x: any) => x.id === dependency.version_id)
if (!dependency.project) {
dependency.project = deps.projects.find((x: any) => x.id === dependency.project_id)
}
if (dependency.version) {
dependency.project = deps.projects.find((x: any) => x.id === dependency.version.project_id)
}
dependency.link = dependency.project
? `/${dependency.project.project_type}/${dependency.project.slug ?? dependency.project.id}${
dependency.version ? `/version/${encodeURI(dependency.version.version_number)}` : ''
}`
: ''
}
if (!dependency.project) {
dependency.project = deps.projects.find((x: any) => x.id === dependency.project_id)
}
dependency.link = dependency.project
? `/${dependency.project.project_type}/${dependency.project.slug ?? dependency.project.id}${
dependency.version ? `/version/${encodeURI(dependency.version.version_number)}` : ''
}`
: ''
}
dependenciesMetaLoading.value = false
},
{ deep: true, immediate: true },
)
oldFileTypes.value = (version.value.files ?? []).map(
(x: any) => fileTypes.value.find((y) => y.value === x.file_type) ?? null,

View File

@@ -1,8 +1,8 @@
{
"name": "storybook",
"compatibility_date": "2026-02-12",
"workers_dev": true,
"assets": {
"directory": "./storybook-static"
}
"name": "storybook",
"compatibility_date": "2026-02-12",
"workers_dev": true,
"assets": {
"directory": "./storybook-static"
}
}