Add application i18n

src/lib/locales/en.json

@@ -28,7 +28,9 @@
 		"password": "Password",
 		"email": "Email",
 		"passwords_not_match": "Passwords do not match.",
-		"password_again": "Password again"
+		"password_again": "Password again",
+		"save": "Save",
+		"saving": "Saving..."
 	},
 	"register": {
 		"register": "Register",
@@ -36,5 +38,35 @@
 	},
 	"reset": {
 		"reset_password": "Reset password"
+	},
+	"application": {
+		"configuration": {
+			"buildpack": {
+				"choose_this_one": "Choose this one..."
+			},
+			"branch_already_in_use": "This branch is already used by another application. Webhooks won't work in this case for both applications. Are you sure you want to use it?",
+			"no_repositories_configured": "No repositories configured for your Git Application.",
+			"configure_it_now": "Configure it now",
+			"loading_repositories": "Loading repositories ...",
+			"select_a_repository": "Please select a repository",
+			"loading_branches": "Loading branches ...",
+			"select_a_repository_first": "Please select a repository first",
+			"select_a_branch": "Please select a branch",
+			"loading_groups": "Loading groups...",
+			"select_a_group": "Please select a group",
+			"loading_projects": "Loading projects...",
+			"select_a_project": "Please select a project",
+			"no_projects_found": "No projects found",
+			"no_branches_found": "No branches found",
+			"configure_build_pack": "Configure Build Pack",
+			"scanning_repository_suggest_build_pack": "Scanning repository to suggest a build pack for you...",
+			"found_lock_file": "Found lock file for <span class=\"font-bold text-orange-500 pl-1\">{packageManager}</span>. Using it for predefined commands commands.",
+			"configure_destination": "Configure Destination",
+			"no_configurable_destination": "No configurable Destination found",
+			"select_a_repository_project": "Select a Repository / Project",
+			"select_a_git_source": "Select a Git Source",
+			"no_configurable_git": "No configurable Git Source found",
+			"configuration_missing": "Configuration missing"
+		}
 	}
 }

src/lib/locales/fr.json

@@ -5,7 +5,7 @@
 		"databases": "Bases de données",
 		"destinations": "Destinations",
 		"git_sources": "Sources Git",
-		"services": "Prestations de service",
+		"services": "Services",
 		"teams": "Équipes"
 	},
 	"error": {

src/routes/applications/[id]/configuration/_BuildPack.svelte

@@ -5,6 +5,7 @@
 	import { post } from '$lib/api';
 	import { findBuildPack } from '$lib/components/templates';
 	import { errorNotification } from '$lib/form';
+	import { t } from '$lib/translations';
 
 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');
@@ -42,7 +43,9 @@
 			buildPack.name && buildPack.color}"
 		><span>{buildPack.fancyName}</span>
 		{#if !scanning && foundConfig?.name === buildPack.name}
-			<span class="absolute bottom-0 pb-2 text-xs">Choose this one...</span>
+			<span class="absolute bottom-0 pb-2 text-xs"
+				>{$t('application.configuration.buildpack.choose_this_one')}</span
+			>
 		{/if}
 	</button>
 </form>

src/routes/applications/[id]/configuration/_GithubRepositories.svelte

@@ -7,6 +7,7 @@
 	import { errorNotification } from '$lib/form';
 	import { onMount } from 'svelte';
 	import { gitTokens } from '$lib/store';
+	import { t } from '$lib/translations';
 
 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');
@@ -84,9 +85,7 @@
 				`/applications/${id}/configuration/repository.json?repository=${selected.repository}&branch=${selected.branch}`
 			);
 			if (data.used) {
-				const sure = confirm(
+				const sure = confirm($t('application.configuration.branch_already_in_use'));
-					`This branch is already used by another application. Webhooks won't work in this case for both applications. Are you sure you want to use it?`
-				);
 				if (sure) {
 					selected.autodeploy = false;
 					showSave = true;
@@ -160,8 +159,10 @@
 
 {#if repositories.length === 0 && loading.repositories === false}
 	<div class="flex-col text-center">
-		<div class="pb-4">No repositories configured for your Git Application.</div>
+		<div class="pb-4">{$t('application.configuration.no_repositories_configured')}</div>
-		<a href={`/sources/${application.gitSource.id}`}><button>Configure it now</button></a>
+		<a href={`/sources/${application.gitSource.id}`}
+			><button>{$t('application.configuration.configure_it_now')}</button></a
+		>
 	</div>
 {:else}
 	<form on:submit|preventDefault={handleSubmit} class="flex flex-col justify-center text-center">
@@ -170,8 +171,8 @@
 				<div class="custom-select-wrapper">
 					<Select
 						placeholder={loading.repositories
-							? 'Loading repositories ...'
+							? $t('application.configuration.loading_repositories')
-							: 'Please select a repository'}
+							: $t('application.configuration.select_a_repository')}
 						id="repository"
 						on:select={loadBranches}
 						items={reposSelectOptions}
@@ -182,10 +183,10 @@
 				<div class="custom-select-wrapper">
 					<Select
 						placeholder={loading.branches
-							? 'Loading branches ...'
+							? $t('application.configuration.loading_branches')
 							: !selected.repository
-							? 'Please select a repository first'
+							? $t('application.configuration.select_a_repository_first')
-							: 'Please select a branch'}
+							: $t('application.configuration.select_a_branch')}
 						id="repository"
 						on:select={isBranchAlreadyUsed}
 						items={branchSelectOptions}
@@ -200,7 +201,7 @@
 				type="submit"
 				disabled={!showSave}
 				class:bg-orange-600={showSave}
-				class:hover:bg-orange-500={showSave}>Save</button
+				class:hover:bg-orange-500={showSave}>{$t('forms.save')}</button
 			>
 			<!-- <button class="w-40"
 				><a

src/routes/applications/[id]/configuration/_GitlabRepositories.svelte

@@ -9,6 +9,7 @@
 	import { goto } from '$app/navigation';
 	import { del, get, post, put } from '$lib/api';
 	import { gitTokens } from '$lib/store';
+	import { t } from '$lib/translations';
 
 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');
@@ -139,9 +140,7 @@
 				`/applications/${id}/configuration/repository.json?repository=${selected.project.path_with_namespace}&branch=${selected.branch.name}`
 			);
 			if (data.used) {
-				const sure = confirm(
+				const sure = confirm($t('application.configuration.branch_already_in_use'));
-					`This branch is already used by another application. Webhooks won't work in this case for both applications. Are you sure you want to use it?`
-				);
 				if (sure) {
 					autodeploy = false;
 					showSave = true;
@@ -270,11 +269,11 @@
 	<div class="flex flex-col space-y-2 px-4 xl:flex-row xl:space-y-0 xl:space-x-2 ">
 		{#if loading.base}
 			<select name="group" disabled class="w-96">
-				<option selected value="">Loading groups...</option>
+				<option selected value="">{$t('application.configuration.loading_groups')}</option>
 			</select>
 		{:else}
 			<select name="group" class="w-96" bind:value={selected.group} on:change={loadProjects}>
-				<option value="" disabled selected>Please select a group</option>
+				<option value="" disabled selected>{$t('application.configuration.select_a_group')}</option>
 				{#each groups as group}
 					<option value={group}>{group.full_name}</option>
 				{/each}
@@ -282,7 +281,7 @@
 		{/if}
 		{#if loading.projects}
 			<select name="project" disabled class="w-96">
-				<option selected value="">Loading projects...</option>
+				<option selected value="">{$t('application.configuration.loading_projects')}</option>
 			</select>
 		{:else if !loading.projects && projects.length > 0}
 			<select
@@ -292,20 +291,24 @@
 				on:change={loadBranches}
 				disabled={!selected.group}
 			>
-				<option value="" disabled selected>Please select a project</option>
+				<option value="" disabled selected
+					>{$t('application.configuration.select_a_project')}</option
+				>
 				{#each projects as project}
 					<option value={project}>{project.name}</option>
 				{/each}
 			</select>
 		{:else}
 			<select name="project" disabled class="w-96">
-				<option disabled selected value="">No projects found</option>
+				<option disabled selected value=""
+					>{$t('application.configuration.no_projects_found')}</option
+				>
 			</select>
 		{/if}
 
 		{#if loading.branches}
 			<select name="branch" disabled class="w-96">
-				<option selected value="">Loading branches...</option>
+				<option selected value="">{$t('application.configuration.loading_branches')}</option>
 			</select>
 		{:else if !loading.branches && branches.length > 0}
 			<select
@@ -315,14 +318,17 @@
 				on:change={isBranchAlreadyUsed}
 				disabled={!selected.project}
 			>
-				<option value="" disabled selected>Please select a branch</option>
+				<option value="" disabled selected>{$t('application.configuration.select_a_branch')}</option
+				>
 				{#each branches as branch}
 					<option value={branch}>{branch.name}</option>
 				{/each}
 			</select>
 		{:else}
 			<select name="project" disabled class="w-96">
-				<option disabled selected value="">No branches found</option>
+				<option disabled selected value=""
+					>{$t('application.configuration.no_branches_found')}</option
+				>
 			</select>
 		{/if}
 	</div>
@@ -334,7 +340,7 @@
 			disabled={!showSave || loading.save}
 			class:bg-orange-600={showSave && !loading.save}
 			class:hover:bg-orange-500={showSave && !loading.save}
-			>{loading.save ? 'Saving...' : 'Save'}</button
+			>{loading.save ? $t('forms.saving') : $t('forms.save')}</button
 		>
 	</div>
 </form>

src/routes/applications/[id]/configuration/buildpack.svelte

@@ -36,6 +36,7 @@
 	import { errorNotification } from '$lib/form';
 	import { gitTokens } from '$lib/store';
 	import { browser } from '$app/env';
+	import { t } from '$lib/translations';
 
 	const { id } = $page.params;
 
@@ -198,18 +199,21 @@
 </script>
 
 <div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Configure Build Pack</div>
+	<div class="mr-4 text-2xl tracking-tight">
+		{$t('application.configuration.configure_build_pack')}
+	</div>
 </div>
 
 {#if scanning}
 	<div class="flex justify-center space-x-1 p-6 font-bold">
-		<div class="text-xl tracking-tight">Scanning repository to suggest a build pack for you...</div>
+		<div class="text-xl tracking-tight">
+			{$t('application.configuration.scanning_repository_suggest_build_pack')}
+		</div>
 	</div>
 {:else}
 	{#if packageManager === 'yarn' || packageManager === 'pnpm'}
 		<div class="flex justify-center p-6">
-			Found lock file for <span class="font-bold text-orange-500 pl-1">{packageManager}</span>.
+			{@html $t('application.configuration.found_lock_file')}
-			Using it for predefined commands commands.
 		</div>
 	{/if}
 	<div class="max-w-7xl mx-auto flex flex-wrap justify-center">

src/routes/applications/[id]/configuration/destination.svelte

@@ -33,6 +33,7 @@
 	import { errorNotification } from '$lib/form';
 	import { goto } from '$app/navigation';
 	import { post } from '$lib/api';
+	import { t } from '$lib/translations';
 
 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');
@@ -50,12 +51,14 @@
 </script>
 
 <div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Configure Destination</div>
+	<div class="mr-4 text-2xl tracking-tight">
+		{$t('application.configuration.configure_destination')}
+	</div>
 </div>
 <div class="flex justify-center">
 	{#if !destinations || destinations.length === 0}
 		<div class="flex-col">
-			<div class="pb-2">No configurable Destination found</div>
+			<div class="pb-2">{$t('application.configuration.no_configurable_destination')}</div>
 			<div class="flex justify-center">
 				<a href="/new/destination" sveltekit:prefetch class="add-icon bg-sky-600 hover:bg-sky-500">
 					<svg

src/routes/applications/[id]/configuration/repository.svelte

@@ -18,6 +18,8 @@
 </script>
 
 <script lang="ts">
+	import { t } from '$lib/translations';
+
 	export let application;
 	export let appId;
 
@@ -26,7 +28,9 @@
 </script>
 
 <div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Select a Repository / Project</div>
+	<div class="mr-4 text-2xl tracking-tight">
+		{$t('application.configuration.select_a_repository_project')}
+	</div>
 </div>
 <div class="flex flex-wrap justify-center">
 	{#if application.gitSource.type === 'github'}

src/routes/applications/[id]/configuration/source.svelte

@@ -33,6 +33,7 @@
 	import { errorNotification } from '$lib/form';
 	import { goto } from '$app/navigation';
 	import { post } from '$lib/api';
+	import { t } from '$lib/translations';
 
 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');
@@ -57,12 +58,14 @@
 </script>
 
 <div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">Select a Git Source</div>
+	<div class="mr-4 text-2xl tracking-tight">
+		{$t('application.configuration.select_a_git_source')}
+	</div>
 </div>
 <div class="flex flex-col justify-center">
 	{#if !filteredSources || filteredSources.length === 0}
 		<div class="flex-col">
-			<div class="pb-2">No configurable Git Source found</div>
+			<div class="pb-2">{$t('application.configuration.no_configurable_git')}</div>
 			<div class="flex justify-center">
 				<a href="/new/source" sveltekit:prefetch class="add-icon bg-orange-600 hover:bg-orange-500">
 					<svg
@@ -97,7 +100,7 @@
 							<div class="font-bold text-xl text-center truncate">{source.name}</div>
 							{#if source.gitlabApp && !source.gitlabAppId}
 								<div class="font-bold text-center truncate text-red-500 group-hover:text-white">
-									Configuration missing
+									{$t('application.configuration.configuration_missing')}
 								</div>
 							{/if}
 						</button>