From 46bf5ed843f72c559b3a97f5c58527a8c1983969 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 4 Feb 2025 13:30:44 +0000
Subject: [PATCH 1/8] ui for viewing queries linked to screens

---
 .../integration/ConnectedQueryScreens.svelte  | 91 +++++++++++++++++++
 .../components/integration/QueryViewer.svelte | 19 ++++
 .../integration/RestQueryViewer.svelte        | 25 ++++-
 3 files changed, 132 insertions(+), 3 deletions(-)
 create mode 100644 packages/builder/src/components/integration/ConnectedQueryScreens.svelte

diff --git a/packages/builder/src/components/integration/ConnectedQueryScreens.svelte b/packages/builder/src/components/integration/ConnectedQueryScreens.svelte
new file mode 100644
index 0000000000..9b87b8874a
--- /dev/null
+++ b/packages/builder/src/components/integration/ConnectedQueryScreens.svelte
@@ -0,0 +1,91 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+
+  let screens = ["screen1", "screen2", "screen3", "screen4", "screen5"]
+</script>
+
+<div class="screens-popover">
+  <header>
+    <h3>Screens</h3>
+    <button class="close-button">
+      <Icon name="Close" />
+    </button>
+  </header>
+  <p class="description">The following screens are connected to this data.</p>
+  <div class="screen-list">
+    {#each screens as screen}
+      <button class="screen-item">
+        <span>/{screen}</span>
+        <Icon name="ChevronRight" />
+      </button>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .screens-popover {
+    min-width: 320px;
+    padding: var(--spacing-m);
+    background: var(--background-dark);
+    color: var(--white);
+    border-radius: var(--border-radius-m);
+  }
+
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--spacing-m);
+  }
+
+  h3 {
+    margin: 0;
+    font-size: var(--font-size-m);
+    font-weight: 500;
+  }
+
+  .close-button {
+    background: none;
+    border: none;
+    padding: 0;
+    color: var(--white);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+
+  .description {
+    margin: 0 0 var(--spacing-m) 0;
+    font-size: var(--font-size-s);
+    color: var(--grey-4);
+  }
+
+  .screen-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+  }
+
+  .screen-item {
+    width: 100%;
+    padding: var(--spacing-m);
+    background: var(--grey-9);
+    border: none;
+    border-radius: var(--border-radius-s);
+    color: var(--white);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    text-align: left;
+  }
+
+  .screen-item:hover {
+    background: var(--grey-8);
+  }
+
+  .screen-item :global(.icon) {
+    color: var(--grey-5);
+  }
+</style>
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index 0f2ed24177..f5eeba2e81 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -11,6 +11,8 @@
     Body,
     Divider,
     Button,
+    ActionButton,
+    Popover,
   } from "@budibase/bbui"
   import { capitalise } from "@/helpers"
   import AccessLevelSelect from "./AccessLevelSelect.svelte"
@@ -23,6 +25,7 @@
   import ExtraQueryConfig from "./ExtraQueryConfig.svelte"
   import QueryViewerSavePromptModal from "./QueryViewerSavePromptModal.svelte"
   import { Utils } from "@budibase/frontend-core"
+  import ConnectedQueryScreens from "./ConnectedQueryScreens.svelte"
 
   export let query
   let queryHash
@@ -44,6 +47,9 @@
   let rows = []
   let keys = {}
 
+  let popover
+  let anchor
+
   const parseQuery = query => {
     modified = false
 
@@ -170,6 +176,13 @@
         </Body>
       </div>
       <div class="controls">
+        <span bind:this={anchor}>
+          <ActionButton
+            icon="DeviceDesktop"
+            quiet
+            on:click={() => popover.show()}>Screens</ActionButton
+          >
+        </span>
         <Button disabled={loading} on:click={runQuery} overBackground>
           <Icon size="S" name="Play" />
           Run query</Button
@@ -322,6 +335,10 @@
   </div>
 </div>
 
+<Popover bind:this={popover} {anchor}>
+  <ConnectedQueryScreens />
+</Popover>
+
 <style>
   .unsaved {
     color: var(--grey-5);
@@ -384,6 +401,8 @@
   }
 
   .controls {
+    display: flex;
+    align-items: center;
     flex-shrink: 0;
   }
 
diff --git a/packages/builder/src/components/integration/RestQueryViewer.svelte b/packages/builder/src/components/integration/RestQueryViewer.svelte
index 8468bf7017..cf3c53627d 100644
--- a/packages/builder/src/components/integration/RestQueryViewer.svelte
+++ b/packages/builder/src/components/integration/RestQueryViewer.svelte
@@ -18,6 +18,8 @@
     Table,
     Tabs,
     TextArea,
+    ActionButton,
+    Popover,
   } from "@budibase/bbui"
   import KeyValueBuilder from "@/components/integration/KeyValueBuilder.svelte"
   import EditableLabel from "@/components/common/inputs/EditableLabel.svelte"
@@ -49,6 +51,7 @@
     runtimeToReadableMap,
     toBindingsArray,
   } from "@/dataBinding"
+  import ConnectedQueryScreens from "./ConnectedQueryScreens.svelte"
 
   export let queryId
 
@@ -61,6 +64,8 @@
   let dynamicVariables, addVariableModal, varBinding, globalDynamicBindings
   let restBindings = getRestBindings()
   let nestedSchemaFields = {}
+  let anchor
+  let popover
 
   $: staticVariables = datasource?.config?.staticVariables || {}
 
@@ -502,9 +507,19 @@
             on:change={() => (query.flags.urlName = false)}
             on:save={saveQuery}
           />
-          <div class="access">
-            <Label>Access</Label>
-            <AccessLevelSelect {query} {saveId} />
+          <div
+            bind:this={anchor}
+            style="display: flex; align-items: center; gap: var(--spacing-m);"
+          >
+            <ActionButton
+              icon="DeviceDesktop"
+              quiet
+              on:click={() => popover.show()}>Screens</ActionButton
+            >
+            <div class="access">
+              <Label>Access</Label>
+              <AccessLevelSelect {query} {saveId} />
+            </div>
           </div>
         </div>
         <div class="url-block">
@@ -771,6 +786,10 @@
   </div>
 {/if}
 
+<Popover bind:this={popover} {anchor}>
+  <ConnectedQueryScreens />
+</Popover>
+
 <style>
   .inner {
     width: 960px;

From 1051faef1d79e4e1b92a42443914fe6e433bfc46 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 4 Feb 2025 15:44:43 +0000
Subject: [PATCH 2/8] pull in query usage

---
 packages/bbui/src/List/ListItem.svelte        |  18 +--
 .../components/common/DetailPopover.svelte    |  17 +--
 .../integration/ConnectedQueryScreens.svelte  | 131 +++++++-----------
 .../components/integration/QueryViewer.svelte |  17 +--
 .../integration/RestQueryViewer.svelte        |  25 ++--
 packages/types/src/ui/components/index.ts     |   1 +
 packages/types/src/ui/components/popover.ts   |   6 +
 7 files changed, 87 insertions(+), 128 deletions(-)
 create mode 100644 packages/types/src/ui/components/popover.ts

diff --git a/packages/bbui/src/List/ListItem.svelte b/packages/bbui/src/List/ListItem.svelte
index e979b2b684..87deb2eb86 100644
--- a/packages/bbui/src/List/ListItem.svelte
+++ b/packages/bbui/src/List/ListItem.svelte
@@ -1,15 +1,15 @@
-<script>
+<script lang="ts">
   import Icon from "../Icon/Icon.svelte"
   import StatusLight from "../StatusLight/StatusLight.svelte"
 
-  export let icon = null
-  export let iconColor = null
-  export let title = null
-  export let subtitle = null
-  export let url = null
-  export let hoverable = false
-  export let showArrow = false
-  export let selected = false
+  export let icon: string | null = null
+  export let iconColor: string | null = null
+  export let title: string | null = null
+  export let subtitle: string | null = null
+  export let url: string | null = null
+  export let hoverable: boolean = false
+  export let showArrow: boolean = false
+  export let selected: boolean = false
 </script>
 
 <a
diff --git a/packages/builder/src/components/common/DetailPopover.svelte b/packages/builder/src/components/common/DetailPopover.svelte
index f1e81a6340..257e654a53 100644
--- a/packages/builder/src/components/common/DetailPopover.svelte
+++ b/packages/builder/src/components/common/DetailPopover.svelte
@@ -1,14 +1,15 @@
-<script>
+<script lang="ts">
   import { Popover, Icon } from "@budibase/bbui"
+  import { PopoverAlign } from "@budibase/types"
 
-  export let title
-  export let align = "left"
-  export let showPopover
-  export let width
+  export let title: string = ""
+  export let align: PopoverAlign = PopoverAlign.Left
+  export let showPopover: boolean = true
+  export let width: number = 400
 
-  let popover
-  let anchor
-  let open
+  let popover: any
+  let anchor: HTMLElement
+  let open: boolean
 
   export const show = () => popover?.show()
   export const hide = () => popover?.hide()
diff --git a/packages/builder/src/components/integration/ConnectedQueryScreens.svelte b/packages/builder/src/components/integration/ConnectedQueryScreens.svelte
index 9b87b8874a..e97017df96 100644
--- a/packages/builder/src/components/integration/ConnectedQueryScreens.svelte
+++ b/packages/builder/src/components/integration/ConnectedQueryScreens.svelte
@@ -1,91 +1,66 @@
-<script>
-  import { Icon } from "@budibase/bbui"
+<script lang="ts">
+  import { onMount } from "svelte"
+  import { List, ListItem, ActionButton } from "@budibase/bbui"
+  import DetailPopover from "@/components/common/DetailPopover.svelte"
+  import { appStore, screenStore } from "@/stores/builder"
+  import type { ScreenUsage } from "@budibase/types"
+  import { PopoverAlign } from "@budibase/types"
 
-  let screens = ["screen1", "screen2", "screen3", "screen4", "screen5"]
+  export let sourceId: string
+
+  let screens: ScreenUsage[] = []
+  let popover: any
+
+  export function show() {
+    popover?.show()
+  }
+
+  export function hide() {
+    popover?.hide()
+  }
+
+  onMount(async () => {
+    let response = await screenStore.usageOfScreens(sourceId)
+    screens = response?.screens
+  })
 </script>
 
-<div class="screens-popover">
-  <header>
-    <h3>Screens</h3>
-    <button class="close-button">
-      <Icon name="Close" />
-    </button>
-  </header>
-  <p class="description">The following screens are connected to this data.</p>
-  <div class="screen-list">
-    {#each screens as screen}
-      <button class="screen-item">
-        <span>/{screen}</span>
-        <Icon name="ChevronRight" />
-      </button>
-    {/each}
-  </div>
-</div>
+<DetailPopover title="Screens" bind:this={popover} align={PopoverAlign.Left}>
+  <svelte:fragment slot="anchor" let:open>
+    <ActionButton icon="DeviceDesktop" quiet selected={open} on:click={show}>
+      Screens
+    </ActionButton>
+  </svelte:fragment>
+
+  {#if !screens.length}
+    <div class="empty-state">
+      <p>No screens are using this data.</p>
+    </div>
+  {:else}
+    <p class="description">The following screens are connected to this data.</p>
+
+    <List>
+      {#each screens as screen}
+        <ListItem
+          title={screen.url}
+          url={`/builder/app/${$appStore.appId}/design/${screen._id}`}
+          showArrow
+        />
+      {/each}
+    </List>
+  {/if}
+</DetailPopover>
 
 <style>
-  .screens-popover {
-    min-width: 320px;
-    padding: var(--spacing-m);
-    background: var(--background-dark);
-    color: var(--white);
-    border-radius: var(--border-radius-m);
-  }
-
-  header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: var(--spacing-m);
-  }
-
-  h3 {
-    margin: 0;
-    font-size: var(--font-size-m);
-    font-weight: 500;
-  }
-
-  .close-button {
-    background: none;
-    border: none;
-    padding: 0;
-    color: var(--white);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-  }
-
   .description {
-    margin: 0 0 var(--spacing-m) 0;
     font-size: var(--font-size-s);
-    color: var(--grey-4);
+    margin: 0 0 var(--spacing-xs) 0;
   }
 
-  .screen-list {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-xs);
-  }
-
-  .screen-item {
-    width: 100%;
+  .empty-state {
     padding: var(--spacing-m);
-    background: var(--grey-9);
-    border: none;
-    border-radius: var(--border-radius-s);
-    color: var(--white);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-    transition: background-color 0.2s;
-    text-align: left;
-  }
-
-  .screen-item:hover {
-    background: var(--grey-8);
-  }
-
-  .screen-item :global(.icon) {
+    text-align: center;
     color: var(--grey-5);
+    font-size: var(--font-size-s);
   }
 </style>
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index f5eeba2e81..7a1410e53e 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -11,8 +11,6 @@
     Body,
     Divider,
     Button,
-    ActionButton,
-    Popover,
   } from "@budibase/bbui"
   import { capitalise } from "@/helpers"
   import AccessLevelSelect from "./AccessLevelSelect.svelte"
@@ -47,9 +45,6 @@
   let rows = []
   let keys = {}
 
-  let popover
-  let anchor
-
   const parseQuery = query => {
     modified = false
 
@@ -176,13 +171,7 @@
         </Body>
       </div>
       <div class="controls">
-        <span bind:this={anchor}>
-          <ActionButton
-            icon="DeviceDesktop"
-            quiet
-            on:click={() => popover.show()}>Screens</ActionButton
-          >
-        </span>
+        <ConnectedQueryScreens sourceId={query._id} />
         <Button disabled={loading} on:click={runQuery} overBackground>
           <Icon size="S" name="Play" />
           Run query</Button
@@ -335,10 +324,6 @@
   </div>
 </div>
 
-<Popover bind:this={popover} {anchor}>
-  <ConnectedQueryScreens />
-</Popover>
-
 <style>
   .unsaved {
     color: var(--grey-5);
diff --git a/packages/builder/src/components/integration/RestQueryViewer.svelte b/packages/builder/src/components/integration/RestQueryViewer.svelte
index cf3c53627d..7bb5022f3c 100644
--- a/packages/builder/src/components/integration/RestQueryViewer.svelte
+++ b/packages/builder/src/components/integration/RestQueryViewer.svelte
@@ -18,8 +18,6 @@
     Table,
     Tabs,
     TextArea,
-    ActionButton,
-    Popover,
   } from "@budibase/bbui"
   import KeyValueBuilder from "@/components/integration/KeyValueBuilder.svelte"
   import EditableLabel from "@/components/common/inputs/EditableLabel.svelte"
@@ -64,8 +62,6 @@
   let dynamicVariables, addVariableModal, varBinding, globalDynamicBindings
   let restBindings = getRestBindings()
   let nestedSchemaFields = {}
-  let anchor
-  let popover
 
   $: staticVariables = datasource?.config?.staticVariables || {}
 
@@ -507,15 +503,8 @@
             on:change={() => (query.flags.urlName = false)}
             on:save={saveQuery}
           />
-          <div
-            bind:this={anchor}
-            style="display: flex; align-items: center; gap: var(--spacing-m);"
-          >
-            <ActionButton
-              icon="DeviceDesktop"
-              quiet
-              on:click={() => popover.show()}>Screens</ActionButton
-            >
+          <div class="controls">
+            <ConnectedQueryScreens sourceId={query._id} />
             <div class="access">
               <Label>Access</Label>
               <AccessLevelSelect {query} {saveId} />
@@ -786,10 +775,6 @@
   </div>
 {/if}
 
-<Popover bind:this={popover} {anchor}>
-  <ConnectedQueryScreens />
-</Popover>
-
 <style>
   .inner {
     width: 960px;
@@ -844,6 +829,12 @@
     justify-content: space-between;
   }
 
+  .controls {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+
   .access {
     display: flex;
     gap: var(--spacing-m);
diff --git a/packages/types/src/ui/components/index.ts b/packages/types/src/ui/components/index.ts
index 8dc1638f8c..ff2f0c6907 100644
--- a/packages/types/src/ui/components/index.ts
+++ b/packages/types/src/ui/components/index.ts
@@ -1,2 +1,3 @@
 export * from "./sidepanel"
 export * from "./codeEditor"
+export * from "./popover"
diff --git a/packages/types/src/ui/components/popover.ts b/packages/types/src/ui/components/popover.ts
new file mode 100644
index 0000000000..465e514647
--- /dev/null
+++ b/packages/types/src/ui/components/popover.ts
@@ -0,0 +1,6 @@
+export enum PopoverAlign {
+  Left = "left",
+  Right = "right",
+  LeftOutside = "left-outside",
+  RightOutside = "right-outside",
+}

From bdb9cbb6ad5df82e785cdd39a184acb0a1ea2510 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 5 Feb 2025 08:55:44 +0000
Subject: [PATCH 3/8] properly reuse files

---
 .../buttons/grid/GridScreensButton.svelte     | 65 ++++++++---------
 .../components/common/ScreensPopover.svelte   | 70 +++++++++++++++++++
 .../integration/ConnectedQueryScreens.svelte  | 53 +++-----------
 3 files changed, 108 insertions(+), 80 deletions(-)
 create mode 100644 packages/builder/src/components/common/ScreensPopover.svelte

diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte
index b2edb52725..f3a119b456 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte
@@ -1,20 +1,29 @@
-<script>
-  import { ActionButton, List, ListItem, Button } from "@budibase/bbui"
-  import DetailPopover from "@/components/common/DetailPopover.svelte"
-  import { screenStore, appStore } from "@/stores/builder"
+<script lang="ts">
+  import { Button } from "@budibase/bbui"
+  import ScreensPopover from "@/components/common/ScreensPopover.svelte"
+  import { screenStore } from "@/stores/builder"
   import { getContext, createEventDispatcher } from "svelte"
-
-  const { datasource } = getContext("grid")
+  import type { Screen, ScreenUsage } from "@budibase/types"
   const dispatch = createEventDispatcher()
 
-  let popover
+  const { datasource }: { datasource: any } = getContext("grid")
+
+  let popover: any
 
   $: ds = $datasource
   $: resourceId = ds?.type === "table" ? ds.tableId : ds?.id
   $: connectedScreens = findConnectedScreens($screenStore.screens, resourceId)
-  $: screenCount = connectedScreens.length
+  $: screenUsage = connectedScreens.map(
+    (screen: Screen): ScreenUsage => ({
+      url: screen.routing?.route,
+      _id: screen._id!,
+    })
+  )
 
-  const findConnectedScreens = (screens, resourceId) => {
+  const findConnectedScreens = (
+    screens: Screen[],
+    resourceId: string
+  ): Screen[] => {
     return screens.filter(screen => {
       return JSON.stringify(screen).includes(`"${resourceId}"`)
     })
@@ -26,34 +35,16 @@
   }
 </script>
 
-<DetailPopover title="Screens" bind:this={popover}>
-  <svelte:fragment slot="anchor" let:open>
-    <ActionButton
-      icon="WebPage"
-      selected={open || screenCount}
-      quiet
-      accentColor="#364800"
-    >
-      Screens{screenCount ? `: ${screenCount}` : ""}
-    </ActionButton>
-  </svelte:fragment>
-  {#if !connectedScreens.length}
-    There aren't any screens connected to this data.
-  {:else}
-    The following screens are connected to this data.
-    <List>
-      {#each connectedScreens as screen}
-        <ListItem
-          title={screen.routing.route}
-          url={`/builder/app/${$appStore.appId}/design/${screen._id}`}
-          showArrow
-        />
-      {/each}
-    </List>
-  {/if}
-  <div>
+<ScreensPopover
+  bind:this={popover}
+  screens={screenUsage}
+  icon="WebPage"
+  accentColor="#364800"
+  showCount
+>
+  <svelte:fragment slot="footer">
     <Button secondary icon="WebPage" on:click={generateScreen}>
       Generate app screen
     </Button>
-  </div>
-</DetailPopover>
+  </svelte:fragment>
+</ScreensPopover>
diff --git a/packages/builder/src/components/common/ScreensPopover.svelte b/packages/builder/src/components/common/ScreensPopover.svelte
new file mode 100644
index 0000000000..7e45d591d2
--- /dev/null
+++ b/packages/builder/src/components/common/ScreensPopover.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+  import { List, ListItem, ActionButton } from "@budibase/bbui"
+  import DetailPopover from "@/components/common/DetailPopover.svelte"
+  import { appStore } from "@/stores/builder"
+  import type { ScreenUsage } from "@budibase/types"
+  import { PopoverAlign } from "@budibase/types"
+
+  export let screens: ScreenUsage[] = []
+  export let icon = "DeviceDesktop"
+  export let accentColor: string | undefined = undefined
+  export let showCount = false
+  export let align = PopoverAlign.Left
+
+  let popover: any
+
+  export function show() {
+    popover?.show()
+  }
+
+  export function hide() {
+    popover?.hide()
+  }
+</script>
+
+<DetailPopover title="Screens" bind:this={popover} {align}>
+  <svelte:fragment slot="anchor" let:open>
+    <ActionButton
+      {icon}
+      quiet
+      selected={open || (showCount && screens.length)}
+      {accentColor}
+      on:click={show}
+    >
+      Screens{showCount && screens.length ? `: ${screens.length}` : ""}
+    </ActionButton>
+  </svelte:fragment>
+
+  {#if !screens.length}
+    <div class="empty-state">
+      <p>No screens are using this data.</p>
+    </div>
+  {:else}
+    <p class="description">The following screens are connected to this data.</p>
+    <List>
+      {#each screens as screen}
+        <ListItem
+          title={screen.url}
+          url={`/builder/app/${$appStore.appId}/design/${screen._id}`}
+          showArrow
+        />
+      {/each}
+    </List>
+  {/if}
+
+  <slot name="footer" />
+</DetailPopover>
+
+<style>
+  .description {
+    font-size: var(--font-size-s);
+    margin: 0 0 var(--spacing-xs) 0;
+  }
+
+  .empty-state {
+    padding: var(--spacing-m);
+    text-align: center;
+    color: var(--grey-5);
+    font-size: var(--font-size-s);
+  }
+</style>
diff --git a/packages/builder/src/components/integration/ConnectedQueryScreens.svelte b/packages/builder/src/components/integration/ConnectedQueryScreens.svelte
index e97017df96..2a24088dc4 100644
--- a/packages/builder/src/components/integration/ConnectedQueryScreens.svelte
+++ b/packages/builder/src/components/integration/ConnectedQueryScreens.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
   import { onMount } from "svelte"
-  import { List, ListItem, ActionButton } from "@budibase/bbui"
-  import DetailPopover from "@/components/common/DetailPopover.svelte"
-  import { appStore, screenStore } from "@/stores/builder"
+
+  import { screenStore } from "@/stores/builder"
+  import ScreensPopover from "@/components/common/ScreensPopover.svelte"
   import type { ScreenUsage } from "@budibase/types"
-  import { PopoverAlign } from "@budibase/types"
 
   export let sourceId: string
 
@@ -25,42 +24,10 @@
   })
 </script>
 
-<DetailPopover title="Screens" bind:this={popover} align={PopoverAlign.Left}>
-  <svelte:fragment slot="anchor" let:open>
-    <ActionButton icon="DeviceDesktop" quiet selected={open} on:click={show}>
-      Screens
-    </ActionButton>
-  </svelte:fragment>
-
-  {#if !screens.length}
-    <div class="empty-state">
-      <p>No screens are using this data.</p>
-    </div>
-  {:else}
-    <p class="description">The following screens are connected to this data.</p>
-
-    <List>
-      {#each screens as screen}
-        <ListItem
-          title={screen.url}
-          url={`/builder/app/${$appStore.appId}/design/${screen._id}`}
-          showArrow
-        />
-      {/each}
-    </List>
-  {/if}
-</DetailPopover>
-
-<style>
-  .description {
-    font-size: var(--font-size-s);
-    margin: 0 0 var(--spacing-xs) 0;
-  }
-
-  .empty-state {
-    padding: var(--spacing-m);
-    text-align: center;
-    color: var(--grey-5);
-    font-size: var(--font-size-s);
-  }
-</style>
+<ScreensPopover
+  bind:this={popover}
+  {screens}
+  icon="WebPage"
+  accentColor="#364800"
+  showCount
+/>

From 48990ca2dead607bdd836cbff2c1594750231bc2 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 5 Feb 2025 09:43:38 +0000
Subject: [PATCH 4/8] revert text change

---
 .../components/common/ScreensPopover.svelte   | 20 ++-----------------
 1 file changed, 2 insertions(+), 18 deletions(-)

diff --git a/packages/builder/src/components/common/ScreensPopover.svelte b/packages/builder/src/components/common/ScreensPopover.svelte
index 7e45d591d2..d6ae461590 100644
--- a/packages/builder/src/components/common/ScreensPopover.svelte
+++ b/packages/builder/src/components/common/ScreensPopover.svelte
@@ -36,11 +36,9 @@
   </svelte:fragment>
 
   {#if !screens.length}
-    <div class="empty-state">
-      <p>No screens are using this data.</p>
-    </div>
+    There aren't any screens connected to this data.
   {:else}
-    <p class="description">The following screens are connected to this data.</p>
+    The following screens are connected to this data.
     <List>
       {#each screens as screen}
         <ListItem
@@ -54,17 +52,3 @@
 
   <slot name="footer" />
 </DetailPopover>
-
-<style>
-  .description {
-    font-size: var(--font-size-s);
-    margin: 0 0 var(--spacing-xs) 0;
-  }
-
-  .empty-state {
-    padding: var(--spacing-m);
-    text-align: center;
-    color: var(--grey-5);
-    font-size: var(--font-size-s);
-  }
-</style>

From 2995961fd44c9085a7064fb6604a7e5938cd8757 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Fri, 7 Feb 2025 15:05:50 +0000
Subject: [PATCH 5/8] delete unneeded popover type

---
 packages/types/src/ui/components/popover.ts | 6 ------
 1 file changed, 6 deletions(-)
 delete mode 100644 packages/types/src/ui/components/popover.ts

diff --git a/packages/types/src/ui/components/popover.ts b/packages/types/src/ui/components/popover.ts
deleted file mode 100644
index 465e514647..0000000000
--- a/packages/types/src/ui/components/popover.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export enum PopoverAlign {
-  Left = "left",
-  Right = "right",
-  LeftOutside = "left-outside",
-  RightOutside = "right-outside",
-}

From feaaa173688693929ab6ffba34c76566cb2a99d7 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Fri, 7 Feb 2025 15:12:28 +0000
Subject: [PATCH 6/8] unused import

---
 .../src/components/common/ScreensPopover.svelte        | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/common/ScreensPopover.svelte b/packages/builder/src/components/common/ScreensPopover.svelte
index d6ae461590..0c4d9d47b7 100644
--- a/packages/builder/src/components/common/ScreensPopover.svelte
+++ b/packages/builder/src/components/common/ScreensPopover.svelte
@@ -1,15 +1,19 @@
 <script lang="ts">
-  import { List, ListItem, ActionButton } from "@budibase/bbui"
+  import {
+    List,
+    ListItem,
+    ActionButton,
+    PopoverAlignment,
+  } from "@budibase/bbui"
   import DetailPopover from "@/components/common/DetailPopover.svelte"
   import { appStore } from "@/stores/builder"
   import type { ScreenUsage } from "@budibase/types"
-  import { PopoverAlign } from "@budibase/types"
 
   export let screens: ScreenUsage[] = []
   export let icon = "DeviceDesktop"
   export let accentColor: string | undefined = undefined
   export let showCount = false
-  export let align = PopoverAlign.Left
+  export let align = PopoverAlignment.Left
 
   let popover: any
 

From aa63e886995dd653f7444768779bfc175dac974e Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Fri, 7 Feb 2025 15:32:24 +0000
Subject: [PATCH 7/8] some type fixes

---
 .../bbui/src/ActionButton/ActionButton.svelte | 22 +++++++++----------
 packages/bbui/src/List/ListItem.svelte        | 10 ++++-----
 .../components/common/ScreensPopover.svelte   |  4 ++--
 .../integration/ConnectedQueryScreens.svelte  |  2 +-
 4 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
index 2401354fbb..d9c7a27fa1 100644
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@@ -1,19 +1,19 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/actionbutton/dist/index-vars.css"
   import Tooltip from "../Tooltip/Tooltip.svelte"
   import { fade } from "svelte/transition"
   import { hexToRGBA } from "../helpers"
 
-  export let quiet = false
-  export let selected = false
-  export let disabled = false
-  export let icon = ""
-  export let size = "M"
-  export let active = false
-  export let fullWidth = false
-  export let noPadding = false
-  export let tooltip = ""
-  export let accentColor = null
+  export let quiet: boolean = false
+  export let selected: boolean = false
+  export let disabled: boolean = false
+  export let icon: string = ""
+  export let size: "S" | "M" | "L" = "M"
+  export let active: boolean = false
+  export let fullWidth: boolean = false
+  export let noPadding: boolean = false
+  export let tooltip: string = ""
+  export let accentColor: string | null = null
 
   let showTooltip = false
 
diff --git a/packages/bbui/src/List/ListItem.svelte b/packages/bbui/src/List/ListItem.svelte
index 87deb2eb86..3cd04bb987 100644
--- a/packages/bbui/src/List/ListItem.svelte
+++ b/packages/bbui/src/List/ListItem.svelte
@@ -2,11 +2,11 @@
   import Icon from "../Icon/Icon.svelte"
   import StatusLight from "../StatusLight/StatusLight.svelte"
 
-  export let icon: string | null = null
-  export let iconColor: string | null = null
-  export let title: string | null = null
-  export let subtitle: string | null = null
-  export let url: string | null = null
+  export let icon: string | undefined = undefined
+  export let iconColor: string | undefined = undefined
+  export let title: string | undefined = undefined
+  export let subtitle: string | undefined = undefined
+  export let url: string | undefined = undefined
   export let hoverable: boolean = false
   export let showArrow: boolean = false
   export let selected: boolean = false
diff --git a/packages/builder/src/components/common/ScreensPopover.svelte b/packages/builder/src/components/common/ScreensPopover.svelte
index 0c4d9d47b7..2fcb86f991 100644
--- a/packages/builder/src/components/common/ScreensPopover.svelte
+++ b/packages/builder/src/components/common/ScreensPopover.svelte
@@ -11,7 +11,7 @@
 
   export let screens: ScreenUsage[] = []
   export let icon = "DeviceDesktop"
-  export let accentColor: string | undefined = undefined
+  export let accentColor: string | null | undefined = null
   export let showCount = false
   export let align = PopoverAlignment.Left
 
@@ -31,7 +31,7 @@
     <ActionButton
       {icon}
       quiet
-      selected={open || (showCount && screens.length)}
+      selected={open || !!(showCount && screens.length)}
       {accentColor}
       on:click={show}
     >
diff --git a/packages/builder/src/components/integration/ConnectedQueryScreens.svelte b/packages/builder/src/components/integration/ConnectedQueryScreens.svelte
index 2a24088dc4..e7f3412964 100644
--- a/packages/builder/src/components/integration/ConnectedQueryScreens.svelte
+++ b/packages/builder/src/components/integration/ConnectedQueryScreens.svelte
@@ -19,7 +19,7 @@
   }
 
   onMount(async () => {
-    let response = await screenStore.usageOfScreens(sourceId)
+    let response = await screenStore.usageInScreens(sourceId)
     screens = response?.screens
   })
 </script>

From 2cd2c30c1dd093f3c213781640a970953b092ad0 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Fri, 7 Feb 2025 15:55:43 +0000
Subject: [PATCH 8/8] types

---
 packages/bbui/src/ActionButton/ActionButton.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
index d9c7a27fa1..633023a94a 100644
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@@ -19,7 +19,7 @@
 
   $: accentStyle = getAccentStyle(accentColor)
 
-  const getAccentStyle = color => {
+  const getAccentStyle = (color: string | null) => {
     if (!color) {
       return ""
     }