Error CTA

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

@@ -112,6 +112,7 @@ function getInvalidDatasources(
         {
           key: setting.key,
           message: `The ${friendlyTypeName} named "${label}" could not be found`,
+          errorType: "setting",
         },
       ]
     }
@@ -180,6 +181,7 @@ function getMissingRequiredSettings(screen: Screen) {
       result[component._id!] = missingRequiredSettings.map((s: any) => ({
         key: s.key,
         message: `Add the <mark>${s.label}</mark> setting to start using your component`,
+        errorType: "setting",
       }))
     }
   }
@@ -206,16 +208,19 @@ function getMissingAncestors(screen: Screen) {
         return name.endsWith("s") ? `${name}'` : `${name}s`
       }
 
-      const getAncestorName = (name: string) => {
-        const definition: any = getManifestDefinition(name)
-        return definition.name
-      }
-
-      result[component._id!] = missingAncestors.map((s: any) => ({
-        key: s.key,
-        message: `${pluralise(definition.name)} need to be inside a
-<mark>${getAncestorName(s)}</mark>`,
-      }))
+      result[component._id!] = missingAncestors.map((ancestor: any) => {
+        const ancestorDefinition: any = getManifestDefinition(ancestor)
+        return {
+          key: ancestor.key,
+          message: `${pluralise(definition.name)} need to be inside a
+<mark>${ancestorDefinition.name}</mark>`,
+          errorType: "ancestor-setting",
+          ancestor: {
+            name: ancestorDefinition.name,
+            fullType: `${BudibasePrefix}${ancestor}`,
+          },
+        }
+      })
     }
   }
   return result

packages/client/src/components/error-states/ComponentErrorState.svelte

@@ -4,6 +4,7 @@
   import MissingRequiredSetting from "./MissingRequiredSetting.svelte"
   import MissingRequiredAncestor from "./MissingRequiredAncestor.svelte"
   import { UIComponentError } from "@budibase/types"
+  import ComponentErrorStateCta from "./ComponentErrorStateCTA.svelte"
 
   export let missingRequiredSettings:
     | { key: string; label: string }[]
@@ -28,19 +29,7 @@
         <MissingRequiredAncestor {requiredAncestor} />
       {:else if errorMessage}
         {@html errorMessage.message}
-        {#if errorMessage.key}
-          <span>-</span>
-          <!-- svelte-ignore a11y-no-static-element-interactions -->
-          <!-- svelte-ignore a11y-click-events-have-key-events -->
-          <span
-            class="spectrum-Link"
-            on:click={() => {
-              builderStore.actions.highlightSetting(errorMessage.key)
-            }}
-          >
-            Show me
-          </span>
-        {/if}
+        <ComponentErrorStateCta error={errorMessage} />
       {:else if requiredSetting}
         <MissingRequiredSetting {requiredSetting} />
       {/if}

packages/client/src/components/error-states/ComponentErrorStateCTA.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { getContext } from "svelte"
+  import { UIComponentError } from "@budibase/types"
+
+  export let error: UIComponentError | undefined
+
+  const component = getContext("component")
+  const { builderStore } = getContext("sdk")
+</script>
+
+{#if error}
+  {#if error.errorType === "setting"}
+    <span>-</span>
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <span
+      class="spectrum-Link"
+      on:click={() => {
+        builderStore.actions.highlightSetting(error.key)
+      }}
+    >
+      Show me
+    </span>
+  {:else if error.errorType === "ancestor-setting"}
+    <span>-</span>
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <span
+      class="spectrum-Link"
+      on:click={() => {
+        builderStore.actions.addParentComponent(
+          $component.id,
+          error.ancestor.fullType
+        )
+      }}
+    >
+      Add {error.ancestor.name}
+    </span>
+  {/if}
+{/if}

packages/client/src/index.ts

@@ -14,6 +14,10 @@ export interface SDK {
   }> & {
     actions: {
       highlightSetting: (key: string) => void
+      addParentComponent: (
+        componentId: string,
+        fullAncestorType: string
+      ) => void
     }
   }
 }

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

@@ -0,0 +1,20 @@
+interface BaseUIComponentError {
+  key: string
+  message: string
+}
+
+interface UISettingComponentError extends BaseUIComponentError {
+  errorType: "setting"
+}
+
+interface UIAncestorComponentError extends BaseUIComponentError {
+  errorType: "ancestor-setting"
+  ancestor: {
+    name: string
+    fullType: string
+  }
+}
+
+export type UIComponentError =
+  | UISettingComponentError
+  | UIAncestorComponentError

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

@@ -1,7 +1,3 @@
 export * from "./sidepanel"
 export * from "./codeEditor"
-
-export interface UIComponentError {
-  key: string
-  message: string
-}
+export * from "./errors"