From 3aca23e19831c916d82bf13b4c95cbee2d956a4c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 21 Aug 2024 09:47:52 +0100
Subject: [PATCH] Add initial work on screens button

---
 .../buttons/grid/GridAutomationsButton.svelte | 12 ++++++++
 .../grid/GridManageAccessButton.svelte        | 10 ++-----
 .../buttons/grid/GridRowActionsButton.svelte  | 12 ++++++++
 .../buttons/grid/GridScreensButton.svelte     | 29 +++++++++++++++++++
 .../components/common/DetailPopover.svelte    |  2 +-
 .../table/[tableId]/[viewId]/index.svelte     |  6 ++++
 .../data/table/[tableId]/index.svelte         |  4 +++
 7 files changed, 66 insertions(+), 9 deletions(-)
 create mode 100644 packages/builder/src/components/backend/DataTable/buttons/grid/GridAutomationsButton.svelte
 create mode 100644 packages/builder/src/components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte
 create mode 100644 packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte

diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridAutomationsButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridAutomationsButton.svelte
new file mode 100644
index 0000000000..d89bab0fc2
--- /dev/null
+++ b/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>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte
index 0cd008bab1..c5bc966332 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte
@@ -4,14 +4,8 @@
 
   const { datasource } = getContext("grid")
 
-  $: resourceId = getResourceID($datasource)
-
-  const getResourceID = datasource => {
-    if (!datasource) {
-      return null
-    }
-    return datasource.type === "table" ? datasource.tableId : datasource.id
-  }
+  $: ds = $datasource
+  $: resourceId = ds?.type === "table" ? ds.tableId : ds?.id
 </script>
 
 <ManageAccessButton {resourceId} />
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte
new file mode 100644
index 0000000000..8033f3b3d6
--- /dev/null
+++ b/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>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte
new file mode 100644
index 0000000000..ac2891a1df
--- /dev/null
+++ b/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>
diff --git a/packages/builder/src/components/common/DetailPopover.svelte b/packages/builder/src/components/common/DetailPopover.svelte
index d2d3c431c2..b3d856e1ea 100644
--- a/packages/builder/src/components/common/DetailPopover.svelte
+++ b/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 {
diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/[viewId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/[viewId]/index.svelte
index a2f490e4eb..e8adc5e031 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/[viewId]/index.svelte
+++ b/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 />
diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/index.svelte
index 72f4e87fad..2526caa203 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/index.svelte
+++ b/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}