Shifting the title of the flow item header into separate component so that it can be used by the run history flow as well.

2022-05-12 18:14:38 +01:00 · 2022-05-12 18:14:38 +01:00 · f86f6c3b1c
parent 3f6e8bf5ea
commit f86f6c3b1c
9 changed files with 314 additions and 1043 deletions
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@ -13,6 +13,7 @@
  export let size = "M"
  export let active = false
  export let fullWidth = false
+  export let noPadding = false

  function longPress(element) {
    if (!longPressable) return
@ -41,6 +42,7 @@
  class:spectrum-ActionButton--quiet={quiet}
  class:spectrum-ActionButton--emphasized={emphasized}
  class:is-selected={selected}
+  class:noPadding
  class:fullWidth
  class="spectrum-ActionButton spectrum-ActionButton--size{size}"
  class:active
@ -80,4 +82,8 @@
  .active svg {
    color: var(--spectrum-global-color-blue-600);
  }
+  .noPadding {
+    padding: 0;
+    min-width: 0;
+  }
 </style>
--- a/packages/builder/src/builderStore/store/automation/index.js
+++ b/packages/builder/src/builderStore/store/automation/index.js
@ -20,6 +20,17 @@ export const getAutomationStore = () => {
 }

 const automationActions = store => ({
+  definitions: async () => {
+    const response = await API.getAutomationDefinitions()
+    store.update(state => {
+      state.blockDefinitions = {
+        TRIGGER: response.trigger,
+        ACTION: response.action,
+      }
+      return state
+    })
+    return response
+  },
  fetch: async () => {
    const responses = await Promise.all([
      API.getAutomations(),
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@ -4,27 +4,23 @@
    Icon,
    Divider,
    Layout,
-    Body,
    Detail,
    Modal,
    Button,
-    StatusLight,
    Select,
    ActionButton,
    notifications,
  } from "@budibase/bbui"
  import AutomationBlockSetup from "../../SetupPanel/AutomationBlockSetup.svelte"
  import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
-  import ResultsModal from "./ResultsModal.svelte"
  import ActionModal from "./ActionModal.svelte"
-  import { externalActions } from "./ExternalActions"
+  import FlowItemHeader from "./FlowItemHeader.svelte"

  export let block
  export let testDataModal
  let selected
  let webhookModal
  let actionModal
-  let resultsModal
  let blockComplete
  let showLooping = false

@ -182,63 +178,12 @@
    {/if}
  {/if}

-  <div class="blockSection">
-    <div
-      on:click={() => {
-        blockComplete = !blockComplete
-      }}
-      class="splitHeader"
-    >
-      <div class="center-items">
-        {#if externalActions[block.stepId]}
-          <img
-            alt={externalActions[block.stepId].name}
-            width="28px"
-            height="28px"
-            src={externalActions[block.stepId].icon}
-          />
-        {:else}
-          <svg
-            width="28px"
-            height="28px"
-            class="spectrum-Icon"
-            style="color:grey;"
-            focusable="false"
-          >
-            <use xlink:href="#spectrum-icon-18-{block.icon}" />
-          </svg>
-        {/if}
-        <div class="iconAlign">
-          {#if isTrigger}
-            <Body size="XS">When this happens:</Body>
-          {:else}
-            <Body size="XS">Do this:</Body>
-          {/if}
-
-          <Detail size="S">{block?.name?.toUpperCase() || ""}</Detail>
-        </div>
-      </div>
-      <div class="blockTitle">
-        {#if testResult && testResult[0]}
-          <div style="float: right;" on:click={() => resultsModal.show()}>
-            <StatusLight
-              positive={isTrigger || testResult[0].outputs?.success}
-              negative={!testResult[0].outputs?.success}
-              ><Body size="XS">View response</Body></StatusLight
-            >
-          </div>
-        {/if}
-        <div
-          style="margin-left: 10px;"
-          on:click={() => {
-            onSelect(block)
-          }}
-        >
-          <Icon name={blockComplete ? "ChevronDown" : "ChevronUp"} />
-        </div>
-      </div>
-    </div>
-  </div>
+  <FlowItemHeader
+    {onSelect}
+    {block}
+    bind:results={testResult}
+    bind:open={blockComplete}
+  />
  {#if !blockComplete}
    <Divider noMargin />
    <div class="blockSection">
@ -283,10 +228,6 @@
    </div>
  {/if}

-  <Modal bind:this={resultsModal} width="30%">
-    <ResultsModal {isTrigger} {testResult} />
-  </Modal>
-
  <Modal bind:this={actionModal} width="30%">
    <ActionModal {blockIdx} bind:blockComplete />
  </Modal>
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
@ -0,0 +1,110 @@
+<script>
+  import { Detail, Icon, Body, StatusLight, Modal } from "@budibase/bbui"
+  import { externalActions } from "./ExternalActions"
+  import ResultsModal from "./ResultsModal.svelte"
+
+  export let onSelect
+  export let block
+  export let results
+  export let useResultsModal = true
+  export let open
+
+  $: isTrigger = block?.type === "TRIGGER"
+
+  let resultsModal
+</script>
+
+<div class="blockSection">
+  <div
+    on:click={() => {
+      open = !open
+    }}
+    class="splitHeader"
+  >
+    <div class="center-items">
+      {#if externalActions[block.stepId]}
+        <img
+          alt={externalActions[block.stepId].name}
+          width="28px"
+          height="28px"
+          src={externalActions[block.stepId].icon}
+        />
+      {:else}
+        <svg
+          width="28px"
+          height="28px"
+          class="spectrum-Icon"
+          style="color:grey;"
+          focusable="false"
+        >
+          <use xlink:href="#spectrum-icon-18-{block.icon}" />
+        </svg>
+      {/if}
+      <div class="iconAlign">
+        {#if isTrigger}
+          <Body size="XS">When this happens:</Body>
+        {:else}
+          <Body size="XS">Do this:</Body>
+        {/if}
+
+        <Detail size="S">{block?.name?.toUpperCase() || ""}</Detail>
+      </div>
+    </div>
+    <div class="blockTitle">
+      {#if useResultsModal}
+        {#if results && results[0]}
+          <div style="float: right;" on:click={() => resultsModal.show()}>
+            <StatusLight
+              positive={isTrigger || results[0].outputs?.success}
+              negative={!results[0].outputs?.success}
+              ><Body size="XS">View response</Body></StatusLight
+            >
+          </div>
+        {/if}
+      {:else}
+        <slot />
+      {/if}
+      <div
+        style="margin-left: 10px;"
+        on:click={() => {
+          onSelect(block)
+        }}
+      >
+        <Icon name={open ? "ChevronDown" : "ChevronUp"} />
+      </div>
+    </div>
+  </div>
+</div>
+
+{#if useResultsModal}
+  <Modal bind:this={resultsModal} width="30%">
+    <ResultsModal {isTrigger} bind:testResult={results} />
+  </Modal>
+{/if}
+
+<style>
+  .center-items {
+    display: flex;
+    align-items: center;
+  }
+
+  .splitHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .iconAlign {
+    padding: 0 0 0 var(--spacing-m);
+    display: inline-block;
+  }
+
+  .blockSection {
+    padding: var(--spacing-xl);
+  }
+
+  .blockTitle {
+    display: flex;
+    align-items: center;
+  }
+</style>
--- a/packages/builder/src/components/portal/history/HistoryDetailsPanel.svelte
+++ b/packages/builder/src/components/portal/history/HistoryDetailsPanel.svelte
@ -1,19 +1,51 @@
 <script>
-  import { Body, Layout, Icon, ActionButton } from "@budibase/bbui"
+  import { Body, Layout, Icon, ActionButton, Heading } from "@budibase/bbui"
+  import { capitalise } from "helpers"
+  import StatusRenderer from "components/portal/history/StatusRenderer.svelte"
+  import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
+  import FlowItemHeader from "components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte"

  export let history
  export let close
+
+  $: console.log(history)
 </script>

-<div class="body">
-  <Layout>
+{#if history}
+  <div class="body">
    <div class="top">
-      <Icon name="Clock" />
-      <Body>Run log details</Body>
-      <ActionButton size="S" icon="Close" quiet on:click={close} />
+      <div class="controls">
+        <Icon name="Clock" />
+        <Body>Run log details</Body>
+        <ActionButton noPadding size="S" icon="Close" quiet on:click={close} />
+      </div>
    </div>
-  </Layout>
-</div>
+    <Layout paddingX="XL" gap="S">
+      <Heading>{capitalise(history.appName || "")}</Heading>
+      <StatusRenderer value={history.status} />
+      <div class="icon">
+        <Icon name="Clock" />
+        <DateTimeRenderer value={history.timestamp} />
+      </div>
+      <div class="icon">
+        <Icon name="JourneyVoyager" />
+        <Body>{history.name}</Body>
+      </div>
+      <div>
+        <ActionButton icon="Edit" fullWidth={false}
+          >Edit automation</ActionButton
+        >
+      </div>
+    </Layout>
+    <div class="bottom">
+      {#each history.steps as step}
+        <FlowItemHeader useResultsModal={false} block={step} />
+      {/each}
+    </div>
+  </div>
+{:else}
+  <Body>No details found</Body>
+{/if}

 <style>
  .body {
@ -24,10 +56,24 @@
  }

  .top {
+    padding: var(--spacing-l) 0 var(--spacing-l) 0;
+    border-bottom: var(--border-light);
+  }
+
+  .bottom {
+    margin-top: var(--spacing-m);
+    border-top: var(--border-light);
+  }
+
+  .icon {
+    display: flex;
+    gap: var(--spacing-m);
+  }
+
+  .controls {
+    padding: 0 var(--spacing-l) 0 var(--spacing-l);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--spacing-s);
-    padding: var(--spacing-s) 0 var(--spacing-l) var(--spacing-s);
-    border-bottom: var(--border-light);
  }
 </style>
--- a/packages/builder/src/components/portal/history/StatusRenderer.svelte
+++ b/packages/builder/src/components/portal/history/StatusRenderer.svelte
@ -0,0 +1,25 @@
+<script>
+  import { Icon, Body } from "@budibase/bbui"
+  export let value
+
+  $: isError = value === "Error"
+</script>
+
+<div class="cell">
+  <Icon
+    color={isError
+      ? "var(--spectrum-semantic-negative-color-background)"
+      : "var(--green)"}
+    name={isError ? "Alert" : "CheckmarkCircle"}
+  />
+  <Body>{value}</Body>
+</div>
+
+<style>
+  .cell {
+    color: var(--spectrum-semantic-negative-color-background);
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-m);
+  }
+</style>
--- a/packages/builder/src/pages/builder/portal/history/index.svelte
+++ b/packages/builder/src/pages/builder/portal/history/index.svelte
@ -9,39 +9,95 @@
    Input,
  } from "@budibase/bbui"
  import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
+  import StatusRenderer from "components/portal/history/StatusRenderer.svelte"
  import HistoryDetailsPanel from "components/portal/history/HistoryDetailsPanel.svelte"
+  import { automationStore } from "builderStore"
+  import { onMount } from "svelte"

  let showPanel = false
  let selectedHistory = null
+  let runHistory = []

  const runHistorySchema = {
-    status: "",
-    time: "",
-    app: "",
-    automation: "",
+    status: { displayName: "Status" },
+    timestamp: { displayName: "Time" },
+    appName: { displayName: "App" },
+    name: { displayName: "Automation" },
  }

-  const customRenderers = [{ column: "time", component: DateTimeRenderer }]
-
-  let runHistory = [
-    {
-      status: "Error",
-      time: "2022-05-11T16:06:14.438Z",
-      app: "App name",
-      automation: "automation name",
-    },
-    {
-      status: "Success",
-      time: "2022-05-11T16:03:14.438Z",
-      app: "App name",
-      automation: "automation name",
-    },
+  const customRenderers = [
+    { column: "time", component: DateTimeRenderer },
+    { column: "status", component: StatusRenderer },
  ]

+  function enrichHistory(definitions, runHistory) {
+    const finalHistory = []
+    for (let history of runHistory) {
+      if (!history.steps) {
+        continue
+      }
+      let notFound = false
+      for (let step of history.steps) {
+        const trigger = definitions.trigger[step.stepId],
+          action = definitions.action[step.stepId]
+        if (!trigger && !action) {
+          notFound = true
+          break
+        }
+        step.icon = trigger ? trigger.icon : action.icon
+        step.name = trigger ? trigger.name : action.name
+      }
+      if (!notFound) {
+        finalHistory.push(history)
+      }
+    }
+    return finalHistory
+  }
+
  function viewDetails({ detail }) {
    selectedHistory = detail
    showPanel = true
  }
+
+  onMount(async () => {
+    let definitions = await automationStore.actions.definitions()
+    runHistory = enrichHistory(definitions, [
+      {
+        status: "Error",
+        timestamp: "2022-05-11T16:06:14.438Z",
+        appName: "App name",
+        name: "automation name",
+        steps: [
+          {
+            stepId: "ROW_SAVED",
+            outputs: {},
+          },
+          {
+            stepId: "SEND_EMAIL_SMTP",
+            inputs: {},
+            outputs: {},
+          },
+        ],
+      },
+      {
+        status: "Success",
+        timestamp: "2022-05-11T16:03:14.438Z",
+        appName: "App name",
+        name: "automation name",
+        steps: [
+          {
+            stepId: "ROW_SAVED",
+            outputs: {},
+          },
+          {
+            stepId: "SEND_EMAIL_SMTP",
+            inputs: {},
+            outputs: {},
+          },
+        ],
+      },
+    ])
+  })
 </script>

 <div class="root" class:panelOpen={showPanel}>
@ -65,15 +121,17 @@
          <Input placeholder="Search" />
        </div>
      </div>
-      <Table
-        on:click={viewDetails}
-        schema={runHistorySchema}
-        allowSelectRows={false}
-        allowEditColumns={false}
-        allowEditRows={false}
-        data={runHistory}
-        {customRenderers}
-      />
+      {#if runHistory}
+        <Table
+          on:click={viewDetails}
+          schema={runHistorySchema}
+          allowSelectRows={false}
+          allowEditColumns={false}
+          allowEditRows={false}
+          data={runHistory}
+          {customRenderers}
+        />
+      {/if}
    </Layout>
  </Page>
  <div class="panel" class:panelShow={showPanel}>
@ -94,7 +152,7 @@
  }

  .panelOpen {
-    grid-template-columns: 1fr 390px;
+    grid-template-columns: 1fr 360px;
  }

  .search {
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
--- a/packages/server/src/db/linkedRows/index.js
+++ b/packages/server/src/db/linkedRows/index.js
@ -65,6 +65,7 @@ async function getLinksForRows(rows) {
  // return duplicates, could be querying for both tables in a relation
  return getUniqueByProp(
    responses
+      .filter(el => el != null)
      // create a unique ID which we can use for getting only unique ones
      .map(el => ({ ...el, unique: el.id + el.thisId + el.fieldName })),
    "unique"