Create default layout when clicking Build Page on onboarding

client/web/compose/src/components/Admin/Page/Tree.vue

@@ -18,22 +18,20 @@
           class="d-flex flex-wrap align-content-center justify-content-between pr-2"
         >
           <div
-            class="px-2 flex-fill overflow-hidden text-truncate"
+            class="px-2 flex-fill overflow-hidden text-truncate gap-1"
             :class="{'grab': namespace.canCreatePage }"
           >
             {{ item.title }}
-            <span
+            <font-awesome-icon
               v-if="!item.visible && item.moduleID == '0'"
+              v-b-tooltip.noninteractive.hover="{ title: $t('notVisible'), container: '#body' }"
               class="text-danger"
-            >
-              <font-awesome-icon
-                v-b-tooltip.noninteractive.hover="{ title: $t('notVisible'), container: '#body' }"
-                :icon="['fas', 'eye-slash']"
-              />
-            </span>
+              :icon="['fas', 'eye-slash']"
+            />
             <b-badge
               v-if="!isValid(item)"
               variant="danger"
+              class="ml-1"
             >
               {{ $t('invalid') }}
             </b-badge>

client/web/compose/src/views/Admin/Pages/List.vue

@@ -33,7 +33,7 @@
                   data-test-id="button-create-page"
                   type="submit"
                   variant="primary"
-                  @click="handleAddPageFormSubmit"
+                  @click="createNewPage"
                 >
                   {{ $t('createLabel') }}
                 </b-button>
@@ -178,7 +178,7 @@ export default {
         })
     },
 
-    handleAddPageFormSubmit () {
+    createNewPage () {
       const { namespaceID } = this.namespace
       this.page.weight = this.tree.length
       this.createPage({ ...this.page, namespaceID }).then(({ pageID, title }) => {

client/web/compose/src/views/Public/Index.vue

@@ -241,6 +241,7 @@ export default {
     ...mapActions({
       createModule: 'module/create',
       createPage: 'page/create',
+      createPageLayout: 'pageLayout/create',
       createChart: 'chart/create',
     }),
 
@@ -284,8 +285,11 @@ export default {
         blocks: [],
       })
 
-      this.createPage(newPage).then((page) => {
-        this.$router.push({ name: 'admin.pages.builder', params: { pageID: page.pageID } })
+      this.createPage(newPage).then(({ pageID, title }) => {
+        const pageLayout = new compose.PageLayout({ namespaceID, pageID, handle: 'primary', meta: { title } })
+        return this.createPageLayout(pageLayout).then(() => {
+          this.$router.push({ name: 'admin.pages.builder', params: { pageID } })
+        })
       }).catch(this.toastErrorHandler(this.$t('notification:page.saveFailed')))
     },