Add initial work on screens button

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

@@ -0,0 +1,12 @@
+<script>
+  import { ActionButton } from "@budibase/bbui"
+  import DetailPopover from "components/common/DetailPopover.svelte"
+</script>
+
+<DetailPopover title="Automations">
+  <svelte:fragment slot="anchor" let:open>
+    <ActionButton icon="JourneyVoyager" selected={open} quiet>
+      Automations
+    </ActionButton>
+  </svelte:fragment>
+</DetailPopover>

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

@@ -4,14 +4,8 @@
 
   const { datasource } = getContext("grid")
 
-  $: resourceId = getResourceID($datasource)
+  $: ds = $datasource
-
+  $: resourceId = ds?.type === "table" ? ds.tableId : ds?.id
-  const getResourceID = datasource => {
-    if (!datasource) {
-      return null
-    }
-    return datasource.type === "table" ? datasource.tableId : datasource.id
-  }
 </script>
 
 <ManageAccessButton {resourceId} />

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

@@ -0,0 +1,12 @@
+<script>
+  import { ActionButton } from "@budibase/bbui"
+  import DetailPopover from "components/common/DetailPopover.svelte"
+</script>
+
+<DetailPopover title="Row Actions">
+  <svelte:fragment slot="anchor" let:open>
+    <ActionButton icon="Engagement" selected={open} quiet>
+      Row Actions
+    </ActionButton>
+  </svelte:fragment>
+</DetailPopover>

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

@@ -0,0 +1,29 @@
+<script>
+  import { ActionButton } from "@budibase/bbui"
+  import DetailPopover from "components/common/DetailPopover.svelte"
+  import { screenStore } from "stores/builder"
+  import { getContext } from "svelte"
+
+  const { datasource } = getContext("grid")
+
+  $: ds = $datasource
+  $: resourceId = ds?.type === "table" ? ds.tableId : ds?.id
+  $: connectedScreens = findConnectedScreens($screenStore.screens, resourceId)
+
+  const findConnectedScreens = (screens, resourceId) => {
+    console.log(resourceId)
+    return screens.filter(screen => {
+      return JSON.stringify(screen).includes(`"${resourceId}"`)
+    })
+  }
+
+  $: console.log(connectedScreens)
+</script>
+
+<DetailPopover title="Screens">
+  <svelte:fragment slot="anchor" let:open>
+    <ActionButton icon="WebPage" selected={open} quiet>Screens</ActionButton>
+  </svelte:fragment>
+  The following screens are connected to this data:
+  {connectedScreens.map(screen => screen.routing.route)}
+</DetailPopover>

packages/builder/src/components/common/DetailPopover.svelte

@@ -34,7 +34,7 @@
 
 <style>
   .detail-popover {
-    --padding: 12px;
+    --padding: var(--spacing-l);
     background-color: var(--spectrum-alias-background-color-primary);
   }
   .detail-popover__header {

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

@@ -10,6 +10,9 @@
   import GridColumnsSettingButton from "components/backend/DataTable/buttons/grid/GridColumnsSettingButton.svelte"
   import GridSizeButton from "components/backend/DataTable/buttons/grid/GridSizeButton.svelte"
   import GridGenerateButton from "components/backend/DataTable/buttons/grid/GridGenerateButton.svelte"
+  import GridScreensButton from "components/backend/DataTable/buttons/grid/GridScreensButton.svelte"
+  import GridRowActionsButton from "components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte"
+  import GridAutomationsButton from "components/backend/DataTable/buttons/grid/GridAutomationsButton.svelte"
 
   $: id = $viewsV2.selected?.id
   $: datasource = {
@@ -39,6 +42,9 @@
     <GridSizeButton />
     <GridColumnsSettingButton />
     <GridManageAccessButton />
+    <GridRowActionsButton />
+    <GridAutomationsButton />
+    <GridScreensButton />
   </svelte:fragment>
   <svelte:fragment slot="controls-right">
     <GridGenerateButton />

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

@@ -15,6 +15,8 @@
   import GridEditColumnModal from "components/backend/DataTable/modals/grid/GridEditColumnModal.svelte"
   import GridUsersTableButton from "components/backend/DataTable/buttons/grid/GridUsersTableButton.svelte"
   import GridGenerateButton from "components/backend/DataTable/buttons/grid/GridGenerateButton.svelte"
+  import GridScreensButton from "components/backend/DataTable/buttons/grid/GridScreensButton.svelte"
+  import GridRowActionsButton from "components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte"
   import { DB_TYPE_EXTERNAL } from "constants/backend"
 
   const userSchemaOverrides = {
@@ -111,6 +113,8 @@
       {#if relationshipsEnabled}
         <GridRelationshipButton />
       {/if}
+      <GridRowActionsButton />
+      <GridScreensButton />
       {#if !isUsersTable}
         <GridImportButton />
       {/if}