From 7af751e557de4d5392a44880922a55a742f267fb Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Tue, 6 Feb 2024 11:37:00 +0100
Subject: [PATCH] fix(frontend): Fix operators actions + small UI fixes (#3157)

* feat(frontend): fix tree view expand all button + operator mode actions

* feat(frontend): fix deploy workspace when user have no access to target workspace
---
 .../src/lib/components/DeployWorkspace.svelte |  2 +
 frontend/src/lib/components/DropdownV2.svelte |  5 ++-
 frontend/src/lib/components/Path.svelte       |  4 +-
 .../apps/editor/AppJsonEditor.svelte          | 15 +++++---
 .../lib/components/common/table/AppRow.svelte | 38 +++++++++++++------
 .../components/common/table/FlowRow.svelte    | 30 ++++++++++-----
 .../components/common/table/ScriptRow.svelte  | 27 ++++++++-----
 .../src/lib/components/home/ItemsList.svelte  | 12 ++++--
 8 files changed, 90 insertions(+), 43 deletions(-)

diff --git a/frontend/src/lib/components/DeployWorkspace.svelte b/frontend/src/lib/components/DeployWorkspace.svelte
index 5254130d86..44ebd31d99 100644
--- a/frontend/src/lib/components/DeployWorkspace.svelte
+++ b/frontend/src/lib/components/DeployWorkspace.svelte
@@ -55,6 +55,7 @@
 			notSet = true
 		}
 	})
+
 	$: workspaceToDeployTo && reload(initialPath)
 
 	async function reload(path: string) {
@@ -65,6 +66,7 @@
 			seeTarget = true
 		} catch {
 			seeTarget = false
+			return
 		}
 
 		const allDeps = await getDependencies(kind, path)
diff --git a/frontend/src/lib/components/DropdownV2.svelte b/frontend/src/lib/components/DropdownV2.svelte
index ccfb33ceff..ad64c8bb0e 100644
--- a/frontend/src/lib/components/DropdownV2.svelte
+++ b/frontend/src/lib/components/DropdownV2.svelte
@@ -11,6 +11,7 @@
 		href?: string
 		disabled?: boolean
 		type?: 'action' | 'delete'
+		hide?: boolean | undefined
 	}
 
 	export let items: Item[] | (() => Item[]) = []
@@ -18,9 +19,9 @@
 
 	function computeItems(): Item[] {
 		if (typeof items === 'function') {
-			return items()
+			return (items() ?? []).filter((item) => !item.hide)
 		} else {
-			return items
+			return items.filter((item) => !item.hide)
 		}
 	}
 </script>
diff --git a/frontend/src/lib/components/Path.svelte b/frontend/src/lib/components/Path.svelte
index a72ea8579e..1119266f7d 100644
--- a/frontend/src/lib/components/Path.svelte
+++ b/frontend/src/lib/components/Path.svelte
@@ -302,7 +302,7 @@
 		{#if meta != undefined}
 			<div class="flex gap-x-4 shrink">
 				<!-- svelte-ignore a11y-label-has-associated-control -->
-				<label class="block">
+				<div class="block">
 					<span class="text-secondary text-sm whitespace-nowrap">&nbsp;</span>
 
 					<ToggleButtonGroup
@@ -342,7 +342,7 @@
 							label="Folder"
 						/>
 					</ToggleButtonGroup>
-				</label>
+				</div>
 				{#if meta.ownerKind === 'user'}
 					<label class="block shrink min-w-0">
 						<span class="text-secondary text-sm">User</span>
diff --git a/frontend/src/lib/components/apps/editor/AppJsonEditor.svelte b/frontend/src/lib/components/apps/editor/AppJsonEditor.svelte
index 3fc191ffce..6d60f2b556 100644
--- a/frontend/src/lib/components/apps/editor/AppJsonEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppJsonEditor.svelte
@@ -6,9 +6,9 @@
 	import JsonEditor from './settingsPanel/inputEditor/JsonEditor.svelte'
 	import { AppService, DraftService } from '$lib/gen'
 	import { sendUserToast } from '$lib/toast'
-	import { workspaceStore } from '$lib/stores'
+	import { userStore, workspaceStore } from '$lib/stores'
 	import { createEventDispatcher } from 'svelte'
-	import { Loader2, Save } from 'lucide-svelte'
+	import { Globe, Loader2, Save } from 'lucide-svelte'
 
 	let jsonViewerDrawer: Drawer
 
@@ -86,9 +86,14 @@
 		{/if}
 
 		<svelte:fragment slot="actions">
-			<Button on:click={saveDraft} startIcon={{ icon: Save }}>Save as draft</Button>
-
-			<Button on:click={saveApp} startIcon={{ icon: Save }}>Deploy</Button>
+			{#if !$userStore?.operator}
+				<Button on:click={saveDraft} startIcon={{ icon: Save }} color="dark" size="xs">
+					Save as draft
+				</Button>
+				<Button on:click={saveApp} startIcon={{ icon: Globe }} color="dark" size="xs">
+					Deploy
+				</Button>
+			{/if}
 		</svelte:fragment>
 	</DrawerContent>
 </Drawer>
diff --git a/frontend/src/lib/components/common/table/AppRow.svelte b/frontend/src/lib/components/common/table/AppRow.svelte
index ddfb491efd..9899bc364a 100644
--- a/frontend/src/lib/components/common/table/AppRow.svelte
+++ b/frontend/src/lib/components/common/table/AppRow.svelte
@@ -21,12 +21,13 @@
 		History,
 		Pen,
 		Share,
-		Trash
+		Trash,
+		Clipboard
 	} from 'lucide-svelte'
 	import { goto } from '$app/navigation'
 	import { page } from '$app/stores'
 	import type DeployWorkspaceDrawer from '$lib/components/DeployWorkspaceDrawer.svelte'
-	import { DELETE } from '$lib/utils'
+	import { DELETE, copyToClipboard } from '$lib/utils'
 	import AppDeploymentHistory from '$lib/components/apps/editor/AppDeploymentHistory.svelte'
 	import AppJsonEditor from '$lib/components/apps/editor/AppJsonEditor.svelte'
 
@@ -142,10 +143,11 @@
 								}
 							},
 							type: 'delete',
-							disabled: !canWrite
+							disabled: !canWrite,
+							hide: $userStore?.operator
 						},
 						{
-							displayName: 'View/Edit JSON',
+							displayName: $userStore?.operator ? 'View JSON' : 'View/Edit JSON',
 							icon: File,
 							action: () => {
 								loadAppJson()
@@ -157,7 +159,8 @@
 					{
 						displayName: 'Duplicate/Fork',
 						icon: GitFork,
-						href: `/apps/add?template=${path}`
+						href: `/apps/add?template=${path}`,
+						hide: $userStore?.operator
 					},
 					{
 						displayName: 'Move/Rename',
@@ -165,17 +168,19 @@
 						action: () => {
 							moveDrawer.openDrawer(path, summary, 'app')
 						},
-						disabled: !canWrite
+						disabled: !canWrite,
+						hide: $userStore?.operator
 					},
 					{
 						displayName: 'Deploy to staging/prod',
 						icon: Globe,
 						action: () => {
 							deploymentDrawer.openDrawer(path, 'app')
-						}
+						},
+						hide: $userStore?.operator
 					},
 					{
-						displayName: 'View/Edit JSON',
+						displayName: $userStore?.operator ? 'View JSON' : 'View/Edit JSON',
 						icon: FileJson,
 						action: () => {
 							loadAppJson()
@@ -184,13 +189,22 @@
 					{
 						displayName: 'Deployments',
 						icon: History,
-						action: () => loadDeployements()
+						action: () => loadDeployements(),
+						hide: $userStore?.operator
 					},
 					{
 						displayName: canWrite ? 'Share' : 'See Permissions',
 						icon: Share,
 						action: () => {
 							shareModal.openDrawer && shareModal.openDrawer(path, 'app')
+						},
+						hide: $userStore?.operator
+					},
+					{
+						displayName: 'Copy path',
+						icon: Clipboard,
+						action: () => {
+							copyToClipboard(path)
 						}
 					},
 					...(execution_mode == 'anonymous'
@@ -226,7 +240,8 @@
 										dispatch('change')
 									},
 									type: DELETE,
-									disabled: !canWrite
+									disabled: !canWrite,
+									hide: $userStore?.operator
 								}
 						  ]
 						: []),
@@ -247,7 +262,8 @@
 							}
 						},
 						type: 'delete',
-						disabled: !canWrite
+						disabled: !canWrite,
+						hide: $userStore?.operator
 					}
 				]
 			}}
diff --git a/frontend/src/lib/components/common/table/FlowRow.svelte b/frontend/src/lib/components/common/table/FlowRow.svelte
index bc73b56261..95fe7eefd1 100644
--- a/frontend/src/lib/components/common/table/FlowRow.svelte
+++ b/frontend/src/lib/components/common/table/FlowRow.svelte
@@ -146,7 +146,8 @@
 								}
 							},
 							type: 'delete',
-							disabled: !owner
+							disabled: !owner,
+							hide: $userStore?.operator
 						}
 					]
 				}
@@ -154,7 +155,8 @@
 					{
 						displayName: 'Duplicate/Fork',
 						icon: GitFork,
-						href: `/flows/add?template=${path}`
+						href: `/flows/add?template=${path}`,
+						hide: $userStore?.operator
 					},
 					{
 						displayName: 'View runs',
@@ -164,7 +166,8 @@
 					{
 						displayName: 'Audit logs',
 						icon: Eye,
-						href: `/audit_logs?resource=${path}`
+						href: `/audit_logs?resource=${path}`,
+						hide: $userStore?.operator
 					},
 					{
 						displayName: 'Move/Rename',
@@ -172,7 +175,8 @@
 						action: () => {
 							moveDrawer.openDrawer(path, flow.summary, 'flow')
 						},
-						disabled: !owner || archived
+						disabled: !owner || archived,
+						hide: $userStore?.operator
 					},
 					{
 						displayName: 'Copy path',
@@ -187,7 +191,8 @@
 						action: () => {
 							deploymentDrawer.openDrawer(path, 'flow')
 						},
-						disabled: archived
+						disabled: archived,
+						hide: $userStore?.operator
 					},
 					{
 						displayName: 'Schedule',
@@ -195,14 +200,16 @@
 						action: () => {
 							scheduleEditor?.openNew(true, path)
 						},
-						disabled: archived
+						disabled: archived,
+						hide: $userStore?.operator
 					},
 					{
 						displayName: owner ? 'Share' : 'See Permissions',
 						icon: Share,
 						action: () => {
 							shareModal.openDrawer && shareModal.openDrawer(path, 'flow')
-						}
+						},
+						hide: $userStore?.operator
 					},
 					{
 						displayName: archived ? 'Unarchive' : 'Archive',
@@ -211,7 +218,8 @@
 							path && archiveFlow(path, !archived)
 						},
 						type: 'delete',
-						disabled: !owner
+						disabled: !owner,
+						hide: $userStore?.operator
 					},
 					...(has_draft
 						? [
@@ -227,7 +235,8 @@
 										dispatch('change')
 									},
 									type: DELETE,
-									disabled: !owner
+									disabled: !owner,
+									hide: $userStore?.operator
 								}
 						  ]
 						: []),
@@ -245,7 +254,8 @@
 							}
 						},
 						type: 'delete',
-						disabled: !owner
+						disabled: !owner,
+						hide: $userStore?.operator
 					}
 				]
 			}}
diff --git a/frontend/src/lib/components/common/table/ScriptRow.svelte b/frontend/src/lib/components/common/table/ScriptRow.svelte
index e66ac1b369..e3ac4fd51c 100644
--- a/frontend/src/lib/components/common/table/ScriptRow.svelte
+++ b/frontend/src/lib/components/common/table/ScriptRow.svelte
@@ -183,7 +183,8 @@
 					{
 						displayName: 'Duplicate/Fork',
 						icon: GitFork,
-						href: `/scripts/add?template=${script.path}`
+						href: `/scripts/add?template=${script.path}`,
+						hide: $userStore?.operator
 					},
 					{
 						displayName: 'Move/Rename',
@@ -191,7 +192,8 @@
 						action: () => {
 							moveDrawer.openDrawer(script.path, script.summary, 'script')
 						},
-						disabled: !owner || script.archived
+						disabled: !owner || script.archived,
+						hide: $userStore?.operator
 					},
 					{
 						displayName: 'Deploy to staging/prod',
@@ -199,7 +201,8 @@
 						action: () => {
 							deploymentDrawer.openDrawer(script.path, 'script')
 						},
-						disabled: script.archived
+						disabled: script.archived,
+						hide: $userStore?.operator
 					},
 					{
 						displayName: 'View runs',
@@ -209,7 +212,8 @@
 					{
 						displayName: 'Audit logs',
 						icon: Eye,
-						href: `/audit_logs?resource=${script.path}`
+						href: `/audit_logs?resource=${script.path}`,
+						hide: $userStore?.operator
 					},
 					{
 						displayName: 'Schedule',
@@ -217,7 +221,8 @@
 						action: () => {
 							scheduleEditor.openNew(false, script.path)
 						},
-						disabled: script.archived
+						disabled: script.archived,
+						hide: $userStore?.operator
 					},
 					{
 						displayName: owner ? 'Share' : 'See Permissions',
@@ -225,7 +230,8 @@
 						action: () => {
 							shareModal.openDrawer && shareModal.openDrawer(script.path, 'script')
 						},
-						disabled: script.archived
+						disabled: script.archived,
+						hide: $userStore?.operator
 					},
 					{
 						displayName: 'Copy path',
@@ -243,7 +249,8 @@
 								: script.path && archiveScript(script.path)
 						},
 						type: 'delete',
-						disabled: !owner
+						disabled: !owner,
+						hide: $userStore?.operator
 					},
 
 					...(script.has_draft
@@ -260,7 +267,8 @@
 										dispatch('change')
 									},
 									type: DELETE,
-									disabled: !owner
+									disabled: !owner,
+									hide: $userStore?.operator
 								}
 						  ]
 						: []),
@@ -279,7 +287,8 @@
 										}
 									},
 									type: dlt,
-									disabled: !script.canWrite
+									disabled: !script.canWrite,
+									hide: $userStore?.operator
 								}
 						  ]
 						: [])
diff --git a/frontend/src/lib/components/home/ItemsList.svelte b/frontend/src/lib/components/home/ItemsList.svelte
index b1abdf9c40..7bff0f8eb3 100644
--- a/frontend/src/lib/components/home/ItemsList.svelte
+++ b/frontend/src/lib/components/home/ItemsList.svelte
@@ -14,7 +14,7 @@
 	} from '$lib/gen'
 	import { userStore, workspaceStore } from '$lib/stores'
 	import type uFuzzy from '@leeoniya/ufuzzy'
-	import { Code2, LayoutDashboard, SearchCode } from 'lucide-svelte'
+	import { Code2, FoldVertical, LayoutDashboard, SearchCode, UnfoldVertical } from 'lucide-svelte'
 
 	export let filter = ''
 	export let subtab: 'flow' | 'script' | 'app' = 'script'
@@ -411,11 +411,15 @@
 				<Toggle size="xs" bind:checked={treeView} options={{ right: 'Tree view' }} />
 				{#if treeView}
 					<Button
-						wrapperClasses="mb-0.5"
-						size="xs2"
-						variant="contained"
+						wrapperClasses="mt-1"
+						btnClasses="py-0 h-6"
+						size="xs"
+						variant="border"
 						color="light"
 						on:click={() => (collapseAll = !collapseAll)}
+						startIcon={{
+							icon: collapseAll ? UnfoldVertical : FoldVertical
+						}}
 					>
 						{#if collapseAll}
 							Expand all