From 2d02b7b2dae85c2c6109e9113663f15d1e3d2db7 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 23 Jun 2022 05:06:07 +0200
Subject: [PATCH] split frontend common utilities

---
 frontend/package-lock.json                    |  8 ++-
 frontend/package.json                         |  2 +-
 frontend/src/lib/components/Editor.svelte     |  3 +-
 frontend/src/lib/components/FlowEditor.svelte |  3 +-
 frontend/src/lib/components/ModuleStep.svelte |  3 +-
 frontend/src/lib/infer.ts                     |  4 +-
 frontend/src/lib/logout.ts                    | 26 +++++++
 frontend/src/lib/scripts.ts                   | 20 ++++++
 frontend/src/lib/stores.ts                    |  4 +-
 frontend/src/lib/user.ts                      | 32 +++++++++
 frontend/src/lib/utils.ts                     | 69 +------------------
 frontend/src/routes/__layout-root.svelte      | 11 ++-
 frontend/src/routes/__layout@root.svelte      |  3 +-
 .../routes/user/create_workspace@user.svelte  |  4 +-
 frontend/src/routes/user/login@user.svelte    |  5 +-
 .../src/routes/user/workspaces@user.svelte    |  6 +-
 16 files changed, 111 insertions(+), 92 deletions(-)
 create mode 100644 frontend/src/lib/logout.ts
 create mode 100644 frontend/src/lib/scripts.ts
 create mode 100644 frontend/src/lib/user.ts

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 65cc0c03ba..c47edabfb3 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12,7 +12,6 @@
 				"@fortawesome/free-brands-svg-icons": "^6.1.1",
 				"@fortawesome/free-solid-svg-icons": "^6.1.1",
 				"@types/vscode": "^1.63.0",
-				"@zerodevx/svelte-toast": "^0.7.2",
 				"fuse.js": "^6.4.6",
 				"highlight.js": "^11.5.1",
 				"monaco-editor": "^0.33.0",
@@ -29,6 +28,7 @@
 				"@tailwindcss/typography": "^0.5.0",
 				"@typescript-eslint/eslint-plugin": "^5.27.0",
 				"@typescript-eslint/parser": "^5.27.0",
+				"@zerodevx/svelte-toast": "^0.7.2",
 				"autoprefixer": "^10.4.1",
 				"cssnano": "^5.1.10",
 				"cypress": "^9.7.0",
@@ -772,7 +772,8 @@
 		"node_modules/@zerodevx/svelte-toast": {
 			"version": "0.7.2",
 			"resolved": "https://registry.npmjs.org/@zerodevx/svelte-toast/-/svelte-toast-0.7.2.tgz",
-			"integrity": "sha512-vWiY6IqsstcOoQ8PFBuFuxgPkj1JFAGhUF9gC7wLx7c5A9SSfdtxWs/39ekGSIeyJK0yqWhTcmzGrCEWSELzDw=="
+			"integrity": "sha512-vWiY6IqsstcOoQ8PFBuFuxgPkj1JFAGhUF9gC7wLx7c5A9SSfdtxWs/39ekGSIeyJK0yqWhTcmzGrCEWSELzDw==",
+			"dev": true
 		},
 		"node_modules/acorn": {
 			"version": "7.4.1",
@@ -7268,7 +7269,8 @@
 		"@zerodevx/svelte-toast": {
 			"version": "0.7.2",
 			"resolved": "https://registry.npmjs.org/@zerodevx/svelte-toast/-/svelte-toast-0.7.2.tgz",
-			"integrity": "sha512-vWiY6IqsstcOoQ8PFBuFuxgPkj1JFAGhUF9gC7wLx7c5A9SSfdtxWs/39ekGSIeyJK0yqWhTcmzGrCEWSELzDw=="
+			"integrity": "sha512-vWiY6IqsstcOoQ8PFBuFuxgPkj1JFAGhUF9gC7wLx7c5A9SSfdtxWs/39ekGSIeyJK0yqWhTcmzGrCEWSELzDw==",
+			"dev": true
 		},
 		"acorn": {
 			"version": "7.4.1",
diff --git a/frontend/package.json b/frontend/package.json
index 9f1b2c8162..efc99eefef 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,6 +22,7 @@
 		"@tailwindcss/typography": "^0.5.0",
 		"@typescript-eslint/eslint-plugin": "^5.27.0",
 		"@typescript-eslint/parser": "^5.27.0",
+		"@zerodevx/svelte-toast": "^0.7.2",
 		"autoprefixer": "^10.4.1",
 		"cssnano": "^5.1.10",
 		"cypress": "^9.7.0",
@@ -50,7 +51,6 @@
 		"@fortawesome/free-brands-svg-icons": "^6.1.1",
 		"@fortawesome/free-solid-svg-icons": "^6.1.1",
 		"@types/vscode": "^1.63.0",
-		"@zerodevx/svelte-toast": "^0.7.2",
 		"fuse.js": "^6.4.6",
 		"highlight.js": "^11.5.1",
 		"monaco-editor": "^0.33.0",
diff --git a/frontend/src/lib/components/Editor.svelte b/frontend/src/lib/components/Editor.svelte
index 1a989b80ee..7959ddc6c3 100644
--- a/frontend/src/lib/components/Editor.svelte
+++ b/frontend/src/lib/components/Editor.svelte
@@ -8,7 +8,6 @@
 	import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
 	import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
 	import type { DocumentUri, MessageTransports } from 'monaco-languageclient'
-	import * as vscode from 'vscode'
 	import { createEventDispatcher } from 'svelte'
 
 	const dispatch = createEventDispatcher()
@@ -84,6 +83,8 @@
 			// install Monaco language client services
 			const { MonacoLanguageClient } = await import('monaco-languageclient')
 			const { CloseAction, ErrorAction } = await import('vscode-languageclient')
+			const vscode = await import('vscode')
+
 			const { RequestType, toSocket, WebSocketMessageReader, WebSocketMessageWriter } =
 				await import('@codingame/monaco-jsonrpc')
 
diff --git a/frontend/src/lib/components/FlowEditor.svelte b/frontend/src/lib/components/FlowEditor.svelte
index 4e3ad36a8c..2e5370a554 100644
--- a/frontend/src/lib/components/FlowEditor.svelte
+++ b/frontend/src/lib/components/FlowEditor.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { faPlus } from '@fortawesome/free-solid-svg-icons'
 	import type { Schema } from '$lib/common'
-	import { emptySchema, loadSchema } from '$lib/utils'
+	import { emptySchema } from '$lib/utils'
 
 	import Icon from 'svelte-awesome'
 
@@ -11,6 +11,7 @@
 	import { workspaceStore } from '$lib/stores'
 	import ModuleStep from './ModuleStep.svelte'
 	import FlowPreview from './FlowPreview.svelte'
+	import { loadSchema } from '$lib/scripts'
 
 	export let flow: Flow
 
diff --git a/frontend/src/lib/components/ModuleStep.svelte b/frontend/src/lib/components/ModuleStep.svelte
index c01e57d1a6..cc32ae095f 100644
--- a/frontend/src/lib/components/ModuleStep.svelte
+++ b/frontend/src/lib/components/ModuleStep.svelte
@@ -4,7 +4,8 @@
 
 	import SchemaForm from './SchemaForm.svelte'
 	import ScriptPicker from './ScriptPicker.svelte'
-	import { emptySchema, loadSchema as UloadSchema } from '$lib/utils'
+	import { emptySchema } from '$lib/utils'
+	import { loadSchema as UloadSchema } from '$lib/scripts'
 	import FlowPreview from './FlowPreview.svelte'
 
 	export let flow: Flow
diff --git a/frontend/src/lib/infer.ts b/frontend/src/lib/infer.ts
index b08a7f2f5c..3b3c2a10dc 100644
--- a/frontend/src/lib/infer.ts
+++ b/frontend/src/lib/infer.ts
@@ -1,6 +1,6 @@
-import type { Schema, SchemaProperty } from './common'
+import type { Schema, SchemaProperty } from './common.js'
 import { ScriptService, type MainArgSignature } from '$lib/gen'
-import { sendUserToast } from './utils'
+import { sendUserToast } from './utils.js'
 
 export async function inferArgs(
 	language: 'python3' | 'deno',
diff --git a/frontend/src/lib/logout.ts b/frontend/src/lib/logout.ts
new file mode 100644
index 0000000000..17b9794afb
--- /dev/null
+++ b/frontend/src/lib/logout.ts
@@ -0,0 +1,26 @@
+import { goto } from '$app/navigation'
+import { UserService } from './gen'
+import { clearStores } from './stores.js'
+import { sendUserToast } from './utils.js'
+
+export function logoutWithRedirect(rd?: string): void {
+    const error = encodeURIComponent('You have been logged out because your session has expired.')
+    goto(`/user/login?error=${error}${rd ? '&rd=' + encodeURIComponent(rd) : ''}`)
+}
+
+
+export async function logout(logoutMessage?: string): Promise<void> {
+    try {
+        clearStores()
+        await UserService.logout()
+        goto(`/user/login${logoutMessage ? '?error=' + encodeURIComponent(logoutMessage) : ''}`)
+        sendUserToast('you have been logged out')
+    } catch (error) {
+        goto(
+            `/user/login?error=${encodeURIComponent(
+                'There was a problem logging you out, check the logs'
+            )}`
+        )
+        console.error(error)
+    }
+}
diff --git a/frontend/src/lib/scripts.ts b/frontend/src/lib/scripts.ts
new file mode 100644
index 0000000000..d378ccb1fb
--- /dev/null
+++ b/frontend/src/lib/scripts.ts
@@ -0,0 +1,20 @@
+import { get } from "svelte/store"
+import { ScriptService } from "./gen"
+import { inferArgs } from "./infer"
+import { workspaceStore } from "./stores"
+import { emptySchema } from "./utils"
+
+export async function loadSchema(path: string) {
+    if (path.startsWith('hub/')) {
+        const code = await ScriptService.getHubScriptContentByPath({ path })
+        const schema = emptySchema()
+        await inferArgs('deno', code, schema)
+        return schema
+    } else {
+        const script = await ScriptService.getScriptByPath({
+            workspace: get(workspaceStore)!,
+            path: path ?? ''
+        })
+        return script.schema
+    }
+}
diff --git a/frontend/src/lib/stores.ts b/frontend/src/lib/stores.ts
index 2a83a2fd69..ef9ccdb54a 100644
--- a/frontend/src/lib/stores.ts
+++ b/frontend/src/lib/stores.ts
@@ -1,7 +1,7 @@
 import { browser } from '$app/env'
 import { writable } from 'svelte/store'
-import type { UserWorkspaceList } from '$lib/gen'
-import { getUserExt } from './utils'
+import type { UserWorkspaceList } from '$lib/gen/models/UserWorkspaceList.js'
+import { getUserExt } from './user'
 
 export interface UserExt {
 	email: string
diff --git a/frontend/src/lib/user.ts b/frontend/src/lib/user.ts
new file mode 100644
index 0000000000..c2738c9860
--- /dev/null
+++ b/frontend/src/lib/user.ts
@@ -0,0 +1,32 @@
+import { get } from 'svelte/store'
+import { UserService, type User } from '$lib/gen'
+import { superadmin, type UserExt } from './stores.js'
+
+export async function refreshSuperadmin(): Promise<void> {
+    if (get(superadmin) == undefined) {
+        UserService.globalWhoami().then((x) => {
+            if (x.super_admin) {
+                superadmin.set(x.email)
+            } else {
+                superadmin.set(false)
+            }
+        })
+    }
+}
+
+export async function getUserExt(workspace: string): Promise<UserExt | undefined> {
+    try {
+        const user = await UserService.whoami({ workspace })
+        return mapUserToUserExt(user)
+    } catch (error) {
+        return undefined
+    }
+}
+
+function mapUserToUserExt(user: User): UserExt {
+    return {
+        ...user,
+        groups: user.groups!,
+        pgroups: user.groups!.map((x) => `g/${x}`)
+    }
+}
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 9e20d46393..8b713c6757 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -1,10 +1,6 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { goto } from '$app/navigation'
 import { toast } from '@zerodevx/svelte-toast'
-import { get } from 'svelte/store'
-import { ScriptService, UserService, type User } from '$lib/gen'
-import { inferArgs } from './infer'
-import { clearStores, superadmin, workspaceStore, type UserExt } from './stores'
+import type { UserExt } from './stores.js'
 
 export function isToday(someDate: Date): boolean {
 	const today = new Date()
@@ -70,21 +66,6 @@ export function truncateHash(hash: string): string {
 	}
 }
 
-export async function getUserExt(workspace: string): Promise<UserExt | undefined> {
-	try {
-		const user = await UserService.whoami({ workspace })
-		return mapUserToUserExt(user)
-	} catch (error) {
-		return undefined
-	}
-}
-
-export function logoutWithRedirect(rd?: string): void {
-	const error = encodeURIComponent('You have been logged out because your session has expired.')
-	goto(`/user/login?error=${error}${rd ? '&rd=' + encodeURIComponent(rd) : ''}`)
-}
-
-
 export function sleep(ms: number): Promise<void> {
 	return new Promise((resolve) => setTimeout(resolve, ms))
 }
@@ -94,33 +75,7 @@ export function validatePassword(password: string): boolean {
 	return re.test(password)
 }
 
-export async function refreshSuperadmin(): Promise<void> {
-	if (get(superadmin) == undefined) {
-		UserService.globalWhoami().then((x) => {
-			if (x.super_admin) {
-				superadmin.set(x.email)
-			} else {
-				superadmin.set(false)
-			}
-		})
-	}
-}
 
-export async function logout(logoutMessage?: string): Promise<void> {
-	try {
-		clearStores()
-		await UserService.logout()
-		goto(`/user/login${logoutMessage ? '?error=' + encodeURIComponent(logoutMessage) : ''}`)
-		sendUserToast('you have been logged out')
-	} catch (error) {
-		goto(
-			`/user/login?error=${encodeURIComponent(
-				'There was a problem logging you out, check the logs'
-			)}`
-		)
-		console.error(error)
-	}
-}
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function clickOutside(node: any): any {
@@ -139,21 +94,6 @@ export function clickOutside(node: any): any {
 	}
 }
 
-export async function loadSchema(path: string) {
-
-	if (path.startsWith('hub/')) {
-		const code = await ScriptService.getHubScriptContentByPath({ path })
-		const schema = emptySchema()
-		await inferArgs('deno', code, schema)
-		return schema
-	} else {
-		const script = await ScriptService.getScriptByPath({
-			workspace: get(workspaceStore)!,
-			path: path ?? ''
-		})
-		return script.schema
-	}
-}
 export type DropdownType = 'action' | 'delete'
 
 export interface DropdownItem {
@@ -301,10 +241,3 @@ export function isString(value: any) {
 	return typeof value === 'string' || value instanceof String
 }
 
-export function mapUserToUserExt(user: User): UserExt {
-	return {
-		...user,
-		groups: user.groups!,
-		pgroups: user.groups!.map((x) => `g/${x}`)
-	}
-}
diff --git a/frontend/src/routes/__layout-root.svelte b/frontend/src/routes/__layout-root.svelte
index 0c38b646eb..83aa7c4604 100644
--- a/frontend/src/routes/__layout-root.svelte
+++ b/frontend/src/routes/__layout-root.svelte
@@ -5,13 +5,10 @@
 	import { onMount } from 'svelte'
 	import { WorkspaceService } from '$lib/gen'
 	import { superadmin, userStore, usersWorkspaceStore, workspaceStore } from '$lib/stores'
-	import {
-		getUserExt,
-		logout,
-		logoutWithRedirect,
-		refreshSuperadmin,
-		sendUserToast
-	} from '$lib/utils'
+	import { sendUserToast } from '$lib/utils'
+
+	import { logout, logoutWithRedirect } from '$lib/logout'
+	import { getUserExt, refreshSuperadmin } from '$lib/user'
 
 	// Default toast options
 	const toastOptions = {
diff --git a/frontend/src/routes/__layout@root.svelte b/frontend/src/routes/__layout@root.svelte
index 5514ae90b2..841f1bf5ac 100644
--- a/frontend/src/routes/__layout@root.svelte
+++ b/frontend/src/routes/__layout@root.svelte
@@ -29,7 +29,8 @@
 		usersWorkspaceStore,
 		workspaceStore
 	} from '$lib/stores'
-	import { clickOutside, logout } from '$lib/utils'
+	import { clickOutside } from '$lib/utils'
+	import { logout } from '$lib/logout'
 
 	OpenAPI.WITH_CREDENTIALS = true
 
diff --git a/frontend/src/routes/user/create_workspace@user.svelte b/frontend/src/routes/user/create_workspace@user.svelte
index 87e6106e6a..33af5e2e2d 100644
--- a/frontend/src/routes/user/create_workspace@user.svelte
+++ b/frontend/src/routes/user/create_workspace@user.svelte
@@ -2,7 +2,9 @@
 	import { goto } from '$app/navigation'
 
 	import { UserService, WorkspaceService } from '$lib/gen'
-	import { logoutWithRedirect, sendUserToast } from '$lib/utils'
+	import { sendUserToast } from '$lib/utils'
+	import { logoutWithRedirect } from '$lib/logout'
+
 	import { page } from '$app/stores'
 	import { usersWorkspaceStore, workspaceStore } from '$lib/stores'
 	import CenteredModal from './CenteredModal.svelte'
diff --git a/frontend/src/routes/user/login@user.svelte b/frontend/src/routes/user/login@user.svelte
index 2e85d66bfe..eae46d8f53 100644
--- a/frontend/src/routes/user/login@user.svelte
+++ b/frontend/src/routes/user/login@user.svelte
@@ -6,9 +6,10 @@
 	import Icon from 'svelte-awesome'
 	import { slide } from 'svelte/transition'
 	import { UserService, WorkspaceService } from '$lib/gen'
-	import { clearStores, userStore, usersWorkspaceStore, workspaceStore } from '$lib/stores'
-	import { refreshSuperadmin, sendUserToast } from '$lib/utils'
+	import { clearStores, usersWorkspaceStore, workspaceStore } from '$lib/stores'
+	import { sendUserToast } from '$lib/utils'
 	import CenteredModal from './CenteredModal.svelte'
+	import { refreshSuperadmin } from '$lib/user'
 
 	let email = $page.url.searchParams.get('email') ?? ''
 	let password = $page.url.searchParams.get('password') ?? ''
diff --git a/frontend/src/routes/user/workspaces@user.svelte b/frontend/src/routes/user/workspaces@user.svelte
index 54e696b12a..926cc49695 100644
--- a/frontend/src/routes/user/workspaces@user.svelte
+++ b/frontend/src/routes/user/workspaces@user.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
 	import { goto } from '$app/navigation'
 	import { page } from '$app/stores'
-	import { logout, logoutWithRedirect, sendUserToast } from '$lib/utils'
+	import { sendUserToast } from '$lib/utils'
+	import { logout, logoutWithRedirect } from '$lib/logout'
+
 	import { UserService, type WorkspaceInvite, WorkspaceService } from '$lib/gen'
 	import { superadmin, usersWorkspaceStore, workspaceStore } from '$lib/stores'
 	import CenteredModal from './CenteredModal.svelte'
 	import Switch from '$lib/components/Switch.svelte'
-	import { faCrown, faUser, faUserAlt, faUserCog } from '@fortawesome/free-solid-svg-icons'
+	import { faCrown, faUserCog } from '@fortawesome/free-solid-svg-icons'
 	import Icon from 'svelte-awesome'
 
 	let invites: WorkspaceInvite[] = []