Merge pull request #1298 from Budibase/fix/route-preservation

Fix/route preservation
2021-03-18 14:01:31 +01:00 · 2021-03-18 14:01:31 +01:00 · 654928d864
parent 26ae531842 a9a895995b
commit 654928d864
18 changed files with 118 additions and 56 deletions
--- a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
@ -1,12 +1,9 @@
 <script>
-  import { automationStore, backendUiStore } from "builderStore"
+  import { automationStore } from "builderStore"
  import Flowchart from "./FlowChart/FlowChart.svelte"
  import BlockList from "./BlockList.svelte"

  $: automation = $automationStore.selectedAutomation?.automation
-  $: automationLive = automation?.live
-  $: instanceId = $backendUiStore.selectedDatabase._id
-  $: automationCount = $automationStore.automations?.length ?? 0

  function onSelect(block) {
    automationStore.update(state => {
@ -19,14 +16,4 @@
 {#if automation}
  <BlockList />
  <Flowchart {automation} {onSelect} />
-{:else if automationCount === 0}
-  <i>Create your first automation to get started</i>
-{:else}<i>Select an automation to edit</i>{/if}
-
-<style>
-  i {
-    font-size: var(--font-size-m);
-    color: var(--grey-5);
-    margin-top: 2px;
-  }
-</style>
+{/if}
--- a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
@ -3,7 +3,6 @@
  import { automationStore } from "builderStore"
  import { DropdownMenu, Modal } from "@budibase/bbui"
  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
-  import analytics from "analytics"
  import CreateWebhookModal from "../Shared/CreateWebhookModal.svelte"

  $: hasTrigger = $automationStore.selectedAutomation.hasTrigger()
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte
@ -1,5 +1,6 @@
 <script>
  import { onMount } from "svelte"
+  import { goto } from "@sveltech/routify"
  import { automationStore } from "builderStore"
  import NavItem from "components/common/NavItem.svelte"
  import EditAutomationPopover from "./EditAutomationPopover.svelte"
@ -9,6 +10,10 @@
  onMount(() => {
    automationStore.actions.fetch()
  })
+  function selectAutomation(automation) {
+    automationStore.actions.select(automation)
+    $goto(`./${automation._id}`)
+  }
 </script>

 <div class="automations-list">
@ -18,7 +23,7 @@
      icon="ri-stackshare-line"
      text={automation.name}
      selected={automation._id === selectedAutomationId}
-      on:click={() => automationStore.actions.select(automation)}>
+      on:click={() => selectAutomation(automation)}>
      <EditAutomationPopover {automation} />
    </NavItem>
  {/each}
--- a/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
@ -1,5 +1,6 @@
 <script>
-  import { store, backendUiStore, automationStore } from "builderStore"
+  import { backendUiStore, automationStore } from "builderStore"
+  import { goto } from "@sveltech/routify"
  import { notifier } from "builderStore/store/notifications"
  import { Input, ModalContent } from "@budibase/bbui"
  import analytics from "analytics"
@ -15,6 +16,7 @@
      instanceId,
    })
    notifier.success(`Automation ${name} created.`)
+    $goto(`./${$automationStore.selectedAutomation.automation._id}`)
    analytics.captureEvent("Automation Created", { name })
  }
 </script>
--- a/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
@ -1,4 +1,5 @@
-<script>
+<script>    
+  import { goto } from "@sveltech/routify"
  import { automationStore, backendUiStore } from "builderStore"
  import { notifier } from "builderStore/store/notifications"
  import { DropdownMenu } from "@budibase/bbui"
@ -23,6 +24,7 @@
      automation,
    })
    notifier.success("Automation deleted.")
+    $goto('../automate')
  }
 </script>

--- a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
@ -1,7 +1,8 @@
 <script>
-  import { backendUiStore, store, allScreens } from "builderStore"
+  import { goto } from "@sveltech/routify"
+  import { backendUiStore } from "builderStore"
  import { notifier } from "builderStore/store/notifications"
-  import { DropdownMenu, Button, Input } from "@budibase/bbui"
+  import { DropdownMenu } from "@budibase/bbui"
  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"

@ -10,9 +11,6 @@
  let anchor
  let dropdown
  let confirmDeleteDialog
-  let error = ""
-  let originalName = datasource.name
-  let willBeDeleted

  function hideEditor() {
    dropdown?.hide()
@ -26,6 +24,7 @@
  async function deleteDatasource() {
    await backendUiStore.actions.datasources.delete(datasource)
    notifier.success("Datasource deleted")
+    $goto('./datasource')
    hideEditor()
  }
 </script>
--- a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
@ -4,7 +4,6 @@
  import { TableNames } from "constants"
  import EditTablePopover from "./popovers/EditTablePopover.svelte"
  import EditViewPopover from "./popovers/EditViewPopover.svelte"
-  import { Switcher } from "@budibase/bbui"
  import NavItem from "components/common/NavItem.svelte"

  $: selectedView =
--- a/packages/builder/src/components/deploy/DeploymentHistory.svelte
+++ b/packages/builder/src/components/deploy/DeploymentHistory.svelte
@ -80,6 +80,7 @@
  }

  function showErrorReasonModal(err) {
+    if (!err) return
    errorReason = err
    errorReasonModal.show()
  }
@ -118,13 +119,11 @@
            {#if deployment.status.toLowerCase() === 'pending'}
              <Spinner size="10" />
            {/if}
-            <div class={`deployment-status ${deployment.status}`}>
+            <div on:click={() => showErrorReasonModal(deployment.err)} class={`deployment-status ${deployment.status}`}>
              <span>
                {deployment.status}
                {#if deployment.status === DeploymentStatus.FAILURE}
-                  <i
-                    class="ri-information-line"
-                    on:click={() => showErrorReasonModal(deployment.err)} />
+                  <i class="ri-information-line"/>
                {/if}
              </span>
            </div>
--- a/packages/builder/src/components/settings/tabs/APIKeys.svelte
+++ b/packages/builder/src/components/settings/tabs/APIKeys.svelte
@ -19,6 +19,7 @@
    const response = await api.put(`/api/keys/${key}`, { value })
    const res = await response.json()
    keys = { ...keys, ...res }
+    notifier.success("API Key saved.")
  }

  // Get Keys
--- a/packages/builder/src/pages/[application]/automate/[automation]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/automate/[automation]/_layout.svelte
@ -1,6 +1,15 @@
 <script>
-  import { store } from "builderStore"
+  import { automationStore } from "builderStore"
  import { params } from "@sveltech/routify"

-  store.actions.layouts.select($params.layout)
+  if ($params.automation) {
+    const automation = $automationStore.automations.find(
+      m => m._id === $params.automation
+    )
+    if (automation) {
+      automationStore.actions.select(automation)
+    }
+  }
 </script>
+
+<slot />
--- a/packages/builder/src/pages/[application]/automate/[automation]/index.svelte
+++ b/packages/builder/src/pages/[application]/automate/[automation]/index.svelte
@ -0,0 +1,6 @@
+<script>
+  import AutomationBuilder from "components/automation/AutomationBuilder/AutomationBuilder.svelte"
+</script>
+  
+<AutomationBuilder />
+  
--- a/packages/builder/src/pages/[application]/automate/index.svelte
+++ b/packages/builder/src/pages/[application]/automate/index.svelte
@ -1,5 +1,26 @@
 <script>
-  import AutomationBuilder from "components/automation/AutomationBuilder/AutomationBuilder.svelte"
+  import { goto, leftover } from "@sveltech/routify"
+  import { onMount } from 'svelte'
+  import { automationStore } from "builderStore"
+
+  onMount(async () => {
+      // navigate to first automation in list, if not already selected
+      if (
+        !$leftover &&
+        $automationStore.automations.length > 0 &&
+        (!$automationStore.selectedAutomation || !$automationStore.selectedAutomation?.automation?._id)
+      ) {
+        $goto(`../${$automationStore.automations[0]._id}`)
+      }
+    })
 </script>

-<AutomationBuilder />
+<i>Create your first automation to get started</i>
+
+<style>
+  i {
+    font-size: var(--font-size-m);
+    color: var(--grey-5);
+    margin-top: 2px;
+  }
+</style>
--- a/packages/builder/src/pages/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/[application]/data/_layout.svelte
@ -1,6 +1,6 @@
 <script>
-  import { params } from "@sveltech/routify"
-  import { Button, Switcher, Modal } from "@budibase/bbui"
+  import { isActive, goto } from "@sveltech/routify"
+  import { Switcher, Modal } from "@budibase/bbui"
  import TableNavigator from "components/backend/TableNavigator/TableNavigator.svelte"
  import DatasourceNavigator from "components/backend/DatasourceNavigator/DatasourceNavigator.svelte"
  import CreateDatasourceModal from "components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte"
@ -17,7 +17,16 @@
    },
  ]

-  let tab = $params.selectedDatasource ? "datasource" : "table"
+  let tab = $isActive('./datasource') ? "datasource" : "table"
+
+  function selectFirstTableOrSource({ detail }) {
+    const type = detail.heading.key
+    if (type === 'datasource') {
+      $goto("./datasource")
+    } else {
+      $goto("./table")
+    }
+  }

  let modal
 </script>
@ -25,7 +34,7 @@
 <!-- routify:options index=0 -->
 <div class="root">
  <div class="nav">
-    <Switcher headings={tabs} bind:value={tab}>
+    <Switcher headings={tabs} bind:value={tab} on:change={selectFirstTableOrSource}>
      <div class="title">
        <i
          data-cy={`new-${tab}`}
--- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/_layout.svelte
@ -0,0 +1,15 @@
+<script>
+  import { params } from "@sveltech/routify"
+  import { backendUiStore } from "builderStore"
+
+  if ($params.query) {
+    const query = $backendUiStore.queries.find(
+      m => m._id === $params.query
+    )
+    if (query) {
+      backendUiStore.actions.queries.select(query)
+    }
+  }
+</script>
+
+<slot />
--- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/_layout.svelte
@ -2,12 +2,12 @@
  import { params } from "@sveltech/routify"
  import { backendUiStore } from "builderStore"

-  if ($params.selectedDatasourceId) {
+  if ($params.selectedDatasource) {
    const datasource = $backendUiStore.datasources.find(
      m => m._id === $params.selectedDatasource
    )
    if (datasource) {
-      backendUiStore.actions.datasources.select(datasource)
+      backendUiStore.actions.datasources.select(datasource._id)
    }
  }
 </script>
--- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
@ -1,6 +1,6 @@
 <script>
  import { goto, beforeUrlChange } from "@sveltech/routify"
-  import { Button, Heading, Body, Spacer, Icon } from "@budibase/bbui"
+  import { Button, Heading, Body, Spacer } from "@budibase/bbui"
  import { backendUiStore } from "builderStore"
  import { notifier } from "builderStore/store/notifications"
  import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
--- a/packages/builder/src/pages/[application]/data/datasource/index.svelte
+++ b/packages/builder/src/pages/[application]/data/datasource/index.svelte
@ -0,0 +1,22 @@
+<script>
+    import { backendUiStore } from "builderStore"
+    import { goto } from "@sveltech/routify"
+    import { onMount } from "svelte"
+
+    onMount(async () => {
+      // navigate to first table in list, if not already selected
+      $backendUiStore.datasources.length > 0 && $goto(`../${$backendUiStore.datasources[0]._id}`)
+    })
+  </script>
+  
+  {#if $backendUiStore.tables.length === 0}
+    <i>Connect your first datasource to start building.</i>
+  {:else}<i>Select a datasource to edit</i>{/if}
+  
+  <style>
+    i {
+      font-size: var(--font-size-m);
+      color: var(--grey-5);
+      margin-top: 2px;
+    }
+  </style>
--- a/packages/builder/src/pages/[application]/data/table/index.svelte
+++ b/packages/builder/src/pages/[application]/data/table/index.svelte
@ -1,23 +1,10 @@
 <script>
-  import { store, backendUiStore } from "builderStore"
-  import { goto, leftover } from "@sveltech/routify"
+  import { backendUiStore } from "builderStore"
+  import { goto } from "@sveltech/routify"
  import { onMount } from "svelte"

-  async function selectTable(table) {
-    backendUiStore.actions.tables.select(table)
-  }
-
  onMount(async () => {
-    // navigate to first table in list, if not already selected
-    // and this is the final url (i.e. no selectedTable)
-    if (
-      !$leftover &&
-      $backendUiStore.tables.length > 0 &&
-      (!$backendUiStore.selectedTable || !$backendUiStore.selectedTable._id)
-    ) {
-      // this file routes as .../tables/index, so, go up one.
-      $goto(`../${$backendUiStore.tables[0]._id}`)
-    }
+    $backendUiStore.tables.length > 0 && $goto(`../${$backendUiStore.tables[0]._id}`)
  })
 </script>