Updating UI after pulling in latest changes.

4 years ago · c01c35386b
7 changed files with 54 additions and 86 deletions
--- a/packages/builder/src/components/portal/overview/HistoryDetailsPanel.svelte
+++ b/packages/builder/src/components/portal/overview/HistoryDetailsPanel.svelte
@ -1,35 +1,29 @@
 <script>
-  import { Body, Layout, Icon, ActionButton, Heading } from "@budibase/bbui"
-  import { capitalise } from "helpers"
+  import { Layout, Icon, ActionButton } from "@budibase/bbui"
  import StatusRenderer from "components/portal/overview/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>

 {#if history}
  <div class="body">
    <div class="top">
      <div class="controls">
-        <Icon name="Clock" />
-        <Body>Run log details</Body>
+        <StatusRenderer value={history.status} />
        <ActionButton noPadding size="S" icon="Close" quiet on:click={close} />
      </div>
    </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>{history.name}</div>
      </div>
      <div>
        <ActionButton icon="Edit" fullWidth={false}
@ -39,12 +33,12 @@
    </Layout>
    <div class="bottom">
      {#each history.steps as step}
-        <FlowItemHeader useResultsModal={false} block={step} />
+        <FlowItemHeader block={step} />
      {/each}
    </div>
  </div>
 {:else}
-  <Body>No details found</Body>
+  <div>No details found</div>
 {/if}

 <style>
@ -56,13 +50,14 @@
  }

  .top {
-    padding: var(--spacing-l) 0 var(--spacing-l) 0;
+    padding: var(--spacing-m) 0 var(--spacing-m) 0;
    border-bottom: var(--border-light);
  }

  .bottom {
    margin-top: var(--spacing-m);
    border-top: var(--border-light);
+    height: 100%;
  }

  .icon {
@ -73,7 +68,7 @@
  .controls {
    padding: 0 var(--spacing-l) 0 var(--spacing-l);
    display: grid;
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: 1fr auto;
    gap: var(--spacing-s);
  }
 </style>
--- a/packages/builder/src/components/portal/overview/HistoryTab.svelte
+++ b/packages/builder/src/components/portal/overview/HistoryTab.svelte
@ -15,7 +15,6 @@
  const runHistorySchema = {
    status: { displayName: "Status" },
    timestamp: { displayName: "Time" },
-    appName: { displayName: "App" },
    name: { displayName: "Automation" },
  }

@ -59,7 +58,6 @@
      {
        status: "Error",
        timestamp: "2022-05-11T16:06:14.438Z",
-        appName: "App name",
        name: "automation name",
        steps: [
          {
@ -76,7 +74,6 @@
      {
        status: "Success",
        timestamp: "2022-05-11T16:03:14.438Z",
-        appName: "App name",
        name: "automation name",
        steps: [
          {
@ -137,7 +134,7 @@
  }

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

  .search {
@ -161,9 +158,12 @@

  .panel {
    display: none;
+    position: absolute;
    right: 0;
    height: 100%;
-    width: 100%;
+    width: 360px;
+    overflow: hidden;
+    background-color: var(--background);
  }

  .panelShow {
--- a/packages/builder/src/components/portal/overview/StatusRenderer.svelte
+++ b/packages/builder/src/components/portal/overview/StatusRenderer.svelte
@ -1,25 +1,31 @@
 <script>
-  import { Icon, Body } from "@budibase/bbui"
+  import { Icon } from "@budibase/bbui"
  export let value

  $: isError = value === "Error"
+  $: color = isError
+    ? "var(--spectrum-semantic-negative-color-background)"
+    : "var(--green)"
 </script>

 <div class="cell">
-  <Icon
-    color={isError
-      ? "var(--spectrum-semantic-negative-color-background)"
-      : "var(--green)"}
-    name={isError ? "Alert" : "CheckmarkCircle"}
-  />
-  <Body>{value}</Body>
+  <Icon {color} name={isError ? "Alert" : "CheckmarkCircle"} />
+  <div class:green={!isError} class:red={isError}>{value}</div>
 </div>

 <style>
  .cell {
-    color: var(--spectrum-semantic-negative-color-background);
    display: flex;
    flex-direction: row;
    gap: var(--spacing-m);
+    align-items: center;
+  }
+
+  .green {
+    color: var(--green);
+  }
+
+  .red {
+    color: var(--spectrum-semantic-negative-color-background);
  }
 </style>
--- a/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte
@ -26,8 +26,8 @@
  import { AppStatus } from "constants"
  import AppLockModal from "components/common/AppLockModal.svelte"
  import EditableIcon from "components/common/EditableIcon.svelte"
-  import HistoryTab from "components/portal/overview/HistoryTab.svelte"
  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import HistoryTab from "components/portal/overview/HistoryTab.svelte"
  import { checkIncomingDeploymentStatus } from "components/deploy/utils"
  import { onDestroy, onMount } from "svelte"

@ -110,7 +110,7 @@
      reviewPendingDeployments(deployments, newDeployments)
      return newDeployments
    } catch (err) {
-      notifications.error("Error fetching deployment overview")
+      notifications.error("Error fetching deployment history")
    }
  }

@ -215,7 +215,7 @@
        <ProgressCircle size="XL" />
      </div>
    {:then _}
-      <Layout paddingX="XXL" paddingY="XXL" gap="XL">
+      <Layout paddingX="XXL" paddingY="XL" gap="L">
        <span class="page-header" class:loaded>
          <ActionButton secondary icon={"ArrowLeft"} on:click={backToAppList}>
            Back
@ -292,32 +292,6 @@
            </ActionMenu>
          </div>
        </div>
-        <div class="header-right">
-          <AppLockModal app={selectedApp} />
-          <ButtonGroup gap="XS">
-            <Button
-              size="M"
-              secondary
-              icon="Globe"
-              disabled={!isPublished}
-              on:click={viewApp}
-              dataCy="view-app"
-            >
-              View app
-            </Button>
-            <Button
-              size="M"
-              cta
-              icon="Edit"
-              disabled={lockedBy && !lockedByYou}
-              on:click={() => {
-                editApp(selectedApp)
-              }}
-            >
-              <span>Edit</span>
-            </Button>
-          </ButtonGroup>
-        </div>
      </Layout>
      <div class="tab-wrap">
        <Tabs
@ -342,13 +316,6 @@
              <div class="container">Backups contents</div>
            </Tab>
          {/if}
-          <Tab title="Overview">
-            <OverviewTab
-              app={selectedApp}
-              deployments={latestDeployments}
-              navigateTab={handleTabChange}
-            />
-          </Tab>
          <Tab title="Settings">
            <SettingsTab app={selectedApp} />
          </Tab>
--- a/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte
@ -47,18 +47,18 @@
  }
 </script>

-<div className="overview-tab">
+<div class="overview-tab">
  <Layout paddingX="XXL" paddingY="XXL" gap="XL">
-    <div className="top">
+    <div class="top">
      <DashCard title={"App Status"} dataCy={"app-status"}>
-        <div className="status-content">
-          <div className="status-display">
+        <div class="status-content">
+          <div class="status-display">
            {#if isPublished}
              <Icon name="GlobeCheck" size="XL" disabled={false} />
              <span>Published</span>
            {:else}
              <Icon name="GlobeStrike" size="XL" disabled={true} />
-              <span className="disabled"> Unpublished </span>
+              <span class="disabled"> Unpublished </span>
            {/if}
          </div>

--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@ -1014,10 +1014,10 @@
  resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
  integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==

-"@budibase/backend-core@1.0.188-alpha.0":
-  version "1.0.188-alpha.0"
-  resolved "https://registry.yarnpkg.com/@budibase/backend-core/-/backend-core-1.0.188-alpha.0.tgz#1799eb96756a59606ab87ffc923e00af1733f00a"
-  integrity sha512-0L8WRjyDEmUf7VFAUtKd5ddyyA+3JyzjMm43AiMjD3rhHbjwZQBlxxP0q3BBaeobM5FBf3xUzYQ+8qRDUJtcQQ==
+"@budibase/backend-core@1.0.188-alpha.1":
+  version "1.0.188-alpha.1"
+  resolved "https://registry.yarnpkg.com/@budibase/backend-core/-/backend-core-1.0.188-alpha.1.tgz#46eaa947ca9f62d9ca75188e59039e1cad356212"
+  integrity sha512-0JB0LZTqjKyPdziiDGOxvhaVUA3YfK7SkbdHSA7wgh6XAqpWn1dHf9NnE2LIT2Mmqd0YLtkmRy0mmI6/928AGQ==
  dependencies:
    "@techpass/passport-openidconnect" "^0.3.0"
    aws-sdk "^2.901.0"
@ -1092,12 +1092,12 @@
    svelte-flatpickr "^3.2.3"
    svelte-portal "^1.0.0"

-"@budibase/pro@1.0.188-alpha.0":
-  version "1.0.188-alpha.0"
-  resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-1.0.188-alpha.0.tgz#30fdaf06e11b5ddff35cd484c1bf226cc2df78cd"
-  integrity sha512-pWkHYTqxmMTYaLYOi3TwoI0Rdz539dR40GuhnnKN4rsX5aL+dxcKTartscTJlZGvY+rrk1Cfbq2LLbGSRWDdIA==
+"@budibase/pro@1.0.188-alpha.1":
+  version "1.0.188-alpha.1"
+  resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-1.0.188-alpha.1.tgz#f23b9b95190cbb785aca88aa31dc593602d2288b"
+  integrity sha512-kFeQU5ePBaxN5xuPCuVpLgCZhIMxGoOyY60iYdvpldB4aVBkO5bmSeJ5Mbrdf/HwuF8K+wQoG5AA9+vd2lElMg==
  dependencies:
-    "@budibase/backend-core" "1.0.188-alpha.0"
+    "@budibase/backend-core" "1.0.188-alpha.1"
    node-fetch "^2.6.1"

 "@budibase/standard-components@^0.9.139":
--- a/packages/worker/yarn.lock
+++ b/packages/worker/yarn.lock
@ -293,10 +293,10 @@
  resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
  integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==

-"@budibase/backend-core@1.0.188-alpha.0":
-  version "1.0.188-alpha.0"
-  resolved "https://registry.yarnpkg.com/@budibase/backend-core/-/backend-core-1.0.188-alpha.0.tgz#1799eb96756a59606ab87ffc923e00af1733f00a"
-  integrity sha512-0L8WRjyDEmUf7VFAUtKd5ddyyA+3JyzjMm43AiMjD3rhHbjwZQBlxxP0q3BBaeobM5FBf3xUzYQ+8qRDUJtcQQ==
+"@budibase/backend-core@1.0.188-alpha.1":
+  version "1.0.188-alpha.1"
+  resolved "https://registry.yarnpkg.com/@budibase/backend-core/-/backend-core-1.0.188-alpha.1.tgz#46eaa947ca9f62d9ca75188e59039e1cad356212"
+  integrity sha512-0JB0LZTqjKyPdziiDGOxvhaVUA3YfK7SkbdHSA7wgh6XAqpWn1dHf9NnE2LIT2Mmqd0YLtkmRy0mmI6/928AGQ==
  dependencies:
    "@techpass/passport-openidconnect" "^0.3.0"
    aws-sdk "^2.901.0"
@ -322,12 +322,12 @@
    uuid "^8.3.2"
    zlib "^1.0.5"

-"@budibase/pro@1.0.188-alpha.0":
-  version "1.0.188-alpha.0"
-  resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-1.0.188-alpha.0.tgz#30fdaf06e11b5ddff35cd484c1bf226cc2df78cd"
-  integrity sha512-pWkHYTqxmMTYaLYOi3TwoI0Rdz539dR40GuhnnKN4rsX5aL+dxcKTartscTJlZGvY+rrk1Cfbq2LLbGSRWDdIA==
+"@budibase/pro@1.0.188-alpha.1":
+  version "1.0.188-alpha.1"
+  resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-1.0.188-alpha.1.tgz#f23b9b95190cbb785aca88aa31dc593602d2288b"
+  integrity sha512-kFeQU5ePBaxN5xuPCuVpLgCZhIMxGoOyY60iYdvpldB4aVBkO5bmSeJ5Mbrdf/HwuF8K+wQoG5AA9+vd2lElMg==
  dependencies:
-    "@budibase/backend-core" "1.0.188-alpha.0"
+    "@budibase/backend-core" "1.0.188-alpha.1"
    node-fetch "^2.6.1"

 "@cspotcode/source-map-consumer@0.8.0":