WIP: Trigger Preview and Publish Api

app/client/src/actions/pageActions.tsx

@@ -126,7 +126,6 @@ export const updateWidget = (
 ): ReduxAction<
   WidgetAddChild | WidgetMove | WidgetRemoveChild | WidgetResize | WidgetDelete
 > => {
-  console.log(operation, widgetId, payload);
   return {
     type: ReduxActionTypes["WIDGET_" + operation],
     payload: { widgetId, ...payload },

app/client/src/api/PageApi.tsx

@@ -37,7 +37,10 @@ export type FetchPageResponse = ApiResponse & {
 };
 
 export type FetchPublishedPageResponse = ApiResponse & {
-  data: {};
+  data: {
+    id: string;
+    dsl: Partial<ContainerWidgetProps<any>>;
+  };
 };
 
 export interface SavePageResponse extends ApiResponse {

app/client/src/constants/ReduxActionConstants.tsx

@@ -102,6 +102,12 @@ export interface UpdateCanvasPayload {
   currentApplicationId: string;
 }
 
+export interface LayoutPayload {
+  layoutId: string;
+  pageId: string;
+  widgets: { [widgetId: string]: WidgetProps };
+}
+
 export interface ShowPropertyPanePayload {
   widgetId: string;
   node: RefObject<HTMLDivElement>;

app/client/src/pages/Editor/EditorHeader.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { Breadcrumbs, IBreadcrumbProps, Spinner } from "@blueprintjs/core";
+import { BaseButton } from "../../components/canvas/Button";
 
 const Header = styled.header`
   display: flex;
@@ -20,6 +21,13 @@ const NotificationText = styled.div`
   flex-grow: 1;
 `;
 
+const PreviewPublishSection = styled.div`
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  flex-grow: 1;
+`;
+
 const StretchedBreadCrumb = styled(Breadcrumbs)`
   flex-grow: 10;
   * {
@@ -34,6 +42,8 @@ const StretchedBreadCrumb = styled(Breadcrumbs)`
 type EditorHeaderProps = {
   notificationText?: string;
   pageName: string;
+  onPublish: React.FormEventHandler;
+  onPreview: React.FormEventHandler;
 };
 
 export const EditorHeader = (props: EditorHeaderProps) => {
@@ -50,6 +60,20 @@ export const EditorHeader = (props: EditorHeaderProps) => {
         {props.notificationText && <Spinner size={Spinner.SIZE_SMALL} />}
         <span>{props.notificationText}</span>
       </NotificationText>
+      <PreviewPublishSection>
+        <BaseButton
+          onClick={props.onPreview}
+          text="Preview"
+          styleName="secondary"
+          filled
+        />
+        <BaseButton
+          onClick={props.onPublish}
+          text="Publish"
+          styleName="primary"
+          filled
+        />
+      </PreviewPublishSection>
     </Header>
   );
 };

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

@@ -6,6 +6,12 @@ import EditorHeader from "./EditorHeader";
 import EditorsRouter from "./routes";
 import NavBar from "../../components/editor/NavBar";
 import WidgetsEditor from "./WidgetsEditor";
+import {
+  getCurrentApplicationId,
+  getCurrentLayoutId,
+  getCurrentPageId,
+} from "../../selectors/editorSelectors";
+import { ReduxActionTypes } from "../../constants/ReduxActionConstants";
 
 const MainContainer = styled.div`
   display: flex;
@@ -14,15 +20,33 @@ const MainContainer = styled.div`
 type EditorProps = {
   currentPageName: string;
   isSaving: boolean;
+  currentApplicationId?: string;
+  currentLayoutId: string;
+  currentPageId: string;
+  publishApplication: Function;
+  previewPage: Function;
 };
 
 class Editor extends Component<EditorProps> {
+  handlePublish = () => {
+    if (this.props.currentApplicationId)
+      this.props.publishApplication(this.props.currentApplicationId);
+  };
+  handlePreview = () => {
+    this.props.previewPage(
+      this.props.currentPageId,
+      this.props.currentLayoutId,
+    );
+    //TODO(abhinav): Add logic to open in a different tab.
+  };
   public render() {
     return (
       <div>
         <EditorHeader
           notificationText={this.props.isSaving ? "Saving page..." : undefined}
           pageName={this.props.currentPageName}
+          onPublish={this.handlePublish}
+          onPreview={this.handlePreview}
         />
         <MainContainer>
           <NavBar />
@@ -34,9 +58,37 @@ class Editor extends Component<EditorProps> {
   }
 }
 
-const mapStateToProps = (state: AppState): EditorProps => ({
+const mapStateToProps = (state: AppState) => ({
   currentPageName: state.ui.editor.currentPageName,
   isSaving: state.ui.editor.isSaving,
+  currentApplicationId: getCurrentApplicationId(state),
+  currentPageId: getCurrentPageId(state),
+  currentLayoutId: getCurrentLayoutId(state),
 });
 
-export default connect(mapStateToProps)(Editor);
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    publishApplication: (applicationId: string) => {
+      dispatch({
+        type: ReduxActionTypes.PUBLISH_APPLICATION_INIT,
+        payload: {
+          applicationId,
+        },
+      });
+    },
+    previewPage: (pageId: string, layoutId: string) => {
+      dispatch({
+        type: ReduxActionTypes.FETCH_PUBLISHED_PAGE_INIT,
+        payload: {
+          pageId,
+          layoutId,
+        },
+      });
+    },
+  };
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(Editor);

app/client/src/reducers/uiReducers/editorReducer.tsx

@@ -26,7 +26,6 @@ const editorReducer = createReducer(initialState, {
     state: EditorReduxState,
     action: ReduxAction<UpdateCanvasPayload>,
   ) => {
-    console.log(action.payload);
     const {
       currentPageId,
       currentPageName,

app/client/src/sagas/ApplicationSagas.tsx

@@ -22,7 +22,9 @@ export function* publishApplicationSaga(
     );
     const isValidResponse = yield validateResponse(response);
     if (isValidResponse) {
-      console.log(response);
+      yield put({
+        type: ReduxActionTypes.PUBLISH_APPLICATION_SUCCESS,
+      });
     }
   } catch (error) {
     yield put({
@@ -34,7 +36,7 @@ export function* publishApplicationSaga(
   }
 }
 
-export default function* pageSagas() {
+export default function* applicationSagas() {
   yield all([
     takeLatest(
       ReduxActionTypes.PUBLISH_APPLICATION_INIT,

app/client/src/sagas/PageSagas.tsx

@@ -4,6 +4,7 @@ import {
   ReduxActionErrorTypes,
   ReduxAction,
   UpdateCanvasPayload,
+  LayoutPayload,
 } from "../constants/ReduxActionConstants";
 import { updateCanvas, savePageSuccess } from "../actions/pageActions";
 import PageApi, {
@@ -72,14 +73,26 @@ export function* fetchPublishedPageSaga(
   pageRequestAction: ReduxAction<FetchPublishedPageRequest>,
 ) {
   try {
-    const pageRequest = pageRequestAction.payload;
-    const fetchPublishedPageResponse: FetchPublishedPageResponse = yield call(
+    const request: FetchPublishedPageRequest = pageRequestAction.payload;
+    const response: FetchPublishedPageResponse = yield call(
       PageApi.fetchPublishedPage,
-      pageRequest,
+      request,
     );
-    const isValidResponse = yield validateResponse(fetchPublishedPageResponse);
+    const isValidResponse = yield validateResponse(response);
     if (isValidResponse) {
-      console.log(fetchPublishedPageResponse);
+      const normalizedResponse = CanvasWidgetsNormalizer.normalize(
+        response.data.dsl,
+      );
+      const layoutPayload: LayoutPayload = {
+        widgets: normalizedResponse,
+        layoutId: response.data.id,
+        pageId: request.pageId,
+      };
+
+      yield put({
+        type: ReduxActionTypes.FETCH_PUBLISED_PAGE_SUCCESS,
+        payload: layoutPayload,
+      });
     }
   } catch (error) {
     yield put({

app/client/src/sagas/index.tsx

@@ -5,6 +5,7 @@ import { watchActionSagas } from "./ActionSagas";
 import widgetOperationSagas from "./WidgetOperationSagas";
 import errorSagas from "./ErrorSagas";
 import configsSagas from "./ConfigsSagas";
+import applicationSagas from "./ApplicationSagas";
 import { watchResourcesSagas } from "./ResourcesSagas";
 export function* rootSaga() {
   yield all([
@@ -15,5 +16,6 @@ export function* rootSaga() {
     spawn(errorSagas),
     spawn(configsSagas),
     spawn(watchResourcesSagas),
+    spawn(applicationSagas),
   ]);
 }

app/client/src/selectors/editorSelectors.tsx

@@ -38,6 +38,11 @@ export const getCurrentPageName = createSelector(
   (editor: EditorReduxState) => editor.currentPageName,
 );
 
+export const getCurrentApplicationId = createSelector(
+  getEditorState,
+  (editor: EditorReduxState) => editor.currentApplicationId,
+);
+
 export const getIsPageSaving = createSelector(
   getEditorState,
   (editor: EditorReduxState) => editor.isSaving,