MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Feedback - added Modal after deploy

This commit is contained in:
Michael Shanks 2020-10-22 21:59:40 +01:00
parent 0b2872a1b6
commit cecf00a09e
5 changed files with 101 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
packages/builder/src/components/userInterface/Feedback.svelte
View File

@ -1,82 +0,0 @@
<script>
import { FeedbackIcon } from "components/common/Icons/"
import { Popover } from "@budibase/bbui"
import analytics from "analytics"
const feedbackUrl = "https://feedback.budibase.com"
let iconContainer
let popover
let iframe
// the app @ feedback.budibase.com expects to be loaded
// in an iframe, and posts messages back.
// this means that we can submit using the Builder's posthog setup
window.addEventListener(
"message",
function(ev) {
if (ev.origin !== feedbackUrl) return
if (ev.data.type === "loaded") {
iframe.setAttribute(
"style",
`height:${ev.data.height}px; width:${ev.data.width}px`
)
} else if (ev.data.type === "submitted") {
analytics.captureEvent("Feedback Submitted", ev.data.data)
popover.hide()
}
},
false
)
</script>
<span class="container" bind:this={iconContainer} on:click={popover.show}>
<FeedbackIcon />
</span>
<Popover bind:this={popover} anchor={iconContainer} align="right">
<iframe src={feedbackUrl} title="feedback" bind:this={iframe}>
<html lang="html">
<style>
body {
display: flex;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
}
</style>
<body>
<div>Loading...</div>
</body>
</html>
</iframe>
</Popover>
<style>
.container {
cursor: pointer;
color: var(--grey-7);
margin: 0 20px 0 0;
font-weight: 500;
font-size: 1rem;
height: 100%;
display: flex;
flex: 1;
align-items: center;
box-sizing: border-box;
}
.container:hover {
color: var(--ink);
font-weight: 500;
}
iframe {
border-style: none;
height: auto;
overflow-y: hidden;
overflow-x: hidden;
min-width: 500px;
}
</style>

57
packages/builder/src/components/userInterface/Feedback/FeedbackIframe.svelte Normal file
View File

@ -0,0 +1,57 @@
<script>
import analytics from "analytics"
import { createEventDispatcher } from "svelte"
const dispatch = createEventDispatcher()
const feedbackUrl = "https://feedback.budibase.com"
let iframe
// the app @ feedback.budibase.com expects to be loaded
// in an iframe, and posts messages back.
// this means that we can submit using the Builder's posthog setup
window.addEventListener(
"message",
function(ev) {
if (ev.origin !== feedbackUrl) return
if (ev.data.type === "loaded") {
iframe.setAttribute(
"style",
`height:${ev.data.height}px; width:${ev.data.width}px`
)
} else if (ev.data.type === "submitted") {
analytics.captureEvent("Feedback Submitted", ev.data.data)
dispatch("finished")
}
},
false
)
</script>
<iframe src={feedbackUrl} title="feedback" bind:this={iframe}>
<html lang="html">
<style>
body {
display: flex;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
}
</style>
<body>
<div>Loading...</div>
</body>
</html>
</iframe>
<style>
iframe {
border-style: none;
height: auto;
overflow-y: hidden;
overflow-x: hidden;
min-width: 500px;
}
</style>

35
packages/builder/src/components/userInterface/Feedback/FeedbackNavLink.svelte Normal file
View File

@ -0,0 +1,35 @@
<script>
import { FeedbackIcon } from "components/common/Icons/"
import { Popover } from "@budibase/bbui"
import FeedbackIframe from "./FeedbackIframe.svelte"
let iconContainer
let popover
</script>
<span class="container" bind:this={iconContainer} on:click={popover.show}>
<FeedbackIcon />
</span>
<Popover bind:this={popover} anchor={iconContainer} align="right">
<FeedbackIframe on:finished={popover.hide} />
</Popover>
<style>
.container {
cursor: pointer;
color: var(--grey-7);
margin: 0 20px 0 0;
font-weight: 500;
font-size: 1rem;
height: 100%;
display: flex;
flex: 1;
align-items: center;
box-sizing: border-box;
}
.container:hover {
color: var(--ink);
font-weight: 500;
}
</style>

4
packages/builder/src/pages/[application]/_reset.svelte
View File

@ -2,7 +2,7 @@
import { store, automationStore, backendUiStore } from "builderStore"
import { Button } from "@budibase/bbui"
import SettingsLink from "components/settings/Link.svelte"
import Feedback from "components/userInterface/Feedback.svelte"
import FeedbackNavLink from "components/userInterface/Feedback/FeedbackNavLink.svelte"
import { get } from "builderStore/api"
import { isActive, goto, layout } from "@sveltech/routify"
import { PreviewIcon } from "components/common/Icons/"
@ -66,7 +66,7 @@
{/each}
</div>
<div class="toprightnav">
<Feedback />
<FeedbackNavLink />
<SettingsLink />
<span
class:active={false}

8
packages/builder/src/pages/[application]/deploy/index.svelte
View File

@ -1,16 +1,18 @@
<script>
import { onMount } from "svelte"
import { Button, Spacer } from "@budibase/bbui"
import { Button, Spacer, Modal } from "@budibase/bbui"
import { store } from "builderStore"
import { notifier } from "builderStore/store/notifications"
import api from "builderStore/api"
import Spinner from "components/common/Spinner.svelte"
import DeploymentHistory from "components/deploy/DeploymentHistory.svelte"
import analytics from "analytics"
import FeedbackIframe from "components/userInterface/Feedback/FeedbackIframe.svelte"
let loading = false
let deployments = []
let poll
let feedbackModal
$: appId = $store.appId
@ -31,6 +33,7 @@
analytics.captureEvent("Deployed App", {
appId,
})
feedbackModal.show()
} catch (err) {
analytics.captureEvent("Deploy App Failed", {
appId,
@ -57,6 +60,9 @@
src="/_builder/assets/deploy-rocket.jpg"
alt="Rocket flying through sky" />
</section>
<Modal bind:this={feedbackModal}>
<FeedbackIframe on:finished={feedbackModal.hide} />
</Modal>
<DeploymentHistory {appId} />
<style>