Merge pull request #11643 from Budibase/cheeks-fixes

Add missing grid tooltip for views + form fixes

packages/bbui/src/Tooltip/TempTooltip.svelte

@@ -4,7 +4,7 @@
 
   export let text = null
   export let condition = true
-  export let duration = 3000
+  export let duration = 5000
   export let position
   export let type
 

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

@@ -1,18 +1,30 @@
 <script>
   import { getContext } from "svelte"
-  import { Modal, ActionButton } from "@budibase/bbui"
+  import { Modal, ActionButton, TooltipType, TempTooltip } from "@budibase/bbui"
   import GridCreateViewModal from "../../modals/grid/GridCreateViewModal.svelte"
 
-  const { rows, columns } = getContext("grid")
+  const { rows, columns, filter } = getContext("grid")
 
   let modal
+  let firstFilterUsage = false
 
   $: disabled = !$columns.length || !$rows.length
+  $: {
+    if ($filter?.length && !firstFilterUsage) {
+      firstFilterUsage = true
+    }
+  }
 </script>
 
-<ActionButton {disabled} icon="CollectionAdd" quiet on:click={modal.show}>
-  Add view
-</ActionButton>
+<TempTooltip
+  text="Create a view to save your filters"
+  type={TooltipType.Info}
+  condition={firstFilterUsage}
+>
+  <ActionButton {disabled} icon="CollectionAdd" quiet on:click={modal.show}>
+    Create view
+  </ActionButton>
+</TempTooltip>
 <Modal bind:this={modal}>
   <GridCreateViewModal />
 </Modal>

packages/builder/src/components/backend/DataTable/modals/grid/GridCreateViewModal.svelte

@@ -46,13 +46,13 @@
 </script>
 
 <ModalContent
-  title="Create View"
-  confirmText="Create View"
+  title="Create view"
+  confirmText="Create view"
   onConfirm={saveView}
   disabled={nameExists}
 >
   <Input
-    label="View Name"
+    label="View name"
     thin
     bind:value={name}
     error={nameExists ? "A view already exists with that name" : null}

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

@@ -33,17 +33,19 @@
   let anchors = {}
   let draggableItems = []
 
-  const buildDragable = items => {
-    return items.map(item => {
-      return {
-        id: listItemKey ? item[listItemKey] : generate(),
-        item,
-      }
-    })
+  const buildDraggable = items => {
+    return items
+      .map(item => {
+        return {
+          id: listItemKey ? item[listItemKey] : generate(),
+          item,
+        }
+      })
+      .filter(item => item.id)
   }
 
   $: if (items) {
-    draggableItems = buildDragable(items)
+    draggableItems = buildDraggable(items)
   }
 
   const updateRowOrder = e => {

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

@@ -99,6 +99,9 @@
     }
 
     const type = getComponentForField(instance.field, schema)
+    if (!type) {
+      return null
+    }
     instance._component = `@budibase/standard-components/${type}`
 
     const pseudoComponentInstance = store.actions.components.createInstance(
@@ -116,7 +119,9 @@
   }
 
   $: if (sanitisedFields) {
-    fieldList = [...sanitisedFields, ...unconfigured].map(buildSudoInstance)
+    fieldList = [...sanitisedFields, ...unconfigured]
+      .map(buildSudoInstance)
+      .filter(x => x != null)
   }
 
   const processItemUpdate = e => {