From 2bd48dde390e7a22b608c15bf85105852a05ceb8 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 25 Nov 2024 18:24:54 +0100
Subject: [PATCH] Type plugins page

---
 packages/bbui/src/Button/Button.svelte        |  6 ++---
 packages/bbui/src/Form/Search.svelte          |  2 +-
 packages/bbui/src/Form/Select.svelte          |  8 +++----
 packages/bbui/src/Table/Table.svelte          |  2 +-
 packages/bbui/src/Typography/Heading.svelte   |  4 ++--
 .../pages/builder/portal/plugins/index.svelte | 22 ++++++++++---------
 6 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte
index 0a8917c3c1..77653d0c42 100644
--- a/packages/bbui/src/Button/Button.svelte
+++ b/packages/bbui/src/Button/Button.svelte
@@ -3,7 +3,7 @@
   import AbsTooltip from "../Tooltip/AbsTooltip.svelte"
   import { createEventDispatcher } from "svelte"
 
-  export let type
+  export let type = undefined
   export let disabled = false
   export let size = "M"
   export let cta = false
@@ -16,8 +16,8 @@
   export let active = false
   export let tooltip = undefined
   export let newStyles = true
-  export let id
-  export let ref
+  export let id = undefined
+  export let ref = undefined
   export let reverse = false
 
   const dispatch = createEventDispatcher()
diff --git a/packages/bbui/src/Form/Search.svelte b/packages/bbui/src/Form/Search.svelte
index 2fbda275eb..a085986d3e 100644
--- a/packages/bbui/src/Form/Search.svelte
+++ b/packages/bbui/src/Form/Search.svelte
@@ -10,7 +10,7 @@
   export let disabled = false
   export let updateOnChange = true
   export let quiet = false
-  export let inputRef
+  export let inputRef = undefined
   export let helpText = null
 
   const dispatch = createEventDispatcher()
diff --git a/packages/bbui/src/Form/Select.svelte b/packages/bbui/src/Form/Select.svelte
index 260090c7b7..0e67a1f532 100644
--- a/packages/bbui/src/Form/Select.svelte
+++ b/packages/bbui/src/Form/Select.svelte
@@ -17,18 +17,18 @@
   export let getOptionIcon = option => option?.icon
   export let getOptionColour = option => option?.colour
   export let useOptionIconImage = false
-  export let isOptionEnabled
+  export let isOptionEnabled = undefined
   export let quiet = false
   export let autoWidth = false
   export let sort = false
   export let tooltip = ""
   export let autocomplete = false
-  export let customPopoverHeight
-  export let align
+  export let customPopoverHeight = undefined
+  export let align = undefined
   export let footer = null
   export let tag = null
   export let helpText = null
-  export let compare
+  export let compare = undefined
   export let onOptionMouseenter = () => {}
   export let onOptionMouseleave = () => {}
 
diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index 3916bec738..228838e477 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -43,7 +43,7 @@
   export let showHeaderBorder = true
   export let placeholderText = "No rows found"
   export let snippets = []
-  export let defaultSortColumn
+  export let defaultSortColumn = undefined
   export let defaultSortOrder = "Ascending"
 
   const dispatch = createEventDispatcher()
diff --git a/packages/bbui/src/Typography/Heading.svelte b/packages/bbui/src/Typography/Heading.svelte
index 50522fffc3..90d53fb208 100644
--- a/packages/bbui/src/Typography/Heading.svelte
+++ b/packages/bbui/src/Typography/Heading.svelte
@@ -1,9 +1,9 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/typography/dist/index-vars.css"
 
   // Sizes
   export let size = "M"
-  export let textAlign
+  export let textAlign = undefined
   export let noPadding = false
   export let weight = "default" // light, heavy, default
 </script>
diff --git a/packages/builder/src/pages/builder/portal/plugins/index.svelte b/packages/builder/src/pages/builder/portal/plugins/index.svelte
index d8dd4eae11..e16da42e10 100644
--- a/packages/builder/src/pages/builder/portal/plugins/index.svelte
+++ b/packages/builder/src/pages/builder/portal/plugins/index.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import {
     Layout,
     Heading,
@@ -42,23 +42,25 @@
     { column: "edit", component: EditPluginRenderer },
   ]
 
-  let modal
-  let searchTerm = ""
-  let filter = "all"
+  let modal: any
+  let searchTerm: any = ""
+  let filter: any = "all"
   let filterOptions = [
     { label: "All plugins", value: "all" },
     { label: "Components", value: "component" },
   ]
 
+  const searchPlaceholder: any = "Search"
+
   if (!$admin.cloud) {
     filterOptions.push({ label: "Datasources", value: "datasource" })
   }
 
   $: filteredPlugins = $plugins
-    .filter(plugin => {
+    .filter((plugin: any) => {
       return filter === "all" || plugin.schema.type === filter
     })
-    .filter(plugin => {
+    .filter((plugin: any) => {
       return (
         !searchTerm ||
         plugin?.name?.toLowerCase().includes(searchTerm.toLowerCase())
@@ -85,8 +87,8 @@
           <Button
             on:click={() =>
               window
-                .open("https://github.com/Budibase/plugins", "_blank")
-                .focus()}
+                ?.open("https://github.com/Budibase/plugins", "_blank")
+                ?.focus()}
             secondary
           >
             GitHub repo
@@ -98,12 +100,12 @@
           <div class="select">
             <Select
               bind:value={filter}
-              placeholder={null}
+              placeholder={undefined}
               options={filterOptions}
               autoWidth
             />
           </div>
-          <Search bind:value={searchTerm} placeholder="Search" />
+          <Search bind:value={searchTerm} placeholder={searchPlaceholder} />
         </div>
       {/if}
     </div>