From a78ba19cf8cd1a1f86dd9a065e8292c6e0c0ca19 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 10 Mar 2023 11:59:10 +0000
Subject: [PATCH] Tidy up buttons above sheets and add FAB for adding rows

---
 .../bbui/src/ActionButton/ActionButton.svelte |  2 +-
 .../backend/DataTable/DataTable.svelte        | 10 ++---
 .../DataTable/buttons/CalculateButton.svelte  |  1 -
 .../buttons/CreateColumnButton.svelte         |  1 -
 .../DataTable/buttons/CreateRowButton.svelte  |  3 +-
 .../DataTable/buttons/CreateViewButton.svelte |  8 +---
 .../DataTable/buttons/DeleteRowsButton.svelte |  2 +-
 .../DataTable/buttons/EditRolesButton.svelte  | 10 ++---
 .../buttons/ExistingRelationshipButton.svelte |  8 +---
 .../DataTable/buttons/ExportButton.svelte     |  8 +---
 .../DataTable/buttons/GroupByButton.svelte    |  1 -
 .../buttons/HideAutocolumnButton.svelte       |  1 -
 .../DataTable/buttons/ImportButton.svelte     |  2 +-
 .../buttons/ManageAccessButton.svelte         |  2 +-
 .../buttons/TableFilterButton.svelte          |  1 -
 .../DataTable/buttons/ViewFilterButton.svelte |  1 -
 .../sheet/SheetCreateColumnButton.svelte      | 20 ----------
 .../buttons/sheet/SheetCreateRowButton.svelte | 17 --------
 .../sheet/SheetCreateColumnModal.svelte       | 15 +++++++
 .../modals/sheet/SheetCreateRowModal.svelte   | 14 +++++++
 .../src/components/sheet/AddRowButton.svelte  | 31 ++++++++++++++
 .../src/components/sheet/Sheet.svelte         |  7 +++-
 .../src/components/sheet/SheetControls.svelte | 40 +------------------
 23 files changed, 85 insertions(+), 120 deletions(-)
 delete mode 100644 packages/builder/src/components/backend/DataTable/buttons/sheet/SheetCreateColumnButton.svelte
 delete mode 100644 packages/builder/src/components/backend/DataTable/buttons/sheet/SheetCreateRowButton.svelte
 create mode 100644 packages/builder/src/components/backend/DataTable/modals/sheet/SheetCreateColumnModal.svelte
 create mode 100644 packages/builder/src/components/backend/DataTable/modals/sheet/SheetCreateRowModal.svelte
 create mode 100644 packages/frontend-core/src/components/sheet/AddRowButton.svelte

diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
index 60c8bec80b..e9eb3b3471 100644
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@@ -71,7 +71,7 @@
     {/if}
     {#if icon}
       <svg
-        class="spectrum-Icon spectrum-Icon--size{size}"
+        class="spectrum-Icon spectrum-Icon--sizeS"
         focusable="false"
         aria-hidden="true"
         aria-label={icon}
diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte
index 9e04763b7d..3ea27efa25 100644
--- a/packages/builder/src/components/backend/DataTable/DataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte
@@ -5,8 +5,8 @@
   import { Sheet } from "@budibase/frontend-core"
   import { API } from "api"
 
-  import SheetCreateColumnButton from "components/backend/DataTable/buttons/sheet/SheetCreateColumnButton.svelte"
-  import SheetCreateRowButton from "components/backend/DataTable/buttons/sheet/SheetCreateRowButton.svelte"
+  import SheetAddColumnModal from "components/backend/DataTable/modals/sheet/SheetCreateColumnModal.svelte"
+  import SheetAddRowModal from "components/backend/DataTable/modals/sheet/SheetCreateRowModal.svelte"
   import SheetCreateViewButton from "components/backend/DataTable/buttons/sheet/SheetCreateViewButton.svelte"
   import SheetImportButton from "components/backend/DataTable/buttons/sheet/SheetImportButton.svelte"
   import SheetExportButton from "components/backend/DataTable/buttons/sheet/SheetExportButton.svelte"
@@ -23,10 +23,6 @@
 <div class="wrapper">
   <Sheet {API} tableId={id} allowAddRows={!isUsersTable}>
     <svelte:fragment slot="controls">
-      <SheetCreateColumnButton />
-      {#if !isUsersTable}
-        <SheetCreateRowButton />
-      {/if}
       {#if isInternal}
         <SheetCreateViewButton />
       {/if}
@@ -42,7 +38,9 @@
       {/if}
       <SheetExportButton />
       <SheetFilterButton />
+      <SheetAddColumnModal />
       <SheetEditColumnModal />
+      <SheetAddRowModal />
     </svelte:fragment>
   </Sheet>
 </div>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
index 7145171ee1..48d8f0ebab 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
@@ -9,7 +9,6 @@
 
 <ActionButton
   icon="Calculator"
-  size="S"
   quiet
   on:click={modal.show}
   active={view.field && view.calculation}
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
index 34d5f37f50..40d38db97f 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
@@ -16,7 +16,6 @@
   emphasized={highlighted}
   icon="TableColumnAddRight"
   quiet
-  size="S"
   on:click={modal.show}
 >
   Create column
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
index 1676a5b23c..7278e5cd6a 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
@@ -8,6 +8,8 @@
   export let highlighted = false
 
   let modal
+
+  export const show = () => modal?.show()
 </script>
 
 <ActionButton
@@ -15,7 +17,6 @@
   emphasized={highlighted}
   selected={highlighted}
   icon="TableRowAddBottom"
-  size="S"
   quiet
   on:click={modal.show}
 >
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
index 0133b5bd79..afd65d1246 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
@@ -7,13 +7,7 @@
   let modal
 </script>
 
-<ActionButton
-  {disabled}
-  icon="CollectionAdd"
-  size="S"
-  quiet
-  on:click={modal.show}
->
+<ActionButton {disabled} icon="CollectionAdd" quiet on:click={modal.show}>
   Create view
 </ActionButton>
 <Modal bind:this={modal}>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
index 4241013d89..6c718d79ae 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
@@ -19,7 +19,7 @@
   $: text = `${item}${selectedRows?.length === 1 ? "" : "s"}`
 </script>
 
-<Button icon="Delete" size="s" warning quiet on:click={modal.show}>
+<Button icon="Delete" warning quiet on:click={modal.show}>
   Delete
   {selectedRows.length}
   {text}
diff --git a/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte
index ad6a685d34..87ca2fa142 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte
@@ -1,15 +1,13 @@
 <script>
-  import { Button, Modal } from "@budibase/bbui"
+  import { ActionButton, Modal } from "@budibase/bbui"
   import EditRolesModal from "../modals/EditRoles.svelte"
 
   let modal
 </script>
 
-<div>
-  <Button icon="UsersLock" primary size="S" quiet on:click={modal.show}>
-    Edit roles
-  </Button>
-</div>
+<ActionButton icon="UsersLock" quiet on:click={modal.show}>
+  Edit roles
+</ActionButton>
 <Modal bind:this={modal}>
   <EditRolesModal />
 </Modal>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ExistingRelationshipButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ExistingRelationshipButton.svelte
index aabbf65ff1..3d837a54f0 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ExistingRelationshipButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ExistingRelationshipButton.svelte
@@ -38,13 +38,7 @@
 
 {#if datasource}
   <div>
-    <ActionButton
-      icon="DataCorrelated"
-      primary
-      size="S"
-      quiet
-      on:click={modal.show}
-    >
+    <ActionButton icon="DataCorrelated" primary quiet on:click={modal.show}>
       Define existing relationship
     </ActionButton>
   </div>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
index d3ad45dde4..fd0d64f6cd 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
@@ -11,13 +11,7 @@
   let modal
 </script>
 
-<ActionButton
-  {disabled}
-  icon="DataDownload"
-  size="S"
-  quiet
-  on:click={modal.show}
->
+<ActionButton {disabled} icon="DataDownload" quiet on:click={modal.show}>
   Export
 </ActionButton>
 <Modal bind:this={modal}>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
index 8b313e8f9b..79dbea4b6b 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
@@ -10,7 +10,6 @@
 <Button
   icon="Group"
   primary
-  size="S"
   quiet
   active={!!view.groupBy}
   on:click={modal.show}
diff --git a/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
index e9b042a653..819ebcec3b 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
@@ -11,7 +11,6 @@
 <ActionButton
   icon={hideAutocolumns ? "VisibilityOff" : "Visibility"}
   primary
-  size="S"
   quiet
   on:click={hideOrUnhide}
 >
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ImportButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ImportButton.svelte
index 4497ec3508..88ef30210a 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ImportButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ImportButton.svelte
@@ -8,7 +8,7 @@
   let modal
 </script>
 
-<ActionButton icon="DataUpload" size="S" quiet on:click={modal.show} {disabled}>
+<ActionButton icon="DataUpload" quiet on:click={modal.show} {disabled}>
   Import
 </ActionButton>
 <Modal bind:this={modal}>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
index 7a9e582c2d..ff6c7d651c 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
@@ -14,7 +14,7 @@
   }
 </script>
 
-<ActionButton icon="LockClosed" size="S" quiet on:click={openDropdown}>
+<ActionButton icon="LockClosed" quiet on:click={openDropdown}>
   Manage access
 </ActionButton>
 <Modal bind:this={modal}>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
index 5db4eb5288..505f7f947e 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
@@ -18,7 +18,6 @@
 
 <ActionButton
   icon="Filter"
-  size="S"
   quiet
   {disabled}
   on:click={modal.show}
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ViewFilterButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ViewFilterButton.svelte
index 2e2026baed..bad3982b9b 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ViewFilterButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ViewFilterButton.svelte
@@ -9,7 +9,6 @@
 
 <ActionButton
   icon="Filter"
-  size="S"
   quiet
   on:click={modal.show}
   active={view.filters?.length}
diff --git a/packages/builder/src/components/backend/DataTable/buttons/sheet/SheetCreateColumnButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/sheet/SheetCreateColumnButton.svelte
deleted file mode 100644
index fe11290008..0000000000
--- a/packages/builder/src/components/backend/DataTable/buttons/sheet/SheetCreateColumnButton.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-  import CreateColumnButton from "../CreateColumnButton.svelte"
-  import { getContext, onMount } from "svelte"
-
-  const { rows, columns, subscribe, filter, loaded } = getContext("sheet")
-
-  let createColumnModal
-
-  $: hasCols = !$loaded || $columns.length
-  $: hasRows = !$loaded || $filter.length || $rows.length
-  $: highlighted = !hasRows || !hasCols
-
-  onMount(() => subscribe("add-column", createColumnModal.show))
-</script>
-
-<CreateColumnButton
-  {highlighted}
-  bind:this={createColumnModal}
-  on:updatecolumns={() => rows.actions.refreshSchema()}
-/>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/sheet/SheetCreateRowButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/sheet/SheetCreateRowButton.svelte
deleted file mode 100644
index c59f45392c..0000000000
--- a/packages/builder/src/components/backend/DataTable/buttons/sheet/SheetCreateRowButton.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script>
-  import CreateRowButton from "../CreateRowButton.svelte"
-  import CreateEditRow from "../../modals/CreateEditRow.svelte"
-  import { getContext } from "svelte"
-
-  const { rows, columns, filter, loaded } = getContext("sheet")
-
-  $: hasCols = !$loaded || $columns.length
-  $: hasRows = !$loaded || $filter.length || $rows.length
-</script>
-
-<CreateRowButton
-  title="Create row"
-  modalContentComponent={CreateEditRow}
-  disabled={!hasCols}
-  highlighted={hasCols && !hasRows}
-/>
diff --git a/packages/builder/src/components/backend/DataTable/modals/sheet/SheetCreateColumnModal.svelte b/packages/builder/src/components/backend/DataTable/modals/sheet/SheetCreateColumnModal.svelte
new file mode 100644
index 0000000000..9d2614e0c8
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/modals/sheet/SheetCreateColumnModal.svelte
@@ -0,0 +1,15 @@
+<script>
+  import { getContext, onMount } from "svelte"
+  import { Modal } from "@budibase/bbui"
+  import CreateEditColumn from "components/backend/DataTable/modals/CreateEditColumn.svelte"
+
+  const { rows, subscribe } = getContext("sheet")
+
+  let modal
+
+  onMount(() => subscribe("add-column", modal.show))
+</script>
+
+<Modal bind:this={modal}>
+  <CreateEditColumn on:updatecolumns={() => rows.actions.refreshSchema()} />
+</Modal>
diff --git a/packages/builder/src/components/backend/DataTable/modals/sheet/SheetCreateRowModal.svelte b/packages/builder/src/components/backend/DataTable/modals/sheet/SheetCreateRowModal.svelte
new file mode 100644
index 0000000000..d236f0ab83
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/modals/sheet/SheetCreateRowModal.svelte
@@ -0,0 +1,14 @@
+<script>
+  import CreateEditRow from "../../modals/CreateEditRow.svelte"
+  import { getContext, onMount } from "svelte"
+  import { Modal } from "@budibase/bbui"
+
+  const { subscribe } = getContext("sheet")
+
+  let modal
+  onMount(() => subscribe("add-row", modal.show))
+</script>
+
+<Modal bind:this={modal}>
+  <CreateEditRow />
+</Modal>
diff --git a/packages/frontend-core/src/components/sheet/AddRowButton.svelte b/packages/frontend-core/src/components/sheet/AddRowButton.svelte
new file mode 100644
index 0000000000..3c7c023d89
--- /dev/null
+++ b/packages/frontend-core/src/components/sheet/AddRowButton.svelte
@@ -0,0 +1,31 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+  import { getContext } from "svelte"
+
+  const { dispatch } = getContext("sheet")
+</script>
+
+<div class="add-component" on:click={() => dispatch("add-row")}>
+  <Icon size="XL" name="Add" />
+</div>
+
+<style>
+  .add-component {
+    position: absolute;
+    bottom: calc(20px + var(--spacing-l));
+    right: calc(20px + var(--spacing-xl));
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background: var(--spectrum-global-color-blue-500);
+    display: grid;
+    place-items: center;
+    color: white;
+    box-shadow: 1px 3px 8px 0 rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+    transition: transform ease-out 300ms, background ease-out 130ms;
+  }
+  .add-component:hover {
+    background: var(--spectrum-global-color-blue-600);
+  }
+</style>
diff --git a/packages/frontend-core/src/components/sheet/Sheet.svelte b/packages/frontend-core/src/components/sheet/Sheet.svelte
index 681c5d2fe2..e3e857252e 100644
--- a/packages/frontend-core/src/components/sheet/Sheet.svelte
+++ b/packages/frontend-core/src/components/sheet/Sheet.svelte
@@ -25,7 +25,8 @@
   import UserAvatars from "./UserAvatars.svelte"
   import KeyboardManager from "./KeyboardManager.svelte"
   import { clickOutside } from "@budibase/bbui"
-  import NewRow from "./NewRow.svelte"
+  import AddRowButton from "./AddRowButton.svelte"
+  import SheetControls from "./SheetControls.svelte"
 
   export let API
   export let tableId
@@ -104,6 +105,7 @@
   <div class="controls">
     <div class="controls-left">
       <slot name="controls" />
+      <SheetControls />
     </div>
     <div class="controls-right">
       <DeleteButton />
@@ -120,6 +122,9 @@
       <ResizeOverlay />
       <ScrollOverlay />
       <MenuOverlay />
+      {#if $config.allowAddRows}
+        <AddRowButton />
+      {/if}
     </div>
   {/if}
   <KeyboardManager />
diff --git a/packages/frontend-core/src/components/sheet/SheetControls.svelte b/packages/frontend-core/src/components/sheet/SheetControls.svelte
index f19b14b2d1..ac6b747510 100644
--- a/packages/frontend-core/src/components/sheet/SheetControls.svelte
+++ b/packages/frontend-core/src/components/sheet/SheetControls.svelte
@@ -3,43 +3,7 @@
   import { ActionButton } from "@budibase/bbui"
 
   const { rows } = getContext("sheet")
-
-  $: rowCount = $rows.length
 </script>
 
-<div class="controls">
-  <div class="buttons">
-    <ActionButton icon="Filter" quiet size="M">Filter</ActionButton>
-    <ActionButton icon="Group" quiet size="M">Group</ActionButton>
-    <ActionButton icon="SortOrderDown" quiet size="M">Sort</ActionButton>
-    <ActionButton icon="VisibilityOff" quiet size="M">Hide fields</ActionButton>
-  </div>
-  <div class="title" />
-  <div class="delete">
-    {rowCount} row{rowCount === 1 ? "" : "s"}
-  </div>
-</div>
-
-<style>
-  .controls {
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
-    align-items: center;
-    height: var(--controls-height);
-    padding: 0 12px;
-    background: var(--background);
-    gap: 8px;
-    border-bottom: 2px solid var(--spectrum-global-color-gray-200);
-  }
-  .title {
-    font-weight: 600;
-  }
-  .buttons {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: calc(1 * var(--cell-spacing));
-    margin-left: -8px;
-  }
-</style>
+<ActionButton icon="SortOrderDown" quiet size="M">Sort</ActionButton>
+<ActionButton icon="VisibilityOff" quiet size="M">Hide fields</ActionButton>