From 5ec4e90c6d3c2e5b75623a31a834410da82e03b6 Mon Sep 17 00:00:00 2001 From: Gerard Burns Date: Thu, 29 Feb 2024 12:51:56 +0000 Subject: [PATCH] Revert "App Preview Skeleton (#12898)" (#13159) This reverts commit 9a9b74579529cd061735c371b73ec862ea1856cc. --- .../[screenId]/_components/AppPreview.svelte | 43 +-- .../builder/portal/apps/[appId]/index.svelte | 51 +--- .../client/src/components/ClientApp.svelte | 256 ++++++++---------- .../client/src/components/FreeFooter.svelte | 1 - .../src/components/ClientAppSkeleton.svelte | 244 ----------------- .../frontend-core/src/components/index.js | 1 - .../frontend-core/src/themes/midnight.css | 3 - packages/frontend-core/src/themes/nord.css | 3 - packages/server/package.json | 1 - .../src/api/controllers/static/index.ts | 79 +----- .../static/templates/BudibaseApp.svelte | 7 - .../api/controllers/static/templates/app.hbs | 8 +- packages/server/src/api/routes/static.ts | 2 +- scripts/build.js | 14 +- 14 files changed, 151 insertions(+), 562 deletions(-) delete mode 100644 packages/frontend-core/src/components/ClientAppSkeleton.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte index 4bd62c0049..fa126bbc99 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte @@ -12,11 +12,17 @@ hoverStore, } from "stores/builder" import ConfirmDialog from "components/common/ConfirmDialog.svelte" - import { Layout, Heading, Body, Icon, notifications } from "@budibase/bbui" + import { + ProgressCircle, + Layout, + Heading, + Body, + Icon, + notifications, + } from "@budibase/bbui" import ErrorSVG from "@budibase/frontend-core/assets/error.svg?raw" import { findComponent, findComponentPath } from "helpers/components" import { isActive, goto } from "@roxi/routify" - import { ClientAppSkeleton } from "@budibase/frontend-core" let iframe let layout @@ -234,16 +240,8 @@
{#if loading} -
- +
+
{:else if error}
@@ -260,6 +258,8 @@ bind:this={iframe} src="/app/preview" class:hidden={loading || error} + class:tablet={$previewStore.previewDevice === "tablet"} + class:mobile={$previewStore.previewDevice === "mobile"} />
diff --git a/packages/frontend-core/src/components/index.js b/packages/frontend-core/src/components/index.js index f71420b12b..f724e1e4d9 100644 --- a/packages/frontend-core/src/components/index.js +++ b/packages/frontend-core/src/components/index.js @@ -5,4 +5,3 @@ export { default as UserAvatar } from "./UserAvatar.svelte" export { default as UserAvatars } from "./UserAvatars.svelte" export { default as Updating } from "./Updating.svelte" export { Grid } from "./grid" -export { default as ClientAppSkeleton } from "./ClientAppSkeleton.svelte" diff --git a/packages/frontend-core/src/themes/midnight.css b/packages/frontend-core/src/themes/midnight.css index cf6a4fbd13..e311452262 100644 --- a/packages/frontend-core/src/themes/midnight.css +++ b/packages/frontend-core/src/themes/midnight.css @@ -17,8 +17,5 @@ --modal-background: var(--spectrum-global-color-gray-50); --drop-shadow: rgba(0, 0, 0, 0.25) !important; --spectrum-global-color-blue-100: rgba(35, 40, 50) !important; - - --spectrum-alias-background-color-secondary: var(--spectrum-global-color-gray-75); - --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100); } diff --git a/packages/frontend-core/src/themes/nord.css b/packages/frontend-core/src/themes/nord.css index bc142db0fd..d47dbe8aa8 100644 --- a/packages/frontend-core/src/themes/nord.css +++ b/packages/frontend-core/src/themes/nord.css @@ -50,7 +50,4 @@ --modal-background: var(--spectrum-global-color-gray-50); --drop-shadow: rgba(0, 0, 0, 0.15) !important; --spectrum-global-color-blue-100: rgb(56, 65, 84) !important; - - --spectrum-alias-background-color-secondary: var(--spectrum-global-color-gray-75); - --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100); } diff --git a/packages/server/package.json b/packages/server/package.json index 4f1a9fb3cc..45980a4be6 100644 --- a/packages/server/package.json +++ b/packages/server/package.json @@ -52,7 +52,6 @@ "@budibase/pro": "0.0.0", "@budibase/shared-core": "0.0.0", "@budibase/string-templates": "0.0.0", - "@budibase/frontend-core": "0.0.0", "@budibase/types": "0.0.0", "@bull-board/api": "5.10.2", "@bull-board/koa": "5.10.2", diff --git a/packages/server/src/api/controllers/static/index.ts b/packages/server/src/api/controllers/static/index.ts index 367934445a..5a3803e6d5 100644 --- a/packages/server/src/api/controllers/static/index.ts +++ b/packages/server/src/api/controllers/static/index.ts @@ -1,5 +1,7 @@ import { InvalidFileExtensions } from "@budibase/shared-core" + import AppComponent from "./templates/BudibaseApp.svelte" + import { join } from "../../../utilities/centralPath" import * as uuid from "uuid" import { ObjectStoreBuckets } from "../../../constants" @@ -22,13 +24,7 @@ import AWS from "aws-sdk" import fs from "fs" import sdk from "../../../sdk" import * as pro from "@budibase/pro" -import { - UserCtx, - App, - Ctx, - ProcessAttachmentResponse, - Feature, -} from "@budibase/types" +import { App, Ctx, ProcessAttachmentResponse } from "@budibase/types" import { getAppMigrationVersion, getLatestMigrationId, @@ -36,61 +32,6 @@ import { import send from "koa-send" -const getThemeVariables = (theme: string) => { - if (theme === "spectrum--lightest") { - return ` - --spectrum-global-color-gray-50: rgb(255, 255, 255); - --spectrum-global-color-gray-200: rgb(244, 244, 244); - --spectrum-global-color-gray-300: rgb(234, 234, 234); - --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-50); - ` - } - if (theme === "spectrum--light") { - return ` - --spectrum-global-color-gray-50: rgb(255, 255, 255); - --spectrum-global-color-gray-200: rgb(234, 234, 234); - --spectrum-global-color-gray-300: rgb(225, 225, 225); - --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-50); - - ` - } - if (theme === "spectrum--dark") { - return ` - --spectrum-global-color-gray-100: rgb(50, 50, 50); - --spectrum-global-color-gray-200: rgb(62, 62, 62); - --spectrum-global-color-gray-300: rgb(74, 74, 74); - --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100); - ` - } - if (theme === "spectrum--darkest") { - return ` - --spectrum-global-color-gray-100: rgb(30, 30, 30); - --spectrum-global-color-gray-200: rgb(44, 44, 44); - --spectrum-global-color-gray-300: rgb(57, 57, 57); - --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100); - ` - } - if (theme === "spectrum--nord") { - return ` - --spectrum-global-color-gray-100: #3b4252; - - --spectrum-global-color-gray-200: #424a5c; - --spectrum-global-color-gray-300: #4c566a; - --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100); - ` - } - if (theme === "spectrum--midnight") { - return ` - --hue: 220; - --sat: 10%; - --spectrum-global-color-gray-100: hsl(var(--hue), var(--sat), 17%); - --spectrum-global-color-gray-200: hsl(var(--hue), var(--sat), 20%); - --spectrum-global-color-gray-300: hsl(var(--hue), var(--sat), 24%); - --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100); - ` - } -} - export const toggleBetaUiFeature = async function (ctx: Ctx) { const cookieName = `beta:${ctx.params.feature}` @@ -205,7 +146,7 @@ const requiresMigration = async (ctx: Ctx) => { return requiresMigrations } -export const serveApp = async function (ctx: UserCtx) { +export const serveApp = async function (ctx: Ctx) { const needMigrations = await requiresMigration(ctx) const bbHeaderEmbed = @@ -226,19 +167,9 @@ export const serveApp = async function (ctx: UserCtx) { const appInfo = await db.get(DocumentType.APP_METADATA) let appId = context.getAppId() - const hideDevTools = !!ctx.params.appUrl - const sideNav = appInfo.navigation.navigation === "Left" - const hideFooter = - ctx?.user?.license?.features?.includes(Feature.BRANDING) || false - const themeVariables = getThemeVariables(appInfo?.theme) - if (!env.isJest()) { const plugins = objectStore.enrichPluginURLs(appInfo.usedPlugins) - const { head, html, css } = AppComponent.render({ - hideDevTools, - sideNav, - hideFooter, metaImage: branding?.metaImageUrl || "https://res.cloudinary.com/daog6scxm/image/upload/v1698759482/meta-images/plain-branded-meta-image-coral_ocxmgu.png", @@ -263,7 +194,7 @@ export const serveApp = async function (ctx: UserCtx) { ctx.body = await processString(appHbs, { head, body: html, - css: `:root{${themeVariables}} ${css.code}`, + style: css.code, appId, embedded: bbHeaderEmbed, }) diff --git a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte index 63b293b4ca..7819368fc0 100644 --- a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte +++ b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte @@ -1,6 +1,4 @@ @@ -102,7 +96,6 @@ -
{#if clientLibPath}

There was an error loading your app

diff --git a/packages/server/src/api/controllers/static/templates/app.hbs b/packages/server/src/api/controllers/static/templates/app.hbs index b01b723c3e..8c445158a0 100644 --- a/packages/server/src/api/controllers/static/templates/app.hbs +++ b/packages/server/src/api/controllers/static/templates/app.hbs @@ -1,12 +1,8 @@ - + {{{head}}} - +