From f72dda18de4c60af232b2987ae731e176540930c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Thu, 8 Apr 2021 18:10:18 +0200
Subject: [PATCH] actually convert table command buttons

---
 packages/builder/src/App.svelte                  |  7 +++++++
 .../SetupPanel/AutomationBlockSetup.svelte       |  2 +-
 .../automation/SetupPanel/SetupPanel.svelte      |  2 +-
 .../DataTable/buttons/CalculateButton.svelte     |  9 +++------
 .../DataTable/buttons/CreateColumnButton.svelte  | 13 ++++---------
 .../DataTable/buttons/CreateRowButton.svelte     | 11 ++++-------
 .../DataTable/buttons/CreateViewButton.svelte    |  7 +++----
 .../DataTable/buttons/DeleteRowsButton.svelte    | 15 ++++++---------
 .../DataTable/buttons/EditRolesButton.svelte     | 12 ++----------
 .../DataTable/buttons/ExportButton.svelte        |  8 +++-----
 .../DataTable/buttons/FilterButton.svelte        |  9 +++------
 .../DataTable/buttons/GroupByButton.svelte       |  3 +--
 .../buttons/HideAutocolumnButton.svelte          | 11 ++++++-----
 .../DataTable/buttons/ManageAccessButton.svelte  | 16 ++++------------
 .../DataTable/modals/CreateEditColumn.svelte     |  5 ++---
 .../TableIntegrationMenu/index.svelte            |  3 +--
 .../modals/CreateDatasourceModal.svelte          |  1 +
 packages/builder/src/pages/builder/index.svelte  |  5 -----
 18 files changed, 52 insertions(+), 87 deletions(-)

diff --git a/packages/builder/src/App.svelte b/packages/builder/src/App.svelte
index 0f9d0695f2..5c87ebbc7d 100644
--- a/packages/builder/src/App.svelte
+++ b/packages/builder/src/App.svelte
@@ -14,3 +14,10 @@
 
 <NotificationDisplay />
 <Router {routes} {config} />
+<div class="modal-container" />
+
+<style>
+  .modal-container {
+    position: absolute;
+  }
+</style>
\ No newline at end of file
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 1e2ee46cad..eba3d76580 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -92,7 +92,7 @@
   </div>
 {/each}
 {#if stepId === 'WEBHOOK'}
-  <Button wide secondary on:click={() => webhookModal.show()}>
+  <Button type="secondary" on:click={() => webhookModal.show()}>
     Set Up Webhook
   </Button>
 {/if}
diff --git a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
index 68d5eee0c4..ed4ea54964 100644
--- a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
@@ -65,7 +65,7 @@
     {webhookModal} />
 {:else if $automationStore.selectedAutomation}
   <div class="block-label">{automation.name}</div>
-  <Button secondary wide on:click={testAutomation}>Test Automation</Button>
+  <Button type="secondary" on:click={testAutomation}>Test Automation</Button>
 {/if}
 <Button
   secondary
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
index 0452491247..a65e2aadae 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Popover, TextButton, Icon } from "@budibase/bbui"
+  import { Popover, Button } from "@budibase/bbui"
   import CalculatePopover from "../popovers/CalculatePopover.svelte"
 
   export let view = {}
@@ -9,14 +9,11 @@
 </script>
 
 <div bind:this={anchor}>
-  <TextButton
-    text
-    small
+  <Button icon="Calculator" type="overBackground" size="S" quiet
     on:click={dropdown.show}
     active={view.field && view.calculation}>
-    <Icon name="calculate" />
     Calculate
-  </TextButton>
+  </Button>
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
   <CalculatePopover {view} onClosed={dropdown.hide} />
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
index 7677451a44..566bec2de0 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
@@ -1,7 +1,6 @@
 <script>
   import {
-    DropdownMenu,
-    TextButton as Button,
+    Button,
     Icon,
     Modal,
     ModalContent,
@@ -9,15 +8,11 @@
   import CreateEditColumn from "../modals/CreateEditColumn.svelte"
 
   let modal
-  let fieldName
 </script>
 
-<div>
-  <Button text small on:click={modal.show}>
-    <Icon name="addcolumn" />
-    Create New Column
-  </Button>
-</div>
+<Button icon="AddCircle" type="overBackground" size="S" quiet on:click={modal.show}>
+  Create New Column
+</Button>
 <Modal bind:this={modal}>
   <ModalContent
     showCancelButton={false}
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
index 19975ac1a1..8ad8d2adfc 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { TextButton as Button, Icon, Modal } from "@budibase/bbui"
+  import { Button, Icon, Modal } from "@budibase/bbui"
   import CreateEditRow from "../modals/CreateEditRow.svelte"
 
   export let modalContentComponent = CreateEditRow
@@ -8,12 +8,9 @@
   let modal
 </script>
 
-<div>
-  <Button text small on:click={modal.show}>
-    <Icon name="addrow" />
-    {title}
-  </Button>
-</div>
+<Button icon="Add" type="overBackground" size="S" quiet on:click={modal.show}>
+  {title}
+</Button>
 <Modal bind:this={modal}>
   <svelte:component this={modalContentComponent} />
 </Modal>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
index ef58b52c60..020c8af3ce 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Popover, TextButton, Icon } from "@budibase/bbui"
+  import { Popover, Button } from "@budibase/bbui"
   import CreateViewPopover from "../popovers/CreateViewPopover.svelte"
 
   let anchor
@@ -7,10 +7,9 @@
 </script>
 
 <div bind:this={anchor}>
-  <TextButton text small on:click={dropdown.show}>
-    <Icon name="view" />
+  <Button icon="CollectionAdd" type="overBackground" size="S" quiet on:click={dropdown.show}>
     Create New View
-  </TextButton>
+  </Button>
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
   <CreateViewPopover onClosed={dropdown.hide} />
diff --git a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
index f55969087f..32ce7b83b2 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { TextButton, Icon } from "@budibase/bbui"
+  import { Button, Icon } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
   export let selectedRows
@@ -13,14 +13,11 @@
   }
 </script>
 
-<div>
-  <TextButton small text on:click={modal.show}>
-    <Icon name="delete" />
-    Delete
-    {selectedRows.length}
-    row(s)
-  </TextButton>
-</div>
+<Button icon="Delete" size="s" type="overBackground" quiet on:click={modal.show}>
+  Delete
+  {selectedRows.length}
+  row(s)
+</Button>
 <ConfirmDialog
   bind:this={modal}
   okText="Delete"
diff --git a/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte
index 024905fddc..533d4c618c 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte
@@ -1,23 +1,15 @@
 <script>
-  import { TextButton as Button, Modal } from "@budibase/bbui"
+  import { Button, Modal } from "@budibase/bbui"
   import EditRolesModal from "../modals/EditRoles.svelte"
 
   let modal
 </script>
 
 <div>
-  <Button text small on:click={modal.show}>
-    <i class="ri-lock-line" />
+  <Button icon="UsersLock" type="overBackground" size="S" quiet on:click={modal.show}>
     Edit Roles
   </Button>
 </div>
 <Modal bind:this={modal}>
   <EditRolesModal />
 </Modal>
-
-<style>
-  i {
-    margin-right: var(--spacing-xs);
-    font-size: var(--font-size-s);
-  }
-</style>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
index f4e4fb34a8..fe383d99a3 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
@@ -1,6 +1,5 @@
 <script>
-  import { TextButton, Icon, Popover } from "@budibase/bbui"
-  import api from "builderStore/api"
+  import { Button, Icon, Popover } from "@budibase/bbui"
   import ExportPopover from "../popovers/ExportPopover.svelte"
 
   export let view
@@ -10,10 +9,9 @@
 </script>
 
 <div bind:this={anchor}>
-  <TextButton text small on:click={dropdown.show}>
-    <Icon name="download" />
+  <Button icon="Download" type="overBackground" size="S" quiet on:click={dropdown.show}>
     Export
-  </TextButton>
+  </Button>
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
   <ExportPopover {view} onClosed={dropdown.hide} />
diff --git a/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte
index 5c7efab369..cfe558a36d 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Popover, TextButton, Icon } from "@budibase/bbui"
+  import { Popover, Button, Icon } from "@budibase/bbui"
   import FilterPopover from "../popovers/FilterPopover.svelte"
 
   export let view = {}
@@ -9,14 +9,11 @@
 </script>
 
 <div bind:this={anchor}>
-  <TextButton
-    text
-    small
+  <Button icon="Filter" type="overBackground" size="S" quiet
     on:click={dropdown.show}
     active={view.filters && view.filters.length}>
-    <Icon name="filter" />
     Filter
-  </TextButton>
+  </Button>
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
   <FilterPopover {view} onClosed={dropdown.hide} />
diff --git a/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
index dbe88d8f1f..736369d2ae 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
@@ -9,8 +9,7 @@
 </script>
 
 <div bind:this={anchor}>
-  <TextButton text small active={!!view.groupBy} on:click={dropdown.show}>
-    <Icon name="group" />
+  <TextButton icon="Group" type="overBackground" size="S" quiet active={!!view.groupBy} on:click={dropdown.show}>
     Group By
   </TextButton>
 </div>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
index fc50bfbfef..891dc0feb8 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { TextButton } from "@budibase/bbui"
+  import { Button } from "@budibase/bbui"
 
   export let hideAutocolumns
 
@@ -12,12 +12,13 @@
 </script>
 
 <div bind:this={anchor}>
-  <TextButton text small on:click={hideOrUnhide}>
+  <Button icon="MagicWand" type="overBackground" size="S" quiet on:click={hideOrUnhide}>
     {#if hideAutocolumns}
-      <i class="ri-magic-line" />
       Show Auto Columns
-    {:else}<i class="ri-magic-fill" /> Hide Auto Columns{/if}
-  </TextButton>
+    {:else}
+      Hide Auto Columns
+    {/if}
+  </Button>
 </div>
 
 <style>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
index 6828976c51..426a4f962f 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { TextButton, Popover } from "@budibase/bbui"
+  import { Button, Popover } from "@budibase/bbui"
   import { permissions } from "stores/backend"
   import ManageAccessPopover from "../popovers/ManageAccessPopover.svelte"
 
@@ -16,10 +16,9 @@
 </script>
 
 <div bind:this={anchor}>
-  <TextButton text small on:click={openDropdown}>
-    <i class="ri-lock-line" />
+  <Button icon="LockClosed" type="overBackground" size="S" quiet on:click={openDropdown}>
     Manage Access
-  </TextButton>
+  </Button>
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
   <ManageAccessPopover
@@ -27,11 +26,4 @@
     levels={$permissions}
     permissions={resourcePermissions}
     onClosed={dropdown.hide} />
-</Popover>
-
-<style>
-  i {
-    margin-right: var(--spacing-xs);
-    font-size: var(--font-size-s);
-  }
-</style>
+</Popover>
\ No newline at end of file
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 055a0a693b..203d89b2b9 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -291,8 +291,8 @@
     {#if !uneditable && originalName != null}
       <TextButton text on:click={confirmDelete}>Delete Column</TextButton>
     {/if}
-    <Button secondary on:click={onClosed}>Cancel</Button>
-    <Button primary on:click={saveColumn} bind:disabled={invalid}>
+    <Button on:click={onClosed}>Cancel</Button>
+    <Button type="cta" on:click={saveColumn} bind:disabled={invalid}>
       Save Column
     </Button>
   </footer>
@@ -319,7 +319,6 @@
   .actions {
     display: grid;
     grid-gap: var(--spacing-xl);
-    min-width: 400px;
   }
 
   footer {
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte
index ed40244de5..1b72507b63 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte
@@ -56,7 +56,7 @@
 
   .integration-list {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat( auto-fit, minmax(150px, 1fr));
     grid-gap: var(--spacing-m);
   }
 
@@ -68,7 +68,6 @@
     transition: 0.3s all;
     border-radius: var(--border-radius-s);
     height: 75px;
-    width: 200px;
   }
 
   span {
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
index 27a058cd5d..42ebff0552 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
@@ -41,6 +41,7 @@
 
 <ModalContent
   title="Create Datasource"
+  size="large"
   confirmText="Create"
   onConfirm={saveDatasource}
   disabled={error || !name}>
diff --git a/packages/builder/src/pages/builder/index.svelte b/packages/builder/src/pages/builder/index.svelte
index 6b7670b426..7a04d3b927 100644
--- a/packages/builder/src/pages/builder/index.svelte
+++ b/packages/builder/src/pages/builder/index.svelte
@@ -76,7 +76,6 @@
 
   <AppList />
 </div>
-<div id="modal-container" />
 
 <Modal bind:this={modal} padding={false} width="600px" on:hide={closeModal}>
   <CreateAppModal {hasKey} {template} />
@@ -122,8 +121,4 @@
     display: flex;
     flex-direction: row;
   }
-
-  #modal-container {
-    position: absolute;
-  }
 </style>