Fix for app view not opening correct page (#1387)

Fixes: #1385

app/client/cypress/fixtures/PageLoadDsl.json

@@ -0,0 +1,43 @@
+{
+  "dsl": {
+    "widgetName": "MainContainer",
+    "backgroundColor": "none",
+    "rightColumn": 1224,
+    "snapColumns": 16,
+    "detachFromLayout": true,
+    "widgetId": "0",
+    "topRow": 0,
+    "bottomRow": 1280,
+    "containerStyle": "none",
+    "snapRows": 33,
+    "parentRowSpace": 1,
+    "type": "CANVAS_WIDGET",
+    "canExtend": true,
+    "dynamicBindings": {},
+    "version": 6,
+    "minHeight": 1292,
+    "parentColumnSpace": 1,
+    "leftColumn": 0,
+    "children": [
+      {
+        "isVisible": true,
+        "text": "This is Page 1",
+        "textStyle": "HEADING",
+        "textAlign": "LEFT",
+        "widgetName": "Text1",
+        "type": "TEXT_WIDGET",
+        "isLoading": false,
+        "parentColumnSpace": 74,
+        "parentRowSpace": 40,
+        "leftColumn": 6,
+        "rightColumn": 10,
+        "topRow": 2,
+        "bottomRow": 4,
+        "parentId": "0",
+        "widgetId": "g338165fyp",
+        "dynamicBindings": {}
+      }
+    ]
+  },
+  "layoutOnLoadActions": []
+}

app/client/cypress/fixtures/example.json

@@ -110,7 +110,7 @@
   "RichTextEditorName": "RichtextEditor",
   "HtmlText": "This is the initial<b>content </b> <h1> This is a Heading</h1> <p> This is a paragraph.</p>",
   "RichTexteditorBody": "Here is the text area to edit html",
-  "userApi": "http://postgrest.appsmith.com:3000",
+  "userApi": "http://mock-api.appsmith.com",
   "validateImage": "https://cdn.dribbble.com/users/1787323/screenshots/4563995/dribbbe_hammer-01.png",
   "defaultdata": "TestData",
   "label": "one",
@@ -174,4 +174,4 @@
   ],
   "paginationUrl": "https://mock-api.appsmith.com/",
   "paginationParam": "users?page={{Table1.pageNo}}&size={{Table1.pageSize }}"
-}
+}

app/client/cypress/integration/Smoke_TestSuite/Binding/Bind_tableApi_spec.js

@@ -29,7 +29,7 @@ describe("Test Create Api and Bind to Table widget", function() {
   it("Test_Validate the Api data is updated on Table widget", function() {
     cy.SearchEntityandOpen("Table1");
     //cy.openPropertyPane("tablewidget");
-    cy.testJsontext("tabledata", "{{Api1.data}}");
+    cy.testJsontext("tabledata", "{{Api1.data.users}}");
     cy.get(commonlocators.editPropCrossButton).click();
 
     /**

app/client/cypress/integration/Smoke_TestSuite/Pages/Page_Load_Spec.js

@@ -0,0 +1,57 @@
+const dsl = require("../../../fixtures/PageLoadDsl.json");
+const commonlocators = require("../../../locators/commonlocators.json");
+
+describe("Page Load tests", () => {
+  before(() => {
+    cy.addDsl(dsl);
+    cy.get("div")
+      .contains("Pages")
+      .next()
+      .click();
+    cy.get("h2").contains("Drag and drop a widget here");
+    cy.addDsl(dsl);
+  });
+  it("Published page loads correctly", () => {
+    // Update the text to be asserted later
+    cy.openPropertyPane("textwidget");
+    cy.testCodeMirror("This is Page 2");
+    // Publish
+    cy.PublishtheApp();
+    // Assert active page tab
+    cy.get(".t--page-switch-tab")
+      .contains("Page2")
+      .parent()
+      .should("have.class", "is-active");
+    // Assert active page DSL
+    cy.get(commonlocators.headingTextStyle).should(
+      "have.text",
+      "This is Page 2",
+    );
+    // Test after reload
+    cy.reload();
+    // Assert active page tab
+    cy.get(".t--page-switch-tab")
+      .contains("Page2")
+      .parent()
+      .should("have.class", "is-active");
+    // Assert active page DSL
+    cy.get(commonlocators.headingTextStyle).should(
+      "have.text",
+      "This is Page 2",
+    );
+    // Switch page
+    cy.get(".t--page-switch-tab")
+      .contains("Page1")
+      .click({ force: true });
+    // Assert active page tab
+    cy.get(".t--page-switch-tab")
+      .contains("Page1")
+      .parent()
+      .should("have.class", "is-active");
+    // Assert active page DSL
+    cy.get(commonlocators.headingTextStyle).should(
+      "have.text",
+      "This is Page 1",
+    );
+  });
+});

app/client/src/AppRouter.tsx

@@ -10,6 +10,7 @@ import {
   BASE_SIGNUP_URL,
   BASE_URL,
   BUILDER_URL,
+  getApplicationViewerPageURL,
   ORG_URL,
   PAGE_NOT_FOUND_URL,
   SERVER_ERROR_URL,
@@ -88,6 +89,10 @@ class AppRouter extends React.Component<any, any> {
               component={ApplicationListLoader}
             />
             <SentryRoute path={BUILDER_URL} component={EditorLoader} />
+            <SentryRoute
+              path={getApplicationViewerPageURL()}
+              component={AppViewerLoader}
+            />
             <SentryRoute path={APP_VIEW_URL} component={AppViewerLoader} />
             <SentryRoute
               exact

app/client/src/pages/AppViewer/index.tsx

@@ -34,7 +34,7 @@ const AppViewerBody = styled.section`
 `;
 
 export type AppViewerProps = {
-  initializeAppViewer: Function;
+  initializeAppViewer: (applicationId: string, pageId?: string) => void;
   isInitialized: boolean;
   executeAction: (actionPayload: ExecuteActionPayload) => void;
   updateWidgetProperty: (
@@ -61,9 +61,10 @@ class AppViewer extends Component<
     editorInitializer().then(() => {
       this.setState({ registered: true });
     });
-    const { applicationId } = this.props.match.params;
-    if (this.props.match.params.applicationId) {
-      this.props.initializeAppViewer(applicationId);
+    const { applicationId, pageId } = this.props.match.params;
+    console.log({ applicationId, pageId });
+    if (applicationId) {
+      this.props.initializeAppViewer(applicationId, pageId);
     }
   }
 
@@ -125,11 +126,12 @@ const mapDispatchToProps = (dispatch: any) => ({
     dispatch(updateWidgetMetaProperty(widgetId, propertyName, propertyValue)),
   resetChildrenMetaProperty: (widgetId: string) =>
     dispatch(resetChildrenMetaProperty(widgetId)),
-  initializeAppViewer: (applicationId: string) =>
+  initializeAppViewer: (applicationId: string, pageId?: string) => {
     dispatch({
       type: ReduxActionTypes.INITIALIZE_PAGE_VIEWER,
-      payload: { applicationId },
-    }),
+      payload: { applicationId, pageId },
+    });
+  },
 });
 
 export default withRouter(

app/client/src/pages/AppViewer/viewer/AppViewerHeader.tsx

@@ -249,6 +249,7 @@ export const AppViewerHeader = (props: AppViewerHeaderProps) => {
                 page.pageId,
               )}
               activeClassName="is-active"
+              className="t--page-switch-tab"
             >
               <span>{page.pageName}</span>
             </PageTab>

app/client/src/sagas/InitSagas.ts

@@ -149,9 +149,9 @@ export function* populatePageDSLsSaga() {
 }
 
 export function* initializeAppViewerSaga(
-  action: ReduxAction<{ applicationId: string }>,
+  action: ReduxAction<{ applicationId: string; pageId: string }>,
 ) {
-  const { applicationId } = action.payload;
+  const { applicationId, pageId } = action.payload;
   yield put({ type: ReduxActionTypes.START_EVALUATION });
   yield all([
     put(fetchActionsForView(applicationId)),
@@ -164,10 +164,11 @@ export function* initializeAppViewerSaga(
     take(ReduxActionTypes.FETCH_PAGE_LIST_SUCCESS),
   ]);
 
-  const pageId = yield select(getDefaultPageId);
+  const defaultPageId = yield select(getDefaultPageId);
+  const toLoadPageId = pageId || defaultPageId;
 
-  if (pageId) {
-    yield put(fetchPublishedPage(pageId, true));
+  if (toLoadPageId) {
+    yield put(fetchPublishedPage(toLoadPageId, true));
     yield take(ReduxActionTypes.FETCH_PUBLISHED_PAGE_SUCCESS);
 
     yield put(setAppMode(APP_MODE.PUBLISHED));