Use BBUI components instead of raw HTML.

This commit is contained in:
Sam Rose 2024-03-11 15:19:23 +00:00
parent 3550ae8c1a
commit 19803f9182
No known key found for this signature in database
2 changed files with 30 additions and 59 deletions

View File

@ -1,5 +1,6 @@
<script>
import { MaintenanceType } from "@budibase/types"
import { Heading, Body, Button, Layout } from "@budibase/bbui"
import { admin } from "stores/portal"
import BudibaseLogo from "../portal/_components/BudibaseLogo.svelte"
</script>
@ -9,25 +10,26 @@
<div class="hero">
<BudibaseLogo />
</div>
<div>
<div class="inner-content">
{#each $admin.maintenance as maintenance}
{#if maintenance.type === MaintenanceType.SQS_MISSING}
<h1 class="title">Please upgrade your Budibase installation</h1>
<p>
We've detected that the version of Budibase you're using depends on
a more recent version of the CouchDB database than what you have
installed.
</p>
<p>
To resolve this, you can either rollback to a previous version of
Budibase, or follow the migration guide to update to a later version
of CouchDB.
</p>
<div class="buttons">
<a class="button" href="https://docs.budibase.com"
>Migration guide</a
>
</div>
<Layout>
<Heading>Please upgrade your Budibase installation</Heading>
<Body>
We've detected that the version of Budibase you're using depends
on a more recent version of the CouchDB database than what you
have installed.
</Body>
<Body>
To resolve this, you can either rollback to a previous version of
Budibase, or follow the migration guide to update to a later
version of CouchDB.
</Body>
</Layout>
<Button
on:click={() => (window.location = "https://docs.budibase.com")}
>Migration guide</Button
>
{/if}
{/each}
</div>
@ -35,27 +37,7 @@
</div>
<style>
:root {
--spectrum-global-color-gray-600: rgb(144, 144, 144);
--spectrum-global-color-gray-900: rgb(255, 255, 255);
--spectrum-global-color-gray-800: rgb(227, 227, 227);
--bb-indigo: #6e56ff;
--bb-indigo-light: #9f8fff;
}
a {
color: #e7e7e7;
font-family: "Roboto", sans-serif;
border: none;
font-size: 15px;
border-radius: 15px;
padding: 8px 22px;
}
a:hover {
cursor: pointer;
}
.main {
font-size: 1.5em;
max-width: 700px;
margin: auto;
height: 100vh;
@ -63,37 +45,23 @@
flex-direction: row;
align-items: center;
justify-content: center;
padding: 1em;
}
.title {
font-weight: 400;
color: var(--spectrum-global-color-gray-900);
}
.buttons {
display: flex;
flex-direction: row;
justify-content: flex-start;
margin-top: 15px;
}
.button {
background-color: var(--bb-indigo);
}
.button:hover {
background-color: var(--bb-indigo-light);
}
.hero {
height: 60px;
margin: 10px 40px 10px 0;
margin: var(--spacing-l);
}
.content {
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: center;
gap: 1em;
gap: var(--spacing-m);
}
h1 {
margin-bottom: 10px;
.inner-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-m);
}
@media only screen and (max-width: 600px) {

View File

@ -45,6 +45,9 @@ export const fetch = async (ctx: Ctx) => {
maintenance: [],
}
// TODO: remove
ctx.body.maintenance.push({ type: MaintenanceType.SQS_MISSING })
if (env.SELF_HOSTED) {
if (await isSqsMissing()) {
ctx.body.maintenance.push({ type: MaintenanceType.SQS_MISSING })