Disable preview and publish for apps with no screens (#12384)
* disable preview and publish for apps with no screens * PR feedback * linting * PR Feedback
This commit is contained in:
Gerard Burns
GitHub
parent
2be8940334
commit
463cee560b
|
|
@ -16,10 +16,9 @@
|
|||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
const onClick = e => {
|
||||
const onClick = () => {
|
||||
if (!disabled) {
|
||||
dispatch("click")
|
||||
e.stopPropagation()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,12 @@
|
|||
import analytics, { Events, EventSource } from "analytics"
|
||||
import { API } from "api"
|
||||
import { apps } from "stores/portal"
|
||||
import { deploymentStore, store, isOnlyUser } from "builderStore"
|
||||
import {
|
||||
deploymentStore,
|
||||
store,
|
||||
isOnlyUser,
|
||||
sortedScreens,
|
||||
} from "builderStore"
|
||||
import TourWrap from "components/portal/onboarding/TourWrap.svelte"
|
||||
import { TOUR_STEP_KEYS } from "components/portal/onboarding/tours.js"
|
||||
import { goto } from "@roxi/routify"
|
||||
|
|
@ -48,7 +53,7 @@
|
|||
$store.upgradableVersion &&
|
||||
$store.version &&
|
||||
$store.upgradableVersion !== $store.version
|
||||
$: canPublish = !publishing && loaded
|
||||
$: canPublish = !publishing && loaded && $sortedScreens.length > 0
|
||||
$: lastDeployed = getLastDeployedString($deploymentStore)
|
||||
|
||||
const initialiseApp = async () => {
|
||||
|
|
@ -175,7 +180,12 @@
|
|||
|
||||
<div class="app-action-button preview">
|
||||
<div class="app-action">
|
||||
<ActionButton quiet icon="PlayCircle" on:click={previewApp}>
|
||||
<ActionButton
|
||||
disabled={$sortedScreens.length === 0}
|
||||
quiet
|
||||
icon="PlayCircle"
|
||||
on:click={previewApp}
|
||||
>
|
||||
Preview
|
||||
</ActionButton>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,65 @@
|
|||
<xml version="1.0" />
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
enable-background="new 0 0 48 48"
|
||||
height="48px"
|
||||
viewBox="0 0 48 48"
|
||||
width="48px"
|
||||
xml:space="preserve"
|
||||
>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M9,42H3c-0.552,0-1-0.449-1-1v-3.5C2,37.224,2.224,37,2.5,37S3,37.224,3,37.5V41h6 c0.276,0,0.5,0.224,0.5,0.5S9.276,42,9,42z"
|
||||
/>
|
||||
<path
|
||||
d="M45,42h-6c-0.276,0-0.5-0.224-0.5-0.5S38.724,41,39,41h6V13H3v27c0,0.276-0.224,0.5-0.5,0.5S2,40.276,2,40 V12h44v29C46,41.551,45.552,42,45,42z"
|
||||
/>
|
||||
<g>
|
||||
<path
|
||||
d="M45.5,13h-43C2.224,13,2,12.776,2,12.5v-5C2,6.673,2.673,6,3.5,6h41C45.327,6,46,6.673,46,7.5v5 C46,12.776,45.776,13,45.5,13z M3,12h42V7.5C45,7.224,44.775,7,44.5,7h-41C3.225,7,3,7.224,3,7.5V12z"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M16.5,11c-0.827,0-1.5-0.673-1.5-1.5S15.673,8,16.5,8S18,8.673,18,9.5S17.327,11,16.5,11z M16.5,9 C16.225,9,16,9.224,16,9.5s0.225,0.5,0.5,0.5S17,9.776,17,9.5S16.775,9,16.5,9z"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="M11.5,11c-0.827,0-1.5-0.673-1.5-1.5S10.673,8,11.5,8S13,8.673,13,9.5S12.327,11,11.5,11z M11.5,9 C11.225,9,11,9.224,11,9.5s0.225,0.5,0.5,0.5S12,9.776,12,9.5S11.775,9,11.5,9z"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="M6.5,11C5.673,11,5,10.327,5,9.5S5.673,8,6.5,8S8,8.673,8,9.5S7.327,11,6.5,11z M6.5,9 C6.225,9,6,9.224,6,9.5S6.225,10,6.5,10S7,9.776,7,9.5S6.775,9,6.5,9z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M35.696,44H12.304c-0.728,0-1.313-0.284-1.605-0.779c-0.289-0.489-0.259-1.126,0.084-1.749L22.58,19.996 c0.709-1.285,2.132-1.285,2.839,0l11.799,21.477v0c0.343,0.623,0.373,1.26,0.084,1.749C37.01,43.716,36.424,44,35.696,44z M24,20 c-0.176,0-0.379,0.179-0.544,0.478L11.659,41.954c-0.168,0.306-0.205,0.582-0.101,0.758C11.667,42.895,11.938,43,12.304,43 h23.393c0.365,0,0.637-0.105,0.745-0.288c0.104-0.177,0.067-0.453-0.101-0.758v0L24.543,20.478C24.379,20.179,24.176,20,24,20z"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="M24,36L24,36c-0.225,0-0.421-0.15-0.481-0.366C23.456,35.412,22,30.169,22,28c0-1.103,0.897-2,2-2 s2,0.897,2,2c0,2.232-1.457,7.417-1.519,7.636C24.42,35.851,24.224,36,24,36z M24,27c-0.552,0-1,0.449-1,1 c0,1.266,0.569,3.793,1.002,5.531C24.435,31.806,25,29.301,25,28C25,27.449,24.552,27,24,27z"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="M24,41c-1.103,0-2-0.897-2-2s0.897-2,2-2s2,0.897,2,2S25.103,41,24,41z M24,38c-0.552,0-1,0.449-1,1 s0.448,1,1,1s1-0.449,1-1S24.552,38,24,38z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
svg {
|
||||
fill: var(--ink);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +1,10 @@
|
|||
<script>
|
||||
import { params, goto } from "@roxi/routify"
|
||||
import { apps, auth, sideBarCollapsed } from "stores/portal"
|
||||
import { ActionButton } from "@budibase/bbui"
|
||||
import { Link, Body, ActionButton } from "@budibase/bbui"
|
||||
import { sdk } from "@budibase/shared-core"
|
||||
import { API } from "api"
|
||||
import ErrorSVG from "./ErrorSVG.svelte"
|
||||
|
||||
$: app = $apps.find(app => app.appId === $params.appId)
|
||||
$: iframeUrl = getIframeURL(app)
|
||||
|
|
@ -14,6 +16,18 @@
|
|||
}
|
||||
return `/${app.devId}`
|
||||
}
|
||||
|
||||
let noScreens = false
|
||||
|
||||
// Normally fetched in builder/src/pages/builder/app/[application]/_layout.svelte
|
||||
const fetchScreens = async appId => {
|
||||
if (!appId) return
|
||||
|
||||
const pkg = await API.fetchAppPackage(appId)
|
||||
noScreens = pkg.screens.length === 0
|
||||
}
|
||||
|
||||
$: fetchScreens(app?.devId)
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
|
|
@ -45,6 +59,7 @@
|
|||
</ActionButton>
|
||||
{/if}
|
||||
<ActionButton
|
||||
disabled={noScreens}
|
||||
quiet
|
||||
icon="LinkOut"
|
||||
on:click={() => window.open(iframeUrl, "_blank")}
|
||||
|
|
@ -52,7 +67,19 @@
|
|||
Fullscreen
|
||||
</ActionButton>
|
||||
</div>
|
||||
{#if noScreens}
|
||||
<div class="noScreens">
|
||||
<ErrorSVG />
|
||||
<Body>You haven't added any screens to your app yet.</Body>
|
||||
<Body>
|
||||
<Link size="L" href={`/builder/app/${app.devId}/design`}
|
||||
>Click here</Link
|
||||
> to add some.
|
||||
</Body>
|
||||
</div>
|
||||
{:else}
|
||||
<iframe src={iframeUrl} title={app.name} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
@ -64,6 +91,7 @@
|
|||
align-items: stretch;
|
||||
padding: 0 var(--spacing-l) var(--spacing-l) var(--spacing-l);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
|
@ -71,9 +99,27 @@
|
|||
gap: var(--spacing-xs);
|
||||
flex: 0 0 50px;
|
||||
}
|
||||
|
||||
iframe {
|
||||
flex: 1 1 auto;
|
||||
border-radius: var(--spacing-s);
|
||||
border: 1px solid var(--spectrum-global-color-gray-300);
|
||||
}
|
||||
|
||||
.noScreens {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.noScreens :global(svg) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue