fix(frontend): schedule operator perms + add instance settings in ope…

…rator menu (#4912) * fix(frontend): schedule operator perms + add instance settings in operator menu * fix npm timeout * forgot
windmill-labs · Dec 12, 2024 · 762ac30 · 762ac30
1 parent aed793e
commit 762ac30
Show file tree

Hide file tree

Showing 18 changed files with 242 additions and 149 deletions.
diff --git a/.github/workflows/frontend-check.yml b/.github/workflows/frontend-check.yml
@@ -15,7 +15,6 @@ jobs:
         with:
           node-version: 18
       - name: "npm check"
-        timeout-minutes: 2
-        run:
-          cd frontend && npm ci && npm run generate-backend-client && npm run
+        timeout-minutes: 5
+        run: cd frontend && npm ci && npm run generate-backend-client && npm run
           check
diff --git a/frontend/src/lib/components/AssignableTags.svelte b/frontend/src/lib/components/AssignableTags.svelte
@@ -7,14 +7,16 @@
 
 	export let placement: 'bottom-end' | 'top-end' = 'bottom-end'
 	export let color: 'nord' | 'dark' = 'dark'
+	export let disabled = false
 </script>
 
 <Popup
 	floatingConfig={{ strategy: 'absolute', placement: placement }}
 	containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
+	{disabled}
 >
 	<svelte:fragment slot="button">
-		<Button {color} size="xs" nonCaptureEvent={true}>
+		<Button {color} size="xs" nonCaptureEvent={true} {disabled}>
 			<div class="flex flex-row gap-1 items-center"
 				><Pen size={14} /> Custom tags&nbsp;<Tooltip light
 					>Tags are assigned to scripts and flows. Workers only accept jobs that correspond to their

diff --git a/frontend/src/lib/components/DropdownV2.svelte b/frontend/src/lib/components/DropdownV2.svelte
@@ -16,6 +16,7 @@
 
 	export let items: Item[] | (() => Item[]) | (() => Promise<Item[]>) = []
 	export let justifyEnd: boolean = true
+	export let disabled = false
 
 	async function computeItems(): Promise<Item[]> {
 		if (typeof items === 'function') {
@@ -26,7 +27,7 @@
 	}
 </script>
 
-<Menu placement="bottom-end" {justifyEnd} on:close on:open>
+<Menu placement="bottom-end" {justifyEnd} on:close on:open {disabled}>
 	<div slot="trigger">
 		{#if $$slots.buttonReplacement}
 			<slot name="buttonReplacement" />

diff --git a/frontend/src/lib/components/Editor.svelte b/frontend/src/lib/components/Editor.svelte
@@ -1105,6 +1105,7 @@
 		}
 	}
 
+	let timeoutModel: NodeJS.Timeout | undefined = undefined
 	async function loadMonaco() {
 		try {
 			console.log("Loading Monaco's language client")
@@ -1143,7 +1144,6 @@
 
 		// updateEditorKeybindingsMode(editor, 'vim', undefined)
 
-		let timeoutModel: NodeJS.Timeout | undefined = undefined
 		let ataModel: NodeJS.Timeout | undefined = undefined
 
 		editor?.onDidChangeModelContent((event) => {
@@ -1316,6 +1316,7 @@
 		sqlSchemaCompletor && sqlSchemaCompletor.dispose()
 		copilotCompletor && copilotCompletor.dispose()
 		sqlTypeCompletor && sqlTypeCompletor.dispose()
+		timeoutModel && clearTimeout(timeoutModel)
 	})
 
 	async function genRoot(hostname: string) {

diff --git a/frontend/src/lib/components/ErrorOrRecoveryHandler.svelte b/frontend/src/lib/components/ErrorOrRecoveryHandler.svelte
@@ -191,8 +191,8 @@
 
 <div>
 	<Tabs bind:selected={handlerSelected} class="mt-2 mb-4">
-		<Tab value="slack">Slack</Tab>
-		<Tab value="custom">
+		<Tab value="slack" disabled={!isEditable}>Slack</Tab>
+		<Tab value="custom" disabled={!isEditable}>
 			Custom
 			<slot name="custom-tab-tooltip" />
 		</Tab>
@@ -208,7 +208,7 @@
 			allowFlow={true}
 			bind:scriptPath={handlerPath}
 			bind:itemKind={customHandlerKind}
-			allowRefresh
+			allowRefresh={isEditable}
 		/>
 
 		{#if handlerPath === undefined}
@@ -217,6 +217,7 @@
 				color="dark"
 				size="xs"
 				href={customScriptTemplate}
+				disabled={!isEditable}
 				target="_blank">Create from template</Button
 			>
 		{/if}

diff --git a/frontend/src/lib/components/ScheduleEditorInner.svelte b/frontend/src/lib/components/ScheduleEditorInner.svelte
@@ -218,11 +218,13 @@
 	async function loadScript(p: string | undefined): Promise<void> {
 		if (p) {
 			runnable = undefined
-			if (is_flow) {
-				runnable = await FlowService.getFlowByPath({ workspace: $workspaceStore!, path: p })
-			} else {
-				runnable = await ScriptService.getScriptByPath({ workspace: $workspaceStore!, path: p })
-			}
+			try {
+				if (is_flow) {
+					runnable = await FlowService.getFlowByPath({ workspace: $workspaceStore!, path: p })
+				} else {
+					runnable = await ScriptService.getScriptByPath({ workspace: $workspaceStore!, path: p })
+				}
+			} catch (err) {}
 		} else {
 			runnable = undefined
 		}
@@ -524,7 +526,11 @@
 
 <Drawer size="900px" bind:this={drawer}>
 	<DrawerContent
-		title={edit ? `Edit schedule ${initialPath}` : 'New schedule'}
+		title={edit
+			? can_write
+				? `Edit schedule ${initialPath}`
+				: `View schedule ${initialPath}`
+			: 'New schedule'}
 		on:close={drawer.closeDrawer}
 	>
 		<svelte:fragment slot="actions">
@@ -541,22 +547,24 @@
 							View runs
 						</Button>
 					</div>
-					<div class="mr-8 center-center -mt-1">
-						<Toggle
-							disabled={!can_write}
-							checked={enabled}
-							options={{ right: 'Enabled' }}
-							on:change={async (e) => {
-								await ScheduleService.setScheduleEnabled({
-									path: initialPath,
-									workspace: $workspaceStore ?? '',
-									requestBody: { enabled: e.detail }
-								})
-								dispatch('update')
-								sendUserToast(`${e.detail ? 'enabled' : 'disabled'} schedule ${initialPath}`)
-							}}
-						/>
-					</div>
+					{#if can_write}
+						<div class="mr-8 center-center -mt-1">
+							<Toggle
+								disabled={!can_write}
+								checked={enabled}
+								options={{ right: 'Enabled' }}
+								on:change={async (e) => {
+									await ScheduleService.setScheduleEnabled({
+										path: initialPath,
+										workspace: $workspaceStore ?? '',
+										requestBody: { enabled: e.detail }
+									})
+									dispatch('update')
+									sendUserToast(`${e.detail ? 'enabled' : 'disabled'} schedule ${initialPath}`)
+								}}
+							/>
+						</div>
+					{/if}
 				{/if}
 				<Button
 					startIcon={{ icon: Save }}
@@ -565,7 +573,8 @@
 						emptyString(script_path) ||
 						(errorHandlerSelected == 'slack' &&
 							!emptyString(errorHandlerPath) &&
-							emptyString(errorHandlerExtraArgs['channel']))}
+							emptyString(errorHandlerExtraArgs['channel'])) ||
+						!can_write}
 					on:click={scheduleScript}
 				>
 					{edit ? 'Save' : 'Schedule'}
@@ -575,6 +584,7 @@
 		{#if drawerLoading}
 			<Loader2 class="animate-spin" />
 		{:else}
+			{can_write}
 			<div class="flex flex-col gap-12">
 				<div class="flex flex-col gap-4">
 					<div>
@@ -587,6 +597,7 @@
 								placeholder="Short summary to be displayed when listed"
 								class="text-sm w-full"
 								bind:value={summary}
+								disabled={!can_write}
 								on:keyup={() => {
 									if (!edit && summary?.length > 0 && !dirtyPath) {
 										pathC?.setName(
@@ -664,6 +675,7 @@
 								size="xs"
 								bind:checked={isLatestCron}
 								on:change={onVersionChange}
+								disabled={!can_write}
 							/>
 						</div>
 					{/if}
@@ -682,6 +694,7 @@
 						}}
 						bind:checked={showPauseUntil}
 						size="xs"
+						disabled={!can_write}
 					/>
 					{#if showPauseUntil}
 						<DateTimeInput bind:value={paused_until} />
@@ -715,6 +728,8 @@
 							scriptPath={script_path}
 							allowFlow={true}
 							{itemKind}
+							allowView={script_path != '' && !!runnable}
+							allowEdit={script_path != '' && !!runnable && !$userStore?.operator}
 						/>
 					{/if}
 					{#if itemKind == 'flow'}
@@ -752,6 +767,11 @@
 										This {is_flow ? 'flow' : 'script'} takes no argument
 									</div>
 								{/if}
+							{:else if script_path != ''}
+								<div class="text-xs texg-gray-700 my-2">
+									You cannot see the the {is_flow ? 'flow' : 'script'} input form as you do not have
+									access to it.
+								</div>
 							{:else}
 								<div class="text-xs texg-gray-700 my-2">
 									Pick a {is_flow ? 'flow' : 'script'} and fill its argument here
@@ -787,6 +807,7 @@
 									<div class="flex flex-row items-center gap-1 text-2xs text-tertiary">
 										defaults
 										<Dropdown
+											disabled={!can_write}
 											items={[
 												{
 													displayName: `Override future schedules only`,
@@ -879,6 +900,7 @@
 								</div>
 							</Section>
 						{:else if optionTabSelected === 'recovery_handler'}
+							{@const disabled = !can_write || emptyString($enterpriseLicense)}
 							<Section label="Recovery handler">
 								<svelte:fragment slot="header">
 									<div class="flex flex-row gap-2">
@@ -890,6 +912,7 @@
 									<div class="flex flex-row items-center text-tertiary text-2xs gap-2">
 										defaults
 										<Dropdown
+											{disabled}
 											items={[
 												{
 													displayName: `Override future schedules only`,
@@ -910,7 +933,7 @@
 									</div>
 								</svelte:fragment>
 								<ErrorOrRecoveryHandler
-									isEditable={can_write && !emptyString($enterpriseLicense)}
+									isEditable={!disabled}
 									errorOrRecovery="recovery"
 									bind:handlerSelected={recoveryHandlerSelected}
 									bind:handlerPath={recoveryHandlerPath}
@@ -963,12 +986,14 @@
 											class="!w-14 mx-2 text-center"
 											bind:value={recoveredTimes}
 											min="1"
+											{disabled}
 										/>
 										<p>time{recoveredTimes > 1 ? 's in a row' : ''}</p>
 									</div>
 								</div>
 							</Section>
 						{:else if optionTabSelected === 'success_handler'}
+							{@const disabled = !can_write || emptyString($enterpriseLicense)}
 							<Section label="Success handler">
 								<svelte:fragment slot="header">
 									<div class="flex flex-row gap-2">
@@ -980,6 +1005,7 @@
 									<div class="flex flex-row items-center text-tertiary text-2xs gap-2">
 										defaults
 										<Dropdown
+											{disabled}
 											items={[
 												{
 													displayName: `Override future schedules only`,
@@ -1000,7 +1026,7 @@
 									</div>
 								</svelte:fragment>
 								<ErrorOrRecoveryHandler
-									isEditable={can_write && !emptyString($enterpriseLicense)}
+									isEditable={!disabled}
 									errorOrRecovery="success"
 									bind:handlerSelected={successHandlerSelected}
 									bind:handlerPath={successHandlerPath}
@@ -1031,6 +1057,7 @@
 								</ErrorOrRecoveryHandler>
 							</Section>
 						{:else if optionTabSelected === 'retries'}
+							{@const disabled = !can_write || emptyString($enterpriseLicense)}
 							<Section label="Retries">
 								<svelte:fragment slot="header">
 									<div class="flex flex-row gap-2">
@@ -1045,14 +1072,17 @@
 										flow step in the flow editor.
 									</Tooltip>
 								</svelte:fragment>
-								<FlowRetries bind:flowModuleRetry={retry} disabled={itemKind !== 'script'} />
+								<FlowRetries
+									bind:flowModuleRetry={retry}
+									disabled={itemKind !== 'script' || disabled}
+								/>
 							</Section>
 						{:else if optionTabSelected === 'tag'}
 							<Section
 								label="Custom script tag"
 								tooltip="When set, the script tag will be overridden by this tag"
 							>
-								<WorkerTagPicker bind:tag popupPlacement="top-end" />
+								<WorkerTagPicker bind:tag popupPlacement="top-end" disabled={!can_write} />
 							</Section>
 						{/if}
 					{:else}

diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -220,8 +220,8 @@
 	) {
 		scriptEditor?.disableCollaboration()
 		script.content = initialCode(language, kind, template)
-		scriptEditor?.inferSchema(script.content, language)
-		if (script.content != editor?.getCode() && editor?.getScriptLang() == language) {
+		scriptEditor?.inferSchema(script.content, language, true)
+		if (script.content != editor?.getCode()) {
 			setCode(script.content)
 		}
 	}

diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
@@ -128,7 +128,7 @@
 
 	let hasPreprocessor = false
 
-	export async function inferSchema(code: string, nlang?: SupportedLanguage) {
+	export async function inferSchema(code: string, nlang?: SupportedLanguage, resetArgs = false) {
 		let nschema = schema ?? emptySchema()
 
 		try {
@@ -142,6 +142,9 @@
 				(selectedTab === 'preprocessor' ? !result?.no_main_func : result?.has_preprocessor) ?? false
 
 			validCode = true
+			if (resetArgs) {
+				args = {}
+			}
 			schema = nschema
 		} catch (e) {
 			validCode = false