Merge pull request #15477 from Budibase/BUDI-9016/design-errors-popup

Design errors popover

packages/bbui/src/Divider/Divider.svelte

@@ -1,7 +1,7 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/divider/dist/index-vars.css"
 
-  export let size = "M"
+  export let size: "S" | "M" | "L" = "M"
 
   export let vertical = false
   export let noMargin = false

packages/bbui/src/Link/Link.svelte

@@ -1,18 +1,18 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/link/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
   import Tooltip from "../Tooltip/Tooltip.svelte"
 
-  export let href = "#"
-  export let size = "M"
-  export let quiet = false
-  export let primary = false
-  export let secondary = false
-  export let overBackground = false
-  export let target = undefined
-  export let download = undefined
-  export let disabled = false
-  export let tooltip = null
+  export let href: string | null = "#"
+  export let size: "S" | "M" | "L" = "M"
+  export let quiet: boolean = false
+  export let primary: boolean = false
+  export let secondary: boolean = false
+  export let overBackground: boolean = false
+  export let target: string | undefined = undefined
+  export let download: boolean | undefined = undefined
+  export let disabled: boolean = false
+  export let tooltip: string | null = null
 
   const dispatch = createEventDispatcher()
 

packages/builder/src/components/common/Icons/CircleIndicator.svelte

@@ -1,3 +1,26 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" width="8" height="8">
-  <circle cx="4" cy="4" r="4" stroke-width="0" fill="currentColor" />
+<script lang="ts">
+  export let color = "currentColor"
+  export let size: "S" | "M" = "M"
+
+  const sizes = {
+    S: 6,
+    M: 8,
+  }
+
+  $: sizePx = sizes[size]
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox={`0 0 ${sizePx} ${sizePx}`}
+  width={`${sizePx}`}
+  height={`${sizePx}`}
+>
+  <circle
+    cx={sizePx / 2}
+    cy={sizePx / 2}
+    r={sizePx / 2}
+    stroke-width="0"
+    fill={color}
+  />
 </svg>

packages/builder/src/components/design/settings/controls/PropertyControl.svelte

@@ -25,16 +25,16 @@
   export let wide
 
   let highlightType
+  let domElement
 
   $: highlightedProp = $builderStore.highlightedSetting
   $: allBindings = getAllBindings(bindings, componentBindings, nested)
   $: safeValue = getSafeValue(value, defaultValue, allBindings)
   $: replaceBindings = val => readableToRuntimeBinding(allBindings, val)
 
-  $: if (value) {
-    highlightType =
-      highlightedProp?.key === key ? `highlighted-${highlightedProp?.type}` : ""
-  }
+  $: isHighlighted = highlightedProp?.key === key
+
+  $: highlightType = isHighlighted ? `highlighted-${highlightedProp?.type}` : ""
 
   const getAllBindings = (bindings, componentBindings, nested) => {
     if (!nested) {
@@ -74,9 +74,19 @@
       ? defaultValue
       : enriched
   }
+
+  function scrollToElement(element) {
+    element?.scrollIntoView({
+      behavior: "smooth",
+      block: "center",
+    })
+  }
+
+  $: highlightedProp && isHighlighted && scrollToElement(domElement)
 </script>
 
 <div
+  bind:this={domElement}
   id={`${key}-prop-control-wrap`}
   class={`property-control ${highlightType}`}
   class:wide={!label || labelHidden || wide === true}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte

@@ -3,6 +3,8 @@
   import AppPreview from "./AppPreview.svelte"
   import { screenStore, appStore } from "@/stores/builder"
   import UndoRedoControl from "@/components/common/UndoRedoControl.svelte"
+  import ScreenErrorsButton from "./ScreenErrorsButton.svelte"
+  import { Divider } from "@budibase/bbui"
 </script>
 
 <div class="app-panel">
@@ -15,6 +17,8 @@
       {#if $appStore.clientFeatures.devicePreview}
         <DevicePreviewSelect />
       {/if}
+      <Divider vertical />
+      <ScreenErrorsButton />
     </div>
   </div>
   <div class="content">
@@ -62,7 +66,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    gap: var(--spacing-xl);
+    gap: var(--spacing-l);
   }
   .content {
     flex: 1 1 auto;

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte

@@ -183,16 +183,6 @@
       toggleAddComponent()
     } else if (type === "highlight-setting") {
       builderStore.highlightSetting(data.setting, "error")
-
-      // Also scroll setting into view
-      const selector = `#${data.setting}-prop-control`
-      const element = document.querySelector(selector)?.parentElement
-      if (element) {
-        element.scrollIntoView({
-          behavior: "smooth",
-          block: "center",
-        })
-      }
     } else if (type === "eject-block") {
       const { id, definition } = data
       await componentStore.handleEjectBlock(id, definition)

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import type { UIComponentError } from "@budibase/types"
+  import {
+    builderStore,
+    componentStore,
+    screenComponentErrorList,
+    screenComponentsList,
+  } from "@/stores/builder"
+  import {
+    AbsTooltip,
+    ActionButton,
+    Icon,
+    Link,
+    Popover,
+    PopoverAlignment,
+    TooltipPosition,
+  } from "@budibase/bbui"
+  import CircleIndicator from "@/components/common/Icons/CircleIndicator.svelte"
+
+  let button: any
+  let popover: any
+
+  $: hasErrors = !!$screenComponentErrorList.length
+
+  function getErrorTitle(error: UIComponentError) {
+    const titleParts = [
+      $screenComponentsList.find(c => c._id === error.componentId)!
+        ._instanceName,
+    ]
+    if (error.errorType === "setting" && error.cause === "invalid") {
+      titleParts.push(error.label)
+    }
+    return titleParts.join(" - ")
+  }
+
+  async function onErrorClick(error: UIComponentError) {
+    componentStore.select(error.componentId)
+    if (error.errorType === "setting") {
+      builderStore.highlightSetting(error.key, "error")
+    }
+  }
+</script>
+
+<div bind:this={button} class="error-button">
+  <AbsTooltip
+    text={!hasErrors ? "No errors found!" : ""}
+    position={TooltipPosition.Top}
+  >
+    <ActionButton
+      quiet
+      disabled={!hasErrors}
+      on:click={() => popover.show()}
+      size="M"
+      icon="Alert"
+    />
+    {#if hasErrors}
+      <div class="error-indicator">
+        <CircleIndicator
+          size="S"
+          color="var(--spectrum-global-color-static-red-600)"
+        />
+      </div>
+    {/if}
+  </AbsTooltip>
+</div>
+<Popover
+  bind:this={popover}
+  anchor={button}
+  align={PopoverAlignment.Right}
+  maxWidth={400}
+  showPopover={hasErrors}
+>
+  <div class="error-popover">
+    {#each $screenComponentErrorList as error}
+      <div class="error">
+        <Icon
+          name="Alert"
+          color="var(--spectrum-global-color-static-red-600)"
+          size="S"
+        />
+        <div>
+          <Link overBackground on:click={() => onErrorClick(error)}>
+            {getErrorTitle(error)}
+          </Link>:
+          <!-- eslint-disable-next-line svelte/no-at-html-tags-->
+          {@html error.message}
+        </div>
+      </div>
+    {/each}
+  </div>
+</Popover>
+
+<style>
+  .error-button {
+    position: relative;
+  }
+  .error-indicator {
+    position: absolute;
+    top: 0;
+    right: 8px;
+  }
+  .error-popover {
+    display: flex;
+    flex-direction: column;
+  }
+  .error-popover .error {
+    display: inline-flex;
+    flex-direction: row;
+    padding: var(--spacing-m);
+    gap: var(--spacing-s);
+    align-items: start;
+  }
+  .error-popover .error:not(:last-child) {
+    border-bottom: 1px solid var(--spectrum-global-color-gray-300);
+  }
+
+  .error-popover .error :global(mark) {
+    background: unset;
+    color: unset;
+  }
+  .error-popover .error :global(.spectrum-Link) {
+    display: inline-block;
+  }
+</style>

packages/builder/src/stores/builder/components.ts

@@ -21,7 +21,7 @@ import {
   tables,
   componentTreeNodesStore,
   builderStore,
-  screenComponents,
+  screenComponentsList,
 } from "@/stores/builder"
 import { buildFormSchema, getSchemaForDatasource } from "@/dataBinding"
 import {
@@ -450,7 +450,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
     }
 
     const componentName = getSequentialName(
-      get(screenComponents),
+      get(screenComponentsList),
       `New ${definition.friendlyName || definition.name}`,
       {
         getName: c => c._instanceName,

packages/builder/src/stores/builder/index.js

@@ -17,9 +17,9 @@ import { deploymentStore } from "./deployments.js"
 import { contextMenuStore } from "./contextMenu.js"
 import { snippets } from "./snippets"
 import {
-  screenComponents,
+  screenComponentsList,
   screenComponentErrors,
-  findComponentsBySettingsType,
+  screenComponentErrorList,
 } from "./screenComponent"
 
 // Backend
@@ -72,9 +72,9 @@ export {
   snippets,
   rowActions,
   appPublished,
-  screenComponents,
+  screenComponentsList,
   screenComponentErrors,
-  findComponentsBySettingsType,
+  screenComponentErrorList,
 }
 
 export const reset = () => {

packages/builder/src/stores/builder/screenComponent.ts

@@ -4,11 +4,10 @@ import { selectedScreen } from "./screens"
 import { viewsV2 } from "./viewsV2"
 import {
   UIDatasourceType,
-  Screen,
   Component,
   UIComponentError,
-  ScreenProps,
   ComponentDefinition,
+  DependsOnComponentSetting,
 } from "@budibase/types"
 import { queries } from "./queries"
 import { views } from "./views"
@@ -21,14 +20,11 @@ import { getSettingsDefinition } from "@budibase/frontend-core"
 function reduceBy<TItem extends {}, TKey extends keyof TItem>(
   key: TKey,
   list: TItem[]
-): Record<string, any> {
-  return list.reduce(
-    (result, item) => ({
-      ...result,
-      [item[key] as string]: item,
-    }),
-    {}
-  )
+): Record<string, TItem> {
+  return list.reduce<Record<string, TItem>>((result, item) => {
+    result[item[key] as string] = item
+    return result
+  }, {})
 }
 
 const friendlyNameByType: Partial<Record<UIDatasourceType, string>> = {
@@ -46,7 +42,18 @@ const validationKeyByType: Record<UIDatasourceType, string | null> = {
   jsonarray: "value",
 }
 
-export const screenComponentErrors = derived(
+export const screenComponentsList = derived(
+  [selectedScreen],
+  ([$selectedScreen]): Component[] => {
+    if (!$selectedScreen) {
+      return []
+    }
+
+    return findAllComponents($selectedScreen.props)
+  }
+)
+
+export const screenComponentErrorList = derived(
   [selectedScreen, tables, views, viewsV2, queries, componentStore],
   ([
     $selectedScreen,
@@ -55,9 +62,9 @@ export const screenComponentErrors = derived(
     $viewsV2,
     $queries,
     $componentStore,
-  ]): Record<string, UIComponentError[]> => {
+  ]): UIComponentError[] => {
     if (!$selectedScreen) {
-      return {}
+      return []
     }
 
     const datasources = {
@@ -69,116 +76,152 @@ export const screenComponentErrors = derived(
 
     const { components: definitions } = $componentStore
 
-    const errors = {
-      ...getInvalidDatasources($selectedScreen, datasources, definitions),
-      ...getMissingAncestors($selectedScreen, definitions),
-      ...getMissingRequiredSettings($selectedScreen, definitions),
+    const errors: UIComponentError[] = []
+
+    function checkComponentErrors(component: Component, ancestors: string[]) {
+      errors.push(...getInvalidDatasources(component, datasources, definitions))
+      errors.push(...getMissingRequiredSettings(component, definitions))
+      errors.push(...getMissingAncestors(component, definitions, ancestors))
+
+      for (const child of component._children || []) {
+        checkComponentErrors(child, [...ancestors, component._component])
+      }
     }
+
+    checkComponentErrors($selectedScreen?.props, [])
+
     return errors
   }
 )
 
 function getInvalidDatasources(
-  screen: Screen,
+  component: Component,
   datasources: Record<string, any>,
   definitions: Record<string, ComponentDefinition>
 ) {
-  const result: Record<string, UIComponentError[]> = {}
-  for (const { component, setting } of findComponentsBySettingsType(
-    screen,
-    ["table", "dataSource"],
-    definitions
-  )) {
-    const componentSettings = component[setting.key]
-    if (!componentSettings) {
-      continue
-    }
+  const result: UIComponentError[] = []
 
-    const { label } = componentSettings
-    const type = componentSettings.type as UIDatasourceType
+  const datasourceTypes = ["table", "dataSource"]
 
-    const validationKey = validationKeyByType[type]
-    if (!validationKey) {
-      continue
-    }
+  const possibleSettings = definitions[component._component]?.settings?.filter(
+    s => datasourceTypes.includes(s.type)
+  )
+  if (possibleSettings) {
+    for (const setting of possibleSettings) {
+      const componentSettings = component[setting.key]
+      if (!componentSettings) {
+        continue
+      }
 
-    const componentBindings = getBindableProperties(screen, component._id)
+      const { label } = componentSettings
+      const type = componentSettings.type as UIDatasourceType
 
-    const componentDatasources = {
-      ...reduceBy("rowId", bindings.extractRelationships(componentBindings)),
-      ...reduceBy("value", bindings.extractFields(componentBindings)),
-      ...reduceBy("value", bindings.extractJSONArrayFields(componentBindings)),
-    }
+      const validationKey = validationKeyByType[type]
+      if (!validationKey) {
+        continue
+      }
 
-    const resourceId = componentSettings[validationKey]
-    if (!{ ...datasources, ...componentDatasources }[resourceId]) {
-      const friendlyTypeName = friendlyNameByType[type] ?? type
-      result[component._id!] = [
-        {
+      const componentBindings = getBindableProperties(screen, component._id)
+
+      const componentDatasources = {
+        ...reduceBy("rowId", bindings.extractRelationships(componentBindings)),
+        ...reduceBy("value", bindings.extractFields(componentBindings)),
+        ...reduceBy(
+          "value",
+          bindings.extractJSONArrayFields(componentBindings)
+        ),
+      }
+
+      const resourceId = componentSettings[validationKey]
+      if (!{ ...datasources, ...componentDatasources }[resourceId]) {
+        const friendlyTypeName = friendlyNameByType[type] ?? type
+        result.push({
+          componentId: component._id!,
           key: setting.key,
+          label: setting.label || setting.key,
           message: `The ${friendlyTypeName} named "${label}" could not be found`,
+
           errorType: "setting",
-        },
-      ]
+          cause: "invalid",
+        })
+      }
     }
   }
 
   return result
 }
 
+function parseDependsOn(dependsOn: DependsOnComponentSetting | undefined): {
+  key?: string
+  value?: string
+} {
+  if (dependsOn === undefined) {
+    return {}
+  }
+
+  if (typeof dependsOn === "string") {
+    return { key: dependsOn }
+  }
+
+  return { key: dependsOn.setting, value: dependsOn.value }
+}
+
 function getMissingRequiredSettings(
-  screen: Screen,
+  component: Component,
   definitions: Record<string, ComponentDefinition>
 ) {
-  const allComponents = findAllComponents(screen.props) as Component[]
+  const result: UIComponentError[] = []
 
-  const result: Record<string, UIComponentError[]> = {}
-  for (const component of allComponents) {
-    const definition = definitions[component._component]
+  const definition = definitions[component._component]
 
-    const settings = getSettingsDefinition(definition)
+  const settings = getSettingsDefinition(definition)
 
-    const missingRequiredSettings = settings.filter((setting: any) => {
-      let empty =
-        component[setting.key] == null || component[setting.key] === ""
-      let missing = setting.required && empty
+  const missingRequiredSettings = settings.filter(setting => {
+    let empty = component[setting.key] == null || component[setting.key] === ""
+    let missing = setting.required && empty
 
-      // Check if this setting depends on another, as it may not be required
-      if (setting.dependsOn) {
-        const dependsOnKey = setting.dependsOn.setting || setting.dependsOn
-        const dependsOnValue = setting.dependsOn.value
-        const realDependentValue = component[dependsOnKey]
+    // Check if this setting depends on another, as it may not be required
+    if (setting.dependsOn) {
+      const { key: dependsOnKey, value: dependsOnValue } = parseDependsOn(
+        setting.dependsOn
+      )
+      const realDependentValue =
+        component[dependsOnKey as keyof typeof component]
 
-        const sectionDependsOnKey =
-          setting.sectionDependsOn?.setting || setting.sectionDependsOn
-        const sectionDependsOnValue = setting.sectionDependsOn?.value
-        const sectionRealDependentValue = component[sectionDependsOnKey]
+      const { key: sectionDependsOnKey, value: sectionDependsOnValue } =
+        parseDependsOn(setting.sectionDependsOn)
+      const sectionRealDependentValue =
+        component[sectionDependsOnKey as keyof typeof component]
 
-        if (dependsOnValue == null && realDependentValue == null) {
-          return false
-        }
-        if (dependsOnValue != null && dependsOnValue !== realDependentValue) {
-          return false
-        }
-
-        if (
-          sectionDependsOnValue != null &&
-          sectionDependsOnValue !== sectionRealDependentValue
-        ) {
-          return false
-        }
+      if (dependsOnValue == null && realDependentValue == null) {
+        return false
+      }
+      if (dependsOnValue != null && dependsOnValue !== realDependentValue) {
+        return false
       }
 
-      return missing
-    })
+      if (
+        sectionDependsOnValue != null &&
+        sectionDependsOnValue !== sectionRealDependentValue
+      ) {
+        return false
+      }
+    }
 
-    if (missingRequiredSettings?.length) {
-      result[component._id!] = missingRequiredSettings.map((s: any) => ({
+    return missing
+  })
+
+  if (missingRequiredSettings?.length) {
+    result.push(
+      ...missingRequiredSettings.map<UIComponentError>(s => ({
+        componentId: component._id!,
         key: s.key,
+        label: s.label || s.key,
         message: `Add the <mark>${s.label}</mark> setting to start using your component`,
         errorType: "setting",
+        cause: "missing",
       }))
-    }
+    )
   }
 
   return result
@@ -186,34 +229,31 @@ function getMissingRequiredSettings(
 
 const BudibasePrefix = "@budibase/standard-components/"
 function getMissingAncestors(
-  screen: Screen,
-  definitions: Record<string, ComponentDefinition>
-) {
-  const result: Record<string, UIComponentError[]> = {}
+  component: Component,
+  definitions: Record<string, ComponentDefinition>,
+  ancestors: string[]
+): UIComponentError[] {
+  const definition = definitions[component._component]
 
-  function checkMissingAncestors(component: Component, ancestors: string[]) {
-    for (const child of component._children || []) {
-      checkMissingAncestors(child, [...ancestors, component._component])
+  if (!definition?.requiredAncestors?.length) {
+    return []
+  }
+
+  const result: UIComponentError[] = []
+  const missingAncestors = definition.requiredAncestors.filter(
+    ancestor => !ancestors.includes(`${BudibasePrefix}${ancestor}`)
+  )
+
+  if (missingAncestors.length) {
+    const pluralise = (name: string) => {
+      return name.endsWith("s") ? `${name}'` : `${name}s`
     }
 
-    const definition = definitions[component._component]
-
-    if (!definition?.requiredAncestors?.length) {
-      return
-    }
-
-    const missingAncestors = definition.requiredAncestors.filter(
-      ancestor => !ancestors.includes(`${BudibasePrefix}${ancestor}`)
-    )
-
-    if (missingAncestors.length) {
-      const pluralise = (name: string) => {
-        return name.endsWith("s") ? `${name}'` : `${name}s`
-      }
-
-      result[component._id!] = missingAncestors.map(ancestor => {
+    result.push(
+      ...missingAncestors.map<UIComponentError>(ancestor => {
         const ancestorDefinition = definitions[`${BudibasePrefix}${ancestor}`]
         return {
+          componentId: component._id!,
           message: `${pluralise(definition.name)} need to be inside a
 <mark>${ancestorDefinition.name}</mark>`,
           errorType: "ancestor-setting",
@@ -223,59 +263,19 @@ function getMissingAncestors(
           },
         }
       })
-    }
-  }
-
-  checkMissingAncestors(screen.props, [])
-  return result
-}
-
-export function findComponentsBySettingsType(
-  screen: Screen,
-  type: string | string[],
-  definitions: Record<string, ComponentDefinition>
-) {
-  const typesArray = Array.isArray(type) ? type : [type]
-
-  const result: {
-    component: Component
-    setting: {
-      type: string
-      key: string
-    }
-  }[] = []
-
-  function recurseFieldComponentsInChildren(component: ScreenProps) {
-    if (!component) {
-      return
-    }
-
-    const definition = definitions[component._component]
-
-    const setting = definition?.settings?.find((s: any) =>
-      typesArray.includes(s.type)
     )
-    if (setting) {
-      result.push({
-        component,
-        setting: { type: setting.type, key: setting.key },
-      })
-    }
-    component._children?.forEach(child => {
-      recurseFieldComponentsInChildren(child)
-    })
   }
 
-  recurseFieldComponentsInChildren(screen?.props)
   return result
 }
 
-export const screenComponents = derived(
-  [selectedScreen],
-  ([$selectedScreen]) => {
-    if (!$selectedScreen) {
-      return []
-    }
-    return findAllComponents($selectedScreen.props) as Component[]
+export const screenComponentErrors = derived(
+  [screenComponentErrorList],
+  ([$list]): Record<string, UIComponentError[]> => {
+    return $list.reduce<Record<string, UIComponentError[]>>((obj, error) => {
+      obj[error.componentId] ??= []
+      obj[error.componentId].push(error)
+      return obj
+    }, {})
   }
 )

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

@@ -1,10 +1,13 @@
 interface BaseUIComponentError {
+  componentId: string
   message: string
 }
 
 interface UISettingComponentError extends BaseUIComponentError {
   errorType: "setting"
   key: string
+  label: string
+  cause: "missing" | "invalid"
 }
 
 interface UIAncestorComponentError extends BaseUIComponentError {

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

@@ -15,20 +15,24 @@ export interface ComponentDefinition {
   illegalChildren: string[]
 }
 
+export type DependsOnComponentSetting =
+  | string
+  | {
+      setting: string
+      value: string
+    }
+
 export interface ComponentSetting {
   key: string
   type: string
   label?: string
   section?: string
   name?: string
+  required?: boolean
   defaultValue?: any
   selectAllFields?: boolean
   resetOn?: string | string[]
   settings?: ComponentSetting[]
-  dependsOn?:
-    | string
-    | {
-        setting: string
-        value: string
-      }
+  dependsOn?: DependsOnComponentSetting
+  sectionDependsOn?: DependsOnComponentSetting
 }