Disable preview and publish for apps with no screens (#12384)

* disable preview and publish for apps with no screens

* PR feedback

* linting

* PR Feedback

packages/bbui/src/Link/Link.svelte

@@ -16,10 +16,9 @@
 
   const dispatch = createEventDispatcher()
 
-  const onClick = e => {
+  const onClick = () => {
     if (!disabled) {
       dispatch("click")
-      e.stopPropagation()
     }
   }
 </script>

packages/builder/src/components/deploy/AppActions.svelte

@@ -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>

packages/builder/src/pages/builder/portal/apps/[appId]/ErrorSVG.svelte

@@ -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>

packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte

@@ -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>
-  <iframe src={iframeUrl} title={app.name} />
+  {#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>