windmill-components 1.22.42 → 1.28.3

package/components/FlowPreview.svelte

@@ -1,11 +1,11 @@
-<script>import { InputTransform, Job, JobService } from '../gen';
+<script>import { Job, JobService } from '../gen';
 import { workspaceStore } from '../stores';
 import { sendUserToast, truncateRev } from '../utils';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher, onDestroy } from 'svelte';
 import Icon from 'svelte-awesome';
 import FlowJobResult from './FlowJobResult.svelte';
-import { flowToMode } from './flows/utils';
+import { flowToMode, runFlowPreview } from './flows/utils';
 import FlowStatusViewer from './FlowStatusViewer.svelte';
 import RunForm from './RunForm.svelte';
 import Tabs from './Tabs.svelte';
@@ -19,23 +19,17 @@ let stepArgs = {};
 let tab = 'upto';
 let viewPreview = false;
 let intervalId;
-let uptoText = i == flow.value.modules.length - 1 ? 'Preview whole flow' : 'Preview up to this step';
+let uptoText = i >= flow.value.modules.length - 1 ? 'Preview whole flow' : 'Preview up to this step';
 let job;
 let jobs = [];
 let jobId;
+$: dispatch('change', jobs);
 export async function runPreview(args) {
     viewPreview = true;
     intervalId && clearInterval(intervalId);
     let newFlow = flowToMode(flow, mode);
     newFlow = tab == 'upto' ? truncateFlow(newFlow) : extractStep(newFlow);
-    jobId = await JobService.runFlowPreview({
-        workspace: $workspaceStore ?? '',
-        requestBody: {
-            args,
-            value: newFlow.value,
-            path: newFlow.path
-        }
-    });
+    jobId = await runFlowPreview(args, newFlow);
     jobs = [];
     intervalId = setInterval(loadJob, 1000);
     sendUserToast(`started preview ${truncateRev(jobId, 10)}`);
@@ -51,7 +45,7 @@ function extractStep(flow) {
     localFlow.schema = schemas[i];
     stepArgs = {};
     Object.entries(flow.value.modules[i].input_transform).forEach((x) => {
-        if (x[1].type == InputTransform.type.STATIC) {
+        if (x[1].type == 'static') {
             stepArgs[x[0]] = x[1].value;
         }
     });
@@ -64,7 +58,6 @@ async function loadJob() {
             //only CompletedJob has success property
             clearInterval(intervalId);
         }
-        dispatch('change', job);
     }
     catch (err) {
         sendUserToast(err, true);
@@ -75,21 +68,22 @@ onDestroy(() => {
 });
 </script>
 
-<h2 class="flex justify-center">
-	<button
-		class="default-button	"
-		on:click={() => {
-			viewPreview = !viewPreview
-		}}
-	>
+<button
+	class="w-full rounded border-1 border border-gray-200"
+	on:click={() => {
+		viewPreview = !viewPreview
+	}}
+>
+	<h2 class="flex justify-center text-gray-600">
 		<div>
-			Preview mode<Icon class="ml-1" data={viewPreview ? faChevronUp : faChevronDown} scale={1} />
+			Preview
+			<Icon class="ml-1" data={viewPreview ? faChevronUp : faChevronDown} scale={1} />
 		</div>
-	</button>
-</h2>
+	</h2>
+</button>
 
 {#if viewPreview}
-	{#if i != flow.value.modules.length - 1}
+	{#if i != flow.value.modules.length}
 		<Tabs
 			tabs={[
 				['upto', uptoText],

package/components/FlowPreviewContent.svelte

@@ -0,0 +1,68 @@
+<script>import { Job, JobService } from '../gen';
+import { workspaceStore } from '../stores';
+import { sendUserToast, truncateRev } from '../utils';
+import { faClose } from '@fortawesome/free-solid-svg-icons';
+import { Button } from 'flowbite-svelte';
+import { createEventDispatcher, onDestroy } from 'svelte';
+import Icon from 'svelte-awesome';
+import FlowJobResult from './FlowJobResult.svelte';
+import { flowStore } from './flows/flowStore';
+import { runFlowPreview } from './flows/utils';
+import FlowStatusViewer from './FlowStatusViewer.svelte';
+import SchemaForm from './SchemaForm.svelte';
+const dispatch = createEventDispatcher();
+export let args = {};
+let intervalId;
+let job;
+let jobs = [];
+let jobId;
+let isValid = false;
+$: dispatch('change', jobs);
+export async function runPreview(args) {
+    intervalId && clearInterval(intervalId);
+    jobId = await runFlowPreview(args, $flowStore);
+    jobs = [];
+    intervalId = setInterval(loadJob, 1000);
+    sendUserToast(`started preview ${truncateRev(jobId, 10)}`);
+}
+async function loadJob() {
+    try {
+        job = await JobService.getJob({ workspace: $workspaceStore, id: jobId });
+        if (job?.type == 'CompletedJob') {
+            clearInterval(intervalId);
+        }
+    }
+    catch (err) {
+        sendUserToast(err, true);
+    }
+}
+onDestroy(() => {
+    intervalId && clearInterval(intervalId);
+});
+</script>
+
+<div class="flex flex-col space-y-4 h-screen bg-white ">
+	<div class="flex flex-col space-y-4 p-6 border-b-2">
+		<div class="flex justify-between">
+			<h3 class="text-lg leading-6 font-bold text-gray-900">Flow Preview</h3>
+
+			<Button color="alternative" on:click={() => dispatch('close')}>
+				<Icon data={faClose} />
+			</Button>
+		</div>
+		<SchemaForm schema={$flowStore.schema} bind:isValid bind:args />
+		<Button disabled={!isValid} class="blue-button" on:click={() => runPreview(args)} size="md">
+			Preview
+		</Button>
+	</div>
+	<div class="h-full overflow-y-auto mb-16">
+		{#if job}
+			<div class="w-full">
+				<FlowStatusViewer {job} bind:jobs />
+			</div>
+			{#if `result` in job}
+				<FlowJobResult {job} />
+			{/if}
+		{/if}
+	</div>
+</div>

package/components/FlowPreviewContent.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        args?: Record<string, any> | undefined;
+        runPreview?: ((args: Record<string, any>) => Promise<void>) | undefined;
+    };
+    events: {
+        close: CustomEvent<any>;
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowPreviewContentProps = typeof __propDef.props;
+export declare type FlowPreviewContentEvents = typeof __propDef.events;
+export declare type FlowPreviewContentSlots = typeof __propDef.slots;
+export default class FlowPreviewContent extends SvelteComponentTyped<FlowPreviewContentProps, FlowPreviewContentEvents, FlowPreviewContentSlots> {
+    get runPreview(): (args: Record<string, any>) => Promise<void>;
+}
+export {};

package/components/FlowStatusViewer.svelte

@@ -1,32 +1,59 @@
-<script>import { faHourglassHalf, faSpinner, faTimes } from '@fortawesome/free-solid-svg-icons';
-import { scriptPathToHref, truncateRev } from '../utils';
+<script>import { scriptPathToHref, truncateRev } from '../utils';
+import { faHourglassHalf, faSpinner, faTimes } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
 import { check } from 'svelte-awesome/icons';
-import { CompletedJob, FlowModuleValue, FlowStatusModule, JobService, QueuedJob } from '../gen';
+import { CompletedJob, FlowStatusModule, Job, JobService, QueuedJob } from '../gen';
 import { workspaceStore } from '../stores';
-import JobStatus from './JobStatus.svelte';
 import FlowJobResult from './FlowJobResult.svelte';
+import JobStatus from './JobStatus.svelte';
 export let job;
 export let jobs = [];
+export let fullyRetrieved = -1;
+let lastJobid;
 let forloop_selected = '';
-function loadResults() {
+let pres = {};
+async function loadResults() {
+    if (!('success' in job)) {
+        const mods = job?.flow_status?.modules;
+        if (mods) {
+            let i = mods?.findIndex((x) => x.type == FlowStatusModule.type.IN_PROGRESS);
+            if (i != -1) {
+                let last = mods[i];
+                jobs[i] = await JobService.getJob({
+                    workspace: $workspaceStore ?? '',
+                    id: last.job ?? ''
+                });
+                jobs = jobs;
+                pres[i]?.scroll({ top: pres[i]?.scrollHeight, behavior: 'smooth' });
+            }
+        }
+    }
+    if (job.id != lastJobid) {
+        lastJobid = job.id;
+        jobs = [];
+        fullyRetrieved = -1;
+    }
     job?.flow_status?.modules?.forEach(async (x, i) => {
-        if ((i >= jobs.length && x.type == FlowStatusModule.type.SUCCESS) ||
+        if ((i > fullyRetrieved && x.type == FlowStatusModule.type.SUCCESS) ||
             x.type == FlowStatusModule.type.FAILURE) {
             if (x.forloop_jobs) {
                 const forloop_jobs = [];
                 for (let j of x.forloop_jobs) {
                     forloop_jobs.push(await JobService.getCompletedJob({ workspace: $workspaceStore, id: j }));
                 }
-                jobs.push(forloop_jobs);
+                jobs[i] = forloop_jobs;
             }
             else {
-                jobs.push(await JobService.getCompletedJob({ workspace: $workspaceStore, id: x.job }));
+                jobs[i] = await JobService.getCompletedJob({ workspace: $workspaceStore, id: x.job });
             }
             jobs = jobs;
+            fullyRetrieved = i;
         }
     });
 }
+function toJob(x) {
+    return x;
+}
 function toCompletedJob(x) {
     return x;
 }
@@ -36,32 +63,31 @@ function toCompletedJobs(x) {
 $: $workspaceStore && job && loadResults();
 </script>
 
-<div class="flow-root max-w-lg w-full p-4">
-	<div class="flex flex-row-reverse">
+<div class="flow-root w-full p-6">
+	<div class="flex ">
 		{#if job}
 			<div class="flex-col">
-				<a href="/run/{job?.id}" class="font-medium text-blue-600"
-					>{truncateRev(job?.id ?? '', 10)}</a
-				>
-				<div>
-					<JobStatus {job} />
-				</div>
+				<a href="/run/{job?.id}" class="font-medium text-blue-600">
+					{truncateRev(job?.id ?? '', 10)}
+				</a>
 			</div>
 		{/if}
 	</div>
+	<JobStatus {job} />
 
 	<p class="text-gray-500 mb-6 w-full text-center">
 		Step
-		<span class="font-medium text-gray-900"
-			>{Math.min((job?.flow_status?.step ?? 0) + 1, job?.raw_flow?.modules.length ?? 0)}</span
-		>
+		<span class="font-medium text-gray-900">
+			{Math.min((job?.flow_status?.step ?? 0) + 1, job?.raw_flow?.modules.length ?? 0)}
+		</span>
 		out of <span class="font-medium text-gray-900">{job?.raw_flow?.modules.length}</span>
 		<span class="mt-4" />
 	</p>
-	<ul class="-mb-8 w-full">
+
+	<ul class="w-full">
 		{#each job?.raw_flow?.modules ?? [] as mod, i}
 			<li class="w-full">
-				<div class="relative pb-8 w-full">
+				<div class="relative w-full">
 					{#if i < (job?.raw_flow?.modules ?? []).length - 1}
 						<span
 							class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
@@ -109,7 +135,7 @@ $: $workspaceStore && job && loadResults();
 						<div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4 w-full">
 							<div class="w-full">
 								<p class="text-sm text-gray-500">
-									{#if mod.value.type == FlowModuleValue.type.SCRIPT}
+									{#if mod.value.type == 'script'}
 										Script at path <a
 											target="_blank"
 											href={scriptPathToHref(mod.value.path ?? '')}
@@ -120,28 +146,34 @@ $: $workspaceStore && job && loadResults();
 							</div>
 							<div class="text-right text-sm whitespace-nowrap text-gray-500">
 								{job.flow_status?.modules[i].type}
-								{#if job.flow_status?.modules[i].forloop_jobs}
-									{#each job.flow_status?.modules[i].forloop_jobs ?? [] as job}
-										<div class="flex flex-col">
-											<a href="/run/{job}" class="font-medium text-blue-600"
-												>{truncateRev(job ?? '', 10)}</a
-											>
-										</div>
-									{/each}
-								{:else if job.flow_status?.modules[i].job}
-									<a href="/run/{job.flow_status?.modules[i].job}" class="font-medium text-blue-600"
-										>{truncateRev(job.flow_status?.modules[i].job ?? '', 10)}</a
-									>
-								{/if}
+								<div class=" max-h-40 overflow-y-auto">
+									{#if job.flow_status?.modules[i].forloop_jobs}
+										{#each job.flow_status?.modules[i].forloop_jobs ?? [] as job}
+											<div class="flex flex-col">
+												<a href="/run/{job}" class="font-medium text-blue-600">
+													{truncateRev(job ?? '', 10)}
+												</a>
+											</div>
+										{/each}
+									{:else if job.flow_status?.modules[i].job}
+										<a
+											href="/run/{job.flow_status?.modules[i].job}"
+											class="font-medium text-blue-600"
+										>
+											{truncateRev(job.flow_status?.modules[i].job ?? '', 10)}
+										</a>
+									{/if}
+								</div>
 							</div>
 						</div>
 					</div>
 					{#if jobs[i]}
 						{#if Array.isArray(jobs[i])}
-							<div class="flex flex-col space-y-2">
+							<div class="flex flex-col mt-2 space-y-2 max-h-60 overflow-y-auto shadow-inner">
 								{#each toCompletedJobs(jobs[i]) as job, i}
 									<button
 										class="underline text-blue-600 hover:text-blue-700"
+										class:text-red-600={!job.success}
 										on:click={() => {
 											if (forloop_selected == job.id) {
 												forloop_selected = ''
@@ -156,8 +188,24 @@ $: $workspaceStore && job && loadResults();
 									{/if}
 								{/each}
 							</div>
-						{:else}
+						{:else if toJob(jobs[i]).type == 'CompletedJob'}
 							<FlowJobResult job={toCompletedJob(jobs[i])} />
+						{:else if jobs[i]}
+							{#if toJob(jobs[i])?.raw_flow}
+								<div class="border-2">
+									<h2>Forloop current iteration</h2>
+									<svelte:self job={jobs[i]} />
+								</div>
+							{:else}
+								<div class="max-w-2xl mt-2 h-full">
+									<pre
+										bind:this={pres[i]}
+										class="break-all p-4 relative h-full mx-2 bg-gray-50 text-xs max-h-40 overflow-y-auto border">{toJob(
+											jobs[i]
+										).logs ?? ''}
+							</pre>
+								</div>
+							{/if}
 						{/if}
 					{/if}
 				</div>

package/components/FlowStatusViewer.svelte.d.ts

@@ -1,9 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import { CompletedJob, QueuedJob } from '../gen';
+import { CompletedJob, Job, QueuedJob } from '../gen';
 declare const __propDef: {
     props: {
         job: QueuedJob | CompletedJob;
-        jobs?: (CompletedJob | CompletedJob[] | undefined)[] | undefined;
+        jobs?: (Job | Job[] | undefined)[] | undefined;
+        fullyRetrieved?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/FlowViewer.svelte

@@ -3,13 +3,14 @@ import Highlight from 'svelte-highlight';
 import json from 'svelte-highlight/languages/json';
 import python from 'svelte-highlight/languages/python';
 import typescript from 'svelte-highlight/languages/typescript';
-import { FlowModuleValue } from '../gen';
-import github from 'svelte-highlight/styles/github';
 import { slide } from 'svelte/transition';
 import Tabs from './Tabs.svelte';
 import SchemaViewer from './SchemaViewer.svelte';
 import FieldHeader from './FieldHeader.svelte';
+import InputTransformsViewer from './InputTransformsViewer.svelte';
+import SvelteMarkdown from 'svelte-markdown';
 export let flow;
+export let initialOpen = undefined;
 let flowFiltered = {
     summary: flow.summary,
     description: flow.description,
@@ -19,12 +20,14 @@ let flowFiltered = {
 export let embedded = false;
 export let tab = 'ui';
 let open = {};
+if (initialOpen) {
+    open[initialOpen] = true;
+}
+function toAny(x) {
+    return x;
+}
 </script>
 
-<svelte:head>
-	{@html github}
-</svelte:head>
-
 {#if !embedded}
 	<Tabs
 		tabs={[
@@ -36,34 +39,40 @@ let open = {};
 	/>
 {/if}
 {#if tab == 'ui'}
-	<div class="flow-root w-full p-4">
-		<p class="font-black text-lg w-full ml-2">
-			<span>Inputs</span>
-		</p>
-		{#if flow.schema && flow.schema.properties && Object.keys(flow.schema.properties).length > 0 && flow.schema}
-			<ul class="my-4 ml-6">
-				{#each Object.entries(flow.schema.properties) as [inp, v]}
-					<li class="list-disc flex flex-row">
-						<FieldHeader
-							label={inp}
-							required={flow.schema.required?.includes(inp)}
-							type={v?.type}
-							contentEncoding={v?.contentEncoding}
-							format={v?.format}
-							itemsType={v?.itemsType}
-						/><span class="ml-4 mt-2 text-xs"
-							>{v.default != undefined ? 'default: ' + JSON.stringify(v.default) : ''}</span
-						>
-					</li>
-				{/each}
-			</ul>
-		{:else}
-			<div class="text-gray-700 text-xs italic mb-4">
-				This script has no argument or is ill-defined
-			</div>
+	<div class="flow-root w-full pb-4">
+		{#if !embedded}
+			<h2 class="mt-4">{flow.summary}</h2>
+			<SvelteMarkdown source={flow.description ?? ''} />
+
+			<p class="font-black text-lg w-full my-4">
+				<span>Inputs</span>
+			</p>
+			{#if flow.schema && flow.schema.properties && Object.keys(flow.schema.properties).length > 0 && flow.schema}
+				<ul class="my-2">
+					{#each Object.entries(flow.schema.properties) as [inp, v]}
+						<li class="list-disc flex flex-row">
+							<FieldHeader
+								label={inp}
+								required={flow.schema.required?.includes(inp)}
+								type={toAny(v)?.type}
+								contentEncoding={toAny(v)?.contentEncoding}
+								format={toAny(v)?.format}
+								itemsType={toAny(v)?.itemsType}
+							/><span class="ml-4 mt-2 text-xs"
+								>{toAny(v)?.default != undefined
+									? 'default: ' + JSON.stringify(toAny(v)?.default)
+									: ''}</span
+							>
+						</li>
+					{/each}
+				</ul>
+			{:else}
+				<div class="text-gray-700 text-xs italic mb-4">No inputs</div>
+			{/if}
 		{/if}
-		<p class="font-black text-lg my-6 w-full ml-2">
-			<span>{flow?.value?.modules?.length} Steps </span>
+
+		<p class="font-black text-lg my-6 w-full">
+			<span>{flow?.value?.modules?.length} Step{flow?.value?.modules?.length > 1 ? 's' : ''} </span>
 			<span class="mt-4" />
 		</p>
 		<ul class="-mb-8 w-full">
@@ -86,13 +95,39 @@ let open = {};
 							<div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4 w-full">
 								<div class="w-full">
 									<p class="text-sm text-gray-500">
-										{#if mod?.value?.type == FlowModuleValue.type.SCRIPT}
+										{#if mod?.value?.type == 'script'}
 											Script at path <a
 												target="_blank"
 												href={scriptPathToHref(mod?.value?.path ?? '')}
 												class="font-medium text-gray-900">{mod?.value?.path}</a
 											>
-										{:else if mod?.value?.type == FlowModuleValue.type.RAWSCRIPT}
+											{#if mod?.value?.path?.startsWith('hub/')}
+												<div>
+													<button
+														on:click={async () => {
+															open[i] = !open[i]
+														}}
+														class="mb-2 underline text-black"
+													>
+														View code and inputs {open[i] ? '(-)' : '(+)'}</button
+													>
+													{#if open[i]}
+														<InputTransformsViewer inputTransforms={mod?.input_transform} />
+														<div class="w-full h-full">
+															<iframe
+																style="height: 400px;"
+																class="w-full h-full  text-sm"
+																title="embedded script from hub"
+																frameborder="0"
+																src="https://hub.windmill.dev/embed/script/{mod?.value?.path?.substring(
+																	4
+																)}"
+															/>
+														</div>
+													{/if}
+												</div>
+											{/if}
+										{:else if mod?.value?.type == 'rawscript'}
 											<button
 												on:click={() => (open[i] = !open[i])}
 												class="mb-2 underline text-black"
@@ -102,16 +137,18 @@ let open = {};
 
 											{#if open[i]}
 												<div transition:slide class="border border-black p-2 bg-gray-50 w-full">
+													<InputTransformsViewer inputTransforms={mod?.input_transform} />
+
 													<Highlight
 														language={mod?.value?.language == 'deno' ? typescript : python}
 														code={mod?.value?.content}
 													/>
 												</div>
 											{/if}
-										{:else if mod?.value?.type == FlowModuleValue.type.FLOW}
+										{:else if mod?.value?.type == 'flow'}
 											Flow at path {mod?.value?.path}
-										{:else if mod?.value?.type == FlowModuleValue.type.FORLOOPFLOW}
-											For loop over step {i}'s result':
+										{:else if mod?.value?.type == 'forloopflow'}
+											For loop over all the elements of the list returned as a result of step {i}:
 											<svelte:self flow={mod?.value} embedded={true} />
 										{/if}
 									</p>
@@ -124,13 +161,16 @@ let open = {};
 		</ul>
 	</div>
 {:else if tab == 'json'}
-	<button
-		on:click={async () => {
-			await navigator.clipboard.writeText(JSON.stringify(flowFiltered, null, 4))
-		}}
-		class="default-primary-button-v2 float-right my-2 ml-4">copy content</button
-	>
-	<Highlight language={json} code={JSON.stringify(flowFiltered, null, 4)} />
+	<div class="relative">
+		<button
+			on:click={async () => {
+				await navigator.clipboard.writeText(JSON.stringify(flowFiltered, null, 4))
+			}}
+			class="absolute default-secondary-button-v2 bg-white/30 right-0 my-2 ml-4"
+			>copy content</button
+		>
+		<Highlight language={json} code={JSON.stringify(flowFiltered, null, 4)} />
+	</div>
 {:else if tab == 'schema'}
 	<SchemaViewer schema={flow.schema} />
 {/if}

package/components/FlowViewer.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import { type FlowValue } from '../gen';
+import type { FlowValue } from '../gen';
 declare const __propDef: {
     props: {
         flow: {
@@ -8,6 +8,7 @@ declare const __propDef: {
             value: FlowValue;
             schema?: any;
         };
+        initialOpen?: number | undefined;
         embedded?: boolean | undefined;
         tab?: "json" | "schema" | "ui" | undefined;
     };

package/components/IconedResourceType.svelte

@@ -1,20 +1,29 @@
-<script>import Mysql from './icons/Mysql.svelte';
-import Mail from './icons/Mail.svelte';
+<script>import { faGithub } from '@fortawesome/free-brands-svg-icons';
+import Icon from 'svelte-awesome';
+import AirtableIcon from './icons/AirtableIcon.svelte';
 import DbIcon from './icons/DbIcon.svelte';
+import GcalIcon from './icons/GcalIcon.svelte';
+import GCloudIcon from './icons/GCloudIcon.svelte';
+import GdriveIcon from './icons/GdriveIcon.svelte';
+import GitlabIcon from './icons/GItlabIcon.svelte';
+import GmailIcon from './icons/GmailIcon.svelte';
+import GSheetsIcon from './icons/GSheetsIcon.svelte';
+import Mail from './icons/Mail.svelte';
+import Mysql from './icons/Mysql.svelte';
 import PostgresIcon from './icons/PostgresIcon.svelte';
-import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import Slack from './icons/Slack.svelte';
-import Icon from 'svelte-awesome';
+import TogglIcon from './icons/TogglIcon.svelte';
 export let name;
 export let after = false;
 export let height = '24px';
 export let width = '24px';
 </script>
 
-<div class="flex flex-row gap-2">
+<div class="flex flex-row gap-2 justify-center -pl-2 whitespace-nowrap">
 	{#if !after}
 		{name}
 	{/if}
+
 	{#if name === 'postgresql'}
 		<PostgresIcon {height} {width} />
 	{:else if name === 'mysql'}
@@ -27,6 +36,22 @@ export let width = '24px';
 		<Slack {height} {width} />
 	{:else if name === 'github'}
 		<Icon data={faGithub} scale={1.4} />
+	{:else if name === 'gmail'}
+		<GmailIcon {height} {width} />
+	{:else if name === 'gsheets'}
+		<GSheetsIcon {height} {width} />
+	{:else if name === 'gitlab'}
+		<GitlabIcon {height} {width} />
+	{:else if name === 'gcloud'}
+		<GCloudIcon {height} {width} />
+	{:else if name === 'gcal'}
+		<GcalIcon {height} {width} />
+	{:else if name === 'gdrive'}
+		<GdriveIcon {height} {width} />
+	{:else if name === 'airtable'}
+		<AirtableIcon {height} {width} />
+	{:else if name === 'toggl'}
+		<TogglIcon {height} {width} />
 	{/if}
 	{#if after}
 		{name}