ui for viewing queries linked to screens

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>

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;
   }
 

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,11 +507,21 @@
             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="access">
               <Label>Access</Label>
               <AccessLevelSelect {query} {saveId} />
             </div>
           </div>
+        </div>
         <div class="url-block">
           <div class="verb">
             <Select
@@ -771,6 +786,10 @@
   </div>
 {/if}
 
+<Popover bind:this={popover} {anchor}>
+  <ConnectedQueryScreens />
+</Popover>
+
 <style>
   .inner {
     width: 960px;