Skip to content

Commit d1e4c10

Browse files
tdgaotdgao
authored
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
1 parent 9432d6d commit d1e4c10

File tree

2 files changed

+96
-75
lines changed

2 files changed

+96
-75
lines changed

‎apps/frontend/src/pages/[type]/[id]/version/[version].vue‎

Lines changed: 90 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -207,62 +207,68 @@
207207
class="version-page__dependencies universal-card"
208208
>
209209
<h3>Dependencies</h3>
210-
<div
211-
v-for="(dependency, index) in sortedDeps.filter((x) => !x.file_name)"
212-
:key="index"
213-
class="dependency"
214-
:class="{ 'button-transparent': !isEditing }"
215-
@click="!isEditing ? router.push(dependency.link) : {}"
216-
>
217-
<Avatar
218-
:src="dependency.project ? dependency.project.icon_url : null"
219-
alt="dependency-icon"
220-
size="sm"
221-
/>
222-
<nuxt-link v-if="!isEditing" :to="dependency.link" class="info">
223-
<span class="project-title">
224-
{{ dependency.project ? dependency.project.title : 'Unknown Project' }}
225-
</span>
226-
<span v-if="dependency.version" class="dep-type" :class="dependency.dependency_type">
227-
Version {{ dependency.version.version_number }} is
228-
{{ dependency.dependency_type }}
229-
</span>
230-
<span v-else class="dep-type" :class="dependency.dependency_type">
231-
{{ dependency.dependency_type }}
232-
</span>
233-
</nuxt-link>
234-
<div v-else class="info">
235-
<span class="project-title">
236-
{{ dependency.project ? dependency.project.title : 'Unknown Project' }}
237-
</span>
238-
<span v-if="dependency.version" class="dep-type" :class="dependency.dependency_type">
239-
Version {{ dependency.version.version_number }} is
240-
{{ dependency.dependency_type }}
241-
</span>
242-
<span v-else class="dep-type" :class="dependency.dependency_type">
243-
{{ dependency.dependency_type }}
244-
</span>
210+
211+
<div v-if="dependenciesLoading"><SpinnerIcon /> Loading dependencies...</div>
212+
213+
<template v-if="!dependenciesLoading">
214+
<div
215+
v-for="(dependency, index) in sortedDeps.filter((x) => !x.file_name)"
216+
:key="index"
217+
class="dependency"
218+
:class="{ 'button-transparent': !isEditing }"
219+
@click="!isEditing ? router.push(dependency.link) : {}"
220+
>
221+
<Avatar
222+
:src="dependency.project ? dependency.project.icon_url : null"
223+
alt="dependency-icon"
224+
size="sm"
225+
/>
226+
<nuxt-link v-if="!isEditing" :to="dependency.link" class="info">
227+
<span class="project-title">
228+
{{ dependency.project ? dependency.project.title : 'Unknown Project' }}
229+
</span>
230+
<span v-if="dependency.version" class="dep-type" :class="dependency.dependency_type">
231+
Version {{ dependency.version.version_number }} is
232+
{{ dependency.dependency_type }}
233+
</span>
234+
<span v-else class="dep-type" :class="dependency.dependency_type">
235+
{{ dependency.dependency_type }}
236+
</span>
237+
</nuxt-link>
238+
<div v-else class="info">
239+
<span class="project-title">
240+
{{ dependency.project ? dependency.project.title : 'Unknown Project' }}
241+
</span>
242+
<span v-if="dependency.version" class="dep-type" :class="dependency.dependency_type">
243+
Version {{ dependency.version.version_number }} is
244+
{{ dependency.dependency_type }}
245+
</span>
246+
<span v-else class="dep-type" :class="dependency.dependency_type">
247+
{{ dependency.dependency_type }}
248+
</span>
249+
</div>
250+
<ButtonStyled v-if="isEditing && project.project_type !== 'modpack'">
251+
<button @click="version.dependencies.splice(index, 1)">
252+
<TrashIcon aria-hidden="true" />
253+
Remove
254+
</button>
255+
</ButtonStyled>
245256
</div>
246-
<ButtonStyled v-if="isEditing && project.project_type !== 'modpack'">
247-
<button @click="version.dependencies.splice(index, 1)">
248-
<TrashIcon aria-hidden="true" />
249-
Remove
250-
</button>
251-
</ButtonStyled>
252-
</div>
253-
<div
254-
v-for="(dependency, index) in sortedDeps.filter((x) => x.file_name)"
255-
:key="index"
256-
class="dependency"
257-
>
258-
<Avatar alt="dependency-icon" size="sm" />
259-
<div class="info">
260-
<span class="project-title">
261-
{{ dependency.file_name }}
262-
</span>
263-
<span class="dep-type" :class="dependency.dependency_type">Added via overrides</span>
257+
258+
<div
259+
v-for="(dependency, index) in sortedDeps.filter((x) => x.file_name)"
260+
:key="index"
261+
class="dependency"
262+
>
263+
<Avatar alt="dependency-icon" size="sm" />
264+
<div class="info">
265+
<span class="project-title">
266+
{{ dependency.file_name }}
267+
</span>
268+
<span class="dep-type" :class="dependency.dependency_type">Added via overrides</span>
269+
</div>
264270
</div>
265-
</div>
271+
</template>
266272
</div>
267273
<div class="version-page__files universal-card">
268274
<h3>Files</h3>
@@ -415,6 +421,7 @@ import {
415421
ReportIcon,
416422
RightArrowIcon,
417423
SaveIcon,
424+
SpinnerIcon,
418425
StarIcon,
419426
TrashIcon,
420427
XIcon,
@@ -465,6 +472,7 @@ const {
465472
versions: contextVersions,
466473
loadVersions,
467474
dependencies: contextDependencies,
475+
dependenciesLoading: contextDependenciesLoading,
468476
loadDependencies,
469477
invalidate,
470478
} = injectProjectPageContext()
@@ -494,6 +502,11 @@ const showKnownErrors = ref(false)
494502
const shouldPreventActions = ref(false)
495503
const uploadedImageIds = ref<string[]>([])
496504
505+
const dependenciesMetaLoading = ref(true)
506+
const dependenciesLoading = computed(
507+
() => contextDependenciesLoading.value || dependenciesMetaLoading.value,
508+
)
509+
497510
// File types constant
498511
const fileTypes = ref([
499512
{
@@ -640,24 +653,32 @@ alternateFile.value = version.value.files?.find(
640653
)
641654
642655
// Process dependencies
643-
const deps = contextDependencies.value ?? { projects: [], versions: [] }
644-
for (const dependency of version.value.dependencies ?? []) {
645-
dependency.version = deps.versions.find((x: any) => x.id === dependency.version_id)
656+
watch(
657+
[contextDependencies],
658+
() => {
659+
const deps = contextDependencies.value ?? { projects: [], versions: [] }
646660
647-
if (dependency.version) {
648-
dependency.project = deps.projects.find((x: any) => x.id === dependency.version.project_id)
649-
}
661+
for (const dependency of version.value.dependencies ?? []) {
662+
dependency.version = deps.versions.find((x: any) => x.id === dependency.version_id)
650663
651-
if (!dependency.project) {
652-
dependency.project = deps.projects.find((x: any) => x.id === dependency.project_id)
653-
}
664+
if (dependency.version) {
665+
dependency.project = deps.projects.find((x: any) => x.id === dependency.version.project_id)
666+
}
654667
655-
dependency.link = dependency.project
656-
? `/${dependency.project.project_type}/${dependency.project.slug ?? dependency.project.id}${
657-
dependency.version ? `/version/${encodeURI(dependency.version.version_number)}` : ''
658-
}`
659-
: ''
660-
}
668+
if (!dependency.project) {
669+
dependency.project = deps.projects.find((x: any) => x.id === dependency.project_id)
670+
}
671+
672+
dependency.link = dependency.project
673+
? `/${dependency.project.project_type}/${dependency.project.slug ?? dependency.project.id}${
674+
dependency.version ? `/version/${encodeURI(dependency.version.version_number)}` : ''
675+
}`
676+
: ''
677+
}
678+
dependenciesMetaLoading.value = false
679+
},
680+
{ deep: true, immediate: true },
681+
)
661682
662683
oldFileTypes.value = (version.value.files ?? []).map(
663684
(x: any) => fileTypes.value.find((y) => y.value === x.file_type) ?? null,

‎packages/ui/wrangler.jsonc‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
2-
"name": "storybook",
3-
"compatibility_date": "2026-02-12",
4-
"workers_dev": true,
5-
"assets": {
6-
"directory": "./storybook-static"
7-
}
2+
"name": "storybook",
3+
"compatibility_date": "2026-02-12",
4+
"workers_dev": true,
5+
"assets": {
6+
"directory": "./storybook-static"
7+
}
88
}

0 commit comments

Comments
 (0)