From 6a28b68dbfa6f84c6162bcaf75d8de50552a3d98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81d=C3=A1m=20Kov=C3=A1cs?= <43071496+adam-kov@users.noreply.github.com> Date: Mon, 3 Oct 2022 11:27:58 +0200 Subject: [PATCH] refactor(frontend): Tailwind refactor (#637) * feat(frontend): Tailwind config migration --- frontend/src/app.css | 229 ------------------ frontend/src/lib/components/AppConnect.svelte | 142 ++++++----- frontend/src/lib/components/ArgInput.svelte | 21 +- frontend/src/lib/components/Button.svelte | 37 ++- frontend/src/lib/components/CronInput.svelte | 2 +- frontend/src/lib/components/Dropdown.svelte | 12 +- frontend/src/lib/components/Editor.svelte | 4 - frontend/src/lib/components/EditorBar.svelte | 18 +- .../lib/components/FlowPreviewContent.svelte | 77 +++--- frontend/src/lib/components/FlowViewer.svelte | 24 +- frontend/src/lib/components/GroupModal.svelte | 12 +- .../lib/components/InputTransformForm.svelte | 4 +- .../components/InputTransformsViewer.svelte | 2 +- .../lib/components/InviteGlobalUser.svelte | 18 +- frontend/src/lib/components/InviteUser.svelte | 20 +- frontend/src/lib/components/Path.svelte | 2 +- .../src/lib/components/RadioButton.svelte | 5 +- .../src/lib/components/ResourceEditor.svelte | 57 ++--- .../lib/components/ResourceTypePicker.svelte | 56 ++--- frontend/src/lib/components/RunForm.svelte | 54 ++--- .../src/lib/components/SchemaEditor.svelte | 26 +- .../src/lib/components/SchemaModal.svelte | 25 +- .../src/lib/components/ScriptBuilder.svelte | 35 +-- .../src/lib/components/ScriptPicker.svelte | 31 ++- frontend/src/lib/components/ShareModal.svelte | 12 +- .../lib/components/StringTypeNarrowing.svelte | 56 ++--- frontend/src/lib/components/Tooltip.svelte | 2 +- .../src/lib/components/VariableEditor.svelte | 23 +- .../lib/components/common/badge/Badge.svelte | 10 +- .../src/lib/components/common/badge/model.ts | 2 +- .../components/common/button/Button.svelte | 12 +- .../flows/header/FlowImportExportMenu.svelte | 5 +- .../lib/components/icons/AirtableIcon.svelte | 2 +- .../lib/components/icons/DiscordIcon.svelte | 2 +- .../lib/components/icons/GCloudIcon.svelte | 2 +- .../lib/components/icons/GItlabIcon.svelte | 2 +- .../lib/components/icons/GSheetsIcon.svelte | 2 +- .../src/lib/components/icons/GcalIcon.svelte | 2 +- .../lib/components/icons/GdriveIcon.svelte | 2 +- .../lib/components/icons/GithubIcon.svelte | 2 +- .../src/lib/components/icons/GmailIcon.svelte | 2 +- .../lib/components/icons/MastodonIcon.svelte | 2 +- .../lib/components/icons/MatrixIcon.svelte | 2 +- .../lib/components/icons/PostgresIcon.svelte | 2 +- .../src/lib/components/icons/S3Icon.svelte | 2 +- .../src/lib/components/icons/Slack.svelte | 2 +- .../src/lib/components/icons/TogglIcon.svelte | 56 +---- .../propertyPicker/ObjectViewer.svelte | 18 +- frontend/src/routes/flows.svelte | 58 ++--- frontend/src/routes/groups.svelte | 11 +- frontend/src/routes/resources.svelte | 64 ++--- frontend/src/routes/run/[...run].svelte | 119 +++++---- frontend/src/routes/schedule/add.svelte | 12 +- frontend/src/routes/schedules.svelte | 7 +- frontend/src/routes/scripts.svelte | 55 +++-- .../src/routes/scripts/get/[...hash].svelte | 5 +- .../src/routes/user/accept_invite@user.svelte | 2 +- .../routes/user/create_workspace@user.svelte | 15 +- frontend/src/routes/user/login@user.svelte | 68 +++--- frontend/src/routes/user/settings@user.svelte | 26 +- .../src/routes/user/workspaces@user.svelte | 9 +- frontend/src/routes/variables.svelte | 12 +- frontend/src/routes/workspace_settings.svelte | 40 +-- frontend/tailwind.config.cjs | 206 +++++++++++++++- 64 files changed, 907 insertions(+), 939 deletions(-) diff --git a/frontend/src/app.css b/frontend/src/app.css index a0bb14980c..1a7b7cf38b 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -2,232 +2,3 @@ @tailwind base; @tailwind components; @tailwind utilities; - -html { - overflow-y: auto; -} - -@layer base { - h1 { - @apply text-2xl; - @apply sm:pb-4 font-semibold; - } - - h2 { - @apply text-xl; - @apply text-gray-700; - } - - a { - @apply text-blue-500; - } - - .flex pre code.hljs { - @apply text-sm; - } - - #table-custom th { - @apply py-3.5 text-left text-sm font-semibold text-gray-900 capitalize; - } - - #table-custom td { - @apply py-4 text-sm text-gray-700; - } - - #table-custom tbody { - @apply divide-y divide-gray-200; - } - - .dropdown { - @apply rounded-sm; - } - - input[type='text'], - textarea, - select { - @apply text-sm; - } - - .text-2xs { - font-size: 0.7rem; - } - - .commit-hash { - @apply text-2xs; - @apply text-gray-500; - @apply bg-gray-200; - @apply font-mono; - } - - .item-button { - @apply cursor-pointer; - @apply py-1; - @apply border border-gray-300; - @apply rounded-sm; - } - .item-button:hover { - @apply border border-gray-800 bg-gray-100 border-opacity-50; - } - .item-button-selected { - @apply py-1; - @apply border border-blue-500; - @apply bg-blue-50; - @apply rounded-sm; - } - - .blue-button { - @apply bg-blue-500 !important; - @apply hover:bg-blue-700 !important; - } - - .default-button { - /*this styling does not impact the Dropdown component */ - @apply bg-blue-500; - @apply hover:bg-blue-700; - @apply text-white; - @apply font-bold; - @apply py-1 px-2; - @apply border rounded; - @apply w-min; - @apply min-w-max; - @apply text-sm; - } - - .default-button-disabled { - /*this styling does not impact the Dropdown component */ - @apply bg-gray-100; - @apply text-gray-300; - @apply font-bold; - @apply py-1 px-2; - @apply border rounded; - @apply w-min; - @apply min-w-max; - @apply text-sm; - } - - .default-input { - @apply block; - @apply w-full; - @apply py-1; - @apply px-2; - @apply mt-1; - @apply rounded-md; - @apply border; - @apply border-gray-300; - @apply shadow-sm; - @apply text-sm; - } - - .default-primary-button-v2 { - @apply text-white; - @apply bg-blue-500; - @apply border; - @apply border-blue-200; - @apply font-medium; - @apply rounded-lg; - @apply text-sm; - @apply px-5; - @apply py-2.5; - @apply text-center; - @apply inline-flex; - @apply items-center; - } - - .default-primary-button-v2:focus { - @apply ring-4; - @apply outline-none; - @apply bg-blue-800; - } - .default-primary-button-v2:hover { - @apply bg-blue-800; - } - - .default-secondary-button-v2 { - @apply text-gray-900; - @apply bg-white; - @apply border; - @apply border-gray-200; - @apply font-medium; - @apply rounded-lg; - @apply text-sm; - @apply px-5; - @apply py-2.5; - @apply text-center; - @apply inline-flex; - @apply items-center; - } - - .default-secondary-button-v2:focus { - @apply ring-4; - @apply outline-none; - @apply ring-gray-100; - } - .default-secondary-button-v2:hover { - @apply bg-gray-100; - } - - .input-error { - @apply border-red-500 !important; - } - - input[disabled], - input:disabled, - textarea[disabled], - textarea:disabled { - @apply bg-gray-100 !important; - } - - button:disabled, - button[disabled], - a.disabled { - /*this styling does not impact the Dropdown component */ - @apply bg-gray-100 !important; - @apply text-gray-500 !important; - @apply border-none !important; - cursor: not-allowed !important; - pointer-events: none !important; - } - - button:disabled svg, - button[disabled] svg, - a.disabled svg { - /*this styling does not impact the Dropdown component */ - @apply text-gray-500 !important; - } - - .default-button-secondary { - @apply items-center py-1 px-2; - @apply rounded bg-transparent text-blue-500 border border-blue-500 font-normal; - @apply hover:bg-transparent hover:border-blue-700 hover:text-blue-700; - @apply border rounded; - @apply w-min; - @apply min-w-max; - @apply text-sm; - } - - input, - input[type='date'], - input[type='text'], - input[type='number'], - input[type='datetime-local'], - select, - textarea, - textarea[type='text'] { - @apply block; - @apply w-full py-1 px-2; - @apply border rounded-md border-gray-300; - @apply shadow-sm; - @apply focus:ring focus:ring-indigo-100 focus:ring-opacity-50; - @apply text-sm; - } -} - -.inline-highlight pre code.hljs { - padding: 0; - @apply text-xs whitespace-pre-wrap; -} - -/* svelte-split-pane separator class override */ -.separator { - background-color: #ddd !important; -} diff --git a/frontend/src/lib/components/AppConnect.svelte b/frontend/src/lib/components/AppConnect.svelte index d6cb204b83..e3a1f29a2f 100644 --- a/frontend/src/lib/components/AppConnect.svelte +++ b/frontend/src/lib/components/AppConnect.svelte @@ -31,6 +31,7 @@ import Modal from './Modal.svelte' import Password from './Password.svelte' import Path from './Path.svelte' + import { Button } from './common' let manual = false let value: string = '' @@ -178,6 +179,10 @@ resource_type == 'gcal' || resource_type == 'gdrive' || resource_type == 'gsheets') + $: disabled = + (step == 1 && resource_type == '') || + (step == 2 && value == '') || + (step == 3 && pathError != '')
{#each Object.entries(connects).sort((a, b) => a[0].localeCompare(b[0])) as [key, values]} - + {/each}
- + {#if !manual && resource_type != ''} {#each scopes as v} -
+
- + +
{/each} - {(scopes ?? []).length} item{(scopes ?? []).length > 1 ? 's' : ''} +
+ + + ({(scopes ?? []).length} item{(scopes ?? []).length > 1 ? 's' : ''}) + +
{:else}

Pick an OAuth API and customize the scopes here

{/if} {#if !manual && resource_type != ''} {#each extra_params as [k, v]} -
- +
+ - + +
{/each} - {(extra_params ?? []).length} item{(extra_params ?? []).length > 1 ? 's' : ''} +
+ + + ({(extra_params ?? []).length} item{(extra_params ?? []).length > 1 ? 's' : ''}) + +
{:else}

Pick an OAuth API and customize the extra parameters here

{/if}
{#each connectsManual as [key, instructions]} - + {/each}
{:else if step == 2} @@ -332,32 +368,24 @@ {/if}
-
+
{#if step > 1 && !no_back} - + + {/if} + {#if isGoogleSignin} + + {:else} + {/if} -
- - diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte index 48ec76edfd..673f8d4908 100644 --- a/frontend/src/lib/components/ArgInput.svelte +++ b/frontend/src/lib/components/ArgInput.svelte @@ -4,6 +4,7 @@ import { faChevronDown, faChevronUp, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons' import { setInputCat as computeInputCat, type InputCat } from '$lib/utils' + import { Button } from './common' import { createEventDispatcher } from 'svelte' import Icon from 'svelte-awesome' import FieldHeader from './FieldHeader.svelte' @@ -229,8 +230,11 @@ {:else} {/if} - + +
{/each}
- + {(value ?? []).length} item{(value ?? []).length > 1 ? 's' : ''} diff --git a/frontend/src/lib/components/Button.svelte b/frontend/src/lib/components/Button.svelte index 22abea48e2..8b511cb8d5 100644 --- a/frontend/src/lib/components/Button.svelte +++ b/frontend/src/lib/components/Button.svelte @@ -7,19 +7,28 @@ faShare, faTrash } from '@fortawesome/free-solid-svg-icons' - import { createEventDispatcher } from 'svelte' import Icon from 'svelte-awesome' export let category: 'delete' | 'list' | 'run' | 'add' | 'edit' | 'archive' | 'share' export let disabled: boolean = false - const dispatch = createEventDispatcher() + + const colors = { + red: 'bg-transparent hover:bg-red-600 text-red-600 font-normal hover:text-white border-red-600 hover:border-transparent rounded', + blue: 'hover:bg-blue-500 hover:text-white' + } + + const getCategoryClasses = () => { + if (category === 'delete' || category === 'archive') return colors.red + else if (category === 'edit' || category === 'list' || category === 'share') return colors.blue + return '' + } - - diff --git a/frontend/src/lib/components/CronInput.svelte b/frontend/src/lib/components/CronInput.svelte index 6ce1e8976d..39599bc4ee 100644 --- a/frontend/src/lib/components/CronInput.svelte +++ b/frontend/src/lib/components/CronInput.svelte @@ -35,7 +35,7 @@ } -
{cronError}
+
{cronError}
- +
- Format (CtrlCmd + S) - --> -
diff --git a/frontend/src/lib/components/RunForm.svelte b/frontend/src/lib/components/RunForm.svelte index e5d44a3ff8..18fb46b5cf 100644 --- a/frontend/src/lib/components/RunForm.svelte +++ b/frontend/src/lib/components/RunForm.svelte @@ -10,6 +10,7 @@ import SchemaForm from './SchemaForm.svelte' import Tooltip from './Tooltip.svelte' import type { Schema } from '$lib/common' + import { Button } from './common' export let runnable: { summary?: string; schema?: Schema; description?: string } | undefined export let runAction: (scheduledForStr: string | undefined, args: Record) => void @@ -37,7 +38,7 @@ let scheduledForStr: string | undefined -
+
{#if detailed}
@@ -91,55 +92,46 @@ min={getToday().toISOString().slice(0, 16)} />
- +
{/if} {#if schedulable}
- - +
{:else} - + {/if}
diff --git a/frontend/src/lib/components/SchemaEditor.svelte b/frontend/src/lib/components/SchemaEditor.svelte index 2492b74740..e66a635907 100644 --- a/frontend/src/lib/components/SchemaEditor.svelte +++ b/frontend/src/lib/components/SchemaEditor.svelte @@ -2,9 +2,8 @@ import type { Schema, SchemaProperty } from '$lib/common' import { emptySchema, sendUserToast } from '$lib/utils' import { faPen, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons' - import { Button } from 'flowbite-svelte' + import { Button } from './common' import { createEventDispatcher } from 'svelte' - import Icon from 'svelte-awesome' import SchemaEditorProperty from './SchemaEditorProperty.svelte' import type { ModalSchemaProperty } from './SchemaModal.svelte' import SchemaModal, { DEFAULT_PROPERTY, schemaToModal } from './SchemaModal.svelte' @@ -142,13 +141,15 @@
@@ -199,16 +200,21 @@ - diff --git a/frontend/src/lib/components/SchemaModal.svelte b/frontend/src/lib/components/SchemaModal.svelte index 30309d2e7e..5fdc4fdfc4 100644 --- a/frontend/src/lib/components/SchemaModal.svelte +++ b/frontend/src/lib/components/SchemaModal.svelte @@ -50,6 +50,7 @@ import StringTypeNarrowing from './StringTypeNarrowing.svelte' import Required from './Required.svelte' import ObjectTypeNarrowing from './ObjectTypeNarrowing.svelte' + import { Button } from './common' export let property: ModalSchemaProperty = DEFAULT_PROPERTY export let error = '' @@ -111,7 +112,7 @@ : 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'} /> -
{error}
+
{error}
diff --git a/frontend/src/lib/components/ScriptPicker.svelte b/frontend/src/lib/components/ScriptPicker.svelte index bd4aa764b1..ebe05f68d5 100644 --- a/frontend/src/lib/components/ScriptPicker.svelte +++ b/frontend/src/lib/components/ScriptPicker.svelte @@ -13,6 +13,7 @@ import { getScriptByPath } from '$lib/utils' import RadioButton from './RadioButton.svelte' + import { Button } from './common' export let scriptPath: string | undefined = undefined export let allowFlow = false @@ -62,27 +63,37 @@ }} /> -
-
+
+
{#if options.length > 1} {/if}
- - - {#if scriptPath != undefined && scriptPath != ''} - +
+ {#if scriptPath !== undefined && scriptPath !== ''} + + Show code + {/if}
diff --git a/frontend/src/lib/components/ShareModal.svelte b/frontend/src/lib/components/ShareModal.svelte index 60fc0d8c04..4f1f97c702 100644 --- a/frontend/src/lib/components/ShareModal.svelte +++ b/frontend/src/lib/components/ShareModal.svelte @@ -8,6 +8,7 @@ import { createEventDispatcher } from 'svelte' import AutoComplete from 'simple-svelte-autocomplete' import { workspaceStore } from '$lib/stores' + import { Button } from './common' const dispatch = createEventDispatcher() @@ -116,10 +117,9 @@ Editor - +
@@ -133,8 +133,8 @@ {owner} {write} diff --git a/frontend/src/lib/components/StringTypeNarrowing.svelte b/frontend/src/lib/components/StringTypeNarrowing.svelte index ef77b75294..74df9fef38 100644 --- a/frontend/src/lib/components/StringTypeNarrowing.svelte +++ b/frontend/src/lib/components/StringTypeNarrowing.svelte @@ -1,6 +1,7 @@ - clear
{:else if kind == 'enum'} -
- + {edit ? 'Save' : 'Add a variable'} + diff --git a/frontend/src/lib/components/common/badge/Badge.svelte b/frontend/src/lib/components/common/badge/Badge.svelte index 3f380cb163..2d45a7450b 100644 --- a/frontend/src/lib/components/common/badge/Badge.svelte +++ b/frontend/src/lib/components/common/badge/Badge.svelte @@ -27,16 +27,12 @@ green: 'bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900', yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900', indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900', - purple: 'bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-900', - pink: 'bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-900', ['dark-gray']: 'bg-gray-500 text-gray-100', ['dark-blue']: 'bg-blue-500 text-blue-100', ['dark-red']: 'bg-red-500 text-white', ['dark-green']: 'bg-green-500 text-green-100', ['dark-yellow']: 'bg-yellow-300 text-yellow-800', - ['dark-indigo']: 'bg-indigo-500 text-indigo-100', - ['dark-purple']: 'bg-purple-500 text-purple-100', - ['dark-pink']: 'bg-pink-500 text-pink-100' + ['dark-indigo']: 'bg-indigo-500 text-indigo-100' } const hovers: Partial> = { gray: 'hover:bg-gray-200 dark:hover:bg-gray-300', @@ -44,9 +40,7 @@ red: 'hover:bg-red-200 dark:hover:bg-red-300', green: 'hover:bg-green-200 dark:hover:bg-green-300', yellow: 'hover:bg-yellow-200 dark:hover:bg-yellow-300', - indigo: 'hover:bg-indigo-200 dark:hover:bg-indigo-300', - purple: 'hover:bg-purple-200 dark:hover:bg-purple-300', - pink: 'hover:bg-pink-200 dark:hover:bg-pink-300' + indigo: 'hover:bg-indigo-200 dark:hover:bg-indigo-300' } $: badgeClass = classNames( diff --git a/frontend/src/lib/components/common/badge/model.ts b/frontend/src/lib/components/common/badge/model.ts index 8da75b055b..1b52d2feb3 100644 --- a/frontend/src/lib/components/common/badge/model.ts +++ b/frontend/src/lib/components/common/badge/model.ts @@ -1,6 +1,6 @@ import type { IconProps } from 'svelte-awesome/components/Icon.svelte' -type BaseColor = 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' | 'pink' +type BaseColor = 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'indigo' export const ColorModifier = 'dark-' export type BadgeColor = BaseColor | `${typeof ColorModifier}${BaseColor}` diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte index 051effa00b..cb9b30ce46 100644 --- a/frontend/src/lib/components/common/button/Button.svelte +++ b/frontend/src/lib/components/common/button/Button.svelte @@ -26,8 +26,8 @@ }, red: { border: - 'border-red-500 hover:border-red-700 bg-white hover:bg-red-100 text-red-500 hover:text-red-700 focus:ring-red-300', - contained: 'bg-red-500 hover:bg-red-700 text-white focus:ring-red-300' + 'border-red-600 hover:border-red-700 bg-white hover:bg-red-100 text-red-600 hover:text-red-700 focus:ring-red-300', + contained: 'bg-red-600 hover:bg-red-700 text-white focus:ring-red-300' }, dark: { border: @@ -57,7 +57,7 @@ xl: 'px-4 py-2' } const iconScale: Record = { - xs: 0.7, + xs: 0.6, sm: 0.8, md: 1, lg: 1.1, @@ -78,6 +78,10 @@ ), disabled } + + $: isSmall = size === 'xs' || size === 'sm' + $: startIconClass = classNames(isSmall ? 'mr-1' : 'mr-2', startIcon?.classes) + $: endIconClass = classNames(isSmall ? 'ml-1' : 'ml-2', endIcon?.classes) {#if href} @@ -107,7 +111,7 @@ {/if} {:else} - + diff --git a/frontend/src/lib/components/icons/AirtableIcon.svelte b/frontend/src/lib/components/icons/AirtableIcon.svelte index 0b99330aeb..ea803bd87d 100644 --- a/frontend/src/lib/components/icons/AirtableIcon.svelte +++ b/frontend/src/lib/components/icons/AirtableIcon.svelte @@ -10,7 +10,7 @@ {width} {height} viewBox="0 0 50 50" - style=" fill:#000000;" + style="fill:currentcolor;" > + + + + diff --git a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte index e0dc340e3a..f2933f9e10 100644 --- a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte +++ b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte @@ -41,17 +41,13 @@ {#if keys.length > 0} - {#if level != 0} - (-) - + {#if level != 0} + (-) {/if}
    {#each keys as key, index}
  • - @@ -66,7 +62,7 @@ /> {:else}
- + {openBracket}{collapsedSymbol}{closeBracket} {#if !isLast && collapsed} @@ -111,12 +107,12 @@ @apply text-red-500; } .val.string { - @apply text-lime-600; + @apply text-green-600; } .val.number { @apply text-orange-600; } .val.boolean { - @apply text-cyan-600; + @apply text-blue-600; } diff --git a/frontend/src/routes/flows.svelte b/frontend/src/routes/flows.svelte index 9a15b1e0da..9dad38d56d 100644 --- a/frontend/src/routes/flows.svelte +++ b/frontend/src/routes/flows.svelte @@ -36,6 +36,7 @@ import TableCustom from '$lib/components/TableCustom.svelte' import Modal from '$lib/components/Modal.svelte' import FlowViewer from '$lib/components/FlowViewer.svelte' + import { Button } from '../lib/components/common' type Tab = 'all' | 'personal' | 'groups' | 'shared' | 'hub' type Section = [string, FlowW[]] @@ -160,9 +161,7 @@
-   New flow +
@@ -259,7 +258,9 @@
{#each flows as { summary, path, extra_perms, canWrite }}
@@ -327,40 +328,37 @@
{#if canWrite} {:else}
- -
- - Fork -
- + Fork +
{/if}
- -
- - Run -
- + Run +
@@ -381,13 +379,3 @@ loadFlows() }} /> - - diff --git a/frontend/src/routes/groups.svelte b/frontend/src/routes/groups.svelte index 1766df258f..677d7c914b 100644 --- a/frontend/src/routes/groups.svelte +++ b/frontend/src/routes/groups.svelte @@ -22,6 +22,7 @@ import { faEdit, faPlus, faShare } from '@fortawesome/free-solid-svg-icons' import { Alert } from 'flowbite-svelte' import Icon from 'svelte-awesome' + import { Button } from '$lib/components/common' type GroupW = Group & { canWrite: boolean } @@ -74,14 +75,12 @@ - +
diff --git a/frontend/src/routes/resources.svelte b/frontend/src/routes/resources.svelte index 76850d7c37..604f1e19fe 100644 --- a/frontend/src/routes/resources.svelte +++ b/frontend/src/routes/resources.svelte @@ -12,7 +12,6 @@ import type { Resource, ResourceType } from '$lib/gen' import PageHeader from '$lib/components/PageHeader.svelte' import ResourceEditor from '$lib/components/ResourceEditor.svelte' - import Button from '$lib/components/Button.svelte' import TableCustom from '$lib/components/TableCustom.svelte' import Modal from '$lib/components/Modal.svelte' import Highlight from 'svelte-highlight' @@ -39,8 +38,8 @@ import Required from '$lib/components/Required.svelte' import AppConnect from '$lib/components/AppConnect.svelte' import { page } from '$app/stores' - import { onMount } from 'svelte' + import { Button } from '$lib/components/common' import ConfirmationModal from '$lib/components/common/confirmationModal/ConfirmationModal.svelte' import Alert from '$lib/components/common/alert/Alert.svelte' import Badge from '$lib/components/common/badge/Badge.svelte' @@ -125,6 +124,15 @@ } } + const startNewType = () => { + resourceViewerTitle = `Create resource type` + newResourceTypeName = 'my_resource_type' + newResourceTypeSchema = emptySchema() + newResourceTypeDescription = 'my description' + typeModalMode = 'create' + resourceViewer.openModal() + } + $: { if ($workspaceStore && $userStore) { loadResources() @@ -146,18 +154,12 @@
- - + +
@@ -253,18 +255,7 @@
- + @@ -292,13 +283,14 @@ {#if canWrite} {/if} @@ -343,8 +335,6 @@ >

Description

- -

Schema

{:else if typeModalMode === 'view'} @@ -355,9 +345,7 @@
{#if typeModalMode === 'create'} - + {/if}
diff --git a/frontend/src/routes/run/[...run].svelte b/frontend/src/routes/run/[...run].svelte index c78f39ca91..ac27fde12f 100644 --- a/frontend/src/routes/run/[...run].svelte +++ b/frontend/src/routes/run/[...run].svelte @@ -48,6 +48,7 @@ import HighlightCode from '$lib/components/HighlightCode.svelte' import TestJobLoader from '$lib/components/TestJobLoader.svelte' import LogViewer from '$lib/components/LogViewer.svelte' + import { Button } from '$lib/components/common' let workspace_id_query: string | undefined = $page.url.searchParams.get('workspace') ?? undefined let workspace_id: string | undefined @@ -108,7 +109,7 @@ /> -
+

{#if job} @@ -172,87 +173,119 @@ {/if}

-
+
{#if job && 'deleted' in job && !job?.deleted && ($userStore?.is_admin ?? false)} - + Delete + {/if} {#if job && 'running' in job && job.running} - + Cancel + {/if} {#if job?.job_kind == 'script'} {#if canWrite(job?.script_path ?? '', {}, $userStore)} - Edit + Edit + {/if} - View script - View runs + {:else if job?.job_kind == 'flow'} {#if canWrite(job?.script_path ?? '', {}, $userStore)} - Edit + Edit + {/if} - View flow - + {/if}
diff --git a/frontend/src/routes/schedule/add.svelte b/frontend/src/routes/schedule/add.svelte index 87bb5616c6..df488112d9 100644 --- a/frontend/src/routes/schedule/add.svelte +++ b/frontend/src/routes/schedule/add.svelte @@ -10,10 +10,9 @@ import { page } from '$app/stores' import { sendUserToast, formatCron } from '$lib/utils' import { ScriptService, Script, ScheduleService, type Flow, FlowService } from '$lib/gen' - import PageHeader from '$lib/components/PageHeader.svelte' import Path from '$lib/components/Path.svelte' - + import { Button } from '$lib/components/common' import Tooltip from '$lib/components/Tooltip.svelte' import { goto } from '$app/navigation' import { workspaceStore } from '$lib/stores' @@ -167,14 +166,9 @@
- +
diff --git a/frontend/src/routes/schedules.svelte b/frontend/src/routes/schedules.svelte index 745977257a..43930cd7c6 100644 --- a/frontend/src/routes/schedules.svelte +++ b/frontend/src/routes/schedules.svelte @@ -28,6 +28,7 @@ import CenteredPage from '$lib/components/CenteredPage.svelte' import Icon from 'svelte-awesome' import Toggle from '$lib/components/Toggle.svelte' + import { Button } from '$lib/components/common' type ScheduleW = Schedule & { canWrite: boolean } @@ -62,10 +63,8 @@ - - + +
diff --git a/frontend/src/routes/scripts.svelte b/frontend/src/routes/scripts.svelte index 9d1caefdce..7ceffc2634 100644 --- a/frontend/src/routes/scripts.svelte +++ b/frontend/src/routes/scripts.svelte @@ -43,6 +43,7 @@ import TableCustom from '$lib/components/TableCustom.svelte' import { Highlight } from 'svelte-highlight' import { typescript } from 'svelte-highlight/languages/typescript' + import { Button } from '$lib/components/common' type Tab = 'all' | 'personal' | 'groups' | 'shared' | 'examples' | 'hub' type Section = [string, ScriptW[]] @@ -186,17 +187,18 @@ granted visibility on the resources and variables it uses, otherwise it will behave as if those items did not exist at runtime of the script." > -
- -   New script + New script from template + +
@@ -392,39 +394,36 @@
{#if canWrite}
- -
- - Edit -
- + Edit +
{:else}
- -
- - Fork -
- + Fork +
{/if}
- -
- - Run -
- + Run +
diff --git a/frontend/src/routes/scripts/get/[...hash].svelte b/frontend/src/routes/scripts/get/[...hash].svelte index dc1352a74d..f0c68f04ab 100644 --- a/frontend/src/routes/scripts/get/[...hash].svelte +++ b/frontend/src/routes/scripts/get/[...hash].svelte @@ -31,7 +31,6 @@ faCodeFork, faClipboard } from '@fortawesome/free-solid-svg-icons' - import Tooltip from '$lib/components/Tooltip.svelte' import ShareModal from '$lib/components/ShareModal.svelte' import { userStore, workspaceStore } from '$lib/stores' @@ -322,7 +321,7 @@

Webhooks

-
+
UUID Result @@ -364,7 +363,7 @@

Versions

-
+

Current

{script?.hash} diff --git a/frontend/src/routes/user/accept_invite@user.svelte b/frontend/src/routes/user/accept_invite@user.svelte index 357ce58439..f8a6926cd1 100644 --- a/frontend/src/routes/user/accept_invite@user.svelte +++ b/frontend/src/routes/user/accept_invite@user.svelte @@ -64,7 +64,7 @@ diff --git a/frontend/src/routes/user/create_workspace@user.svelte b/frontend/src/routes/user/create_workspace@user.svelte index 5af32b2fb3..b94bb30421 100644 --- a/frontend/src/routes/user/create_workspace@user.svelte +++ b/frontend/src/routes/user/create_workspace@user.svelte @@ -1,13 +1,12 @@