diff --git a/frontend/src/lib/components/CenteredPage.svelte b/frontend/src/lib/components/CenteredPage.svelte index 14ab3a3c2a..e1e82fbff7 100644 --- a/frontend/src/lib/components/CenteredPage.svelte +++ b/frontend/src/lib/components/CenteredPage.svelte @@ -1,4 +1,4 @@ -
+
diff --git a/frontend/src/lib/components/EditorBar.svelte b/frontend/src/lib/components/EditorBar.svelte index 26e1036012..bf9a280ca3 100644 --- a/frontend/src/lib/components/EditorBar.svelte +++ b/frontend/src/lib/components/EditorBar.svelte @@ -7,7 +7,6 @@ import { getScriptByPath, sendUserToast } from '$lib/utils' import { - faBuilding, faCube, faDollarSign, faEye, @@ -82,12 +81,12 @@ {#if pick_existing == 'hub'} - + + {:else} - + + + {/if} diff --git a/frontend/src/lib/components/common/drawer/DrawerContent.svelte b/frontend/src/lib/components/common/drawer/DrawerContent.svelte index d35107a8ae..55befd9459 100644 --- a/frontend/src/lib/components/common/drawer/DrawerContent.svelte +++ b/frontend/src/lib/components/common/drawer/DrawerContent.svelte @@ -1,39 +1,41 @@
-
- - {title} -
- {#if $$slots.submission} - - {/if} +
+
+
+ +
+
+ {#if $$slots.submission} + + {/if} +
Use pre-made {kind == 'script' ? 'common' : kind} script {#if pick_existing == 'hub'} - + + + {:else} - + + + {/if}
diff --git a/frontend/src/lib/components/flows/pickers/PickHubScript.svelte b/frontend/src/lib/components/flows/pickers/PickHubScript.svelte index 79676d5bde..326cb590a4 100644 --- a/frontend/src/lib/components/flows/pickers/PickHubScript.svelte +++ b/frontend/src/lib/components/flows/pickers/PickHubScript.svelte @@ -2,25 +2,25 @@ import { hubScripts } from '$lib/stores' import { createEventDispatcher, onMount } from 'svelte' import type { HubItem } from './model' - import IconedResourceType from '$lib/components/IconedResourceType.svelte' import { Badge, Skeleton } from '$lib/components/common' import SearchItems from '$lib/components/SearchItems.svelte' - import { loadHubScripts } from '$lib/utils' + import { capitalize, classNames, loadHubScripts } from '$lib/utils' + import NoItemFound from '$lib/components/home/NoItemFound.svelte' + import { APP_TO_ICON_COMPONENT } from '$lib/components/icons' + import ListFilters from '$lib/components/home/ListFilters.svelte' export let kind: 'script' | 'trigger' | 'approval' | 'failure' = 'script' export let filter = '' - $: items = ($hubScripts ?? []).filter((i) => i.kind === kind) + const dispatch = createEventDispatcher() let filteredItems: (HubItem & { marked?: string })[] = [] let appFilter: string | undefined = undefined + $: items = ($hubScripts ?? []).filter((i) => i.kind === kind) $: prefilteredItems = appFilter ? (items ?? []).filter((i) => i.app == appFilter) : items ?? [] - $: apps = Array.from(new Set(filteredItems?.map((x) => x.app) ?? [])).sort() - const dispatch = createEventDispatcher() - onMount(() => { if (!$hubScripts) { loadHubScripts() @@ -29,60 +29,60 @@ x.summary} /> - -
-
- - -
- -
- {#each apps as app} - { - appFilter = appFilter == app ? undefined : app - }} - capitalize - color={app === appFilter ? 'blue' : 'gray'} - > - {app} - {#if app === appFilter}✗{/if} - - {/each} -
-
-
    - {#if $hubScripts} - {#if filter.length > 0 && filteredItems.length == 0} -

    No items found

    - {/if} - {#each filteredItems as obj} -
  • - -
    • - {/each} - {:else} - {#each Array(10).fill(0) as sk} - - {/each} - {/if} -
-
+
+ +
+ + +{#if $hubScripts} + {#if filteredItems.length == 0} + + {:else} +
    + {#each filteredItems as item (item.path)} +
  • + +
    • + {/each} +
+ {/if} +{:else} + {#each Array(10).fill(0) as _} + + {/each} +{/if} diff --git a/frontend/src/lib/components/home/ItemsList.svelte b/frontend/src/lib/components/home/ItemsList.svelte index dee2e8d76c..2dbd9a154f 100644 --- a/frontend/src/lib/components/home/ItemsList.svelte +++ b/frontend/src/lib/components/home/ItemsList.svelte @@ -3,8 +3,6 @@ import { AppService, FlowService, - Job, - JobService, ListableApp, Script, ScriptService, @@ -13,22 +11,10 @@ } from '$lib/gen' import { superadmin, userStore, workspaceStore } from '$lib/stores' import VirtualList from '@sveltejs/svelte-virtual-list' - import { - Button, - Drawer, - DrawerContent, - Skeleton, - ToggleButton, - ToggleButtonGroup - } from '$lib/components/common' + import { Drawer, Skeleton, ToggleButton, ToggleButtonGroup } from '$lib/components/common' import { canWrite, classNames, pluralize } from '$lib/utils' import type { HubItem } from '$lib/components/flows/pickers/model' import ShareModal from '$lib/components/ShareModal.svelte' - import { faCodeFork, faGlobe } from '@fortawesome/free-solid-svg-icons' - import FlowViewer from '$lib/components/FlowViewer.svelte' - import HighlightCode from '$lib/components/HighlightCode.svelte' - import SearchItems from '$lib/components/SearchItems.svelte' - import Badge from '$lib/components/common/badge/Badge.svelte' import type uFuzzy from '@leeoniya/ufuzzy' import { Code2, LayoutDashboard, Wind } from 'svelte-lucide' @@ -36,10 +22,9 @@ import FlowRow from '$lib/components/common/table/FlowRow.svelte' import AppRow from '$lib/components/common/table/AppRow.svelte' - import { fade } from 'svelte/transition' - import { flip } from 'svelte/animate' - - let jobs: Job[] = [] + import NoItemFound from './NoItemFound.svelte' + import ListFilters from './ListFilters.svelte' + import SearchItems from '../SearchItems.svelte' type TableItem = T & { canWrite: boolean @@ -66,13 +51,6 @@ let shareModalFlows: ShareModal let loading = true - let flowViewer: Drawer - let flowViewerFlow: { flow?: OpenFlow & { id?: number } } | undefined - - let codeViewer: Drawer - let codeViewerContent: string = '' - let codeViewerLanguage: 'deno' | 'python3' | 'go' | 'bash' = 'deno' - let codeViewerObj: HubItem | undefined = undefined async function loadScripts(): Promise { const loadedScripts = await ScriptService.listScripts({ @@ -152,24 +130,14 @@ let ownerFilter: string | undefined = undefined - async function loadJobs() { - jobs = await JobService.listJobs({ - workspace: $workspaceStore!, - success: true, - createdBy: $userStore?.username, - jobKinds: 'flow,script' - }) - loading = false - } - $: { if (($userStore || $superadmin) && $workspaceStore) { loadScripts() loadFlows() loadApps() - loadJobs() } } + const cmp = new Intl.Collator('en').compare const opts: uFuzzy.Options = { @@ -258,50 +226,6 @@ }} /> - - -
- - -
- - - - - - - -
- - -
- - {#if flowViewerFlow?.flow} - - {/if} - - -
@@ -358,25 +282,8 @@
- {#if owners.length > 0} -
- {#each owners as owner (owner)} -
- { - ownerFilter = ownerFilter == owner ? undefined : owner - }} - color={owner === ownerFilter ? 'blue' : 'gray'} - baseClass={owner === ownerFilter ? 'border border-blue-500' : 'border'} - > - {owner} - {#if owner === ownerFilter}✗{/if} - -
- {/each} -
- {/if} + +
{#if filteredItems == undefined}
@@ -385,12 +292,7 @@ {/each} {:else if filteredItems.length === 0} -
-
-
No items found
-
Try changing your search or filters
-
-
+ {:else}
+ import { classNames } from '$lib/utils' + import { flip } from 'svelte/animate' + import { fade } from 'svelte/transition' + import { Badge } from '../common' + + export let filters: string[] + export let selectedFilter: string | undefined = undefined + + +{#if Array.isArray(filters) && filters.length > 0} +
+ {#each filters as filter (filter)} +
+ { + selectedFilter = selectedFilter == filter ? undefined : filter + }} + color={filter === selectedFilter ? 'blue' : 'gray'} + baseClass={filter === selectedFilter ? 'border border-blue-500' : 'border'} + > + {filter} + {#if filter === selectedFilter}✗{/if} + +
+ {/each} +
+{/if} diff --git a/frontend/src/lib/components/home/NoItemFound.svelte b/frontend/src/lib/components/home/NoItemFound.svelte new file mode 100644 index 0000000000..cbd075d1a8 --- /dev/null +++ b/frontend/src/lib/components/home/NoItemFound.svelte @@ -0,0 +1,6 @@ +
+
+
No items found
+
Try changing your search or filters
+
+
diff --git a/frontend/src/lib/components/icons/QRCodeIcon.svelte b/frontend/src/lib/components/icons/QRCodeIcon.svelte new file mode 100644 index 0000000000..1bfe1adc70 --- /dev/null +++ b/frontend/src/lib/components/icons/QRCodeIcon.svelte @@ -0,0 +1,8 @@ + + + diff --git a/frontend/src/lib/components/icons/SendflakeIcon.svelte b/frontend/src/lib/components/icons/SendflakeIcon.svelte new file mode 100644 index 0000000000..cf37c27ef6 --- /dev/null +++ b/frontend/src/lib/components/icons/SendflakeIcon.svelte @@ -0,0 +1,16 @@ + + + + + diff --git a/frontend/src/lib/components/icons/index.ts b/frontend/src/lib/components/icons/index.ts index 380f0d0b6b..f0e02a3f53 100644 --- a/frontend/src/lib/components/icons/index.ts +++ b/frontend/src/lib/components/icons/index.ts @@ -20,8 +20,10 @@ import TogglIcon from './TogglIcon.svelte' import WindmillIcon from './WindmillIcon.svelte' import MailchimpIcon from './MailchimpIcon.svelte' import SendgridIcon from './SendgridIcon.svelte' +import SendflakeIcon from './SendflakeIcon.svelte' +import QRCodeIcon from './QRCodeIcon.svelte' -export const APP_TO_ICON_COMPONENT = { +export const APP_TO_ICON_COMPONENT = { postgresql: PostgresIcon, mysql: Mysql, smtp: Mail, @@ -45,6 +47,8 @@ export const APP_TO_ICON_COMPONENT = { http: HttpIcon, mailchimp: MailchimpIcon, sendgrid: SendgridIcon, + snowflake: SendflakeIcon, + qrcode: QRCodeIcon } as const export { @@ -69,5 +73,5 @@ export { TogglIcon, WindmillIcon, MailchimpIcon, - SendgridIcon, -} \ No newline at end of file + SendgridIcon +} diff --git a/frontend/src/routes/index.svelte b/frontend/src/routes/index.svelte index 7aa66cb5eb..22785e7a3b 100644 --- a/frontend/src/routes/index.svelte +++ b/frontend/src/routes/index.svelte @@ -50,18 +50,24 @@ -
+
@@ -72,7 +78,7 @@ - +
-