From 473ccd27fa8fa64498e3fce052dbd1e340ce3d19 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 2 Aug 2021 15:12:38 +0100 Subject: [PATCH] Add action to close peek modal and proxy notifications from the iframe --- .../actions/CloseScreenPeekModal.svelte | 17 ++++++ .../EventsEditor/actions/index.js | 5 ++ .../src/components/PeekScreenDisplay.svelte | 58 +++++++++++-------- packages/client/src/store/notification.js | 13 +++++ packages/client/src/store/routes.js | 7 ++- packages/client/src/utils/buttonActions.js | 7 +++ 6 files changed, 83 insertions(+), 24 deletions(-) create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenPeekModal.svelte 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 = {