Improve project page performance by removing unnecessary slow request for featured versions (#4322)

* Improve project page performance by removing unnecessary slow request for featured versions

* Allow existing featured versions users to continue using it with deprecation warning.

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

@@ -47,7 +47,6 @@
 				v-model:project="project"
 				v-model:project-v3="projectV3"
 				v-model:versions="versions"
-				v-model:featured-versions="featuredVersions"
 				v-model:members="members"
 				v-model:all-members="allMembers"
 				v-model:dependencies="dependencies"
@@ -913,7 +912,6 @@
 				<NuxtPage
 					v-model:project="project"
 					v-model:versions="versions"
-					v-model:featured-versions="featuredVersions"
 					v-model:members="members"
 					v-model:all-members="allMembers"
 					v-model:dependencies="dependencies"
@@ -1431,7 +1429,6 @@ let project,
 	allMembers,
 	resetMembers,
 	dependencies,
-	featuredVersions,
 	versions,
 	organization,
 	resetOrganization,
@@ -1439,7 +1436,6 @@ let project,
 	projectV3Error,
 	membersError,
 	dependenciesError,
-	featuredVersionsError,
 	versionsError
 try {
 	;[
@@ -1447,7 +1443,6 @@ try {
 		{ data: projectV3, error: projectV3Error, refresh: resetProjectV3 },
 		{ data: allMembers, error: membersError, refresh: resetMembers },
 		{ data: dependencies, error: dependenciesError },
-		{ data: featuredVersions, error: featuredVersionsError },
 		{ data: versions, error: versionsError },
 		{ data: organization, refresh: resetOrganization },
 	] = await Promise.all([
@@ -1487,9 +1482,6 @@ try {
 		useAsyncData(`project/${projectId.value}/dependencies`, () =>
 			useBaseFetch(`project/${projectId.value}/dependencies`, {}),
 		),
-		useAsyncData(`project/${projectId.value}/version?featured=true`, () =>
-			useBaseFetch(`project/${projectId.value}/version?featured=true`),
-		),
 		useAsyncData(`project/${projectId.value}/version`, () =>
 			useBaseFetch(`project/${projectId.value}/version`),
 		),
@@ -1501,7 +1493,6 @@ try {
 	await updateProjectRoute()
 
 	versions = shallowRef(toRaw(versions))
-	featuredVersions = shallowRef(toRaw(featuredVersions))
 } catch (err) {
 	throw createError({
 		fatal: true,
@@ -1551,7 +1542,6 @@ handleError(projectV2Error, true)
 handleError(projectV3Error)
 handleError(membersError)
 handleError(dependenciesError)
-handleError(featuredVersionsError)
 handleError(versionsError)
 
 if (!project.value) {
@@ -1634,21 +1624,6 @@ const hasEditDetailsPermission = computed(() => {
 
 versions.value = data.$computeVersions(versions.value, allMembers.value)
 
-// Q: Why do this instead of computing the versions of featuredVersions?
-// A: It will incorrectly generate the version slugs because it doesn't have the full context of
-//    all the versions. For example, if version 1.1.0 for Forge is featured but 1.1.0 for Fabric
-//    is not, but the Fabric one was uploaded first, the Forge version would link to the Fabric
-///   version
-const featuredIds = featuredVersions.value.map((x) => x.id)
-featuredVersions.value = versions.value.filter((version) => featuredIds.includes(version.id))
-
-featuredVersions.value.sort((a, b) => {
-	const aLatest = a.game_versions[a.game_versions.length - 1]
-	const bLatest = b.game_versions[b.game_versions.length - 1]
-	const gameVersions = tags.value.gameVersions.map((e) => e.version)
-	return gameVersions.indexOf(aLatest) - gameVersions.indexOf(bLatest)
-})
-
 const projectTypeDisplay = computed(() =>
 	formatProjectType(
 		data.$getProjectTypeForDisplay(project.value.project_type, project.value.loaders),

apps/frontend/src/pages/[type]/[id]/settings.vue

@@ -34,7 +34,6 @@ const flags = useFeatureFlags()
 const project = defineModel<Project>('project', { required: true })
 const projectV3 = defineModel<ProjectV3Partial>('projectV3', { required: true })
 const versions = defineModel<any>('versions')
-const featuredVersions = defineModel<any>('featuredVersions')
 const members = defineModel<any>('members')
 const allMembers = defineModel<any>('allMembers')
 const dependencies = defineModel<any>('dependencies')
@@ -145,7 +144,6 @@ const organization = defineModel<any>('organization')
 				v-model:project="project"
 				v-model:project-v3="projectV3"
 				v-model:versions="versions"
-				v-model:featured-versions="featuredVersions"
 				v-model:members="members"
 				v-model:all-members="allMembers"
 				v-model:dependencies="dependencies"

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

@@ -91,7 +91,6 @@ const router = useRouter()
 const props = defineProps<{
 	project: Project
 	versions: Version[]
-	featuredVersions: Version[]
 	members: User[]
 	currentMember: User
 	dependencies: Dependency[]

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

@@ -76,14 +76,6 @@
 				<h2 :class="{ 'sr-only': isEditing }">
 					{{ version.name }}
 				</h2>
-				<div v-if="version.featured" class="featured">
-					<StarIcon aria-hidden="true" />
-					Featured
-				</div>
-				<div v-else-if="featuredVersions.find((x) => x.id === version.id)" class="featured">
-					<StarIcon aria-hidden="true" />
-					Auto-featured
-				</div>
 			</div>
 			<div v-if="fieldErrors && showKnownErrors" class="known-errors">
 				<ul>
@@ -123,11 +115,16 @@
 						Save
 					</button>
 				</ButtonStyled>
-				<ButtonStyled>
-					<button @click="version.featured = !version.featured">
+				<ButtonStyled v-if="usesFeaturedVersions">
+					<button
+						v-tooltip="
+							`Featured versions are being phased out. If you're still using this for something in the API, seek an alternative soon.`
+						"
+						@click="version.featured = !version.featured"
+					>
 						<StarIcon aria-hidden="true" />
-						<template v-if="!version.featured"> Feature version</template>
-						<template v-else> Unfeature version</template>
+						<template v-if="!version.featured"> Feature version (deprecated)</template>
+						<template v-else> Unfeature version (deprecated)</template>
 					</button>
 				</ButtonStyled>
 				<ButtonStyled>
@@ -718,12 +715,6 @@ export default defineNuxtComponent({
 				return []
 			},
 		},
-		featuredVersions: {
-			type: Array,
-			default() {
-				return []
-			},
-		},
 		members: {
 			type: Array,
 			default() {
@@ -897,6 +888,8 @@ export default defineNuxtComponent({
 					.format('MMM D, YYYY')}. ${version.downloads} downloads.`,
 		)
 
+		const usesFeaturedVersions = computed(() => props.versions.some((v) => v.featured))
+
 		useSeoMeta({
 			title,
 			description,
@@ -908,6 +901,7 @@ export default defineNuxtComponent({
 			auth,
 			tags,
 			flags,
+			usesFeaturedVersions,
 			fileTypes: ref(fileTypes),
 			oldFileTypes: ref(oldFileTypes),
 			isCreating: ref(isCreating),
@@ -1309,20 +1303,14 @@ export default defineNuxtComponent({
 			this.shouldPreventActions = false
 		},
 		async resetProjectVersions() {
-			const [versions, featuredVersions, dependencies] = await Promise.all([
+			const [versions, dependencies] = await Promise.all([
 				useBaseFetch(`project/${this.version.project_id}/version`),
-				useBaseFetch(`project/${this.version.project_id}/version?featured=true`),
 				useBaseFetch(`project/${this.version.project_id}/dependencies`),
 				this.resetProject(),
 			])
 
 			const newCreatedVersions = this.$computeVersions(versions, this.members)
-			const featuredIds = featuredVersions.map((x) => x.id)
 			this.$emit('update:versions', newCreatedVersions)
-			this.$emit(
-				'update:featuredVersions',
-				newCreatedVersions.filter((version) => featuredIds.includes(version.id)),
-			)
 			this.$emit('update:dependencies', dependencies)
 
 			return newCreatedVersions