From fd0eb91e81b6c2321101157aae77470339f9842b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 20 Dec 2022 12:06:08 +0000
Subject: [PATCH] Update overview automation history tab

---
 .../src/components/deploy/DeployModal.svelte  |   8 +-
 .../overview/automation/StatusRenderer.svelte |  39 ----
 .../[appId]/_components/AutomationTab.svelte  |  11 -
 .../_components}/HistoryDetailsPanel.svelte   |   0
 .../_components/StatusRenderer.svelte         |  27 +++
 .../[appId]/automation-history/index.svelte}  | 189 +++++++++---------
 .../_components}/ActionsRenderer.svelte       |   0
 .../_components}/AppSizeRenderer.svelte       |   0
 .../_components}/CreateBackupModal.svelte     |   0
 .../_components}/CreateRestoreModal.svelte    |   0
 .../_components}/DatasourceRenderer.svelte    |   0
 .../backups/_components}/NameRenderer.svelte  |   0
 .../_components}/StatusRenderer.svelte        |   0
 .../backups/_components}/TypeRenderer.svelte  |   0
 .../backups/_components}/UserRenderer.svelte  |   0
 .../overview/[appId]/backups/index.svelte}    |  14 +-
 16 files changed, 134 insertions(+), 154 deletions(-)
 delete mode 100644 packages/builder/src/components/portal/overview/automation/StatusRenderer.svelte
 delete mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/_components/AutomationTab.svelte
 rename packages/builder/src/{components/portal/overview/automation => pages/builder/portal/overview/[appId]/automation-history/_components}/HistoryDetailsPanel.svelte (100%)
 create mode 100644 packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/_components/StatusRenderer.svelte
 rename packages/builder/src/{components/portal/overview/automation/HistoryTab.svelte => pages/builder/portal/overview/[appId]/automation-history/index.svelte} (59%)
 rename packages/builder/src/{components/portal/overview/backups => pages/builder/portal/overview/[appId]/backups/_components}/ActionsRenderer.svelte (100%)
 rename packages/builder/src/{components/portal/overview/backups => pages/builder/portal/overview/[appId]/backups/_components}/AppSizeRenderer.svelte (100%)
 rename packages/builder/src/{components/portal/overview/backups => pages/builder/portal/overview/[appId]/backups/_components}/CreateBackupModal.svelte (100%)
 rename packages/builder/src/{components/portal/overview/backups => pages/builder/portal/overview/[appId]/backups/_components}/CreateRestoreModal.svelte (100%)
 rename packages/builder/src/{components/portal/overview/backups => pages/builder/portal/overview/[appId]/backups/_components}/DatasourceRenderer.svelte (100%)
 rename packages/builder/src/{components/portal/overview/backups => pages/builder/portal/overview/[appId]/backups/_components}/NameRenderer.svelte (100%)
 rename packages/builder/src/{components/portal/overview/backups => pages/builder/portal/overview/[appId]/backups/_components}/StatusRenderer.svelte (100%)
 rename packages/builder/src/{components/portal/overview/backups => pages/builder/portal/overview/[appId]/backups/_components}/TypeRenderer.svelte (100%)
 rename packages/builder/src/{components/portal/overview/backups => pages/builder/portal/overview/[appId]/backups/_components}/UserRenderer.svelte (100%)
 rename packages/builder/src/{components/portal/overview/backups/BackupsTab.svelte => pages/builder/portal/overview/[appId]/backups/index.svelte} (94%)

diff --git a/packages/builder/src/components/deploy/DeployModal.svelte b/packages/builder/src/components/deploy/DeployModal.svelte
index 870091eb0e..587873e716 100644
--- a/packages/builder/src/components/deploy/DeployModal.svelte
+++ b/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>
 
diff --git a/packages/builder/src/components/portal/overview/automation/StatusRenderer.svelte b/packages/builder/src/components/portal/overview/automation/StatusRenderer.svelte
deleted file mode 100644
index a50932c582..0000000000
--- a/packages/builder/src/components/portal/overview/automation/StatusRenderer.svelte
+++ /dev/null
@@ -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>
diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/_components/AutomationTab.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/_components/AutomationTab.svelte
deleted file mode 100644
index 56dcc40f87..0000000000
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/_components/AutomationTab.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script>
-  //export let app
-</script>
-
-<div class="automation-tab" />
-
-<style>
-  .automation-tab {
-    color: pink;
-  }
-</style>
diff --git a/packages/builder/src/components/portal/overview/automation/HistoryDetailsPanel.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/_components/HistoryDetailsPanel.svelte
similarity index 100%
rename from packages/builder/src/components/portal/overview/automation/HistoryDetailsPanel.svelte
rename to packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/_components/HistoryDetailsPanel.svelte
diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/_components/StatusRenderer.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/_components/StatusRenderer.svelte
new file mode 100644
index 0000000000..f041faa349
--- /dev/null
+++ b/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>
diff --git a/packages/builder/src/components/portal/overview/automation/HistoryTab.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte
similarity index 59%
rename from packages/builder/src/components/portal/overview/automation/HistoryTab.svelte
rename to packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte
index 0ba9ff97d5..02414f4a2b 100644
--- a/packages/builder/src/components/portal/overview/automation/HistoryTab.svelte
+++ b/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);
diff --git a/packages/builder/src/components/portal/overview/backups/ActionsRenderer.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/ActionsRenderer.svelte
similarity index 100%
rename from packages/builder/src/components/portal/overview/backups/ActionsRenderer.svelte
rename to packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/ActionsRenderer.svelte
diff --git a/packages/builder/src/components/portal/overview/backups/AppSizeRenderer.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/AppSizeRenderer.svelte
similarity index 100%
rename from packages/builder/src/components/portal/overview/backups/AppSizeRenderer.svelte
rename to packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/AppSizeRenderer.svelte
diff --git a/packages/builder/src/components/portal/overview/backups/CreateBackupModal.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/CreateBackupModal.svelte
similarity index 100%
rename from packages/builder/src/components/portal/overview/backups/CreateBackupModal.svelte
rename to packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/CreateBackupModal.svelte
diff --git a/packages/builder/src/components/portal/overview/backups/CreateRestoreModal.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/CreateRestoreModal.svelte
similarity index 100%
rename from packages/builder/src/components/portal/overview/backups/CreateRestoreModal.svelte
rename to packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/CreateRestoreModal.svelte
diff --git a/packages/builder/src/components/portal/overview/backups/DatasourceRenderer.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/DatasourceRenderer.svelte
similarity index 100%
rename from packages/builder/src/components/portal/overview/backups/DatasourceRenderer.svelte
rename to packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/DatasourceRenderer.svelte
diff --git a/packages/builder/src/components/portal/overview/backups/NameRenderer.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/NameRenderer.svelte
similarity index 100%
rename from packages/builder/src/components/portal/overview/backups/NameRenderer.svelte
rename to packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/NameRenderer.svelte
diff --git a/packages/builder/src/components/portal/overview/backups/StatusRenderer.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/StatusRenderer.svelte
similarity index 100%
rename from packages/builder/src/components/portal/overview/backups/StatusRenderer.svelte
rename to packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/StatusRenderer.svelte
diff --git a/packages/builder/src/components/portal/overview/backups/TypeRenderer.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/TypeRenderer.svelte
similarity index 100%
rename from packages/builder/src/components/portal/overview/backups/TypeRenderer.svelte
rename to packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/TypeRenderer.svelte
diff --git a/packages/builder/src/components/portal/overview/backups/UserRenderer.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/UserRenderer.svelte
similarity index 100%
rename from packages/builder/src/components/portal/overview/backups/UserRenderer.svelte
rename to packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/UserRenderer.svelte
diff --git a/packages/builder/src/components/portal/overview/backups/BackupsTab.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte
similarity index 94%
rename from packages/builder/src/components/portal/overview/backups/BackupsTab.svelte
rename to packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte
index ac2d743412..61f7ab9ae4 100644
--- a/packages/builder/src/components/portal/overview/backups/BackupsTab.svelte
+++ b/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"