v1.0.16 (#51)

2025-12-30 12:33:45 +00:00 · 2021-06-07 21:33:11 +02:00
parent 9c173d1de0
commit 31b3f58b2c
36 changed files with 1480 additions and 1999 deletions
--- a/src/components/Application/ActiveTab/General.svelte
+++ b/src/components/Application/ActiveTab/General.svelte
@@ -1,8 +1,17 @@
 <script>
-	import { application } from '$store';
+	import { VITE_GITHUB_APP_NAME } from '$lib/consts';
+	import { application, isPullRequestPermissionsGranted } from '$store';
 	import { onMount } from 'svelte';
 	import TooltipInfo from '$components/TooltipInfo.svelte';
+	import { request } from '$lib/request';
+	import { page, session } from '$app/stores';
+	import { browser } from '$app/env';
+
 	let domainInput;
+	let loading = {
+		previewDeployment: false
+	};
+	let howToActivate = false;
 	const buildpacks = {
 		static: {
 			port: {
@@ -110,6 +119,45 @@
 			custom: true
 		}
 	};
+	async function setPreviewDeployment() {
+		if ($application.general.isPreviewDeploymentEnabled) {
+			const result = window.confirm(
+				"Are you sure? It will delete all PR deployments - it's NOT reversible!"
+			);
+			if (result) {
+				loading.previewDeployment = true;
+				$application.general.isPreviewDeploymentEnabled =
+					!$application.general.isPreviewDeploymentEnabled;
+				if ($page.path !== '/application/new') {
+					const config = await request(`/api/v1/application/config/previewDeployment`, $session, {
+						body: {
+							name: $application.repository.name,
+							organization: $application.repository.organization,
+							branch: $application.repository.branch,
+							isPreviewDeploymentEnabled: $application.general.isPreviewDeploymentEnabled
+						}
+					});
+				}
+				loading.previewDeployment = false;
+			}
+		} else {
+			loading.previewDeployment = true;
+			$application.general.isPreviewDeploymentEnabled =
+				!$application.general.isPreviewDeploymentEnabled;
+			$application.general.pullRequest = 0;
+			if ($page.path !== '/application/new') {
+				const config = await request(`/api/v1/application/config/previewDeployment`, $session, {
+					body: {
+						name: $application.repository.name,
+						organization: $application.repository.organization,
+						branch: $application.repository.branch,
+						isPreviewDeploymentEnabled: $application.general.isPreviewDeploymentEnabled
+					}
+				});
+			}
+			loading.previewDeployment = false;
+		}
+	}
 	function selectBuildPack(event) {
 		if (event.target.innerText === 'React/Preact') {
 			$application.build.pack = 'react';
@@ -117,6 +165,34 @@
 			$application.build.pack = event.target.innerText.replace(/\./g, '').toLowerCase();
 		}
 	}
+	async function openGithub() {
+		if (browser) {
+			const config = await request(`https://api.github.com/apps/${VITE_GITHUB_APP_NAME}`, $session);
+
+			let url = `https://github.com/settings/apps/${VITE_GITHUB_APP_NAME}/permissions`;
+			if (config.owner.type === 'Organization') {
+				url = `https://github.com/organizations/${config.owner.login}/settings/apps/${VITE_GITHUB_APP_NAME}/permissions`;
+			}
+
+			const left = screen.width / 2 - 1020 / 2;
+			const top = screen.height / 2 - 618 / 2;
+			const newWindow = open(
+				url,
+				'Permission Update',
+				'resizable=1, scrollbars=1, fullscreen=1, height=1000, width=1220,top=' +
+					top +
+					', left=' +
+					left +
+					', toolbar=0, menubar=0, status=0'
+			);
+			const timer = setInterval(async () => {
+				if (newWindow?.closed) {
+					clearInterval(timer);
+					location.reload();
+				}
+			}, 100);
+		}
+	}
 	onMount(() => {
 		if (!$application.publish.domain) domainInput.focus();
 	});
@@ -235,6 +311,127 @@
 	</div>
 	<div class="text-2xl font-bold border-gradient w-52">General settings</div>
 	<div class="grid grid-cols-1 max-w-2xl md:mx-auto mx-6 justify-center items-center pt-10">
+		<div>
+			<ul class="divide-y divide-warmGray-800">
+				<li class="pb-6 flex items-center justify-between">
+					<div class="flex flex-col">
+						<p class="text-base font-bold text-warmGray-100">Preview deployments</p>
+						<p class="text-sm font-medium text-warmGray-400">
+							PR's will be deployed so you could review them easily
+						</p>
+					</div>
+
+					{#if $isPullRequestPermissionsGranted}
+						<div
+							class="relative"
+							class:animate-wiggle={loading.previewDeployment}
+							class:opacity-25={loading.previewDeployment}
+						>
+							<button
+								type="button"
+								disabled={loading.previewDeployment}
+								on:click={setPreviewDeployment}
+								aria-pressed="false"
+								class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200"
+								class:bg-green-600={$application.general.isPreviewDeploymentEnabled}
+								class:bg-warmGray-700={!$application.general.isPreviewDeploymentEnabled}
+								class:cursor-not-allowed={loading.previewDeployment}
+							>
+								<span class="sr-only">Use setting</span>
+								<span
+									class="pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200"
+									class:translate-x-5={$application.general.isPreviewDeploymentEnabled}
+									class:translate-x-0={!$application.general.isPreviewDeploymentEnabled}
+								>
+									<span
+										class=" ease-in duration-200 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
+										class:opacity-0={$application.general.isPreviewDeploymentEnabled}
+										class:opacity-100={!$application.general.isPreviewDeploymentEnabled}
+										aria-hidden="true"
+									>
+										<svg class="bg-white h-3 w-3 text-red-600" fill="none" viewBox="0 0 12 12">
+											<path
+												d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
+												stroke="currentColor"
+												stroke-width="2"
+												stroke-linecap="round"
+												stroke-linejoin="round"
+											/>
+										</svg>
+									</span>
+									<span
+										class="ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
+										aria-hidden="true"
+										class:opacity-100={$application.general.isPreviewDeploymentEnabled}
+										class:opacity-0={!$application.general.isPreviewDeploymentEnabled}
+									>
+										<svg
+											class="bg-white h-3 w-3 text-green-600"
+											fill="currentColor"
+											viewBox="0 0 12 12"
+										>
+											<path
+												d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"
+											/>
+										</svg>
+									</span>
+								</span>
+							</button>
+							{#if loading.previewDeployment}
+								<div class="absolute left-0 bottom-0 -mb-4 -ml-2 text-xs font-bold">{$application.general.isPreviewDeploymentEnabled ? 'Enabling...' : 'Disabling...' }</div>
+							{/if}
+						</div>
+					{:else}
+						<div class="relative">
+							{#if !howToActivate}
+								<button
+									class="button py-2 px-2 bg-warmGray-800 hover:bg-warmGray-700 text-white"
+									on:click={() => (howToActivate = !howToActivate)}>How to active this?</button
+								>
+							{:else}
+								<button
+									class="button py-2 px-2 bg-green-600 hover:bg-green-500 text-white"
+									on:click={openGithub}>Open Github</button
+								>
+							{/if}
+							{#if howToActivate}
+								<div class="absolute right-0 w-64 z-10">
+									<div class="bg-warmGray-800 p-4 my-2 rounded text-white">
+										<div
+											class="absolute right-0 top-0 p-2 my-3 mx-1 text-xs font-bold cursor-pointer hover:bg-warmGray-700"
+											on:click={() => (howToActivate = false)}
+										>
+											X
+										</div>
+										<p class="text-sm font-medium text-warmGray-400">
+											You need to add <span class="text-white">two new permissions</span> to your GitHub
+											App:
+										</p>
+										<br />
+										<p class="text-sm font-medium text-warmGray-400">
+											1. In <span class="text-white">Repository permissions</span>, add
+											<span class="text-white">Read-only</span>
+											access to <span class="text-white">Pull requests</span>.
+										</p>
+										<br />
+										<p class="text-sm font-medium text-warmGray-400">
+											2. In <span class="text-white">Subscribe to events</span> section,
+											<span class="text-white"> check Pull request</span> field.
+										</p>
+										<br />
+										<p class="text-sm font-medium text-warmGray-400">
+											3. You <span class="text-white">receive an email</span> where you need to
+											<span class="text-white">accept the new permissions</span>.
+										</p>
+									</div>
+								</div>
+							{/if}
+						</div>
+					{/if}
+				</li>
+			</ul>
+		</div>
+
 		<div class="grid grid-flow-col gap-2 items-center pb-6">
 			<div class="grid grid-flow-row">
 				<label for="Domain" class="">Domain</label>
@@ -298,11 +495,7 @@
 			</div>
 		</div>
 	</div>
-	<div
-		class="text-2xl font-bold w-40 border-gradient"
-	>
-		Commands
-	</div>
+	<div class="text-2xl font-bold w-40 border-gradient">Commands</div>
 	<div class=" max-w-2xl md:mx-auto mx-6 justify-center items-center pt-10 pb-32">
 		<div class="grid grid-flow-col gap-2 items-center">
 			<div class="grid grid-flow-row">
@@ -320,17 +513,17 @@
 						placeholder="main"
 					/>
 					<label for="ApplicationInstance"
-					>Application Instance<TooltipInfo
-						label="The instance name (the main function name. See gunicorn.org for more details)"
-					/>
-				</label>
+						>Application Instance<TooltipInfo
+							label="The instance name (the main function name. See gunicorn.org for more details)"
+						/>
+					</label>

-				<input
-					class="mb-6"
-					id="ApplicationInstance"
-					bind:value={$application.build.command.python.instance}
-					placeholder="app"
-				/>
+					<input
+						class="mb-6"
+						id="ApplicationInstance"
+						bind:value={$application.build.command.python.instance}
+						placeholder="app"
+					/>
 				{:else}
 					<label
 						for="installCommand"
--- a/src/components/Application/ActiveTab/PullRequests.svelte
+++ b/src/components/Application/ActiveTab/PullRequests.svelte
@@ -0,0 +1,110 @@
+<script>
+	import { browser } from '$app/env';
+	import { goto } from '$app/navigation';
+	import { onDestroy, onMount } from 'svelte';
+	import { session } from '$app/stores';
+	import { request } from '$lib/request';
+	import { toast } from '@zerodevx/svelte-toast';
+	import { application, prApplication } from '$store';
+	let loadPRDeployments = null;
+	onMount(async () => {
+		await getPRDeployments();
+		loadPRDeployments = setInterval(async () => {
+			await getPRDeployments();
+		}, 1000);
+	});
+	onDestroy(() => {
+		clearInterval(loadPRDeployments);
+	});
+	async function getPRDeployments() {
+		const { configuration } = await request(`/api/v1/application/config`, $session, {
+			body: {
+				name: $application.repository.name,
+				organization: $application.repository.organization,
+				branch: $application.repository.branch
+			}
+		});
+		$prApplication = configuration.filter((c) => c.general.pullRequest !== 0);
+	}
+	async function removePR(prConfiguration) {
+		const result = window.confirm("Are you sure? It's NOT reversible!");
+		if (result) {
+			await request(`/api/v1/application/remove`, $session, {
+				body: {
+					organization: prConfiguration.repository.organization,
+					name: prConfiguration.repository.name,
+					branch: prConfiguration.repository.branch,
+					domain: prConfiguration.publish.domain
+				}
+			});
+
+			browser && toast.push('PR deployment removed.');
+			const { configuration } = await request(`/api/v1/application/config`, $session, {
+				body: {
+					name: prConfiguration.repository.name,
+					organization: prConfiguration.repository.organization,
+					branch: prConfiguration.repository.branch
+				}
+			});
+			$prApplication = configuration.filter((c) => c.general.pullRequest !== 0);
+		}
+	}
+
+</script>
+
+<div class="text-2xl font-bold border-gradient w-48">Pull Requests</div>
+<div class="text-center pt-4">
+	{#if $prApplication.length > 0}
+		<div class="py-4 ">
+			{#each $prApplication as pr}
+				<div class="flex space-x-4 justify-center items-center">
+					<div class="text-left  font-bold tracking-tight  ">
+						{pr.publish.domain}
+					</div>
+					<a
+						target="_blank"
+						class="icon mx-2 "
+						href={'https://' + pr.publish.domain + pr.publish.path}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+							/>
+						</svg></a
+					>
+					<!-- <div class="flex-1" /> -->
+					<button
+						class="icon hover:text-red-500 hover:bg-warmGray-800"
+						on:click={() => removePR(pr)}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+							/>
+						</svg>
+					</button>
+				</div>
+			{/each}
+		</div>
+	{:else}
+		<div class="font-bold text-center">No PR deployments found</div>
+	{/if}
+</div>
--- a/src/components/Application/Configuration.svelte
+++ b/src/components/Application/Configuration.svelte
@@ -2,7 +2,14 @@
 	import { goto } from '$app/navigation';
 	import { request } from '$lib/request';
 	import { session } from '$app/stores';
-	import { githubRepositories, application, githubInstallations } from '$store';
+	import {
+		githubRepositories,
+		application,
+		githubInstallations,
+		prApplication,
+		initConf,
+		isPullRequestPermissionsGranted
+	} from '$store';

 	import { fade } from 'svelte/transition';
 	import Loading from '$components/Loading.svelte';
@@ -18,6 +25,7 @@
 	};
 	let branches = [];
 	let relogin = false;
+	let permissions = {};
 	function dashify(str: string, options?: any) {
 		if (typeof str !== 'string') return str;
 		return str
@@ -110,8 +118,17 @@
 			$session
 		);
 		loading.branches = false;
+		await loadPermissions();
+	}
+	async function loadPermissions() {
+		const config = await request(
+			`https://api.github.com/apps/${import.meta.env.VITE_GITHUB_APP_NAME}`,
+			$session
+		);
+		if (config.permissions['pull_requests'] && config.events.includes('pull_request')) {
+			$isPullRequestPermissionsGranted = true;
+		}
 	}
-
 	async function modifyGithubAppConfig() {
 		if (browser) {
 			const left = screen.width / 2 - 1020 / 2;
@@ -128,20 +145,23 @@
 					', toolbar=0, menubar=0, status=0'
 			);
 			const timer = setInterval(async () => {
-				if (newWindow.closed) {
+				if (newWindow?.closed) {
 					clearInterval(timer);
 					loading.github = true;

 					if ($application.repository.name) {
 						try {
-							const config = await request(`/api/v1/application/config`, $session, {
+							const { configuration } = await request(`/api/v1/application/config`, $session, {
 								body: {
 									name: $application.repository.name,
 									organization: $application.repository.organization,
 									branch: $application.repository.branch
 								}
 							});
-							$application = { ...config };
+
+							$prApplication = configuration.filter((c) => c.general.pullRequest !== 0);
+							$application = configuration.find((c) => c.general.pullRequest === 0);
+							$initConf = JSON.parse(JSON.stringify($application));
 						} catch (error) {
 							browser && goto('/dashboard/applications', { replaceState: true });
 						}
--- a/src/components/Application/Login.svelte
+++ b/src/components/Application/Login.svelte
@@ -14,7 +14,7 @@
 				', toolbar=0, menubar=0, status=0'
 		);
 		const timer = setInterval(() => {
-			if (newWindow.closed) {
+			if (newWindow?.closed) {
 				clearInterval(timer);
 				location.reload()
 			}
--- a/src/components/Application/Navbar.svelte
+++ b/src/components/Application/Navbar.svelte
@@ -8,17 +8,23 @@
 	import { goto } from '$app/navigation';
 	import { browser } from '$app/env';
 	async function removeApplication() {
-		await request(`/api/v1/application/remove`, $session, {
-			body: {
-				organization: $application.repository.organization,
-				name: $application.repository.name,
-				branch: $application.repository.branch
-			}
-		});
+		const result = window.confirm(
+			"Are you sure? It will delete all deployments, including PR's - it's NOT reversible!"
+		);
+		if (result) {
+			await request(`/api/v1/application/remove`, $session, {
+				body: {
+					organization: $application.repository.organization,
+					name: $application.repository.name,
+					branch: $application.repository.branch,
+					domain: $application.publish.domain
+				}
+			});

-		browser && toast.push('Application removed.');
-		$application = JSON.parse(JSON.stringify(initialApplication));
-		browser && goto(`/dashboard/applications`, { replaceState: true });
+			browser && toast.push('Application removed.');
+			$application = JSON.parse(JSON.stringify(initialApplication));
+			browser && goto(`/dashboard/applications`, { replaceState: true });
+		}
 	}

 	onDestroy(() => {
@@ -50,6 +56,7 @@
 			// toast.push(error.error || error || 'Ooops something went wrong.');
 		}
 	}
+
 </script>

 <nav class="flex text-white justify-end items-center m-4 fixed right-0 top-0 space-x-4 z-50">
--- a/src/components/Application/Tabs.svelte
+++ b/src/components/Application/Tabs.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { toast } from '@zerodevx/svelte-toast';
 	import templates from '$lib/api/applications/packs/templates';
-	import { application, dashboard } from '$store';
+	import { application, dashboard, initConf, prApplication } from '$store';
 	import General from '$components/Application/ActiveTab/General.svelte';
 	import Secrets from '$components/Application/ActiveTab/Secrets.svelte';
 	import Loading from '$components/Loading.svelte';
@@ -9,17 +9,18 @@
 	import { page, session } from '$app/stores';
 	import { request } from '$lib/request';
 	import { browser } from '$app/env';
+	import PullRequests from './ActiveTab/PullRequests.svelte';

 	let activeTab = {
 		general: true,
-		buildStep: false,
-		secrets: false
+		secrets: false,
+		pullRequests: false
 	};
 	function activateTab(tab) {
 		if (activeTab.hasOwnProperty(tab)) {
 			activeTab = {
 				general: false,
-				buildStep: false,
+				pullRequests: false,
 				secrets: false
 			};
 			activeTab[tab] = true;
@@ -48,16 +49,7 @@
 			}
 			return;
 		}
-		if ($page.path !== '/application/new') {
-			const config = await request(`/api/v1/application/config`, $session, {
-				body: {
-					name: $application.repository.name,
-					organization: $application.repository.organization,
-					branch: $application.repository.branch
-				}
-			});
-			$application = { ...config };
-		} else {
+		if ($page.path === '/application/new') {
 			try {
 				const dir = await request(
 					`https://api.github.com/repos/${$application.repository.organization}/${$application.repository.name}/contents/?ref=${$application.repository.branch}`,
@@ -103,17 +95,18 @@
 					$application.build.pack = 'rust';
 					browser && toast.push(`Rust language detected. Default values set.`);
 				} else if (requirementsTXT) {
-					$application.build.pack = 'python'
+					$application.build.pack = 'python';
 					browser && toast.push('Python language detected. Default values set.');
 				} else if (Dockerfile) {
 					$application.build.pack = 'docker';
 					browser && toast.push('Custom Dockerfile found. Build pack set to docker.');
-				} 
+				}
 			} catch (error) {
 				// Nothing detected
 			}
 		}
 	}
+
 </script>

 {#await load()}
@@ -135,6 +128,15 @@
 			>
 				Secrets
 			</div>
+			{#if $application.general.isPreviewDeploymentEnabled}
+				<div
+					on:click={() => activateTab('pullRequests')}
+					class:text-green-500={activeTab.pullRequests}
+					class="px-3 py-2 cursor-pointer hover:bg-warmGray-700 rounded-lg transition duration-100"
+				>
+					Pull Requests
+				</div>
+			{/if}
 		</nav>
 	</div>
 	<div class="max-w-4xl mx-auto">
@@ -143,6 +145,8 @@
 				<General />
 			{:else if activeTab.secrets}
 				<Secrets />
+			{:else if activeTab.pullRequests && $page.path !== '/application/new'}
+				<PullRequests />
 			{/if}
 		</div>
 	</div>