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 application.</span
-    >
+    The changes you have made will be published to the production version of the
+    application.
   </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 HistoryDetailsPanel from "./HistoryDetailsPanel.svelte"
+  import StatusRenderer from "./_components/StatusRenderer.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,97 +132,94 @@
   })
 </script>
 
-<div class="root" class:panelOpen={showPanel}>
-  <Layout noPadding gap="M" alignContent="start">
-    <div class="search">
-      <div class="select">
-        <Select
-          placeholder="All automations"
-          label="Automation"
-          bind:value={automationId}
-          options={automationOptions}
-        />
-      </div>
-      <div class="select">
-        <Select
-          placeholder="All"
-          label="Date range"
-          bind:value={timeRange}
-          options={timeOptions}
-          isOptionEnabled={x => {
-            if (licensePlan?.type === Constants.PlanType.FREE) {
-              return ["1-w", "30-d", "90-d"].indexOf(x.value) < 0
-            } else if (licensePlan?.type === Constants.PlanType.TEAM) {
-              return ["90-d"].indexOf(x.value) < 0
-            } else if (licensePlan?.type === Constants.PlanType.PRO) {
-              return ["30-d", "90-d"].indexOf(x.value) < 0
-            }
-            return true
-          }}
-        />
-      </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 primary on:click={$licensing.goToUpgradePage()}>
-            Upgrade
-          </Button>
-        </div>
-      {/if}
+<Layout noPadding>
+  <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"
+        label="Status"
+        bind:value={status}
+        options={statusOptions}
+      />
     </div>
-    {#if runHistory}
-      <div>
-        <Table
-          on:click={viewDetails}
-          schema={runHistorySchema}
-          allowSelectRows={false}
-          allowEditColumns={false}
-          allowEditRows={false}
-          data={runHistory}
-          {customRenderers}
-          placeholderText="No history found"
-          border={false}
-        />
-        <div class="pagination">
-          <Pagination
-            page={$pageInfo.pageNumber}
-            hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
-            hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
-            goToPrevPage={pageInfo.prevPage}
-            goToNextPage={pageInfo.nextPage}
-          />
-        </div>
+    <div class="select">
+      <Select
+        placeholder="All"
+        label="Automation"
+        bind:value={automationId}
+        options={automationOptions}
+      />
+    </div>
+    <div class="select">
+      <Select
+        placeholder="All"
+        label="Date range"
+        bind:value={timeRange}
+        options={timeOptions}
+        isOptionEnabled={x => {
+          if (licensePlan?.type === Constants.PlanType.FREE) {
+            return ["1-w", "30-d", "90-d"].indexOf(x.value) < 0
+          } else if (licensePlan?.type === Constants.PlanType.TEAM) {
+            return ["90-d"].indexOf(x.value) < 0
+          } else if (licensePlan?.type === Constants.PlanType.PRO) {
+            return ["30-d", "90-d"].indexOf(x.value) < 0
+          }
+          return true
+        }}
+      />
+    </div>
+    {#if (licensePlan?.type !== Constants.PlanType.ENTERPRISE && $auth.user.accountPortalAccess) || !$admin.cloud}
+      <div class="pro-upgrade">
+        <Button secondary on:click={$licensing.goToUpgradePage()}>
+          Get more history
+        </Button>
       </div>
     {/if}
-  </Layout>
-  <div class="panel" class:panelShow={showPanel}>
-    <HistoryDetailsPanel
-      appId={app.devId}
-      bind:history={selectedHistory}
-      close={() => {
-        showPanel = false
-      }}
-    />
   </div>
+
+  {#if runHistory}
+    <div>
+      <Table
+        on:click={viewDetails}
+        schema={runHistorySchema}
+        allowSelectRows={false}
+        allowEditColumns={false}
+        allowEditRows={false}
+        data={runHistory}
+        {customRenderers}
+        placeholderText="No history found"
+        border={false}
+      />
+      <div class="pagination">
+        <Pagination
+          page={$pageInfo.pageNumber}
+          hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
+          hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
+          goToPrevPage={pageInfo.prevPage}
+          goToNextPage={pageInfo.nextPage}
+        />
+      </div>
+    </div>
+  {/if}
+</Layout>
+
+<div class="panel" class:panelShow={showPanel}>
+  <HistoryDetailsPanel
+    appId={app.devId}
+    bind:history={selectedHistory}
+    close={() => {
+      showPanel = false
+    }}
+  />
 </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 StatusRenderer from "./StatusRenderer.svelte"
-  import TypeRenderer from "./TypeRenderer.svelte"
-  import NameRenderer from "./NameRenderer.svelte"
+  import AppSizeRenderer from "./_components/AppSizeRenderer.svelte"
+  import CreateBackupModal from "./_components/CreateBackupModal.svelte"
+  import ActionsRenderer from "./_components/ActionsRenderer.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"