Use constant for keeping modal open (#11067)

packages/bbui/src/Modal/ModalContent.svelte

@@ -1,3 +1,7 @@
+<script context="module">
+  export const keepOpen = Symbol("keepOpen")
+</script>
+
 <script>
   import "@spectrum-css/dialog/dist/index-vars.css"
   import { getContext } from "svelte"
@@ -30,7 +34,7 @@
 
   async function secondary(e) {
     loading = true
-    if (!secondaryAction || (await secondaryAction(e)) !== false) {
+    if (!secondaryAction || (await secondaryAction(e)) !== keepOpen) {
       hide()
     }
     loading = false
@@ -38,7 +42,7 @@
 
   async function confirm() {
     loading = true
-    if (!onConfirm || (await onConfirm()) !== false) {
+    if (!onConfirm || (await onConfirm()) !== keepOpen) {
       hide()
     }
     loading = false
@@ -46,7 +50,7 @@
 
   async function close() {
     loading = true
-    if (!onCancel || (await onCancel()) !== false) {
+    if (!onCancel || (await onCancel()) !== keepOpen) {
       cancel()
     }
     loading = false

packages/bbui/src/index.js

@@ -42,7 +42,7 @@ export { default as MenuSection } from "./Menu/Section.svelte"
 export { default as MenuSeparator } from "./Menu/Separator.svelte"
 export { default as MenuItem } from "./Menu/Item.svelte"
 export { default as Modal } from "./Modal/Modal.svelte"
-export { default as ModalContent } from "./Modal/ModalContent.svelte"
+export { default as ModalContent, keepOpen } from "./Modal/ModalContent.svelte"
 export { default as NotificationDisplay } from "./Notification/NotificationDisplay.svelte"
 export { default as Notification } from "./Notification/Notification.svelte"
 export { default as SideNavigation } from "./SideNavigation/Navigation.svelte"

packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte

@@ -1,10 +1,9 @@
 <script>
   import { createEventDispatcher } from "svelte"
   import { tables } from "stores/backend"
-  import { notifications } from "@budibase/bbui"
+  import { ModalContent, keepOpen, notifications } from "@budibase/bbui"
   import RowFieldControl from "../RowFieldControl.svelte"
   import { API } from "api"
-  import { ModalContent } from "@budibase/bbui"
   import { FIELDS } from "constants/backend"
 
   const FORMULA_TYPE = FIELDS.FORMULA.type
@@ -41,8 +40,8 @@
       } else {
         notifications.error(`Failed to save row - ${error.message}`)
       }
-      // Prevent modal closing if there were errors
+
-      return false
+      return keepOpen
     }
   }
 </script>

packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte

@@ -5,7 +5,7 @@
   import { notifications } from "@budibase/bbui"
   import RowFieldControl from "../RowFieldControl.svelte"
   import { API } from "api"
-  import { ModalContent, Select, Link } from "@budibase/bbui"
+  import { keepOpen, ModalContent, Select, Link } from "@budibase/bbui"
   import ErrorsBox from "components/common/ErrorsBox.svelte"
   import { goto } from "@roxi/routify"
 
@@ -51,7 +51,7 @@
       errors = [...errors, { message: "Role is required" }]
     }
     if (errors.length) {
-      return false
+      return keepOpen
     }
 
     try {
@@ -79,8 +79,8 @@
       } else {
         notifications.error("Error saving user")
       }
-      // Prevent closing the modal on errors
+
-      return false
+      return keepOpen
     }
   }
 </script>

packages/builder/src/components/backend/DataTable/modals/EditRoles.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { ModalContent, Select, Input, Button } from "@budibase/bbui"
+  import { keepOpen, ModalContent, Select, Input, Button } from "@budibase/bbui"
   import { onMount } from "svelte"
   import { API } from "api"
   import { notifications } from "@budibase/bbui"
@@ -76,7 +76,7 @@
       errors.push({ message: "Please choose permissions" })
     }
     if (errors.length) {
-      return false
+      return keepOpen
     }
 
     // Save/create the role
@@ -85,7 +85,7 @@
       notifications.success("Role saved successfully")
     } catch (error) {
       notifications.error(`Error saving role - ${error.message}`)
-      return false
+      return keepOpen
     }
   }
 

packages/builder/src/components/backend/DatasourceNavigator/modals/ImportRestQueriesModal.svelte

@@ -1,6 +1,7 @@
 <script>
   import { goto } from "@roxi/routify"
   import {
+    keepOpen,
     ModalContent,
     notifications,
     Body,
@@ -70,10 +71,9 @@
       }
 
       notifications.success(`Imported successfully.`)
-      return true
     } catch (error) {
       notifications.error("Error importing queries")
-      return false
+      return keepOpen
     }
   }
 </script>

packages/builder/src/components/backend/Datasources/ConfigEditor/index.svelte

@@ -1,5 +1,6 @@
 <script>
   import {
+    keepOpen,
     Modal,
     notifications,
     Body,
@@ -36,7 +37,7 @@
       })
     }
 
-    return false
+    return keepOpen
   }
 
   let createVariableModal

packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte

@@ -1,6 +1,7 @@
 <script>
   import { RelationshipTypes } from "constants/backend"
   import {
+    keepOpen,
     Button,
     Input,
     ModalContent,
@@ -277,7 +278,7 @@
 
   async function saveRelationship() {
     if (!validate()) {
-      return false
+      return keepOpen
     }
     buildRelationships()
     removeExistingRelationship()

packages/builder/src/components/backend/Datasources/TableImportSelection/tableSelectionStore.js

@@ -1,5 +1,5 @@
 import { derived, writable, get } from "svelte/store"
-import { notifications } from "@budibase/bbui"
+import { keepOpen, notifications } from "@budibase/bbui"
 import { datasources, ImportTableError } from "stores/backend"
 
 export const createTableSelectionStore = (integration, datasource) => {
@@ -37,8 +37,7 @@ export const createTableSelectionStore = (integration, datasource) => {
         notifications.error("Error fetching tables.")
       }
 
-      // Prevent modal closing
+      return keepOpen
-      return false
     }
   }
 

packages/builder/src/components/settings/APIKeyModal.svelte

@@ -1,5 +1,11 @@
 <script>
-  import { ModalContent, Body, notifications, CopyInput } from "@budibase/bbui"
+  import {
+    ModalContent,
+    keepOpen,
+    Body,
+    notifications,
+    CopyInput,
+  } from "@budibase/bbui"
   import { auth } from "stores/portal"
   import { onMount } from "svelte"
 
@@ -12,8 +18,8 @@
     } catch (err) {
       notifications.error("Unable to generate new API key")
     }
-    // need to return false to keep modal open
+
-    return false
+    return keepOpen
   }
 
   onMount(async () => {

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

@@ -1,6 +1,12 @@
 <script>
   import { writable, get as svelteGet } from "svelte/store"
-  import { notifications, Input, ModalContent, Dropzone } from "@budibase/bbui"
+  import {
+    notifications,
+    keepOpen,
+    Input,
+    ModalContent,
+    Dropzone,
+  } from "@budibase/bbui"
   import { store, automationStore } from "builderStore"
   import { API } from "api"
   import { apps, admin, auth } from "stores/portal"
@@ -167,7 +173,7 @@
       onConfirm: async () => {
         if (encryptedFile) {
           currentStep = Step.SET_PASSWORD
-          return false
+          return keepOpen
         } else {
           try {
             await createNewApp()
@@ -190,7 +196,7 @@
             message += `: ${lowercase(e.message)}`
           }
           notifications.error(message)
-          return false
+          return keepOpen
         }
       },
       isValid: $encryptionValidation.valid,

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

@@ -1,6 +1,7 @@
 <script>
   import {
     ModalContent,
+    keepOpen,
     Toggle,
     Body,
     InlineAlert,
@@ -32,7 +33,7 @@
           exportApp()
         } else {
           currentStep = Step.SET_PASSWORD
-          return false
+          return keepOpen
         }
       },
       isValid: true,
@@ -43,7 +44,7 @@
       onConfirm: async () => {
         await validation.check({ password })
         if (!$validation.valid) {
-          return false
+          return keepOpen
         }
         exportApp(password)
       },

packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/index.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Modal } from "@budibase/bbui"
+  import { Modal, keepOpen } from "@budibase/bbui"
   import { goto } from "@roxi/routify"
   import { IntegrationTypes } from "constants/backend"
   import GoogleAuthPrompt from "./GoogleAuthPrompt.svelte"
@@ -75,8 +75,7 @@
       notifications.error(`Error creating datasource: ${e.message}`)
     }
 
-    // Prevent modal closing
+    return keepOpen
-    return false
   }
 </script>
 

packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/EditDatasourceConfig.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Modal, notifications } from "@budibase/bbui"
+  import { keepOpen, Modal, notifications } from "@budibase/bbui"
   import { integrationForDatasource } from "stores/selectors"
   import { datasources, integrations } from "stores/backend"
   import DatasourceConfigEditor from "components/backend/Datasources/ConfigEditor/index.svelte"
@@ -23,8 +23,8 @@
       )
     } catch (err) {
       notifications.error(err?.message ?? "Error saving datasource")
-      // prevent the modal from closing
+
-      return false
+      return keepOpen
     }
   }
 </script>

packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Queries/RestImportQueriesModal.svelte

@@ -1,6 +1,7 @@
 <script>
   import { goto } from "@roxi/routify"
   import {
+    keepOpen,
     ModalContent,
     notifications,
     Body,
@@ -70,10 +71,10 @@
       }
 
       notifications.success("Imported successfully")
-      return true
     } catch (error) {
       notifications.error("Error importing queries")
-      return false
+
+      return keepOpen
     }
   }
 </script>

packages/builder/src/pages/builder/portal/users/groups/_components/AppAddModal.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Body, ModalContent, Select } from "@budibase/bbui"
+  import { keepOpen, Body, ModalContent, Select } from "@budibase/bbui"
   import { apps, groups } from "stores/portal"
   import { roles } from "stores/backend"
   import RoleSelect from "components/common/RoleSelect.svelte"
@@ -20,8 +20,8 @@
     if (!selectingRole) {
       selectingRole = true
       await roles.fetchByAppId(prodAppId)
-      // return false to stop closing modal
+
-      return false
+      return keepOpen
     } else {
       await groups.actions.addApp(group._id, prodAppId, selectedRoleId)
     }

packages/builder/src/pages/builder/portal/users/groups/_components/CreateEditGroupModal.svelte

@@ -1,5 +1,6 @@
 <script>
   import {
+    keepOpen,
     ColorPicker,
     Body,
     ModalContent,
@@ -17,7 +18,7 @@
   onConfirm={() => {
     if (!group.name?.trim()) {
       nameError = "Group name cannot be empty"
-      return false
+      return keepOpen
     }
     saveGroup(group)
   }}

packages/builder/src/pages/builder/portal/users/users/_components/AddUserModal.svelte

@@ -1,5 +1,6 @@
 <script>
   import {
+    keepOpen,
     Label,
     ActionButton,
     ModalContent,
@@ -73,7 +74,7 @@
       valid = validateInput(input, index) && valid
     })
     if (!valid) {
-      return false
+      return keepOpen
     }
     showOnboardingTypeModal({ users: userData, groups: userGroups })
   }