MrSphay/Modrinth-plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

159
apps/frontend/src/pages/[type]/[id]/version/[version].vue
View File

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

12
packages/ui/wrangler.jsonc
View File

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