Misc fixes and improvements (#9503)

* Rewrite position dropdown helper to properly work as a svelte action, improve performance and fix bugs

* Update action button styles

* Update spacing on some onboarding pages and update background gradient

* Prevent special characters in first app name

* Fix type in onboarding tour

* Default first app name and url to having a value

* Update text in first app onboarding file upload

* Fix double mounting of apps page causing issues and templates error

* Fix null app ID when creating your first app using data upload

* Fix app deletion not causing app list to be refreshed
This commit is contained in:
Andrew Kingston 2023-02-02 10:06:41 +00:00 committed by GitHub
parent 6ec098efdd
commit 659cfd2492
18 changed files with 152 additions and 117 deletions

View File

@ -86,7 +86,7 @@
} }
.is-selected:not(.spectrum-ActionButton--emphasized):not(.spectrum-ActionButton--quiet) { .is-selected:not(.spectrum-ActionButton--emphasized):not(.spectrum-ActionButton--quiet) {
background: var(--spectrum-global-color-gray-300); background: var(--spectrum-global-color-gray-300);
border-color: var(--spectrum-global-color-gray-700); border-color: var(--spectrum-global-color-gray-500);
} }
.noPadding { .noPadding {
padding: 0; padding: 0;

View File

@ -1,11 +1,21 @@
export default function positionDropdown( export default function positionDropdown(element, opts) {
element, let resizeObserver
{ anchor, align, maxWidth, useAnchorWidth, offset = 5 } let latestOpts = opts
) {
const update = () => { // We need a static reference to this function so that we can properly
// clean up the scroll listener.
const scrollUpdate = () => {
updatePosition(latestOpts)
}
// Updates the position of the dropdown
const updatePosition = opts => {
const { anchor, align, maxWidth, useAnchorWidth, offset = 5 } = opts
if (!anchor) { if (!anchor) {
return return
} }
// Compute bounds
const anchorBounds = anchor.getBoundingClientRect() const anchorBounds = anchor.getBoundingClientRect()
const elementBounds = element.getBoundingClientRect() const elementBounds = element.getBoundingClientRect()
let styles = { let styles = {
@ -51,26 +61,47 @@ export default function positionDropdown(
}) })
} }
// The actual svelte action callback which creates observers on the relevant
// DOM elements
const update = newOpts => {
latestOpts = newOpts
// Cleanup old state
if (resizeObserver) {
resizeObserver.disconnect()
}
// Do nothing if no anchor
const { anchor } = newOpts
if (!anchor) {
return
}
// Observe both anchor and element and resize the popover as appropriate
resizeObserver = new ResizeObserver(() => updatePosition(newOpts))
resizeObserver.observe(anchor)
resizeObserver.observe(element)
resizeObserver.observe(document.body)
}
// Apply initial styles which don't need to change // Apply initial styles which don't need to change
element.style.position = "absolute" element.style.position = "absolute"
element.style.zIndex = "9999" element.style.zIndex = "9999"
// Observe both anchor and element and resize the popover as appropriate // Set up a scroll listener
const resizeObserver = new ResizeObserver(entries => { document.addEventListener("scroll", scrollUpdate, true)
entries.forEach(update)
})
if (anchor) {
resizeObserver.observe(anchor)
}
resizeObserver.observe(element)
resizeObserver.observe(document.body)
document.addEventListener("scroll", update, true) // Perform initial update
update(opts)
return { return {
update,
destroy() { destroy() {
// Cleanup
if (resizeObserver) {
resizeObserver.disconnect() resizeObserver.disconnect()
document.removeEventListener("scroll", update, true) }
document.removeEventListener("scroll", scrollUpdate, true)
}, },
} }
} }

View File

@ -57,7 +57,6 @@
</script> </script>
{#if open} {#if open}
{#key anchor}
<Portal {target}> <Portal {target}>
<div <div
tabindex="0" tabindex="0"
@ -80,7 +79,6 @@
<slot /> <slot />
</div> </div>
</Portal> </Portal>
{/key}
{/if} {/if}
<style> <style>

View File

@ -1,5 +1,5 @@
<div> <div>
In this section you can mange the data for your app: In this section you can manage the data for your app:
<ul class="feature-list"> <ul class="feature-list">
<li>Connect data sources</li> <li>Connect data sources</li>
<li>Edit data</li> <li>Edit data</li>

View File

@ -138,7 +138,6 @@
} }
$goto(`/builder/app/${createdApp.instance._id}`) $goto(`/builder/app/${createdApp.instance._id}`)
// apps.load()
} catch (error) { } catch (error) {
creating = false creating = false
console.error(error) console.error(error)

View File

@ -52,7 +52,7 @@
<span class="back-chev" on:click={() => $goto("../")}> <span class="back-chev" on:click={() => $goto("../")}>
<Icon name="ChevronLeft" size="XL" /> <Icon name="ChevronLeft" size="XL" />
</span> </span>
Forgotten your password? Forgot your password?
</div> </div>
</Heading> </Heading>
</span> </span>
@ -83,7 +83,12 @@
</FancyForm> </FancyForm>
</Layout> </Layout>
<div> <div>
<Button disabled={!email || error || submitted} cta on:click={forgot}> <Button
size="L"
disabled={!email || error || submitted}
cta
on:click={forgot}
>
Reset password Reset password
</Button> </Button>
</div> </div>
@ -92,7 +97,7 @@
<style> <style>
img { img {
width: 48px; width: 46px;
} }
.back-chev { .back-chev {
display: inline-block; display: inline-block;
@ -102,5 +107,6 @@
.heading-content { .heading-content {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--spacing-m);
} }
</style> </style>

View File

@ -66,7 +66,7 @@
<svelte:window on:keydown={handleKeydown} /> <svelte:window on:keydown={handleKeydown} />
<TestimonialPage> <TestimonialPage>
<Layout gap="S" noPadding> <Layout gap="L" noPadding>
<Layout justifyItems="center" noPadding> <Layout justifyItems="center" noPadding>
{#if loaded} {#if loaded}
<img alt="logo" src={$organisation.logoUrl || Logo} /> <img alt="logo" src={$organisation.logoUrl || Logo} />
@ -124,14 +124,19 @@
</FancyForm> </FancyForm>
</Layout> </Layout>
<Layout gap="XS" noPadding justifyItems="center"> <Layout gap="XS" noPadding justifyItems="center">
<Button cta disabled={Object.keys(errors).length > 0} on:click={login}> <Button
size="L"
cta
disabled={Object.keys(errors).length > 0}
on:click={login}
>
Log in to {company} Log in to {company}
</Button> </Button>
</Layout> </Layout>
<Layout gap="XS" noPadding justifyItems="center"> <Layout gap="XS" noPadding justifyItems="center">
<div class="user-actions"> <div class="user-actions">
<ActionButton quiet on:click={() => $goto("./forgot")}> <ActionButton size="L" quiet on:click={() => $goto("./forgot")}>
Forgot password Forgot password?
</ActionButton> </ActionButton>
</div> </div>
</Layout> </Layout>

View File

@ -68,7 +68,7 @@
</script> </script>
<TestimonialPage> <TestimonialPage>
<Layout gap="S" noPadding> <Layout gap="M" noPadding>
<img alt="logo" src={$organisation.logoUrl || Logo} /> <img alt="logo" src={$organisation.logoUrl || Logo} />
<Layout gap="XS" noPadding> <Layout gap="XS" noPadding>
<Heading size="M">Join {company}</Heading> <Heading size="M">Join {company}</Heading>
@ -175,6 +175,7 @@
</Layout> </Layout>
<div> <div>
<Button <Button
size="L"
disabled={Object.keys(errors).length > 0 || onboarding} disabled={Object.keys(errors).length > 0 || onboarding}
cta cta
on:click={acceptInvite} on:click={acceptInvite}

View File

@ -14,7 +14,7 @@
let activeTab = "Apps" let activeTab = "Apps"
$: $url(), updateActiveTab($menu) $: $url(), updateActiveTab($menu)
$: fullScreen = !$apps?.length $: fullscreen = !$apps.length
const updateActiveTab = menu => { const updateActiveTab = menu => {
for (let entry of menu) { for (let entry of menu) {
@ -37,7 +37,8 @@
$redirect("../") $redirect("../")
} else { } else {
try { try {
await organisation.init() // We need to load apps to know if we need to show onboarding fullscreen
await Promise.all([apps.load(), organisation.init()])
} catch (error) { } catch (error) {
notifications.error("Error getting org config") notifications.error("Error getting org config")
} }
@ -47,9 +48,10 @@
}) })
</script> </script>
{#if fullScreen} {#if $auth.user && loaded}
{#if fullscreen}
<slot /> <slot />
{:else if $auth.user && loaded} {:else}
<HelpMenu /> <HelpMenu />
<div class="container"> <div class="container">
<div class="nav"> <div class="nav">
@ -79,6 +81,7 @@
<MobileMenu visible={mobileMenuVisible} on:close={hideMobileMenu} /> <MobileMenu visible={mobileMenuVisible} on:close={hideMobileMenu} />
</div> </div>
{/if} {/if}
{/if}
<style> <style>
.container { .container {

View File

@ -10,13 +10,11 @@
onMount(async () => { onMount(async () => {
try { try {
// Always load latest // Always load latest
await apps.load() await Promise.all([
await licensing.init() licensing.init(),
await templates.load() templates.load(),
groups.actions.init(),
if ($licensing.groupsEnabled) { ])
await groups.actions.init()
}
if ($templates?.length === 0) { if ($templates?.length === 0) {
notifications.error("There was a problem loading quick start templates") notifications.error("There was a problem loading quick start templates")

View File

@ -5,6 +5,8 @@
export let name = "" export let name = ""
export let url = "" export let url = ""
export let onNext = () => {} export let onNext = () => {}
const nameRegex = /^[a-zA-Z0-9\s]*$/
let nameError = null let nameError = null
let urlError = null let urlError = null
@ -14,6 +16,9 @@
if (name.length < 1) { if (name.length < 1) {
return "Name must be provided" return "Name must be provided"
} }
if (!nameRegex.test(name)) {
return "No special characters are allowed"
}
} }
const validateUrl = url => { const validateUrl = url => {

View File

@ -17,8 +17,8 @@
import createFromScratchScreen from "builderStore/store/screenTemplates/createFromScratchScreen" import createFromScratchScreen from "builderStore/store/screenTemplates/createFromScratchScreen"
import { Roles } from "constants/backend" import { Roles } from "constants/backend"
let name = "" let name = "My first app"
let url = "" let url = "my-first-app"
let stage = "name" let stage = "name"
let appId = null let appId = null
@ -57,7 +57,7 @@
defaultScreenTemplate.routing.roldId = Roles.BASIC defaultScreenTemplate.routing.roldId = Roles.BASIC
await store.actions.screens.save(defaultScreenTemplate) await store.actions.screens.save(defaultScreenTemplate)
return createdApp.instance._id appId = createdApp.instance._id
} }
const getIntegrations = async () => { const getIntegrations = async () => {
@ -79,14 +79,14 @@
} }
} }
const goToApp = appId => { const goToApp = () => {
$goto(`/builder/app/${appId}`) $goto(`/builder/app/${appId}`)
notifications.success(`App created successfully`) notifications.success(`App created successfully`)
} }
const handleCreateApp = async ({ datasourceConfig, useSampleData }) => { const handleCreateApp = async ({ datasourceConfig, useSampleData }) => {
try { try {
appId = await createApp(useSampleData) await createApp(useSampleData)
if (datasourceConfig) { if (datasourceConfig) {
await saveDatasource({ await saveDatasource({
@ -99,7 +99,7 @@
}) })
} }
goToApp(appId) goToApp()
} catch (e) { } catch (e) {
console.log(e) console.log(e)
notifications.error("There was a problem creating your app") notifications.error("There was a problem creating your app")
@ -111,7 +111,7 @@
<CreateTableModal <CreateTableModal
name="Your Data" name="Your Data"
beforeSave={createApp} beforeSave={createApp}
afterSave={() => goToApp(appId)} afterSave={goToApp}
/> />
</Modal> </Modal>
@ -142,7 +142,7 @@
<div class="dataButtonIcon"> <div class="dataButtonIcon">
<FontAwesomeIcon name="fa-solid fa-file-arrow-up" /> <FontAwesomeIcon name="fa-solid fa-file-arrow-up" />
</div> </div>
Upload file Upload data (CSV or JSON)
</div> </div>
</FancyButton> </FancyButton>
</div> </div>

View File

@ -100,8 +100,9 @@
const deleteApp = async () => { const deleteApp = async () => {
try { try {
await API.deleteApp(app?.devId) await API.deleteApp(app?.devId)
apps.load()
notifications.success("App deleted successfully") notifications.success("App deleted successfully")
$goto("../") $goto("../../")
} catch (err) { } catch (err) {
notifications.error("Error deleting app") notifications.error("Error deleting app")
} }

View File

@ -1,17 +1,12 @@
<script> <script>
import { apps, groups, licensing } from "stores/portal" import { groups } from "stores/portal"
import { onMount } from "svelte" import { onMount } from "svelte"
let loaded = !!$apps?.length let loaded = false
onMount(async () => { onMount(async () => {
if (!loaded) {
await apps.load()
if ($licensing.groupsEnabled) {
await groups.actions.init() await groups.actions.init()
}
loaded = true loaded = true
}
}) })
</script> </script>

View File

@ -146,7 +146,7 @@
onMount(async () => { onMount(async () => {
try { try {
await Promise.all([groups.actions.init(), apps.load(), roles.fetch()]) await Promise.all([groups.actions.init(), roles.fetch()])
loaded = true loaded = true
} catch (error) { } catch (error) {
notifications.error("Error fetching user group data") notifications.error("Error fetching user group data")

View File

@ -80,9 +80,7 @@
try { try {
// always load latest // always load latest
await licensing.init() await licensing.init()
if ($licensing.groupsEnabled) {
await groups.actions.init() await groups.actions.init()
}
} catch (error) { } catch (error) {
notifications.error("Error getting user groups") notifications.error("Error getting user groups")
} }

View File

@ -215,12 +215,7 @@
onMount(async () => { onMount(async () => {
try { try {
await Promise.all([ await Promise.all([fetchUser(), groups.actions.init(), roles.fetch()])
fetchUser(),
groups.actions.init(),
apps.load(),
roles.fetch(),
])
loaded = true loaded = true
} catch (error) { } catch (error) {
notifications.error("Error getting user groups") notifications.error("Error getting user groups")

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 MiB

After

Width:  |  Height:  |  Size: 2.3 MiB