budibase config checklist complete

packages/builder/src/components/common/ConfigChecklist.svelte

@@ -0,0 +1,60 @@
+<script>
+  import { isActive, url, goto } from "@roxi/routify"
+  import { onMount } from "svelte"
+  import {
+    ActionMenu,
+    Checkbox,
+    Body,
+    MenuItem,
+    Icon,
+    Heading,
+    Avatar,
+    Search,
+    Layout,
+    ProgressCircle,
+    SideNavigation as Navigation,
+    SideNavigationItem as Item,
+  } from "@budibase/bbui"
+  import api from "builderStore/api"
+  import { organisation, admin } from "stores/portal"
+
+  const MESSAGES = {
+    apps: "Create your first app",
+    smtp: "Set up email",
+    adminUser: "Create your first user",
+  }
+</script>
+
+<ActionMenu>
+  <div slot="control" class="icon">
+    <ProgressCircle size="S" value={$admin.onboardingProgress} />
+  </div>
+  <MenuItem disabled>
+    <header>
+      <Heading size="XXS">Get Started Checklist</Heading>
+      <ProgressCircle size="S" value={$admin.onboardingProgress} />
+    </header>
+  </MenuItem>
+  {#each Object.keys($admin.checklist) as checklistItem, idx}
+    <MenuItem>
+      <div class="checklist-item">
+        <span>{idx + 1}. {MESSAGES[checklistItem]}</span>
+        <Checkbox value={!!$admin.checklist[checklistItem]} />
+      </div>
+    </MenuItem>
+  {/each}
+</ActionMenu>
+
+<style>
+  header {
+    display: grid;
+    align-items: center;
+    grid-template-columns: 90% 10%;
+  }
+
+  .checklist-item {
+    display: grid;
+    align-items: center;
+    grid-template-columns: 90% 10%;
+  }
+</style>

packages/builder/src/pages/_layout.svelte

@@ -5,7 +5,7 @@
     SideNavigation as Navigation,
     SideNavigationItem as Item,
   } from "@budibase/bbui"
-  import { auth } from "stores/backend"
+  import { admin } from "stores/portal"
   import LoginForm from "components/login/LoginForm.svelte"
   import BuilderSettingsButton from "components/start/BuilderSettingsButton.svelte"
   import LogoutButton from "components/start/LogoutButton.svelte"
@@ -14,21 +14,16 @@
 
   let checklist
 
-  async function fetchConfigChecklist() {
-    const response = await api.get("/api/admin/configs/checklist")
-    return await response.json()
-  }
-
   onMount(async () => {
-    const response = await fetchConfigChecklist()
+    await admin.init()
-    if (!response.adminUser) {
+    if (!$admin?.checklist?.adminUser) {
       $goto("./admin")
+    } else {
+      $goto("./portal")
     }
-
-    checklist = response
   })
 </script>
 
-{#if checklist}
+{#if $admin.checklist}
   <slot />
 {/if}

packages/builder/src/pages/portal/_layout.svelte

@@ -2,7 +2,11 @@
   import { isActive, url, goto } from "@roxi/routify"
   import { onMount } from "svelte"
   import {
+    ActionMenu,
+    Checkbox,
+    MenuItem,
     Icon,
+    Heading,
     Avatar,
     Search,
     Layout,
@@ -11,13 +15,13 @@
     SideNavigationItem as Item,
   } from "@budibase/bbui"
   import api from "builderStore/api"
-  import { organisation } from "stores/portal"
+  import ConfigChecklist from "components/common/ConfigChecklist.svelte"
+  import { organisation, admin } from "stores/portal"
 
   organisation.init()
 
   let orgName
   let orgLogo
-  let onBoardingProgress
   let user
 
   async function getInfo() {
@@ -55,7 +59,7 @@
           <span>{$organisation?.company}</span>
         </div>
         <div class="onboarding">
-          <ProgressCircle size="S" value={onBoardingProgress} />
+          <ConfigChecklist />
         </div>
       </div>
       <div class="menu">

packages/builder/src/stores/portal/admin.js

@@ -1,7 +1,33 @@
 import { writable } from "svelte/store"
+import api from "builderStore/api"
 
-const INITIAL_ADMIN_STATE = {
+export function createAdminStore() {
-  oauth: [],
+  const { subscribe, set } = writable({})
+
+  async function init() {
+    try {
+      const response = await api.get("/api/admin/configs/checklist")
+      const json = await response.json()
+
+      const onboardingSteps = Object.keys(json)
+
+      const stepsComplete = onboardingSteps.reduce((score, step) => score + Number(!!json[step]), 0)
+
+      set({
+        checklist: json,
+        onboardingProgress: stepsComplete / onboardingSteps.length * 100   
+      })
+    } catch (err) {
+      set({
+        checklist: null
+      })
+    }
+  }
+
+  return {
+    subscribe,
+    init,
+  }
 }
 
-export const admin = writable({ ...INITIAL_ADMIN_STATE })
+export const admin = createAdminStore()