Merge pull request #15487 from Budibase/feature/screen-query-usage-ui

packages/bbui/src/ActionButton/ActionButton.svelte

@@ -1,25 +1,25 @@
-<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 quiet: boolean = false
-  export let selected = false
+  export let selected: boolean = false
-  export let disabled = false
+  export let disabled: boolean = false
-  export let icon = ""
+  export let icon: string = ""
-  export let size = "M"
+  export let size: "S" | "M" | "L" = "M"
-  export let active = false
+  export let active: boolean = false
-  export let fullWidth = false
+  export let fullWidth: boolean = false
-  export let noPadding = false
+  export let noPadding: boolean = false
-  export let tooltip = ""
+  export let tooltip: string = ""
-  export let accentColor = null
+  export let accentColor: string | null = null
 
   let showTooltip = false
 
   $: accentStyle = getAccentStyle(accentColor)
 
-  const getAccentStyle = color => {
+  const getAccentStyle = (color: string | null) => {
     if (!color) {
       return ""
     }

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 icon: string | undefined = undefined
-  export let iconColor = null
+  export let iconColor: string | undefined = undefined
-  export let title = null
+  export let title: string | undefined = undefined
-  export let subtitle = null
+  export let subtitle: string | undefined = undefined
-  export let url = null
+  export let url: string | undefined = undefined
-  export let hoverable = false
+  export let hoverable: boolean = false
-  export let showArrow = false
+  export let showArrow: boolean = false
-  export let selected = false
+  export let selected: boolean = false
 </script>
 
 <a

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

@@ -1,20 +1,29 @@
-<script>
+<script lang="ts">
-  import { ActionButton, List, ListItem, Button } from "@budibase/bbui"
+  import { Button } from "@budibase/bbui"
-  import DetailPopover from "@/components/common/DetailPopover.svelte"
+  import ScreensPopover from "@/components/common/ScreensPopover.svelte"
-  import { screenStore, appStore } from "@/stores/builder"
+  import { screenStore } from "@/stores/builder"
   import { getContext, createEventDispatcher } from "svelte"
-
+  import type { Screen, ScreenUsage } from "@budibase/types"
-  const { datasource } = getContext("grid")
   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}>
+<ScreensPopover
-  <svelte:fragment slot="anchor" let:open>
+  bind:this={popover}
-    <ActionButton
+  screens={screenUsage}
-      icon="WebPage"
+  icon="WebPage"
-      selected={open || screenCount}
+  accentColor="#364800"
-      quiet
+  showCount
-      accentColor="#364800"
+>
-    >
+  <svelte:fragment slot="footer">
-      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>
     <Button secondary icon="WebPage" on:click={generateScreen}>
       Generate app screen
     </Button>
-  </div>
+  </svelte:fragment>
-</DetailPopover>
+</ScreensPopover>

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

@@ -0,0 +1,58 @@
+<script lang="ts">
+  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"
+
+  export let screens: ScreenUsage[] = []
+  export let icon = "DeviceDesktop"
+  export let accentColor: string | null | undefined = null
+  export let showCount = false
+  export let align = PopoverAlignment.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}
+    There aren't any screens connected to this data.
+  {:else}
+    The following screens are connected to this data.
+    <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>

packages/builder/src/components/integration/ConnectedQueryScreens.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { onMount } from "svelte"
+
+  import { screenStore } from "@/stores/builder"
+  import ScreensPopover from "@/components/common/ScreensPopover.svelte"
+  import type { ScreenUsage } from "@budibase/types"
+
+  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.usageInScreens(sourceId)
+    screens = response?.screens
+  })
+</script>
+
+<ScreensPopover
+  bind:this={popover}
+  {screens}
+  icon="WebPage"
+  accentColor="#364800"
+  showCount
+/>

packages/builder/src/components/integration/QueryViewer.svelte

@@ -23,6 +23,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
@@ -170,6 +171,7 @@
         </Body>
       </div>
       <div class="controls">
+        <ConnectedQueryScreens sourceId={query._id} />
         <Button disabled={loading} on:click={runQuery} overBackground>
           <Icon size="S" name="Play" />
           Run query</Button
@@ -384,6 +386,8 @@
   }
 
   .controls {
+    display: flex;
+    align-items: center;
     flex-shrink: 0;
   }
 

packages/builder/src/components/integration/RestQueryViewer.svelte

@@ -49,6 +49,7 @@
     runtimeToReadableMap,
     toBindingsArray,
   } from "@/dataBinding"
+  import ConnectedQueryScreens from "./ConnectedQueryScreens.svelte"
 
   export let queryId
 
@@ -502,9 +503,12 @@
             on:change={() => (query.flags.urlName = false)}
             on:save={saveQuery}
           />
-          <div class="access">
+          <div class="controls">
-            <Label>Access</Label>
+            <ConnectedQueryScreens sourceId={query._id} />
-            <AccessLevelSelect {query} {saveId} />
+            <div class="access">
+              <Label>Access</Label>
+              <AccessLevelSelect {query} {saveId} />
+            </div>
           </div>
         </div>
         <div class="url-block">
@@ -825,6 +829,12 @@
     justify-content: space-between;
   }
 
+  .controls {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+
   .access {
     display: flex;
     gap: var(--spacing-m);