starred/windmill
1
0
Fork 0
mirror of https://github.com/windmill-labs/windmill.git synced 2026-08-18 16:02:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add UI toggles (#1437)

Browse Source 
* Add UI toggles

* Reset .env

* Remove console.log

* Remove more console.logs
This commit is contained in:
Mohsin Malik
2023-04-19 16:48:50 -04:00
committed by GitHub
parent 21d28f5ed9
commit 702b0d2d0f
10 changed files with 96 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/.env
+1 -1
View File
@@ -1 +1 @@
VITE_DEFAULT_WEBHOOK_TYPE=async
VITE_DEFAULT_WEBHOOK_TYPE=async
frontend/src/lib/components/EditorBar.svelte
+3
View File
@@ -31,6 +31,7 @@
import Skeleton from './common/skeleton/Skeleton.svelte'
import Popover from './Popover.svelte'
import Kbd from './common/kbd/Kbd.svelte'
import { SCRIPT_EDITOR_SHOW_EXPLORE_OTHER_SCRIPTS } from '$lib/consts'
export let lang: 'python3' | 'deno' | 'go' | 'bash'
export let editor: Editor | undefined
@@ -382,6 +383,7 @@
class="px-1"
disablePopup={!iconOnly}
>
{#if SCRIPT_EDITOR_SHOW_EXPLORE_OTHER_SCRIPTS}
<Button
btnClasses="!font-medium"
size="xs"
@@ -393,6 +395,7 @@
>
Explore other scripts
</Button>
{/if}
<svelte:fragment slot="text">Script</svelte:fragment>
</Popover>
</div>
frontend/src/lib/components/RunForm.svelte
+5
View File
@@ -19,6 +19,7 @@
import Toggle from './Toggle.svelte'
import Tooltip from './Tooltip.svelte'
import CollapseLink from './CollapseLink.svelte'
import { SCRIPT_VIEW_SHOW_RUN_FROM_CLI, SCRIPT_VIEW_SHOW_SCHEDULE_RUN_LATER } from '$lib/consts'
export let runnable:
| {
@@ -141,6 +142,7 @@
<CollapseLink text="Advanced">
<div class="flex flex-col gap-4 mt-2 border p-2">
<div class="flex flex-col gap-2">
{#if SCRIPT_VIEW_SHOW_SCHEDULE_RUN_LATER}
<div class="flex">
<Button
color="light"
@@ -151,6 +153,7 @@
Schedule to run later
</Button>
</div>
{/if}
{#if viewOptions}
<div transition:slide|local class="mt-6">
<div class="border rounded-md p-3 pt-4">
@@ -222,6 +225,7 @@
{#if viewCliRun}
<div>
<div class="my-20" />
{#if SCRIPT_VIEW_SHOW_RUN_FROM_CLI}
<div class="flex">
<Button
color="light"
@@ -232,6 +236,7 @@
Run it from the CLI
</Button>
</div>
{/if}
{#if viewCliOptions}
<div transition:slide|local class="mt-2 px-4 pt-2">
<InlineCodeCopy content={cliCommand} />
frontend/src/lib/components/ScriptBuilder.svelte
+12 -3
View File
@@ -19,6 +19,7 @@
import { Pen } from 'lucide-svelte'
import autosize from 'svelte-autosize'
import type Editor from './Editor.svelte'
import { SCRIPT_SHOW_BASH, SCRIPT_SHOW_GO, SCRIPT_SHOW_PSQL, SCRIPT_CUSTOMISE_SHOW_KIND } from '$lib/consts'
export let script: Script
export let initialPath: string = ''
@@ -39,10 +40,14 @@
const langs: [string, SupportedLanguage][] = [
['Typescript', Script.language.DENO],
['Python', Script.language.PYTHON3],
['Go', Script.language.GO],
['Bash', Script.language.BASH]
['Python', Script.language.PYTHON3]
]
if(SCRIPT_SHOW_GO) {
langs.push(['Go', Script.language.GO])
}
if(SCRIPT_SHOW_BASH) {
langs.push(['Bash', Script.language.BASH])
}
const scriptKindOptions: { value: Script.kind; title: string; desc?: string }[] = [
{
value: Script.kind.SCRIPT,
@@ -205,6 +210,7 @@
<span class="ml-2 py-2">{label}</span>
</Button>
{/each}
{#if SCRIPT_SHOW_PSQL}
<Button
size="sm"
variant="border"
@@ -223,6 +229,7 @@
>
<LanguageIcon lang="pgsql" /><span class="ml-2 py-2">PostgreSQL</span>
</Button>
{/if}
<!-- <Button
size="sm"
variant="border"
@@ -324,6 +331,7 @@
<Drawer bind:open={advancedOpen} size="800px">
<DrawerContent title="Customise" on:close={() => (advancedOpen = false)}>
{#if SCRIPT_CUSTOMISE_SHOW_KIND}
<h2 class="border-b pb-1 mb-4"
>Script Kind &nbsp;<Tooltip
>Tag this script's purpose within flows such that it is available as the corresponding
@@ -354,6 +362,7 @@
</Button>
{/each}
</div>
{/if}
<h2 class="border-b pb-1 mt-10 mb-4"
>Arguments &nbsp;<Tooltip
>The arguments are synced with the main signature but you may refine the parts that
frontend/src/lib/components/home/ItemsList.svelte
+5 -3
View File
@@ -15,6 +15,8 @@
import FlowRow from '$lib/components/common/table/FlowRow.svelte'
import ScriptRow from '$lib/components/common/table/ScriptRow.svelte'
import { HOME_SEARCH_SHOW_FLOW, HOME_SEARCH_PLACEHOLDER } from '$lib/consts'
import { faBarsStaggered } from '@fortawesome/free-solid-svg-icons'
import { Icon } from 'svelte-awesome'
import ConfirmationModal from '../common/confirmationModal/ConfirmationModal.svelte'
@@ -68,7 +70,6 @@
...script
}
})
loading = false
}
@@ -100,7 +101,6 @@
...app
}
})
loading = false
}
@@ -255,12 +255,14 @@
Scripts
</div>
</ToggleButton>
{#if HOME_SEARCH_SHOW_FLOW}
<ToggleButton light position="center" value="flow" size="sm">
<div class="flex gap-1 items-center">
<Icon data={faBarsStaggered} scale={0.8} class="mr-1" />
Flows
</div>
</ToggleButton>
{/if}
<ToggleButton light position="right" value="app" size="sm">
<div class="flex gap-1 items-center">
<LayoutDashboard size={16} />
@@ -274,7 +276,7 @@
<!-- svelte-ignore a11y-autofocus -->
<input
autofocus
placeholder="Search Scripts, Flows & Apps"
placeholder={HOME_SEARCH_PLACEHOLDER}
bind:value={filter}
class="bg-white !h-10 !px-4 !pr-10 !rounded-lg text-sm focus:outline-none"
/>
frontend/src/lib/components/sidebar/SidebarContent.svelte
+2 -1
View File
@@ -15,6 +15,7 @@
import { faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons'
import MenuLink from './MenuLink.svelte'
import { userStore } from '$lib/stores'
import { SIDEBAR_SHOW_SCHEDULES } from '$lib/consts'
const mainMenuLinks = [
{ label: 'Home', href: '/', icon: faHomeAlt },
@@ -24,7 +25,7 @@
]
$: secondaryMenuLinks = [
{ label: 'Schedules', href: '/schedules', icon: faCalendar, disabled: $userStore?.operator },
{ label: 'Schedules', href: '/schedules', icon: faCalendar, disabled: !SIDEBAR_SHOW_SCHEDULES || $userStore?.operator },
{ label: 'Folders', href: '/folders', icon: faFolderOpen, disabled: $userStore?.operator },
{ label: 'Groups', href: '/groups', icon: faUsersCog, disabled: $userStore?.operator },
{ label: 'Audit Logs', href: '/audit_logs', icon: faEye, disabled: $userStore?.operator },
frontend/src/lib/consts.ts
+39 -2
View File
@@ -1,2 +1,39 @@
export const DEFAULT_WEBHOOK_TYPE: 'async' | 'sync' =
import.meta.env.VITE_DEFAULT_WEBHOOK_TYPE || 'async'
function strToBool(someStr) {
return (someStr || 'true') === 'true'
}
export const DEFAULT_WEBHOOK_TYPE: 'async' | 'sync' = import.meta.env.VITE_DEFAULT_WEBHOOK_TYPE || 'async'
export const HOME_SHOW_HUB = strToBool(import.meta.env.VITE_HOME_SHOW_HUB)
export const HOME_SHOW_CREATE_FLOW = strToBool(import.meta.env.VITE_HOME_SHOW_CREATE_FLOW)
export const HOME_SEARCH_SHOW_FLOW = strToBool(import.meta.env.VITE_HOME_SEARCH_SHOW_FLOW)
export const HOME_SHOW_CREATE_APP = strToBool(import.meta.env.VITE_HOME_SHOW_CREATE_APP)
export const HOME_SEARCH_PLACEHOLDER = import.meta.env.VITE_HOME_SEARCH_PLACEHOLDER || 'Search Scripts, Flows & Apps'
export const SIDEBAR_SHOW_SCHEDULES = strToBool(import.meta.env.VITE_SIDEBAR_SHOW_SCHEDULES)
export const SCRIPT_SHOW_PSQL = strToBool(import.meta.env.VITE_SCRIPT_SHOW_PSQL)
export const SCRIPT_SHOW_GO = strToBool(import.meta.env.VITE_SCRIPT_SHOW_GO)
export const SCRIPT_SHOW_BASH = strToBool(import.meta.env.VITE_SCRIPT_SHOW_BASH)
export const WORKSPACE_SHOW_SLACK_CMD = strToBool(import.meta.env.VITE_WORKSPACE_SHOW_SLACK_CMD)
export const WORKSPACE_SHOW_WEBHOOK_CLI_SYNC = strToBool(import.meta.env.VITE_WORKSPACE_SHOW_WEBHOOK_CLI_SYNC)
export const SCRIPT_VIEW_SHOW_PUBLISH_TO_HUB = strToBool(import.meta.env.VITE_SCRIPT_VIEW_SHOW_PUBLISH_TO_HUB)
export const SCRIPT_VIEW_SHOW_SCHEDULE = strToBool(import.meta.env.VITE_SCRIPT_VIEW_SHOW_SCHEDULE)
export const SCRIPT_VIEW_SHOW_EXAMPLE_CURL = strToBool(import.meta.env.VITE_SCRIPT_VIEW_SHOW_EXAMPLE_CURL)
export const SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON = strToBool(import.meta.env.VITE_SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON)
export const SCRIPT_VIEW_SHOW_RUN_FROM_CLI = strToBool(import.meta.env.VITE_SCRIPT_VIEW_SHOW_RUN_FROM_CLI)
export const SCRIPT_VIEW_SHOW_SCHEDULE_RUN_LATER = strToBool(import.meta.env.VITE_SCRIPT_VIEW_SHOW_SCHEDULE_RUN_LATER)
export const SCRIPT_VIEW_WEBHOOK_INFO_TIP = import.meta.env.VITE_SCRIPT_VIEW_WEBHOOK_INFO_TIP || `Pass the input as a json payload, the token as a Bearer token (header: 'Authorization:
Bearer XXXX') or as query arg \`?token=XXX\`, and pass as header: 'Content-Type:
application/json'`
export const SCRIPT_VIEW_WEBHOOK_INFO_LINK = import.meta.env.VITE_SCRIPT_VIEW_WEBHOOK_INFO_LINK || 'https://docs.windmill.dev/docs/core_concepts/webhooks'
export const SCRIPT_EDITOR_SHOW_EXPLORE_OTHER_SCRIPTS = strToBool(import.meta.env.VITE_SCRIPT_EDITOR_SHOW_EXPLORE_OTHER_SCRIPTS)
export const SCRIPT_CUSTOMISE_SHOW_KIND = strToBool(import.meta.env.VITE_SCRIPT_CUSTOMISE_SHOW_KIND)
frontend/src/routes/(root)/(logged)/+page.svelte
+5 -2
View File
@@ -20,6 +20,7 @@
import AppPreview from '$lib/components/apps/editor/AppPreview.svelte'
import { writable } from 'svelte/store'
import type { EditorBreakpoint } from '$lib/components/apps/types'
import { HOME_SHOW_HUB, HOME_SHOW_CREATE_FLOW, HOME_SHOW_CREATE_APP } from '$lib/consts'
type Tab = 'hub' | 'workspace'
@@ -191,8 +192,8 @@
{#if !$userStore?.operator}
<span class="text-sm text-gray-500">Create a new:</span>
<CreateActionsScript />
<CreateActionsFlow />
<CreateActionsApp />
{#if HOME_SHOW_CREATE_FLOW}<CreateActionsFlow />{/if}
{#if HOME_SHOW_CREATE_APP}<CreateActionsApp />{/if}
{/if}
</div>
</PageHeader>
@@ -206,12 +207,14 @@
Workspace
</div>
</Tab>
{#if HOME_SHOW_HUB}
<Tab size="md" value="hub">
<div class="flex gap-2 items-center my-1">
<Globe2 size={18} />
Hub
</div>
</Tab>
{/if}
</Tabs>
</div>
{/if}
frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
+19 -5
View File
@@ -46,7 +46,15 @@
import { Loader2 } from 'lucide-svelte'
import { slide } from 'svelte/transition'
import MoveDrawer from '$lib/components/MoveDrawer.svelte'
import { DEFAULT_WEBHOOK_TYPE } from '$lib/consts'
import {
DEFAULT_WEBHOOK_TYPE,
SCRIPT_VIEW_SHOW_PUBLISH_TO_HUB,
SCRIPT_VIEW_SHOW_SCHEDULE,
SCRIPT_VIEW_SHOW_EXAMPLE_CURL,
SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON,
SCRIPT_VIEW_WEBHOOK_INFO_LINK,
SCRIPT_VIEW_WEBHOOK_INFO_TIP
} from '$lib/consts'
let userSettings: UserSettings
let script: Script | undefined
@@ -282,6 +290,7 @@
</div>
<div class="flex gap-2 flex-wrap mt-4">
{#if SCRIPT_VIEW_SHOW_PUBLISH_TO_HUB}
<Button
disabled={deploymentInProgress}
target="_blank"
@@ -301,6 +310,7 @@
>
Publish to Hub
</Button>
{/if}
<Button
on:click={() => shareModal.openDrawer(script?.path ?? '', 'script')}
variant="border"
@@ -311,6 +321,7 @@
>
Share
</Button>
{#if SCRIPT_VIEW_SHOW_SCHEDULE}
<Button
on:click={() => scheduleEditor?.openNew(false, script?.path ?? '')}
variant="border"
@@ -320,6 +331,7 @@
>
Schedule
</Button>
{/if}
<Button
on:click={() => moveDrawer.openDrawer(script?.path ?? '', script?.summary, 'script')}
variant="border"
@@ -450,10 +462,8 @@
<h3 bind:this={webhookElem} id="webhooks">
Webhooks
<Tooltip>
Pass the input as a json payload, the token as a Bearer token (header: 'Authorization:
Bearer XXXX') or as query arg `?token=XXX`, and pass as header: 'Content-Type:
application/json'
<a href="https://docs.windmill.dev/docs/core_concepts/webhooks" class="text-blue-500">
{SCRIPT_VIEW_WEBHOOK_INFO_TIP}
<a href={SCRIPT_VIEW_WEBHOOK_INFO_LINK} class="text-blue-500">
See docs
</a>
</Tooltip>
@@ -505,11 +515,14 @@
</li>
{/each}
</ul>
{#if SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON}
<div class="flex flex-row-reverse mt-2">
<Button size="xs" on:click={userSettings.openDrawer}>Create token</Button>
</div>
{/if}
</TabContent>
{/each}
{#if SCRIPT_VIEW_SHOW_EXAMPLE_CURL}
<div class="flex">
<Button
color="light"
@@ -520,6 +533,7 @@
See example curl command
</Button>
</div>
{/if}
{#if viewWebhookCommand}
<div transition:slide|local class="px-4">
<!-- svelte-ignore a11y-click-events-have-key-events -->
frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
+5
View File
@@ -14,6 +14,7 @@
import TableCustom from '$lib/components/TableCustom.svelte'
import Toggle from '$lib/components/Toggle.svelte'
import Tooltip from '$lib/components/Tooltip.svelte'
import { WORKSPACE_SHOW_SLACK_CMD, WORKSPACE_SHOW_WEBHOOK_CLI_SYNC } from '$lib/consts'
import type { User } from '$lib/gen'
import {
OauthService,
@@ -206,9 +207,11 @@
<Tab size="md" value="users">
<div class="flex gap-2 items-center my-1"> Users & Invites </div>
</Tab>
{#if WORKSPACE_SHOW_SLACK_CMD}
<Tab size="md" value="slack">
<div class="flex gap-2 items-center my-1"> Slack Command </div>
</Tab>
{/if}
{#if isCloudHosted()}
<Tab size="md" value="premium">
<div class="flex gap-2 items-center my-1"> Premium Plans </div>
@@ -217,9 +220,11 @@
<Tab size="md" value="export_delete">
<div class="flex gap-2 items-center my-1"> Export & Delete Workspace </div>
</Tab>
{#if WORKSPACE_SHOW_WEBHOOK_CLI_SYNC}
<Tab size="md" value="webhook">
<div class="flex gap-2 items-center my-1">Webhook for CLI Sync</div>
</Tab>
{/if}
</Tabs>
</div>
{#if tab == 'users'}