2021-07-07 18:07:42 +02:00
|
|
|
<script>
|
|
|
|
|
import {
|
|
|
|
|
Icon,
|
|
|
|
|
Modal,
|
|
|
|
|
notifications,
|
|
|
|
|
ModalContent,
|
|
|
|
|
Body,
|
2021-07-07 18:35:28 +02:00
|
|
|
Button,
|
2021-07-07 18:07:42 +02:00
|
|
|
} from "@budibase/bbui"
|
|
|
|
|
import { store } from "builderStore"
|
2022-01-21 10:10:59 +01:00
|
|
|
import { API } from "api"
|
2021-07-07 18:07:42 +02:00
|
|
|
import clientPackage from "@budibase/client/package.json"
|
|
|
|
|
|
|
|
|
|
let updateModal
|
|
|
|
|
|
|
|
|
|
$: appId = $store.appId
|
|
|
|
|
$: updateAvailable = clientPackage.version !== $store.version
|
2021-07-07 18:35:28 +02:00
|
|
|
$: revertAvailable = $store.revertableVersion != null
|
|
|
|
|
|
|
|
|
|
const refreshAppPackage = async () => {
|
2022-01-21 10:10:59 +01:00
|
|
|
try {
|
|
|
|
|
const pkg = await API.fetchAppPackage(appId)
|
2021-07-07 18:35:28 +02:00
|
|
|
await store.actions.initialise(pkg)
|
2022-01-21 10:10:59 +01:00
|
|
|
} catch (error) {
|
|
|
|
|
notifications.error("Error fetching app package")
|
2021-07-07 18:35:28 +02:00
|
|
|
}
|
|
|
|
|
}
|
2021-07-07 18:07:42 +02:00
|
|
|
|
|
|
|
|
const update = async () => {
|
|
|
|
|
try {
|
2022-01-21 10:10:59 +01:00
|
|
|
await API.updateAppClientVersion(appId)
|
2021-07-08 13:56:35 +02:00
|
|
|
|
|
|
|
|
// Don't wait for the async refresh, since this causes modal flashing
|
|
|
|
|
refreshAppPackage()
|
2021-07-07 18:35:28 +02:00
|
|
|
notifications.success(
|
|
|
|
|
`App updated successfully to version ${clientPackage.version}`
|
|
|
|
|
)
|
|
|
|
|
} catch (err) {
|
|
|
|
|
notifications.error(`Error updating app: ${err}`)
|
|
|
|
|
}
|
2022-01-21 10:10:59 +01:00
|
|
|
updateModal.hide()
|
2021-07-07 18:35:28 +02:00
|
|
|
}
|
2021-07-07 18:07:42 +02:00
|
|
|
|
2021-07-07 18:35:28 +02:00
|
|
|
const revert = async () => {
|
|
|
|
|
try {
|
2022-01-21 10:10:59 +01:00
|
|
|
await API.revertAppClientVersion(appId)
|
2021-07-08 13:56:35 +02:00
|
|
|
|
|
|
|
|
// Don't wait for the async refresh, since this causes modal flashing
|
|
|
|
|
refreshAppPackage()
|
2021-07-07 18:07:42 +02:00
|
|
|
notifications.success(
|
2022-01-21 10:10:59 +01:00
|
|
|
`App reverted successfully to version ${$store.revertableVersion}`
|
2021-07-07 18:07:42 +02:00
|
|
|
)
|
|
|
|
|
} catch (err) {
|
2021-07-07 18:35:28 +02:00
|
|
|
notifications.error(`Error reverting app: ${err}`)
|
2021-07-07 18:07:42 +02:00
|
|
|
}
|
2021-07-07 18:35:28 +02:00
|
|
|
updateModal.hide()
|
2021-07-07 18:07:42 +02:00
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<div class="icon-wrapper" class:highlight={updateAvailable}>
|
|
|
|
|
<Icon name="Refresh" hoverable on:click={updateModal.show} />
|
|
|
|
|
</div>
|
|
|
|
|
<Modal bind:this={updateModal}>
|
|
|
|
|
<ModalContent
|
|
|
|
|
title="App version"
|
|
|
|
|
confirmText="Update"
|
|
|
|
|
cancelText={updateAvailable ? "Cancel" : "Close"}
|
|
|
|
|
onConfirm={update}
|
|
|
|
|
showConfirmButton={updateAvailable}
|
|
|
|
|
>
|
2021-07-07 18:35:28 +02:00
|
|
|
<div slot="footer">
|
|
|
|
|
{#if revertAvailable}
|
|
|
|
|
<Button quiet secondary on:click={revert}>Revert</Button>
|
|
|
|
|
{/if}
|
|
|
|
|
</div>
|
2021-07-07 18:07:42 +02:00
|
|
|
{#if updateAvailable}
|
|
|
|
|
<Body size="S">
|
|
|
|
|
This app is currently using version <b>{$store.version}</b>, but version
|
2021-07-07 18:35:28 +02:00
|
|
|
<b>{clientPackage.version}</b> is available. Updates can contain new features,
|
|
|
|
|
performance improvements and bug fixes.
|
2021-07-07 18:07:42 +02:00
|
|
|
</Body>
|
|
|
|
|
{:else}
|
|
|
|
|
<Body size="S">
|
|
|
|
|
This app is currently using version <b>{$store.version}</b> which is the
|
|
|
|
|
latest version available.
|
|
|
|
|
</Body>
|
|
|
|
|
{/if}
|
2021-07-07 18:35:28 +02:00
|
|
|
{#if revertAvailable}
|
|
|
|
|
<Body size="S">
|
|
|
|
|
You can revert this app to version
|
|
|
|
|
<b>{$store.revertableVersion}</b>
|
|
|
|
|
if you're experiencing issues with the current version.
|
|
|
|
|
</Body>
|
|
|
|
|
{/if}
|
2021-07-07 18:07:42 +02:00
|
|
|
</ModalContent>
|
|
|
|
|
</Modal>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.icon-wrapper {
|
|
|
|
|
display: contents;
|
|
|
|
|
}
|
|
|
|
|
.icon-wrapper.highlight :global(svg) {
|
|
|
|
|
color: var(--spectrum-global-color-blue-600);
|
|
|
|
|
}
|
|
|
|
|
</style>
|
