Update style of generate automation button

packages/builder/src/components/backend/DataTable/buttons/grid/GridGenerateButton.svelte

@@ -1,20 +1,14 @@
 <script>
-  import {
-    ActionButton,
-    Popover,
-    Menu,
-    MenuItem,
-    notifications,
-  } from "@budibase/bbui"
+  import { ActionButton, Menu, MenuItem, notifications } from "@budibase/bbui"
   import { getContext } from "svelte"
   import { automationStore, tables, builderStore } from "stores/builder"
   import { TriggerStepID } from "constants/backend/automations"
   import { goto } from "@roxi/routify"
+  import DetailPopover from "components/common/DetailPopover.svelte"
 
   const { datasource } = getContext("grid")
 
   $: triggers = $automationStore.blockDefinitions.CREATABLE_TRIGGER
-
   $: table = $tables.list.find(table => table._id === $datasource.tableId)
 
   async function createAutomation(type) {
@@ -57,24 +51,12 @@
       notifications.error("Error creating automation")
     }
   }
-
-  let anchor
-  let open
 </script>
 
-<div bind:this={anchor}>
-  <ActionButton
-    icon="MagicWand"
-    quiet
-    size="M"
-    on:click={() => (open = !open)}
-    selected={open}
-  >
-    Generate
-  </ActionButton>
-</div>
-
-<Popover bind:open {anchor} align="left">
+<DetailPopover title="Generate">
+  <svelte:fragment slot="anchor" let:open>
+    <ActionButton icon="MagicWand" selected={open}>Generate</ActionButton>
+  </svelte:fragment>
   <Menu>
     <MenuItem
       icon="ShareAndroid"
@@ -95,7 +77,4 @@
       Automation: when row is updated
     </MenuItem>
   </Menu>
-</Popover>
-
-<style>
-</style>
+</DetailPopover>

packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte

@@ -1,7 +1,14 @@
 <script>
   import { PermissionSource } from "@budibase/types"
   import { roles, permissions as permissionsStore } from "stores/builder"
-  import { Label, Input, Select, notifications, Body } from "@budibase/bbui"
+  import {
+    Label,
+    Input,
+    Select,
+    notifications,
+    Body,
+    Icon,
+  } from "@budibase/bbui"
   import { capitalise } from "helpers"
   import { get } from "svelte/store"
 

packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/[viewId]/index.svelte

@@ -9,7 +9,7 @@
   import GridSortButton from "components/backend/DataTable/buttons/grid/GridSortButton.svelte"
   import GridColumnsSettingButton from "components/backend/DataTable/buttons/grid/GridColumnsSettingButton.svelte"
   import GridSizeButton from "components/backend/DataTable/buttons/grid/GridSizeButton.svelte"
-  import GridCreateAutomationButton from "components/backend/DataTable/buttons/grid/GridCreateAutomationButton.svelte"
+  import GridGenerateButton from "components/backend/DataTable/buttons/grid/GridGenerateButton.svelte"
 
   $: id = $viewsV2.selected?.id
   $: datasource = {
@@ -36,10 +36,12 @@
   <svelte:fragment slot="controls">
     <GridFilterButton />
     <GridSortButton />
+    <GridSizeButton />
     <GridColumnsSettingButton />
     <GridManageAccessButton />
-    <GridSizeButton />
-    <GridCreateAutomationButton />
+  </svelte:fragment>
+  <svelte:fragment slot="controls-right">
+    <GridGenerateButton />
   </svelte:fragment>
   <GridCreateEditRowModal />
 </Grid>

packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/index.svelte

@@ -2,11 +2,9 @@
   import { Banner } from "@budibase/bbui"
   import { datasources, tables, integrations, appStore } from "stores/builder"
   import { themeStore, admin } from "stores/portal"
-  import EditRolesButton from "components/backend/DataTable/buttons/EditRolesButton.svelte"
   import { TableNames } from "constants"
   import { Grid } from "@budibase/frontend-core"
   import { API } from "api"
-  import GridCreateAutomationButton from "components/backend/DataTable/buttons/grid/GridCreateAutomationButton.svelte"
   import GridAddColumnModal from "components/backend/DataTable/modals/grid/GridCreateColumnModal.svelte"
   import GridCreateEditRowModal from "components/backend/DataTable/modals/grid/GridCreateEditRowModal.svelte"
   import GridEditUserModal from "components/backend/DataTable/modals/grid/GridEditUserModal.svelte"
@@ -15,7 +13,8 @@
   import GridManageAccessButton from "components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte"
   import GridRelationshipButton from "components/backend/DataTable/buttons/grid/GridRelationshipButton.svelte"
   import GridEditColumnModal from "components/backend/DataTable/modals/grid/GridEditColumnModal.svelte"
-  import GridUsersTableButton from "components/backend/DataTable/modals/grid/GridUsersTableButton.svelte"
+  import GridUsersTableButton from "components/backend/DataTable/buttons/grid/GridUsersTableButton.svelte"
+  import GridGenerateButton from "components/backend/DataTable/buttons/grid/GridGenerateButton.svelte"
   import { DB_TYPE_EXTERNAL } from "constants/backend"
 
   const userSchemaOverrides = {
@@ -109,9 +108,6 @@
         <GridUsersTableButton />
       {/if}
       <GridManageAccessButton />
-      {#if !isUsersTable}
-        <GridCreateAutomationButton />
-      {/if}
       {#if relationshipsEnabled}
         <GridRelationshipButton />
       {/if}
@@ -121,6 +117,10 @@
       <GridExportButton />
     </svelte:fragment>
 
+    <svelte:fragment slot="controls-right">
+      <GridGenerateButton />
+    </svelte:fragment>
+
     <!-- Content for editing columns -->
     <svelte:fragment slot="edit-column">
       <GridEditColumnModal />

packages/frontend-core/src/components/grid/layout/Grid.svelte

@@ -147,6 +147,7 @@
         <slot name="controls" />
       </div>
       <div class="controls-right">
+        <slot name="controls-right" />
         {#if showAvatars}
           <UserAvatars />
         {/if}