Merge pull request #848 from FlowFuse/137-default-page

Config - Default Page

cypress/fixtures/flows/dashboard-pages.json

@@ -19,7 +19,7 @@
         "icon": "",
         "layout": "grid",
         "theme": "dashboard-ui-theme",
-        "order": -1,
+        "order": 2,
         "className": "",
         "visible": "true",
         "disabled": false
@@ -33,7 +33,7 @@
         "icon": "",
         "layout": "grid",
         "theme": "dashboard-ui-theme",
-        "order": -1,
+        "order": 1,
         "className": "",
         "visible": "true",
         "disabled": false

cypress/tests/config-nodes/pages.spec.js

@@ -7,8 +7,8 @@ describe('Node-RED Dashboard 2.0', () => {
     })
 
     it('will redirect to the default page when an unrecognised URL is given', () => {
-        cy.url().should('include', '/dashboard/page1')
-        cy.get('.v-toolbar-title.v-app-bar-title').should('have.text', 'Page 1')
+        cy.url().should('include', '/dashboard/page2')
+        cy.get('.v-toolbar-title.v-app-bar-title').should('have.text', 'Page 2')
     })
 
     it('will have a navigation drawer, accessible via the top-left button, and can switch between pages here', () => {

docs/getting-started.md

@@ -56,6 +56,17 @@ Layout options in a Dashboard 2.0 user interface are controlled by two main sett
 ![Example of a "Grid" page layout, with a "Collapsing" sidebar navigation.](./assets/images/getting-started-layout.png){data-zoomable}
 _Example of the "Grid" page layout, with a "Collapsing" sidebar navigation._
 
+### Default Page
+
+Each page in Dashboard 2.0 has a unique URL. If a user navigates to an unrecognised path, underneath the `/dashboard/` path, then a default page is used to fall back to. 
+
+Currently, in Dashboard 2.0, the default page is chosen as the page ordered first in the list of pages in the side navigation:
+
+![Screenshot of the pages list in the Dashboard 2.0 side panel](./assets/images/default-page-layout.png "Screenshot of the pages list in the Dashboard 2.0 side panel"){data-zoomable}
+_Screenshot of the pages list in the Dashboard 2.0 side panel_
+
+In this example, the _"Third Party Widgets"_ page is the default page.
+
 ### Layout Options
 
 Currently, we have three different options for a page's layout:
@@ -67,7 +78,7 @@ Currently, we have three different options for a page's layout:
 
 ### Navigation Sidebar
 
-Built into te frameowkr of hte UI is a side navigation bar, along with the top, page-wide "app bar". Configuration options exist such that the side navigation behavior can be controlled. Options include:
+Built into the framework of the UI is a side navigation bar, along with the top, page-wide "app bar". Configuration options exist such that the side navigation behavior can be controlled. Options include:
 
 - **Collapsing:** When the sidebar is opened the page content will adjust with the width of the sidebar.
 - **Fixed:** The full sidebar will always be visible, and the page content will adjust to the width of the sidebar.

docs/nodes/config/ui-base.md

@@ -13,8 +13,6 @@ props:
 
 # Config: UI Base `ui-base`
 
-Some details here about the ui-base config node
-
 ## Properties
 
 <PropsTable :hide-dynamic="true"/>

nodes/config/ui_base.html

@@ -501,18 +501,37 @@
         return values
     }
 
+    function getConfigNodesByType (type) {
+        const nodes = []
+        RED.nodes.eachConfig((n) => {
+            if ((type instanceof String) && type === n.type) {
+                nodes.push(n)
+            } else {
+                // we have an array of types
+                if (type.includes(n.type)) {
+                    nodes.push(n)
+                }
+            }
+        })
+        return nodes
+    }
+
     function addDefaultPage (baseId, themeId) {
         const page = RED.nodes.getType('ui-page')
+        // get all pages
+        const entries = getConfigNodesByType(['ui-page', 'ui-link'])
+        const pageNumber = entries.length + 1
         const pageNode = {
             _def: page,
             id: RED.nodes.id(),
             type: 'ui-page',
             ...mapDefaults(page.defaults),
-            path: '/pageN', // TODO: generate a unique path
-            name: 'Page N',
+            path: `/page${pageNumber}`, // TODO: generate a unique path
+            name: `Page ${pageNumber}`,
             ui: baseId,
             theme: themeId,
-            layout: 'grid'
+            layout: 'grid',
+            order: pageNumber
         }
 
         addConfigNode(pageNode)
@@ -1198,8 +1217,14 @@
                     addRowActions(actions, item, groupsOL)
                     addRowStateOptions(actions, item)
                 }
+                // ensure all pages/links have the correct order value
+                const events = []
+                updateItemOrder(pagesOL.editableList('items'), events)
+                // add our changes to NR history and trigger whether or not we need to redeploy
+                recordEvents(events)
             },
             sortItems: function (items) {
+                // runs when an item is explicitly moved in the order
                 // track any changes
                 const events = []
                 updateItemOrder(items, events)

ui/src/App.vue

@@ -165,12 +165,12 @@ export default {
             })
 
             if (payload.pages && Object.values(payload.pages).length > 0) {
-                console.log(payload.pages)
+                const defaultPage = Object.values(payload.pages).sort((a, b) => a.order - b.order)[0]
                 // add catch all - this ensures we navigate to _something_ when the app loads
                 // default to the first page added (for now)
                 this.$router?.addRoute({
                     path: '/:pathMatch(.*)*',
-                    redirect: payload.dashboards[Object.values(payload.pages)[0].ui].path + Object.values(payload.pages)[0].path
+                    redirect: payload.dashboards[defaultPage.ui].path + defaultPage.path
                 })
             }
 

ui/src/layouts/Baseline.vue

@@ -224,7 +224,7 @@ export default {
             }
         },
         getPageLabel (page) {
-            return page.name + (this.dashboard.showPathInSidebar ? ` (${page.path})` : '')
+            return page.order + ' ' + page.name + (this.dashboard.showPathInSidebar ? ` (${page.path})` : '')
         },
         handleNavigationClick () {
             if (this.navigationStyle === 'fixed') {