pull in query usage

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

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()

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>

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

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

packages/types/src/ui/components/index.ts

@@ -1,2 +1,3 @@
 export * from "./sidepanel"
 export * from "./codeEditor"
+export * from "./popover"

packages/types/src/ui/components/popover.ts

@@ -0,0 +1,6 @@
+export enum PopoverAlign {
+  Left = "left",
+  Right = "right",
+  LeftOutside = "left-outside",
+  RightOutside = "right-outside",
+}