Update overview automation history tab

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

@@ -57,15 +57,13 @@
 <Button cta on:click={publishModal.show}>Publish</Button>
 <Modal bind:this={publishModal}>
   <ModalContent
-    title="Publish to Production"
+    title="Publish to production"
     confirmText="Publish"
     onConfirm={publishApp}
     dataCy={"deploy-app-modal"}
   >
-    <span
+    The changes you have made will be published to the production version of the
-      >The changes you have made will be published to the production version of
+    application.
-      the application.</span
-    >
   </ModalContent>
 </Modal>
 

packages/builder/src/components/portal/overview/automation/StatusRenderer.svelte

@@ -1,39 +0,0 @@
-<script>
-  import { Icon } from "@budibase/bbui"
-  export let value
-
-  $: isError = !value || value.toLowerCase() === "error"
-  $: isStoppedError = value?.toLowerCase() === "stopped_error"
-  $: isStopped = value?.toLowerCase() === "stopped" || isStoppedError
-  $: status = getStatus(isError, isStopped)
-
-  function getStatus(error, stopped) {
-    if (error) {
-      return { color: "var(--red)", message: "Error", icon: "Alert" }
-    } else if (stopped) {
-      return { color: "var(--yellow)", message: "Stopped", icon: "StopCircle" }
-    } else {
-      return {
-        color: "var(--green)",
-        message: "Success",
-        icon: "CheckmarkCircle",
-      }
-    }
-  }
-</script>
-
-<div class="cell">
-  <Icon color={status.color} name={status.icon} />
-  <div style={`color: ${status.color};`}>
-    {status.message}
-  </div>
-</div>
-
-<style>
-  .cell {
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-m);
-    align-items: center;
-  }
-</style>

packages/builder/src/pages/builder/portal/overview/[appId]/_components/AutomationTab.svelte

@@ -1,11 +0,0 @@
-<script>
-  //export let app
-</script>
-
-<div class="automation-tab" />
-
-<style>
-  .automation-tab {
-    color: pink;
-  }
-</style>

packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/_components/StatusRenderer.svelte

@@ -0,0 +1,27 @@
+<script>
+  import { Badge } from "@budibase/bbui"
+  export let value
+
+  $: isError = !value || value.toLowerCase() === "error"
+  $: isStoppedError = value?.toLowerCase() === "stopped_error"
+  $: isStopped = value?.toLowerCase() === "stopped" || isStoppedError
+  $: info = getInfo(isError, isStopped)
+
+  const getInfo = (error, stopped) => {
+    if (error) {
+      return { color: "red", message: "Error" }
+    } else if (stopped) {
+      return { color: "yellow", message: "Stopped" }
+    } else {
+      return { color: "green", message: "Success" }
+    }
+  }
+</script>
+
+<Badge
+  green={info.color === "green"}
+  red={info.color === "red"}
+  yellow={info.color === "yellow"}
+>
+  {info.message}
+</Badge>

packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte

@@ -1,21 +1,27 @@
 <script>
-  import { Layout, Table, Select, Pagination, Button } from "@budibase/bbui"
+  import {
+    Layout,
+    Table,
+    Select,
+    Pagination,
+    Button,
+    Body,
+    Heading,
+    Divider,
+  } from "@budibase/bbui"
   import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
-  import StatusRenderer from "./StatusRenderer.svelte"
+  import StatusRenderer from "./_components/StatusRenderer.svelte"
-  import HistoryDetailsPanel from "./HistoryDetailsPanel.svelte"
+  import HistoryDetailsPanel from "./_components/HistoryDetailsPanel.svelte"
   import { automationStore } from "builderStore"
   import { createPaginationStore } from "helpers/pagination"
   import { onMount } from "svelte"
   import dayjs from "dayjs"
-  import { auth, licensing, admin } from "stores/portal"
+  import { auth, licensing, admin, overview } from "stores/portal"
   import { Constants } from "@budibase/frontend-core"
 
   const ERROR = "error",
     SUCCESS = "success",
     STOPPED = "stopped"
-  export let app
-
-  $: licensePlan = $auth.user?.license?.plan
 
   let pageInfo = createPaginationStore()
   let runHistory = null
@@ -26,6 +32,8 @@
   let status = null
   let timeRange = null
 
+  $: licensePlan = $auth.user?.license?.plan
+  $: app = $overview.selectedApp
   $: page = $pageInfo.page
   $: fetchLogs(automationId, status, page, timeRange)
 
@@ -47,8 +55,8 @@
 
   const runHistorySchema = {
     status: { displayName: "Status" },
-    createdAt: { displayName: "Time" },
     automationName: { displayName: "Automation" },
+    createdAt: { displayName: "Time" },
   }
 
   const customRenderers = [
@@ -124,12 +132,25 @@
   })
 </script>
 
-<div class="root" class:panelOpen={showPanel}>
+<Layout noPadding>
-  <Layout noPadding gap="M" alignContent="start">
+  <Layout gap="XS" noPadding>
+    <Heading>Automation History</Heading>
+    <Body>View the automations your app has executed</Body>
+  </Layout>
+  <Divider />
+
   <div class="search">
     <div class="select">
       <Select
-          placeholder="All automations"
+        placeholder="All"
+        label="Status"
+        bind:value={status}
+        options={statusOptions}
+      />
+    </div>
+    <div class="select">
+      <Select
+        placeholder="All"
         label="Automation"
         bind:value={automationId}
         options={automationOptions}
@@ -153,23 +174,15 @@
         }}
       />
     </div>
-      <div class="select">
-        <Select
-          placeholder="All status"
-          label="Status"
-          bind:value={status}
-          options={statusOptions}
-        />
-      </div>
     {#if (licensePlan?.type !== Constants.PlanType.ENTERPRISE && $auth.user.accountPortalAccess) || !$admin.cloud}
       <div class="pro-upgrade">
-          <div class="pro-copy">Expand your automation log history</div>
+        <Button secondary on:click={$licensing.goToUpgradePage()}>
-          <Button primary on:click={$licensing.goToUpgradePage()}>
+          Get more history
-            Upgrade
         </Button>
       </div>
     {/if}
   </div>
+
   {#if runHistory}
     <div>
       <Table
@@ -194,8 +207,9 @@
       </div>
     </div>
   {/if}
-  </Layout>
+</Layout>
-  <div class="panel" class:panelShow={showPanel}>
+
+<div class="panel" class:panelShow={showPanel}>
   <HistoryDetailsPanel
     appId={app.devId}
     bind:history={selectedHistory}
@@ -203,18 +217,9 @@
       showPanel = false
     }}
   />
-  </div>
 </div>
 
 <style>
-  .root {
-    display: grid;
-    grid-template-columns: 1fr;
-    height: 100%;
-    padding: var(--spectrum-alias-grid-gutter-medium)
-      var(--spectrum-alias-grid-gutter-large);
-  }
-
   .search {
     display: flex;
     gap: var(--spacing-xl);

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

@@ -18,14 +18,14 @@
   } from "@budibase/bbui"
   import { backups, licensing, auth, admin } from "stores/portal"
   import { createPaginationStore } from "helpers/pagination"
-  import AppSizeRenderer from "./AppSizeRenderer.svelte"
-  import CreateBackupModal from "./CreateBackupModal.svelte"
-  import ActionsRenderer from "./ActionsRenderer.svelte"
   import DateRenderer from "components/common/renderers/DateTimeRenderer.svelte"
-  import UserRenderer from "./UserRenderer.svelte"
+  import AppSizeRenderer from "./_components/AppSizeRenderer.svelte"
-  import StatusRenderer from "./StatusRenderer.svelte"
+  import CreateBackupModal from "./_components/CreateBackupModal.svelte"
-  import TypeRenderer from "./TypeRenderer.svelte"
+  import ActionsRenderer from "./_components/ActionsRenderer.svelte"
-  import NameRenderer from "./NameRenderer.svelte"
+  import UserRenderer from "./_components/UserRenderer.svelte"
+  import StatusRenderer from "./_components/StatusRenderer.svelte"
+  import TypeRenderer from "./_components/TypeRenderer.svelte"
+  import NameRenderer from "./_components/NameRenderer.svelte"
   import BackupsDefault from "assets/backups-default.png"
   import { BackupTrigger, BackupType } from "constants/backend/backups"
   import { onMount } from "svelte"