Merge pull request #16092 from Budibase/BUDI-9294/icon-picker-to-ts

Icon picker to ts

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

@@ -1,15 +1,13 @@
-<script>
+<script lang="ts">
-  import { Icon, Modal } from "@budibase/bbui"
   import ChooseIconModal from "@/components/start/ChooseIconModal.svelte"
+  import { Icon, Modal } from "@budibase/bbui"
 
-  export let name
+  export let name: string
-  export let size = "M"
+  export let size: "M" = "M"
-  export let app
+  export let color: string
-  export let color
+  export let disabled: boolean = false
-  export let autoSave = false
-  export let disabled = false
 
-  let modal
+  let modal: Modal
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -28,7 +26,7 @@
 </div>
 
 <Modal bind:this={modal}>
-  <ChooseIconModal {name} {color} {app} {autoSave} on:change />
+  <ChooseIconModal {name} {color} on:change />
 </Modal>
 
 <style>

packages/builder/src/components/start/ChooseIconModal.svelte

@@ -1,18 +1,9 @@
-<script>
+<script lang="ts">
-  import {
+  import { ColorPicker, Icon, Label, ModalContent } from "@budibase/bbui"
-    ModalContent,
-    Icon,
-    ColorPicker,
-    Label,
-    notifications,
-  } from "@budibase/bbui"
-  import { appsStore } from "@/stores/portal"
   import { createEventDispatcher } from "svelte"
 
-  export let app
+  export let name: string
-  export let name
+  export let color: string
-  export let color
-  export let autoSave = false
 
   const dispatch = createEventDispatcher()
 
@@ -44,17 +35,8 @@
   ]
 
   const save = async () => {
-    if (!autoSave) {
+    dispatch("change", { color, name })
-      dispatch("change", { color, name })
+    return
-      return
-    }
-    try {
-      await appsStore.save(app.instance._id, {
-        icon: { name, color },
-      })
-    } catch (error) {
-      notifications.error("Error updating app")
-    }
   }
 </script>