From a939b21c4870cfa92915b09c5c44cd42e40ccbd4 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Fri, 28 Jul 2023 16:24:18 +0200
Subject: [PATCH] Fix operator mode (#1960)

* feat(frontend): Only display edit button if user can write

* feat(frontend): Only display edit button if user can write

* feat(frontend): Only display edit button if user can write

* feat(frontend): Only display edit button if user can write
---
 .../details/DetailPageHeader.svelte           | 46 ++++++++++---------
 .../(logged)/flows/get/[...path]/+page.svelte | 12 +++--
 .../scripts/get/[...hash]/+page.svelte        | 35 +++++++-------
 3 files changed, 50 insertions(+), 43 deletions(-)

diff --git a/frontend/src/lib/components/details/DetailPageHeader.svelte b/frontend/src/lib/components/details/DetailPageHeader.svelte
index 86cf0fc091..f422bf766d 100644
--- a/frontend/src/lib/components/details/DetailPageHeader.svelte
+++ b/frontend/src/lib/components/details/DetailPageHeader.svelte
@@ -32,30 +32,32 @@
 				<slot />
 			</div>
 			<div class="flex gap-1 md:gap-2 items-center">
-				<Menu>
-					<svelte:fragment slot="items">
-						{#each menuItems as { label, Icon, onclick, color } (label)}
-							<MenuItem
-								on:click={() => {
-									const div = document.querySelector('[id^="headlessui-menu-items"]')
-									div?.parentElement?.remove()
+				{#if menuItems.length > 0}
+					<Menu>
+						<svelte:fragment slot="items">
+							{#each menuItems as { label, Icon, onclick, color } (label)}
+								<MenuItem
+									on:click={() => {
+										const div = document.querySelector('[id^="headlessui-menu-items"]')
+										div?.parentElement?.remove()
 
-									onclick()
-								}}
-							>
-								<div
-									class={classNames(
-										'text-xs flex items-center gap-2 flex-row-2 ',
-										color === 'red' ? 'text-red-500' : ''
-									)}
+										onclick()
+									}}
 								>
-									<Icon class="h-4" />
-									{label}
-								</div>
-							</MenuItem>
-						{/each}
-					</svelte:fragment>
-				</Menu>
+									<div
+										class={classNames(
+											'text-xs flex items-center gap-2 flex-row-2 ',
+											color === 'red' ? 'text-red-500' : ''
+										)}
+									>
+										<Icon class="h-4" />
+										{label}
+									</div>
+								</MenuItem>
+							{/each}
+						</svelte:fragment>
+					</Menu>
+				{/if}
 				{#each mainButtons as btn}
 					<Button
 						{...btn.buttonProps}
diff --git a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
index d7c007b2b6..7a51ea23fd 100644
--- a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
@@ -103,10 +103,9 @@
 	let runForm: RunForm
 
 	function getMainButtons(flow: Flow | undefined, args: object | undefined) {
-		if (!flow || $userStore?.operator) return []
-
 		const buttons: any = []
-		if (!$userStore?.operator) {
+
+		if (flow) {
 			buttons.push({
 				label: 'Fork',
 				buttonProps: {
@@ -114,11 +113,16 @@
 					variant: 'border',
 					color: 'light',
 					size: 'xs',
-					disabled: !can_write,
 					startIcon: faCodeFork
 				}
 			})
+		}
 
+		if (!flow || $userStore?.operator || !can_write) {
+			return buttons
+		}
+
+		if (!$userStore?.operator) {
 			buttons.push({
 				label: 'Build App',
 				buttonProps: {
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 de6ca6c167..c1776befd7 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
@@ -197,10 +197,24 @@
 	let deploymentDrawer: DeployWorkspaceDrawer
 
 	function getMainButtons(script: Script | undefined, args: object | undefined) {
-		if (!script || $userStore?.operator) return []
-
 		const buttons: any = []
 
+		if (!topHash && script) {
+			buttons.push({
+				label: 'Fork',
+				buttonProps: {
+					href: `/scripts/add?template=${script.path}`,
+					size: 'xs',
+					color: 'light',
+					startIcon: faCodeFork
+				}
+			})
+		}
+
+		if (!script || $userStore?.operator || !can_write) {
+			return buttons
+		}
+
 		if (Array.isArray(script.parent_hashes) && script.parent_hashes.length > 0) {
 			buttons.push({
 				label: `History`,
@@ -217,19 +231,6 @@
 		}
 
 		if (!$userStore?.operator) {
-			if (!topHash) {
-				buttons.push({
-					label: 'Fork',
-					buttonProps: {
-						href: `/scripts/add?template=${script.path}`,
-
-						size: 'xs',
-						color: 'light',
-						startIcon: faCodeFork
-					}
-				})
-			}
-
 			buttons.push({
 				label: 'Build App',
 				buttonProps: {
@@ -251,11 +252,11 @@
 					href: `/scripts/edit/${script.path}?args=${encodeState(args)}${
 						topHash ? `&hash=${script.hash}&topHash=` + topHash : ''
 					}`,
-					disabled: !can_write,
 					size: 'xs',
 					startIcon: faEdit,
 					color: 'dark',
-					variant: 'contained'
+					variant: 'contained',
+					disabled: !can_write
 				}
 			})
 		}