diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenPeekModal.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenPeekModal.svelte
new file mode 100644
index 0000000000..5651590bd2
--- /dev/null
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenPeekModal.svelte
@@ -0,0 +1,17 @@
+
+
+
+ This action doesn't require any additional settings.
+
+ This action won't do anything if there isn't a screen-peek modal open.
+
+
+
+
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
index bfbf97701b..262f9362e4 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
@@ -6,6 +6,7 @@ import TriggerAutomation from "./TriggerAutomation.svelte"
import ValidateForm from "./ValidateForm.svelte"
import LogOut from "./LogOut.svelte"
import ClearForm from "./ClearForm.svelte"
+import CloseScreenPeekModal from "./CloseScreenPeekModal.svelte"
// Defines which actions are available to configure in the front end.
// Unfortunately the "name" property is used as the identifier so please don't
@@ -47,4 +48,8 @@ export default [
name: "Clear Form",
component: ClearForm,
},
+ {
+ name: "Close Screen-Peek Modal",
+ component: CloseScreenPeekModal,
+ },
]
diff --git a/packages/client/src/components/PeekScreenDisplay.svelte b/packages/client/src/components/PeekScreenDisplay.svelte
index 566121209c..7d144d270e 100644
--- a/packages/client/src/components/PeekScreenDisplay.svelte
+++ b/packages/client/src/components/PeekScreenDisplay.svelte
@@ -1,49 +1,61 @@
@@ -53,7 +65,7 @@
diff --git a/packages/client/src/store/notification.js b/packages/client/src/store/notification.js
index bed0adbc49..e3af9aacd1 100644
--- a/packages/client/src/store/notification.js
+++ b/packages/client/src/store/notification.js
@@ -1,5 +1,6 @@
import { writable, get } from "svelte/store"
import { generate } from "shortid"
+import { routeStore } from "./routes"
const NOTIFICATION_TIMEOUT = 3000
@@ -22,6 +23,17 @@ const createNotificationStore = () => {
if (block) {
return
}
+
+ // If peeking, pass notifications back to parent window
+ if (get(routeStore).queryParams?.peek) {
+ window.dispatchEvent(
+ new CustomEvent("notification", {
+ detail: { message, type, icon },
+ })
+ )
+ return
+ }
+
store.set({
id: generate(),
type,
@@ -38,6 +50,7 @@ const createNotificationStore = () => {
return {
subscribe: store.subscribe,
actions: {
+ send,
info: msg => send(msg, "info", "Info"),
success: msg => send(msg, "success", "CheckmarkCircle"),
warning: msg => send(msg, "warning", "Alert"),
diff --git a/packages/client/src/store/routes.js b/packages/client/src/store/routes.js
index 932ce7f541..e6473fb40c 100644
--- a/packages/client/src/store/routes.js
+++ b/packages/client/src/store/routes.js
@@ -44,7 +44,12 @@ const createRouteStore = () => {
}
const setQueryParams = queryParams => {
store.update(state => {
- state.queryParams = queryParams
+ state.queryParams = {
+ ...queryParams,
+ // Never unset the peek param - screen peek modals should always be
+ // in a peek state, even if they navigate to a different page
+ peek: queryParams.peek || state.queryParams?.peek,
+ }
return state
})
}
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index d15aa17366..03ed5ce2d0 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -99,6 +99,12 @@ const clearFormHandler = async (action, context) => {
)
}
+const closeScreenPeekModalHandler = () => {
+ // Emit this as a window event, so parent screens which are iframing us in
+ // can close the modal
+ window.dispatchEvent(new Event("close-screen-peek"))
+}
+
const handlerMap = {
["Save Row"]: saveRowHandler,
["Delete Row"]: deleteRowHandler,
@@ -109,6 +115,7 @@ const handlerMap = {
["Refresh Datasource"]: refreshDatasourceHandler,
["Log Out"]: logoutHandler,
["Clear Form"]: clearFormHandler,
+ ["Close Screen-Peek Modal"]: closeScreenPeekModalHandler,
}
const confirmTextMap = {