diff --git a/packages/builder/src/components/portal/onboarding/TourPopover.svelte b/packages/builder/src/components/portal/onboarding/TourPopover.svelte
index 1140708593..e319d3bee4 100644
--- a/packages/builder/src/components/portal/onboarding/TourPopover.svelte
+++ b/packages/builder/src/components/portal/onboarding/TourPopover.svelte
@@ -1,6 +1,6 @@
{#if tourKey}
@@ -100,6 +96,7 @@
dismissible={false}
offset={15}
handlePostionUpdate={tourStep?.positionHandler}
+ customZindex={3}
>
diff --git a/packages/builder/src/components/portal/onboarding/TourWrap.svelte b/packages/builder/src/components/portal/onboarding/TourWrap.svelte
index 9be6255f52..779a84f463 100644
--- a/packages/builder/src/components/portal/onboarding/TourWrap.svelte
+++ b/packages/builder/src/components/portal/onboarding/TourWrap.svelte
@@ -1,44 +1,62 @@
diff --git a/packages/builder/src/components/portal/onboarding/tours.js b/packages/builder/src/components/portal/onboarding/tours.js
index 894f9c7894..f5e34518cb 100644
--- a/packages/builder/src/components/portal/onboarding/tours.js
+++ b/packages/builder/src/components/portal/onboarding/tours.js
@@ -32,14 +32,18 @@ export const TOUR_KEYS = {
BUILDER_FORM_VIEW_UPDATE: "builder-form-view-update",
}
+export const getCurrentStepIdx = (steps, tourStepKey) => {
+ if (!steps?.length) {
+ return
+ }
+ if (steps?.length && !tourStepKey) {
+ return 0
+ }
+ return steps.findIndex(step => step.id === tourStepKey)
+}
+
const resetTourState = () => {
- builderStore.update(state => ({
- ...state,
- tourNodes: undefined,
- tourKey: undefined,
- tourKeyStep: undefined,
- onboarding: false,
- }))
+ builderStore.setTour()
}
const endUserOnboarding = async ({ skipped = false } = {}) => {
@@ -58,6 +62,7 @@ const endUserOnboarding = async ({ skipped = false } = {}) => {
// Update the cached user
await auth.getSelf()
+ builderStore.endBuilderOnboarding()
resetTourState()
} catch (e) {
console.error("Onboarding failed", e)
@@ -222,6 +227,7 @@ const getTours = () => {
},
positionHandler: customPositionHandler,
align: "left-outside",
+ scrollIntoView: true,
},
],
onSkip: async () => {
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index 474c17ffb7..f786fad017 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -95,7 +95,7 @@
const release_date = new Date("2023-03-01T00:00:00.000Z")
const onboarded = new Date($auth.user?.onboardedAt)
if (onboarded < release_date) {
- builderStore.startTour(TOUR_KEYS.FEATURE_ONBOARDING)
+ builderStore.setTour(TOUR_KEYS.FEATURE_ONBOARDING)
}
}
}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
index d263b6b983..c2a7a364e5 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
@@ -155,7 +155,7 @@
// Handler for Datasource Screen Creation
const completeDatasourceScreenCreation = async () => {
- templates = rowListScreen(selectedDatasources)
+ templates = rowListScreen(selectedDatasources, mode)
const screens = templates.map(template => {
let screenTemplate = template.create()
@@ -192,10 +192,17 @@
}
const loadNewScreen = createdScreens => {
- const lastScreen = createdScreens.slice(-1)
+ const lastScreen = createdScreens.slice(-1)[0]
// Go to new screen
- $goto(`./${lastScreen._id}`)
+ if (lastScreen?.props?._children.length) {
+ // Focus on the main component for the streen type
+ const mainComponent = lastScreen?.props?._children?.[0]._id
+ $goto(`./${lastScreen._id}/${mainComponent}`)
+ } else {
+ $goto(`./${lastScreen._id}`)
+ }
+
screenStore.select(lastScreen._id)
}
@@ -206,8 +213,6 @@
return screenTemplate
})
const createdScreens = await createScreens({ screens, screenAccessRole })
- const lastScreen = createdScreens?.slice(-1)?.pop()
- const mainComponent = lastScreen?.props?._children?.[0]._id
if (formType === "Update" || formType === "Create") {
const associatedTour =
@@ -217,18 +222,12 @@
const tourRequired = !$auth?.user?.tours?.[associatedTour]
if (tourRequired) {
- builderStore.update(state => ({
- ...state,
- tourStepKey: null,
- tourNodes: null,
- tourKey: associatedTour,
- }))
+ builderStore.setTour(associatedTour)
}
}
// Go to new screen
- $goto(`./${lastScreen._id}/${mainComponent}`)
- screenStore.select(lastScreen._id)
+ loadNewScreen(createdScreens)
}
// Submit screen config for creation.
diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/index.svelte
index 6c3637a248..ff3b0beee9 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/index.svelte
@@ -4,7 +4,7 @@
import blankImage from "./images/blank.png"
import tableImage from "./images/table.png"
import gridImage from "./images/grid.png"
- import formImage from "./images/form.png" //optimized example
+ import formImage from "./images/form.png"
import CreateScreenModal from "./CreateScreenModal.svelte"
import { screenStore } from "stores/builder"
diff --git a/packages/builder/src/stores/builder/builder.js b/packages/builder/src/stores/builder/builder.js
index 22b663af35..19253d2688 100644
--- a/packages/builder/src/stores/builder/builder.js
+++ b/packages/builder/src/stores/builder/builder.js
@@ -7,7 +7,7 @@ import { TOUR_KEYS } from "components/portal/onboarding/tours.js"
export const INITIAL_BUILDER_STATE = {
previousTopNavPath: {},
- highlightedSettingKey: null,
+ highlightedSetting: null,
propertyFocus: null,
builderSidePanel: false,
onboarding: false,
@@ -61,7 +61,7 @@ export class BuilderStore extends BudiStore {
highlightSetting(key, type) {
this.update(state => ({
...state,
- highlightedSetting: { key, type: type || "info" },
+ highlightedSetting: key ? { key, type: type || "info" } : null,
}))
}
@@ -135,9 +135,18 @@ export class BuilderStore extends BudiStore {
}))
}
- startTour(tourKey) {
+ endBuilderOnboarding() {
this.update(state => ({
...state,
+ onboarding: false,
+ }))
+ }
+
+ setTour(tourKey) {
+ this.update(state => ({
+ ...state,
+ tourStepKey: null,
+ tourNodes: null,
tourKey: tourKey,
}))
}
diff --git a/packages/builder/src/stores/builder/tests/builder.test.js b/packages/builder/src/stores/builder/tests/builder.test.js
index 7aac2489db..e6f52689aa 100644
--- a/packages/builder/src/stores/builder/tests/builder.test.js
+++ b/packages/builder/src/stores/builder/tests/builder.test.js
@@ -88,14 +88,42 @@ describe("Builder store", () => {
)
})
- it("Sync a highlighted setting key to state", ctx => {
- expect(ctx.test.store.highlightedSettingKey).toBeNull()
+ it("Sync a highlighted setting key to state. Default to info type", ctx => {
+ expect(ctx.test.store.highlightedSetting).toBeNull()
ctx.test.builderStore.highlightSetting("testing")
expect(ctx.test.store).toStrictEqual({
...INITIAL_BUILDER_STATE,
- highlightedSettingKey: "testing",
+ highlightedSetting: {
+ key: "testing",
+ type: "info",
+ },
+ })
+ })
+
+ it("Sync a highlighted setting key to state. Use provided type", ctx => {
+ expect(ctx.test.store.highlightedSetting).toBeNull()
+
+ ctx.test.builderStore.highlightSetting("testing", "error")
+
+ expect(ctx.test.store).toStrictEqual({
+ ...INITIAL_BUILDER_STATE,
+ highlightedSetting: {
+ key: "testing",
+ type: "error",
+ },
+ })
+ })
+
+ it("Sync a highlighted setting key to state. Unset when no value is passed", ctx => {
+ expect(ctx.test.store.highlightedSetting).toBeNull()
+
+ ctx.test.builderStore.highlightSetting("testing", "error")
+ ctx.test.builderStore.highlightSetting()
+
+ expect(ctx.test.store).toStrictEqual({
+ ...INITIAL_BUILDER_STATE,
})
})