From 1e10057a42dcce203183f397eb60b5f2d93bb12a Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 2 Jan 2023 13:02:45 +0100
Subject: [PATCH] make app public page not require login at all

---
 backend/windmill-common/src/utils.rs          |  4 +--
 frontend/src/lib/components/LogViewer.svelte  | 11 +++-----
 .../src/lib/components/ModulePreview.svelte   | 16 +++--------
 .../src/lib/components/TestJobLoader.svelte   |  2 +-
 .../apps/components/buttons/AppButton.svelte  | 10 +++----
 .../componentsPanel/ComponentList.svelte      |  2 +-
 .../components/common/button/Button.svelte    |  8 ++----
 .../flows/content/FlowInputs.svelte           |  2 +-
 .../components/scriptEditor/LogPanel.svelte   | 12 ++++++---
 .../oauth/callback/[client_name]/+page.svelte |  4 +--
 .../scripts/get/[...hash]/+page.svelte        |  7 +++--
 .../public/[workspace]/[...secret]/+page.js   |  0
 .../[workspace]/[...secret]/+page.svelte      | 27 +++++++++++++++++--
 13 files changed, 56 insertions(+), 49 deletions(-)
 rename frontend/src/routes/{(root) => }/public/[workspace]/[...secret]/+page.js (100%)
 rename frontend/src/routes/{(root) => }/public/[workspace]/[...secret]/+page.svelte (52%)

diff --git a/backend/windmill-common/src/utils.rs b/backend/windmill-common/src/utils.rs
index 849b8e422e..a477a0571d 100644
--- a/backend/windmill-common/src/utils.rs
+++ b/backend/windmill-common/src/utils.rs
@@ -11,8 +11,8 @@ use serde::Deserialize;
 
 use crate::error::{Error, Result};
 
-pub const MAX_PER_PAGE: usize = 1000;
-pub const DEFAULT_PER_PAGE: usize = 100;
+pub const MAX_PER_PAGE: usize = 10000;
+pub const DEFAULT_PER_PAGE: usize = 1000;
 
 #[derive(Deserialize)]
 pub struct Pagination {
diff --git a/frontend/src/lib/components/LogViewer.svelte b/frontend/src/lib/components/LogViewer.svelte
index 2a54bce0b9..94de0fd437 100644
--- a/frontend/src/lib/components/LogViewer.svelte
+++ b/frontend/src/lib/components/LogViewer.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { faSpinner } from '@fortawesome/free-solid-svg-icons'
-	import { Icon } from 'svelte-awesome'
-	import { fade } from 'svelte/transition'
+	import { Loader2 } from 'lucide-svelte'
 	import { Drawer, DrawerContent } from './common'
 
 	export let content: string | undefined
@@ -52,10 +50,9 @@
 		{/if}
 
 		<pre class="whitespace-pre-wrap break-words bg-gray-50 text-xs w-full p-2"
-			>{#if content}<span>{content}</span>{:else if isLoading}<Icon
-					data={faSpinner}
-					class="animate-spin"
-				/>{:else}<span class="text-gray-600">No logs are available yet</span>{/if}</pre
+			>{#if content}<span>{content}</span>{:else if isLoading}
+				<Loader2 class="animate-spin" />
+			{:else}<span class="text-gray-600">No logs are available yet</span>{/if}</pre
 		>
 	</div>
 </div>
diff --git a/frontend/src/lib/components/ModulePreview.svelte b/frontend/src/lib/components/ModulePreview.svelte
index 405c845254..bde44acf54 100644
--- a/frontend/src/lib/components/ModulePreview.svelte
+++ b/frontend/src/lib/components/ModulePreview.svelte
@@ -8,11 +8,11 @@
 	import LogViewer from './LogViewer.svelte'
 	import DisplayResult from './DisplayResult.svelte'
 	import Button from './common/button/Button.svelte'
-	import { faSpinner } from '@fortawesome/free-solid-svg-icons'
 	import { flowStateStore } from './flows/flowState'
 	import { flowStore } from './flows/flowStore'
 	import { workspaceStore } from '$lib/stores'
 	import { Icon } from 'svelte-awesome'
+	import { Loader2 } from 'lucide-svelte'
 
 	export let mod: FlowModule
 	export let schema: Schema
@@ -77,16 +77,8 @@
 			bind:args={stepArgs}
 		/>
 		{#if testIsLoading}
-			<Button
-				on:click={testJobLoader?.cancelJob}
-				btnClasses="w-full mt-4"
-				color="red"
-				size="sm"
-				startIcon={{
-					icon: faSpinner,
-					classes: 'animate-spin'
-				}}
-			>
+			<Button on:click={testJobLoader?.cancelJob} btnClasses="w-full mt-4" color="red" size="sm">
+				<Loader2 class="animate-spin mr-1" />
 				Cancel
 			</Button>
 		{/if}
@@ -104,7 +96,7 @@
 				{:else}
 					<div class="p-2">
 						{#if testIsLoading}
-							<Icon data={faSpinner} class="animate-spin" />
+							<Loader2 class="animate-spin" />
 						{:else}
 							Test to see the result here
 						{/if}
diff --git a/frontend/src/lib/components/TestJobLoader.svelte b/frontend/src/lib/components/TestJobLoader.svelte
index 7c97940360..ad924ef93d 100644
--- a/frontend/src/lib/components/TestJobLoader.svelte
+++ b/frontend/src/lib/components/TestJobLoader.svelte
@@ -141,7 +141,7 @@
 					workspace: workspace!,
 					id,
 					running: job.running,
-					logOffset: job.logs?.length ?? 0
+					logOffset: job.logs?.length ? job.logs?.length + 1 : 0
 				})
 
 				if (previewJobUpdates.new_logs) {
diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
index b84403987e..8d0cb14580 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Button, type ButtonType } from '$lib/components/common'
-	import { faSpinner } from '@fortawesome/free-solid-svg-icons'
+	import { Loader2 } from 'lucide-svelte'
 	import { getContext } from 'svelte'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
@@ -83,16 +83,12 @@
 			}}
 			{size}
 			{color}
-			endIcon={loading
-				? {
-						icon: faSpinner,
-						classes: 'animate-spin w-4'
-				  }
-				: undefined}
 		>
 			{labelValue}
 			{#if !loading}
 				<span class="w-5" />
+			{:else}
+				<Loader2 class="animate-spin" />
 			{/if}
 		</Button>
 	</AlignWrapper>
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
index f55850420e..43959c5b74 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
@@ -30,7 +30,7 @@
 				'dateinputcomponent'
 			],
 			'2:12-4:12': ['barchartcomponent', 'piechartcomponent', 'formcomponent', 'displaycomponent'],
-			'3:6-6:8': ['tablecomponent']
+			'3:10-6:12': ['tablecomponent']
 		}
 		// Finds the key that is associated with the component type and extracts the dimensions from it
 		const [dimension] = Object.entries(dimensions).find(([_, value]) =>
diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte
index e61a5abb8e..ed0a675103 100644
--- a/frontend/src/lib/components/common/button/Button.svelte
+++ b/frontend/src/lib/components/common/button/Button.svelte
@@ -4,7 +4,7 @@
 	import Icon from 'svelte-awesome'
 	import { ButtonType } from './model'
 	import { goto } from '$app/navigation'
-	import { faSpinner } from '@fortawesome/free-solid-svg-icons'
+	import { Loader2 } from 'lucide-svelte'
 
 	export let size: ButtonType.Size = 'md'
 	export let spacingSize: ButtonType.Size = size
@@ -118,11 +118,7 @@
 	type="submit"
 >
 	{#if loading}
-		<Icon
-			data={faSpinner}
-			class={`animate-spin ${startIconClass}`}
-			scale={ButtonType.IconScale[size]}
-		/>
+		<Loader2 class="animate-spin mr-1" size={14} />
 	{:else if startIcon}
 		<Icon data={startIcon.icon} class={startIconClass} scale={ButtonType.IconScale[size]} />
 	{/if}
diff --git a/frontend/src/lib/components/flows/content/FlowInputs.svelte b/frontend/src/lib/components/flows/content/FlowInputs.svelte
index d39d9d37f1..a261b33b79 100644
--- a/frontend/src/lib/components/flows/content/FlowInputs.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInputs.svelte
@@ -145,7 +145,7 @@
 	</div>
 
 	<h3 class="mb-2 mt-6"
-		>Use pre-made <span class="text-blue-500">{kind == 'script' ? 'common' : kind}</span> script</h3
+		>Use pre-made <span class="text-blue-500">{kind == 'script' ? 'action' : kind}</span> script</h3
 	>
 	{#if pick_existing == 'hub'}
 		<PickHubScript bind:filter {kind} on:pick>
diff --git a/frontend/src/lib/components/scriptEditor/LogPanel.svelte b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
index 1584c5f6dd..660e9e1935 100644
--- a/frontend/src/lib/components/scriptEditor/LogPanel.svelte
+++ b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
@@ -18,7 +18,7 @@
 	import LogViewer from '../LogViewer.svelte'
 	import { Pane } from 'svelte-splitpanes'
 	import SplitPanesWrapper from '../splitPanes/SplitPanesWrapper.svelte'
-	import { fade } from 'svelte/transition'
+	import { Loader, Loader2 } from 'lucide-svelte'
 
 	export let path: string | undefined
 	export let lang: Preview.language
@@ -78,21 +78,25 @@
 		-->
 		{#if selectedTab === 'logs'}
 			<SplitPanesWrapper horizontal>
-				<Pane class="!duration-[0ms] relative">
+				<Pane class="relative">
 					<LogViewer
 						duration={previewJob?.['duration_ms']}
 						content={previewJob?.logs}
 						isLoading={previewIsLoading}
 					/>
 				</Pane>
-				<Pane class="!duration-[0ms]">
+				<Pane>
 					{#if previewJob != undefined && 'result' in previewJob && previewJob.result != undefined}
 						<pre class="overflow-x-auto break-words relative h-full p-2"
 							><DisplayResult result={previewJob.result} />
 						</pre>
 					{:else}
 						<div class="text-sm text-gray-600 p-2">
-							{previewIsLoading ? '' : 'Test to see the result here'}
+							{#if previewIsLoading}
+								<Loader2 class="animate-spin" />
+							{:else}
+								Test to see the result here'
+							{/if}
 						</div>
 					{/if}
 				</Pane>
diff --git a/frontend/src/routes/(root)/(logged)/oauth/callback/[client_name]/+page.svelte b/frontend/src/routes/(root)/(logged)/oauth/callback/[client_name]/+page.svelte
index 378ef07a57..7bd2f23c9e 100644
--- a/frontend/src/routes/(root)/(logged)/oauth/callback/[client_name]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/oauth/callback/[client_name]/+page.svelte
@@ -6,9 +6,9 @@
 	import { OauthService } from '$lib/gen'
 	import { oauthStore } from '$lib/stores'
 	import Icon from 'svelte-awesome'
-	import { faSpinner } from '@fortawesome/free-solid-svg-icons'
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import PageHeader from '$lib/components/PageHeader.svelte'
+	import { Loader2 } from 'lucide-svelte'
 
 	let client_name = $page.params.client_name
 	let error = $page.url.searchParams.get('error')
@@ -41,6 +41,6 @@
 <CenteredPage>
 	<PageHeader title="Connection to {client_name} in progress" />
 	<div class="mx-auto w-0">
-		<Icon class="animate-spin" data={faSpinner} scale={2.0} />
+		<Loader2 class="animate-spin" />
 	</div>
 </CenteredPage>
diff --git a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
index 2845a0771f..12e898f271 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
@@ -49,6 +49,7 @@
 	import { goto } from '$app/navigation'
 	import Popover from '$lib/components/Popover.svelte'
 	import ScheduleEditor from '$lib/components/ScheduleEditor.svelte'
+	import { Loader2 } from 'lucide-svelte'
 
 	let userSettings: UserSettings
 	let script: Script | undefined
@@ -232,10 +233,8 @@
 						</Badge>
 					{/if}
 					{#if deploymentInProgress}
-						<Badge
-							color="yellow"
-							icon={{ data: faSpinner, position: 'right', class: 'animate-spin' }}
-						>
+						<Badge color="yellow">
+							<Loader2 class="animate-spin mr-2" />
 							Deployment in progress
 						</Badge>
 					{/if}
diff --git a/frontend/src/routes/(root)/public/[workspace]/[...secret]/+page.js b/frontend/src/routes/public/[workspace]/[...secret]/+page.js
similarity index 100%
rename from frontend/src/routes/(root)/public/[workspace]/[...secret]/+page.js
rename to frontend/src/routes/public/[workspace]/[...secret]/+page.js
diff --git a/frontend/src/routes/(root)/public/[workspace]/[...secret]/+page.svelte b/frontend/src/routes/public/[workspace]/[...secret]/+page.svelte
similarity index 52%
rename from frontend/src/routes/(root)/public/[workspace]/[...secret]/+page.svelte
rename to frontend/src/routes/public/[workspace]/[...secret]/+page.svelte
index 867b2b967e..64ee1d6221 100644
--- a/frontend/src/routes/(root)/public/[workspace]/[...secret]/+page.svelte
+++ b/frontend/src/routes/public/[workspace]/[...secret]/+page.svelte
@@ -5,10 +5,12 @@
 	import type { EditorBreakpoint } from '$lib/components/apps/types'
 
 	import { Skeleton } from '$lib/components/common'
-	import { AppService, AppWithLastVersion } from '$lib/gen'
+	import { WindmillIcon } from '$lib/components/icons'
+	import { AppService, AppWithLastVersion, GlobalUserInfo, UserService } from '$lib/gen'
 	import { writable } from 'svelte/store'
 
 	let app: AppWithLastVersion | undefined = undefined
+	let user: GlobalUserInfo | undefined = undefined
 
 	async function loadApp() {
 		app = await AppService.getPublicAppBySecret({
@@ -17,14 +19,35 @@
 		})
 	}
 
+	async function loadUser() {
+		try {
+			user = await UserService.globalWhoami()
+		} catch (e) {}
+	}
 	if (browser) {
 		loadApp()
+		loadUser()
 	}
 
 	const breakpoint = writable<EditorBreakpoint>('lg')
 </script>
 
+<div class="z-50 text-xs fixed bottom-1 right-2 ">
+	<a href="https://windmill.dev" class="whitespace-nowrap text-gray-500 inline-flex items-center"
+		>Powered by &nbsp;<WindmillIcon />&nbsp;Windmill</a
+	>
+</div>
 {#if app}
+	<div class="z-50 text-xs text-gray-500 fixed top-1 left-2">
+		<div>
+			{#if user}
+				Logged in as {user.email}
+			{:else}
+				Not logged in
+			{/if}
+		</div>
+		<a class="text-blue-400" href="/">Go to app</a>
+	</div>
 	<div class="border rounded-md p-2 w-full">
 		<AppPreview
 			workspace={$page.params.workspace}
@@ -36,5 +59,5 @@
 		/>
 	</div>
 {:else}
-	<Skeleton layout={[10]} />
+	<Skeleton layout={[[4], 0.5, [50]]} />
 {/if}