feat(frontend): App bar as components (windmill-labs#4103)

* feat(frontend): wip * feat(frontend): add migration to the new top bar * feat(frontend): fix topbar styling * feat(frontend): fix migration code * feat(frontend): fix migration code * feat(frontend): fix migration code * feat(frontend): wip * feat(frontend): done * feat(frontend): done * feat(frontend): remove migration * feat(frontend): fix top bar styling * feat(frontend): fix sync issues * feat(frontend): improve style * feat(frontend): Redesign Recompute all * feat(frontend): change icon + make the default title font bigger * feat(frontend): Remove unecesary clearInterval * feat(frontend): Fix dropdown menu button style
Guilhem-lm · Jul 29, 2024 · fb89eed · fb89eed
1 parent eb6557a
commit fb89eed
Show file tree

Hide file tree

Showing 18 changed files with 576 additions and 141 deletions.
diff --git a/frontend/src/lib/components/apps/components/display/AppRecomputeAll.svelte b/frontend/src/lib/components/apps/components/display/AppRecomputeAll.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { getContext } from 'svelte'
+	import { initConfig, initOutput } from '../../editor/appUtils'
+	import {
+		type AppViewerContext,
+		type ComponentCustomCSS,
+		type RichConfigurations
+	} from '../../types'
+	import { initCss } from '../../utils'
+	import { components } from '../../editor/component'
+	import InitializeComponent from '../helpers/InitializeComponent.svelte'
+	import ResolveConfig from '../helpers/ResolveConfig.svelte'
+	import ResolveStyle from '../helpers/ResolveStyle.svelte'
+	import RecomputeAllWrapper from '../../editor/RecomputeAllWrapper.svelte'
+	import AlignWrapper from '../helpers/AlignWrapper.svelte'
+
+	export let id: string
+	export let initializing: boolean | undefined = false
+	export let customCss: ComponentCustomCSS<'jobiddisplaycomponent'> | undefined = undefined
+	export let configuration: RichConfigurations
+	export let render: boolean
+	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
+
+	const { app, worldStore, policy } = getContext<AppViewerContext>('AppViewerContext')
+
+	let resolvedConfig = initConfig(
+		components['recomputeallcomponent'].initialData.configuration,
+		configuration
+	)
+
+	initOutput($worldStore, id, {
+		loading: undefined
+	})
+
+	initializing = false
+
+	let css = initCss($app.css?.recomputeallcomponent, customCss)
+</script>
+
+{#each Object.keys(components['recomputeallcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+{#each Object.keys(css ?? {}) as key (key)}
+	<ResolveStyle
+		{id}
+		{customCss}
+		{key}
+		bind:css={css[key]}
+		componentStyle={$app.css?.recomputeallcomponent}
+	/>
+{/each}
+
+<InitializeComponent {id} />
+
+<AlignWrapper {horizontalAlignment}>
+	{#if render && policy}
+		<RecomputeAllWrapper
+			containerClass={css?.container?.class}
+			containerStyle={css?.container?.style}
+		/>
+	{/if}
+</AlignWrapper>
diff --git a/frontend/src/lib/components/apps/components/display/AppText.svelte b/frontend/src/lib/components/apps/components/display/AppText.svelte
@@ -204,7 +204,9 @@
 					<div
 						class="text-ternary bg-surface-primary flex justify-center items-center h-full w-full"
 					>
-						No text
+						{#if resolvedConfig?.disableNoText === false}
+							No text
+						{/if}
 					</div>
 				{:else}
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -230,11 +232,11 @@
 							style={css?.text?.style}
 						>
 							{String(result)}
+							{#if resolvedConfig.tooltip && resolvedConfig.tooltip != ''}
+								<Tooltip>{resolvedConfig.tooltip}</Tooltip>
+							{/if}
 						</svelte:element>
 
-						{#if resolvedConfig.tooltip && resolvedConfig.tooltip != ''}
-							<Tooltip>{resolvedConfig.tooltip}</Tooltip>
-						{/if}
 						{#if resolvedConfig.copyButton && result}
 							<div class="flex">
 								<Button

diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte
@@ -79,6 +79,10 @@
 
 	const appStore = writable<App>(app)
 	const selectedComponent = writable<string[] | undefined>(undefined)
+
+	$: selectedComponent.subscribe((s) => {
+		console.log('selectedComponent', s)
+	})
 	const mode = writable<EditorMode>('dnd')
 	const breakpoint = writable<EditorBreakpoint>('lg')
 	const summaryStore = writable(summary)
@@ -88,6 +92,10 @@
 		hoveredComponent: undefined
 	})
 
+	summaryStore.subscribe((s) => {
+		$worldStore?.outputsById['ctx'].summary.set(s)
+	})
+
 	const cssEditorOpen = writable<boolean>(false)
 
 	const history = initHistory(app)
@@ -114,7 +122,9 @@
 		query: Object.fromEntries($page.url.searchParams.entries()),
 		hash: $page.url.hash,
 		workspace: $workspaceStore,
-		mode: 'editor'
+		mode: 'editor',
+		summary: $summaryStore,
+		author: policy.on_behalf_of_email
 	}
 	const darkMode: Writable<boolean> = writable(document.documentElement.classList.contains('dark'))
 
@@ -157,7 +167,8 @@
 		cssEditorOpen,
 		previewTheme,
 		debuggingComponents: writable({}),
-		replaceStateFn: (path) => replaceState(path, $page.state)
+		replaceStateFn: (path) => replaceState(path, $page.state),
+		policy: policy
 	})
 
 	let scale = writable(100)

diff --git a/frontend/src/lib/components/apps/editor/AppPreview.svelte b/frontend/src/lib/components/apps/editor/AppPreview.svelte
@@ -9,11 +9,9 @@
 		EditorBreakpoint,
 		EditorMode
 	} from '../types'
-	import { classNames } from '$lib/utils'
 	import type { Policy } from '$lib/gen'
 	import Button from '../../common/button/Button.svelte'
 	import { Unlock } from 'lucide-svelte'
-	import RecomputeAllComponents from './RecomputeAllComponents.svelte'
 	import GridViewer from './GridViewer.svelte'
 	import Component from './component/Component.svelte'
 	import { twMerge } from 'tailwind-merge'
@@ -25,6 +23,7 @@
 	import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
 	import { getTheme } from './componentsPanel/themeUtils'
 	import HiddenComponent from '../components/helpers/HiddenComponent.svelte'
+	import RecomputeAllComponents from './RecomputeAllComponents.svelte'
 
 	export let app: App
 	export let appPath: string = ''
@@ -37,6 +36,7 @@
 	export let noBackend: boolean = false
 	export let isLocked = false
 	export let hideRefreshBar = false
+
 	export let replaceStateFn: (path: string) => void = (path: string) =>
 		window.history.replaceState(null, '', path)
 	export let gotoFn: (path: string, opt?: Record<string, any> | undefined) => void = (
@@ -58,7 +58,13 @@
 
 	const allIdsInPath = writable<string[]>([])
 
-	let ncontext: any = { ...context, workspace, mode: 'viewer' }
+	let ncontext: any = {
+		...context,
+		workspace,
+		mode: 'viewer',
+		summary: summary,
+		author: policy.on_behalf_of_email
+	}
 
 	function hashchange(e: HashChangeEvent) {
 		ncontext.hash = e.newURL.split('#')[1]
@@ -111,7 +117,8 @@
 		previewTheme: writable(undefined),
 		debuggingComponents: writable({}),
 		replaceStateFn,
-		gotoFn
+		gotoFn,
+		policy
 	})
 
 	let previousSelectedIds: string[] | undefined = undefined
@@ -183,7 +190,7 @@
 
 <svelte:window on:hashchange={hashchange} on:resize={resizeWindow} />
 
-<div class="relative min-h-screen h-full" bind:clientHeight={appHeight}>
+<div class="relative h-full" bind:clientHeight={appHeight}>
 	<div id="app-editor-top-level-drawer" />
 	<div id="app-editor-select" />
 
@@ -193,9 +200,9 @@
 			: 'max-w-7xl'} mx-auto"
 		id="app-content"
 	>
-		{#if $appStore.grid}
+		{#if $appStore.grid && $appStore.hideLegacyTopBar !== true}
 			<div
-				class={classNames(
+				class={twMerge(
 					'mx-auto',
 					hideRefreshBar || $appStore?.norefreshbar ? 'invisible h-0 overflow-hidden' : ''
 				)}

diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte
@@ -4,8 +4,6 @@
 	import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils'
 	import { twMerge } from 'tailwind-merge'
 
-	import RecomputeAllComponents from './RecomputeAllComponents.svelte'
-	import type { Policy } from '$lib/gen'
 	import HiddenComponent from '../components/helpers/HiddenComponent.svelte'
 	import Component from './component/Component.svelte'
 	import { push } from '$lib/history'
@@ -14,12 +12,14 @@
 	import { deepEqual } from 'fast-equals'
 	import ComponentWrapper from './component/ComponentWrapper.svelte'
 	import { classNames } from '$lib/utils'
+	import { BG_PREFIX } from '../utils'
+	import GridEditorMenu from './GridEditorMenu.svelte'
+	import RecomputeAllComponents from './RecomputeAllComponents.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
-	import { BG_PREFIX } from '../utils'
 	import { Loader2 } from 'lucide-svelte'
 	import Popover from '$lib/components/Popover.svelte'
-	import GridEditorMenu from './GridEditorMenu.svelte'
+	import type { Policy } from '$lib/gen'
 
 	export let policy: Policy
 
@@ -48,52 +48,53 @@
 </script>
 
 <div class="w-full z-[1000] overflow-visible h-full">
-	<div
-		class="w-full sticky top-0 flex justify-between border-b {$componentActive
-			? 'invisible'
-			: 'z-50'} {$connectingInput?.opened ? '' : 'bg-surface'} px-4 py-1 items-center gap-4"
-	>
-		<h3 class="truncate">{$summary}</h3>
-		<div class="flex gap-2 items-center">
-			<div>
-				{#if !$connectingInput.opened}
-					<RecomputeAllComponents />
+	{#if $app.hideLegacyTopBar !== true}
+		<div
+			class="w-full sticky top-0 flex justify-between border-b {$componentActive
+				? 'invisible'
+				: 'z-50'} {$connectingInput?.opened ? '' : 'bg-surface'} px-4 py-1 items-center gap-4"
+		>
+			<h3 class="truncate">{$summary}</h3>
+			<div class="flex gap-2 items-center">
+				<div>
+					{#if !$connectingInput.opened}
+						<RecomputeAllComponents />
+					{/if}
+				</div>
+				{#if $bgRuns.length > 0}
+					<Popover notClickable>
+						<span class="!text-2xs text-tertiary inline-flex gap-1 items-center"
+							><Loader2 size={10} class="animate-spin" /> {$bgRuns.length}
+						</span>
+						<span slot="text"
+							><div class="flex flex-col">
+								{#each $bgRuns as bgRun}
+									<div class="flex gap-2 items-center">
+										<div class="text-2xs text-tertiary">{bgRun}</div>
+									</div>
+								{/each}
+							</div></span
+						>
+					</Popover>
+				{:else}
+					<span class="w-9" />
 				{/if}
 			</div>
-			{#if $bgRuns.length > 0}
-				<Popover notClickable>
-					<span class="!text-2xs text-tertiary inline-flex gap-1 items-center"
-						><Loader2 size={10} class="animate-spin" /> {$bgRuns.length}
-					</span>
-					<span slot="text"
-						><div class="flex flex-col">
-							{#each $bgRuns as bgRun}
-								<div class="flex gap-2 items-center">
-									<div class="text-2xs text-tertiary">{bgRun}</div>
-								</div>
-							{/each}
-						</div></span
-					>
-				</Popover>
-			{:else}
-				<span class="w-9" />
-			{/if}
-		</div>
-		<div class="flex text-2xs gap-8 items-center">
-			<div class="py-2 pr-2 text-secondary flex gap-1 items-center">
-				Hide bar on view
-				<Toggle size="xs" bind:checked={$app.norefreshbar} />
-			</div>
-			<div>
-				{policy.on_behalf_of ? `Author ${policy.on_behalf_of_email}` : ''}
-				<Tooltip>
-					The scripts will be run on behalf of the author and a tight policy ensure security about
-					the possible inputs of the runnables.
-				</Tooltip>
+			<div class="flex text-2xs gap-8 items-center">
+				<div class="py-2 pr-2 text-secondary flex gap-1 items-center">
+					Hide bar on view
+					<Toggle size="xs" bind:checked={$app.norefreshbar} />
+				</div>
+				<div>
+					{policy.on_behalf_of ? `Author ${policy.on_behalf_of_email}` : ''}
+					<Tooltip>
+						The scripts will be run on behalf of the author and a tight policy ensure security about
+						the possible inputs of the runnables.
+					</Tooltip>
+				</div>
 			</div>
 		</div>
-	</div>
-
+	{/if}
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<div
 		style={$app.css?.['app']?.['grid']?.style}