refactor: TabbedModal to use NewModal and DI (#5612)

* refactor: tabbed modal to use NewModal

* refactor: use DI for instance settings modal instead of passing down props

* pnpm prepr

Author: tdgao

apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue

@@ -18,30 +18,31 @@ import { useRouter } from 'vue-router'
 import ConfirmDeleteInstanceModal from '@/components/ui/modal/ConfirmDeleteInstanceModal.vue'
 import { trackEvent } from '@/helpers/analytics'
 import { duplicate, edit, edit_icon, list, remove } from '@/helpers/profile'
+import { injectInstanceSettings } from '@/providers/instance-settings'
 
-import type { GameInstance, InstanceSettingsTabProps } from '../../../helpers/types'
+import type { GameInstance } from '../../../helpers/types'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const router = useRouter()
 
 const deleteConfirmModal = ref()
 
-const props = defineProps<InstanceSettingsTabProps>()
+const { instance } = injectInstanceSettings()
 
-const title = ref(props.instance.name)
-const icon: Ref<string | undefined> = ref(props.instance.icon_path)
-const groups = ref(props.instance.groups)
+const title = ref(instance.name)
+const icon: Ref<string | undefined> = ref(instance.icon_path)
+const groups = ref(instance.groups)
 
 const newCategoryInput = ref('')
 
-const installing = computed(() => props.instance.install_stage !== 'installed')
+const installing = computed(() => instance.install_stage !== 'installed')
 
 async function duplicateProfile() {
-	await duplicate(props.instance.path).catch(handleError)
+	await duplicate(instance.path).catch(handleError)
 	trackEvent('InstanceDuplicate', {
-		loader: props.instance.loader,
-		game_version: props.instance.game_version,
+		loader: instance.loader,
+		game_version: instance.game_version,
 	})
 }
 
@@ -52,7 +53,7 @@ const availableGroups = computed(() => [
 
 async function resetIcon() {
 	icon.value = undefined
-	await edit_icon(props.instance.path, null).catch(handleError)
+	await edit_icon(instance.path, null).catch(handleError)
 	trackEvent('InstanceRemoveIcon')
 }
 
@@ -70,7 +71,7 @@ async function setIcon() {
 	if (!value) return
 
 	icon.value = value
-	await edit_icon(props.instance.path, icon.value).catch(handleError)
+	await edit_icon(instance.path, icon.value).catch(handleError)
 
 	trackEvent('InstanceSetIcon')
 }
@@ -101,19 +102,19 @@ watch(
 	[title, groups, groups],
 	async () => {
 		if (removing.value) return
-		await edit(props.instance.path, editProfileObject.value).catch(handleError)
+		await edit(instance.path, editProfileObject.value).catch(handleError)
 	},
 	{ deep: true },
 )
 
 const removing = ref(false)
 async function removeProfile() {
 	removing.value = true
-	const path = props.instance.path
+	const path = instance.path
 
 	trackEvent('InstanceRemove', {
-		loader: props.instance.loader,
-		game_version: props.instance.game_version,
+		loader: instance.loader,
+		game_version: instance.game_version,
 	})
 
 	await router.push({ path: '/' })
@@ -218,7 +219,7 @@ const messages = defineMessages({
 					:src="icon ? convertFileSrc(icon) : icon"
 					size="108px"
 					class="!border-4 group-hover:brightness-75"
-					:tint-by="props.instance.path"
+					:tint-by="instance.path"
 					no-shadow
 				/>
 				<div class="absolute top-0 right-0 m-2">

apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue

@@ -10,22 +10,21 @@ import { computed, ref, watch } from 'vue'
 
 import { edit } from '@/helpers/profile'
 import { get } from '@/helpers/settings.ts'
+import { injectInstanceSettings } from '@/providers/instance-settings'
 
-import type { AppSettings, Hooks, InstanceSettingsTabProps } from '../../../helpers/types'
+import type { AppSettings, Hooks } from '../../../helpers/types'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
-const props = defineProps<InstanceSettingsTabProps>()
+const { instance } = injectInstanceSettings()
 
 const globalSettings = (await get().catch(handleError)) as AppSettings
 
 const overrideHooks = ref(
-	!!props.instance.hooks.pre_launch ||
-		!!props.instance.hooks.wrapper ||
-		!!props.instance.hooks.post_exit,
+	!!instance.hooks.pre_launch || !!instance.hooks.wrapper || !!instance.hooks.post_exit,
 )
-const hooks = ref(props.instance.hooks ?? globalSettings.hooks)
+const hooks = ref(instance.hooks ?? globalSettings.hooks)
 
 const editProfileObject = computed(() => {
 	const editProfile: {
@@ -41,7 +40,7 @@ const editProfileObject = computed(() => {
 watch(
 	[overrideHooks, hooks],
 	async () => {
-		await edit(props.instance.path, editProfileObject.value)
+		await edit(instance.path, editProfileObject.value)
 	},
 	{ deep: true },
 )

apps/app-frontend/src/components/ui/instance_settings/InstallationSettings.vue

@@ -27,17 +27,15 @@ import {
 	update_repair_modrinth,
 } from '@/helpers/profile'
 import { get_game_versions, get_loaders } from '@/helpers/tags'
+import { injectInstanceSettings } from '@/providers/instance-settings'
 
-import type { InstanceSettingsTabProps, Manifest } from '../../../helpers/types'
+import type { Manifest } from '../../../helpers/types'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const queryClient = useQueryClient()
 
-const props = defineProps<InstanceSettingsTabProps>()
-const emit = defineEmits<{
-	unlinked: []
-}>()
+const { instance, offline, isMinecraftServer, onUnlinked } = injectInstanceSettings()
 
 const [
 	fabric_versions,
@@ -75,9 +73,9 @@ const [
 ])
 
 const { data: modpackInfo } = useQuery({
-	queryKey: computed(() => ['linkedModpackInfo', props.instance.path]),
-	queryFn: () => get_linked_modpack_info(props.instance.path, 'must_revalidate'),
-	enabled: computed(() => !!props.instance.linked_data?.project_id && !props.offline),
+	queryKey: computed(() => ['linkedModpackInfo', instance.path]),
+	queryFn: () => get_linked_modpack_info(instance.path, 'must_revalidate'),
+	enabled: computed(() => !!instance.linked_data?.project_id && !offline),
 })
 
 const repairing = ref(false)
@@ -103,13 +101,13 @@ function getManifest(loader: string) {
 provideAppBackup({
 	async createBackup() {
 		const allProfiles = await list()
-		const prefix = `${props.instance.name} - Backup #`
+		const prefix = `${instance.name} - Backup #`
 		const existingNums = allProfiles
 			.filter((p) => p.name.startsWith(prefix))
 			.map((p) => parseInt(p.name.slice(prefix.length), 10))
 			.filter((n) => !isNaN(n))
 		const nextNum = existingNums.length > 0 ? Math.max(...existingNums) + 1 : 1
-		const newPath = await duplicate(props.instance.path)
+		const newPath = await duplicate(instance.path)
 		await edit(newPath, { name: `${prefix}${nextNum}` })
 	},
 })
@@ -120,30 +118,27 @@ provideInstallationSettings({
 		const rows = [
 			{
 				label: formatMessage(commonMessages.platformLabel),
-				value: formatLoaderLabel(props.instance.loader),
+				value: formatLoaderLabel(instance.loader),
 			},
 			{
 				label: formatMessage(commonMessages.gameVersionLabel),
-				value: props.instance.game_version,
+				value: instance.game_version,
 			},
 		]
-		if (props.instance.loader !== 'vanilla' && props.instance.loader_version) {
+		if (instance.loader !== 'vanilla' && instance.loader_version) {
 			rows.push({
 				label: formatMessage(messages.loaderVersion, {
-					loader: formatLoaderLabel(props.instance.loader),
+					loader: formatLoaderLabel(instance.loader),
 				}),
-				value: props.instance.loader_version,
+				value: instance.loader_version,
 			})
 		}
 		return rows
 	}),
-	isLinked: computed(() => !!props.instance.linked_data?.locked),
+	isLinked: computed(() => !!instance.linked_data?.locked),
 	isBusy: computed(
 		() =>
-			props.instance.install_stage !== 'installed' ||
-			repairing.value ||
-			reinstalling.value ||
-			!!props.offline,
+			instance.install_stage !== 'installed' || repairing.value || reinstalling.value || !!offline,
 	),
 	modpack: computed(() => {
 		if (!modpackInfo.value) return null
@@ -154,9 +149,9 @@ provideInstallationSettings({
 			versionNumber: modpackInfo.value.version?.version_number,
 		}
 	}),
-	currentPlatform: computed(() => props.instance.loader),
-	currentGameVersion: computed(() => props.instance.game_version),
-	currentLoaderVersion: computed(() => props.instance.loader_version ?? ''),
+	currentPlatform: computed(() => instance.loader),
+	currentGameVersion: computed(() => instance.game_version),
+	currentLoaderVersion: computed(() => instance.loader_version ?? ''),
 	availablePlatforms: loaders?.value?.map((x) => x.name) ?? [],
 
 	resolveGameVersions(loader, showSnapshots) {
@@ -199,50 +194,50 @@ provideInstallationSettings({
 		if (platform !== 'vanilla' && loaderVersionId) {
 			editProfile.loader_version = loaderVersionId
 		}
-		await edit(props.instance.path, editProfile).catch(handleError)
+		await edit(instance.path, editProfile).catch(handleError)
 	},
 
 	afterSave: async () => {
-		await install(props.instance.path, false).catch(handleError)
+		await install(instance.path, false).catch(handleError)
 		trackEvent('InstanceRepair', {
-			loader: props.instance.loader,
-			game_version: props.instance.game_version,
+			loader: instance.loader,
+			game_version: instance.game_version,
 		})
 	},
 
 	async repair() {
 		repairing.value = true
-		await install(props.instance.path, true).catch(handleError)
+		await install(instance.path, true).catch(handleError)
 		repairing.value = false
 		trackEvent('InstanceRepair', {
-			loader: props.instance.loader,
-			game_version: props.instance.game_version,
+			loader: instance.loader,
+			game_version: instance.game_version,
 		})
 	},
 
 	async reinstallModpack() {
 		reinstalling.value = true
-		await update_repair_modrinth(props.instance.path).catch(handleError)
+		await update_repair_modrinth(instance.path).catch(handleError)
 		reinstalling.value = false
 		trackEvent('InstanceRepair', {
-			loader: props.instance.loader,
-			game_version: props.instance.game_version,
+			loader: instance.loader,
+			game_version: instance.game_version,
 		})
 	},
 
 	async unlinkModpack() {
-		await edit(props.instance.path, {
+		await edit(instance.path, {
 			linked_data: null as unknown as undefined,
 		})
 		await queryClient.invalidateQueries({
-			queryKey: ['linkedModpackInfo', props.instance.path],
+			queryKey: ['linkedModpackInfo', instance.path],
 		})
-		emit('unlinked')
+		onUnlinked()
 	},
 
 	getCachedModpackVersions: () => null,
 	async fetchModpackVersions() {
-		const versions = await get_project_versions(props.instance.linked_data!.project_id!).catch(
+		const versions = await get_project_versions(instance.linked_data!.project_id!).catch(
 			handleError,
 		)
 		return (versions ?? []) as Labrinth.Versions.v2.Version[]
@@ -255,25 +250,25 @@ provideInstallationSettings({
 	},
 
 	async onModpackVersionConfirm(version) {
-		await update_managed_modrinth_version(props.instance.path, version.id)
+		await update_managed_modrinth_version(instance.path, version.id)
 		await queryClient.invalidateQueries({
-			queryKey: ['linkedModpackInfo', props.instance.path],
+			queryKey: ['linkedModpackInfo', instance.path],
 		})
 	},
 
 	updaterModalProps: computed(() => ({
 		isApp: true,
 		currentVersionId:
-			modpackInfo.value?.update_version_id ?? props.instance.linked_data?.version_id ?? '',
+			modpackInfo.value?.update_version_id ?? instance.linked_data?.version_id ?? '',
 		projectIconUrl: modpackInfo.value?.project?.icon_url,
 		projectName: modpackInfo.value?.project?.title ?? 'Modpack',
-		currentGameVersion: props.instance.game_version,
-		currentLoader: props.instance.loader,
+		currentGameVersion: instance.game_version,
+		currentLoader: instance.loader,
 	})),
 
 	isServer: false,
 	isApp: true,
-	showModpackVersionActions: !props.isMinecraftServer,
+	showModpackVersionActions: !isMinecraftServer.value,
 	repairing,
 	reinstalling,
 })

apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue

@@ -14,34 +14,31 @@ import JavaSelector from '@/components/ui/JavaSelector.vue'
 import useMemorySlider from '@/composables/useMemorySlider'
 import { edit, get_optimal_jre_key } from '@/helpers/profile'
 import { get } from '@/helpers/settings.ts'
+import { injectInstanceSettings } from '@/providers/instance-settings'
 
-import type { AppSettings, InstanceSettingsTabProps } from '../../../helpers/types'
+import type { AppSettings } from '../../../helpers/types'
 
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
-const props = defineProps<InstanceSettingsTabProps>()
+const { instance } = injectInstanceSettings()
 
 const globalSettings = (await get().catch(handleError)) as unknown as AppSettings
 
-const overrideJavaInstall = ref(!!props.instance.java_path)
-const optimalJava = readonly(await get_optimal_jre_key(props.instance.path).catch(handleError))
-const javaInstall = ref({ path: optimalJava.path ?? props.instance.java_path })
+const overrideJavaInstall = ref(!!instance.java_path)
+const optimalJava = readonly(await get_optimal_jre_key(instance.path).catch(handleError))
+const javaInstall = ref({ path: optimalJava.path ?? instance.java_path })
 
-const overrideJavaArgs = ref((props.instance.extra_launch_args?.length ?? 0) > 0)
-const javaArgs = ref(
-	(props.instance.extra_launch_args ?? globalSettings.extra_launch_args).join(' '),
-)
+const overrideJavaArgs = ref((instance.extra_launch_args?.length ?? 0) > 0)
+const javaArgs = ref((instance.extra_launch_args ?? globalSettings.extra_launch_args).join(' '))
 
-const overrideEnvVars = ref((props.instance.custom_env_vars?.length ?? 0) > 0)
+const overrideEnvVars = ref((instance.custom_env_vars?.length ?? 0) > 0)
 const envVars = ref(
-	(props.instance.custom_env_vars ?? globalSettings.custom_env_vars)
-		.map((x) => x.join('='))
-		.join(' '),
+	(instance.custom_env_vars ?? globalSettings.custom_env_vars).map((x) => x.join('=')).join(' '),
 )
 
-const overrideMemorySettings = ref(!!props.instance.memory)
-const memory = ref(props.instance.memory ?? globalSettings.memory)
+const overrideMemorySettings = ref(!!instance.memory)
+const memory = ref(instance.memory ?? globalSettings.memory)
 const { maxMemory, snapPoints } = (await useMemorySlider().catch(handleError)) as unknown as {
 	maxMemory: number
 	snapPoints: number[]
@@ -79,7 +76,7 @@ watch(
 		memory,
 	],
 	async () => {
-		await edit(props.instance.path, editProfileObject.value)
+		await edit(instance.path, editProfileObject.value)
 	},
 	{ deep: true },
 )