Initial commit

packages/builder/src/components/start/AppRow.svelte

@@ -22,7 +22,7 @@
   }
 
   const goToOverview = () => {
-    $goto(`../overview/${app.devId}`)
+    $goto(`../../app/${app.devId}/settings`)
   }
 </script>
 

packages/builder/src/pages/builder/app/[application]/_layout.svelte

@@ -12,6 +12,7 @@
     Heading,
     Modal,
     notifications,
+    Button,
   } from "@budibase/bbui"
   import AppActions from "components/deploy/AppActions.svelte"
   import { API } from "api"
@@ -144,53 +145,14 @@
   <div class="top-nav">
     {#if $store.initialised}
       <div class="topleftnav">
-        <ActionMenu>
+        <span class="back-to-apps">
-          <div slot="control">
+          <Icon
-            <Icon size="M" hoverable name="ShowMenu" />
+            size="S"
-          </div>
+            hoverable
-          <MenuItem on:click={() => $goto("../../portal/apps")}>
+            name="BackAndroid"
-            Exit to portal
+            on:click={() => $goto("../../portal/apps")}
-          </MenuItem>
+          />
-          <MenuItem
+        </span>
-            on:click={() => $goto(`../../portal/overview/${application}`)}
-          >
-            Overview
-          </MenuItem>
-          <MenuItem
-            on:click={() =>
-              $goto(`../../portal/overview/${application}/access`)}
-          >
-            Access
-          </MenuItem>
-          <MenuItem
-            on:click={() =>
-              $goto(`../../portal/overview/${application}/automation-history`)}
-          >
-            Automation history
-          </MenuItem>
-          <MenuItem
-            on:click={() =>
-              $goto(`../../portal/overview/${application}/backups`)}
-          >
-            Backups
-          </MenuItem>
-
-          <MenuItem
-            on:click={() =>
-              $goto(`../../portal/overview/${application}/name-and-url`)}
-          >
-            Name and URL
-          </MenuItem>
-          <MenuItem
-            on:click={() =>
-              $goto(`../../portal/overview/${application}/version`)}
-          >
-            Version
-          </MenuItem>
-        </ActionMenu>
-        <Heading size="XS">{$store.name}</Heading>
-      </div>
-      <div class="topcenternav">
         {#if $store.hasLock}
           <Tabs {selected} size="M">
             {#each $layout.children as { path, title }}
@@ -212,6 +174,9 @@
           </div>
         {/if}
       </div>
+      <div class="topcenternav">
+        <Heading size="XS">{$store.name}</Heading>
+      </div>
       <div class="toprightnav">
         <UserAvatars users={$userStore} />
         <AppActions {application} />
@@ -236,6 +201,13 @@
 </Modal>
 
 <style>
+  .back-to-apps {
+    display: contents;
+  }
+  .back-to-apps :global(.icon) {
+    margin-left: 12px;
+    margin-right: 12px;
+  }
   .loading {
     min-height: 100%;
     height: 100%;
@@ -263,27 +235,29 @@
     z-index: 2;
   }
 
-  .topleftnav {
+  .topcenternav {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
     gap: var(--spacing-xl);
   }
-  .topleftnav :global(.spectrum-Heading) {
+
+  .topcenternav :global(.spectrum-Heading) {
     flex: 1 1 auto;
-    width: 0;
+    /* width: 0; */
     font-weight: 600;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
-  .topcenternav {
+  .topleftnav {
     display: flex;
     position: relative;
     margin-bottom: -2px;
   }
-  .topcenternav :global(.spectrum-Tabs-itemLabel) {
+
+  .topleftnav :global(.spectrum-Tabs-itemLabel) {
     font-weight: 600;
   }
 

packages/builder/src/pages/builder/app/[application]/automate/[automationId]/_layout.svelte

@@ -1,15 +0,0 @@
-<script>
-  import { automationStore } from "builderStore"
-  import { params } from "@roxi/routify"
-
-  if ($params.automation) {
-    const automation = $automationStore.automations.find(
-      m => m._id === $params.automation
-    )
-    if (automation) {
-      automationStore.actions.select(automation)
-    }
-  }
-</script>
-
-<slot />

packages/builder/src/pages/builder/app/[application]/automate/[automationId]/index.svelte

@@ -1,5 +0,0 @@
-<script>
-  import AutomationBuilder from "components/automation/AutomationBuilder/AutomationBuilder.svelte"
-</script>
-
-<AutomationBuilder />

packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte

@@ -1,131 +0,0 @@
-<script>
-  import { Heading, Body, Layout, Button, Modal } from "@budibase/bbui"
-  import { automationStore, selectedAutomation } from "builderStore"
-  import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte"
-  import CreateAutomationModal from "components/automation/AutomationPanel/CreateAutomationModal.svelte"
-  import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
-  import TestPanel from "components/automation/AutomationBuilder/TestPanel.svelte"
-  import { onDestroy, onMount } from "svelte"
-  import { syncURLToState } from "helpers/urlStateSync"
-  import * as routify from "@roxi/routify"
-  import { store } from "builderStore"
-  import { redirect } from "@roxi/routify"
-
-  // Prevent access for other users than the lock holder
-  $: {
-    if (!$store.hasLock) {
-      $redirect("../data")
-    }
-  }
-
-  // Keep URL and state in sync for selected screen ID
-  const stopSyncing = syncURLToState({
-    urlParam: "automationId",
-    stateKey: "selectedAutomationId",
-    validate: id => $automationStore.automations.some(x => x._id === id),
-    fallbackUrl: "./index",
-    store: automationStore,
-    up: automationStore.actions.select,
-    routify,
-  })
-
-  let modal
-  let webhookModal
-
-  onMount(() => {
-    $automationStore.showTestPanel = false
-  })
-
-  onDestroy(stopSyncing)
-</script>
-
-<!-- routify:options index=3 -->
-<div class="root">
-  <AutomationPanel {modal} {webhookModal} />
-  <div class="content">
-    {#if $automationStore.automations?.length}
-      <slot />
-    {:else}
-      <div class="centered">
-        <div class="main">
-          <Layout gap="S" justifyItems="center">
-            <svg
-              width="60px"
-              height="60px"
-              class="spectrum-Icon"
-              focusable="false"
-            >
-              <use xlink:href="#spectrum-icon-18-WorkflowAdd" />
-            </svg>
-            <Heading size="M">You have no automations</Heading>
-            <Body size="M">Let's fix that. Call the bots!</Body>
-            <Button on:click={() => modal.show()} size="M" cta>
-              Create automation
-            </Button>
-          </Layout>
-        </div>
-      </div>
-    {/if}
-  </div>
-
-  {#if $automationStore.showTestPanel}
-    <div class="setup">
-      <TestPanel automation={$selectedAutomation} />
-    </div>
-  {/if}
-  <Modal bind:this={modal}>
-    <CreateAutomationModal {webhookModal} />
-  </Modal>
-  <Modal bind:this={webhookModal} width="30%">
-    <CreateWebhookModal />
-  </Modal>
-</div>
-
-<style>
-  .root {
-    flex: 1 1 auto;
-    height: 0;
-    display: grid;
-    grid-auto-flow: column dense;
-    grid-template-columns: 260px minmax(510px, 1fr) fit-content(500px);
-    overflow: hidden;
-  }
-  .content {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    gap: var(--spacing-l);
-    overflow: auto;
-  }
-  .centered {
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .main {
-    width: 300px;
-  }
-
-  .setup {
-    padding-top: var(--spectrum-global-dimension-size-200);
-    border-left: var(--border-light);
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    gap: var(--spacing-l);
-    background-color: var(--background);
-    grid-column: 3;
-    overflow: auto;
-  }
-</style>

packages/builder/src/pages/builder/app/[application]/automate/index.svelte

@@ -1,10 +0,0 @@
-<script>
-  import { redirect } from "@roxi/routify"
-  import { automationStore } from "builderStore"
-
-  $: {
-    if ($automationStore.automations?.length) {
-      $redirect(`./${$automationStore.automations[0]._id}`)
-    }
-  }
-</script>

packages/builder/src/pages/builder/portal/apps/index.svelte

@@ -100,7 +100,10 @@
     const params = new URLSearchParams({
       open: "error",
     })
-    $goto(`../overview/${appId}/automation-history?${params.toString()}`)
+    $goto(
+      `/builder/app/${appId}/settings/automation-history?${params.toString()}`
+    )
+    // $goto(`../overview/${appId}/automation-history?${params.toString()}`)
   }
 
   const errorCount = errors => {