feat(client): add multi page creation and rotuing component

[soumya-pratik]

Steps to test this implementation -

1. Create a drag and drop app.

2. Select Layers menu from left menu bar and you can add more pages by clicking Add Page button as shown in ss

3. Now you can give a name to the page and also can define the route on which it should render.

4. You can use navigate ui block to set an Link element which can navigate you to another page upon clicking.

5. Now on Navigation block you can set the destination url where it should navigate to. Keep the Enable external link flag off as we are doing in app navigation. We can set this flag true if we want to navigate to an external app link.

6. Finally you can open the app in launch url and you should be able to test multi page routing

Note - You can use the below app json for your reference as well .

{ "queries": { "default": { "id": "default", "cells": [ { "id": "96218", "widget": "code", "parameters": { "code": "", "type": "py" } } ] } }, "blocks": { "welcome-container-block": { "parent": { "id": "page-1", "slot": "content" }, "slots": { "children": { "children": [ "text--1907", "link--6071" ], "name": "children" } }, "widget": "container", "data": { "style": { "padding": "4px", "overflow": "hidden", "flexWrap": "wrap", "flexDirection": "column", "display": "flex", "gap": "8px" } }, "listeners": {}, "id": "welcome-container-block" }, "page-1": { "slots": { "content": { "children": [ "welcome-container-block" ], "name": "content" } }, "widget": "page", "data": { "style": { "padding": "24px", "fontFamily": "roboto", "flexDirection": "column", "display": "flex", "gap": "8px" }, "route": "login", "pageName": "Login" }, "listeners": { "onPageLoad": [] }, "id": "page-1" }, "page--8875": { "id": "page--8875", "widget": "page", "data": { "style": { "display": "flex", "flexDirection": "column", "padding": "24px", "gap": "8px", "fontFamily": "roboto" }, "pageName": "Home", "route": "home" }, "listeners": { "onPageLoad": [] }, "slots": { "content": { "name": "content", "children": [ "text--2465", "link--3557" ] } } }, "page--3056": { "id": "page--3056", "widget": "page", "data": { "style": { "display": "flex", "flexDirection": "column", "padding": "24px", "gap": "8px", "fontFamily": "roboto" } }, "listeners": { "onPageLoad": [] }, "slots": { "content": { "name": "content", "children": [] } } }, "text--1907": { "id": "text--1907", "widget": "text", "parent": { "id": "welcome-container-block", "slot": "children" }, "data": { "style": { "padding": "4px", "whiteSpace": "pre-line", "textOverflow": "ellipsis" }, "text": "Login Page", "variant": "h1" }, "listeners": {}, "slots": {} }, "link--6071": { "id": "link--6071", "widget": "link", "parent": { "id": "welcome-container-block", "slot": "children" }, "data": { "style": { "padding": "4px", "whiteSpace": "pre-line", "textOverflow": "ellipsis" }, "href": "home", "text": "go to home" }, "listeners": {}, "slots": {} }, "text--2465": { "id": "text--2465", "widget": "text", "parent": { "id": "page--8875", "slot": "content" }, "data": { "style": { "padding": "4px", "whiteSpace": "pre-line", "textOverflow": "ellipsis" }, "text": "Home Page", "variant": "h1" }, "listeners": {}, "slots": {} }, "link--3557": { "id": "link--3557", "widget": "link", "parent": { "id": "page--8875", "slot": "content" }, "data": { "style": { "padding": "4px", "whiteSpace": "pre-line", "textOverflow": "ellipsis" }, "href": "login", "text": "Go to Login" }, "listeners": {}, "slots": {} } }, "variables": {}, "dependencies": {}, "executionOrder": [ "default" ], "version": "1.0.0-alpha.3" }

[anurag91jain]

@soumya-pratik remove the linkBlock and add checkbox for toggling between LinkNavigation and anchor tag.

[soumya-pratik]

Can you list the steps you used to test this?

@antgibson96 I have documented the steps to test this implementation on top. Let me know if you still face issues.