Add url and user inside data tree (#240)

* Add url and user inside data tree

* Cleanup

* change key to URL

* add email and username instead of name

app/client/src/actions/pageActions.tsx

@@ -10,6 +10,7 @@ import {
 } from "constants/ReduxActionConstants";
 import { FlattenedWidgetProps } from "reducers/entityReducers/canvasWidgetsReducer";
 import { ContainerWidgetProps } from "widgets/ContainerWidget";
+import { UrlDataState } from "@appsmith/reducers/entityReducers/urlReducer";
 
 export const fetchPageList = (
   applicationId: string,
@@ -148,3 +149,12 @@ export const updateWidget = (
     payload: { widgetId, ...payload },
   };
 };
+
+export const setUrlData = (
+  payload: UrlDataState,
+): ReduxAction<UrlDataState> => {
+  return {
+    type: ReduxActionTypes.SET_URL_DATA,
+    payload,
+  };
+};

app/client/src/constants/ReduxActionConstants.tsx

@@ -239,6 +239,7 @@ export const ReduxActionTypes: { [key: string]: string } = {
   UPDATE_ACTION_PROPERTY: "UPDATE_ACTION_PROPERTY",
   FETCH_ACTIONS_VIEW_MODE_INIT: "FETCH_ACTIONS_VIEW_MODE_INIT",
   FETCH_ACTIONS_VIEW_MODE_SUCCESS: "FETCH_ACTIONS_VIEW_MODE_SUCCESS",
+  SET_URL_DATA: "SET_URL_DATA",
 };
 
 export type ReduxActionType = typeof ReduxActionTypes[keyof typeof ReduxActionTypes];

app/client/src/constants/routes.ts

@@ -130,16 +130,16 @@ export const getApplicationViewerPageURL = (
 
 function convertToQueryParams(params: Record<string, string> = {}): string {
   const paramKeys = Object.keys(params);
-  let queryParams = "";
+  const queryParams: string[] = [];
   if (paramKeys) {
-    paramKeys.forEach((paramKey: string, index: number) => {
+    paramKeys.forEach((paramKey: string) => {
       const value = params[paramKey];
       if (paramKey && value) {
-        queryParams = queryParams + `&${paramKey}=${value}`;
+        queryParams.push(`${paramKey}=${value}`);
       }
     });
   }
-  return queryParams ? "?" + queryParams : "";
+  return queryParams.length ? "?" + queryParams.join("&") : "";
 }
 
 export const getCurlImportPageURL = (

app/client/src/entities/DataTree/dataTreeFactory.ts

@@ -9,6 +9,8 @@ import { MetaState } from "reducers/entityReducers/metaReducer";
 import { PageListPayload } from "constants/ReduxActionConstants";
 import WidgetFactory from "utils/WidgetFactory";
 import { ActionConfig, Property } from "entities/Action";
+import { AuthUserState } from "@appsmith/reducers/entityReducers/authUserReducer";
+import { UrlDataState } from "@appsmith/reducers/entityReducers/urlReducer";
 
 export type ActionDescription<T> = {
   type: string;
@@ -22,6 +24,7 @@ type ActionDispatcher<T, A extends string[]> = (
 export enum ENTITY_TYPE {
   ACTION = "ACTION",
   WIDGET = "WIDGET",
+  APPSMITH = "APPSMITH",
 }
 
 export type RunActionPayload = {
@@ -55,11 +58,18 @@ export interface DataTreeWidget extends WidgetProps {
   ENTITY_TYPE: ENTITY_TYPE.WIDGET;
 }
 
+export interface DataTreeAppsmith {
+  user: AuthUserState;
+  URL: UrlDataState;
+  ENTITY_TYPE: ENTITY_TYPE.APPSMITH;
+}
+
 export type DataTreeEntity =
   | DataTreeAction
   | DataTreeWidget
   | DataTreeUrl
   | PageListPayload
+  | DataTreeAppsmith
   | ActionDispatcher<any, any>;
 
 export type DataTree = {
@@ -71,12 +81,13 @@ type DataTreeSeed = {
   widgets: CanvasWidgetsReduxState;
   widgetsMeta: MetaState;
   pageList: PageListPayload;
-  url?: DataTreeUrl;
+  url: DataTreeUrl;
+  authUser: AuthUserState;
 };
 
 export class DataTreeFactory {
   static create(
-    { actions, widgets, widgetsMeta, pageList }: DataTreeSeed,
+    { actions, widgets, widgetsMeta, pageList, authUser, url }: DataTreeSeed,
     // TODO(hetu)
     // temporary fix for not getting functions while normal evals which crashes the app
     // need to remove this after we get a proper solve
@@ -193,6 +204,11 @@ export class DataTreeFactory {
 
     dataTree.pageList = pageList;
     dataTree.actionPaths = actionPaths;
+    dataTree.appsmith = {
+      ENTITY_TYPE: ENTITY_TYPE.APPSMITH,
+      user: authUser,
+      URL: url,
+    };
     return dataTree;
   }
 }

app/client/src/reducers/entityReducers/authUserReducer.ts

@@ -0,0 +1,33 @@
+import { createReducer } from "utils/AppsmithUtils";
+import { ReduxActionTypes, ReduxAction } from "constants/ReduxActionConstants";
+import { User } from "constants/userConstants";
+
+export type AuthUserState = {
+  username: string;
+  email: string;
+  id: string;
+  role: string;
+};
+
+const initialState: AuthUserState = {
+  username: "",
+  email: "",
+  id: "",
+  role: "",
+};
+
+const authUserReducer = createReducer(initialState, {
+  [ReduxActionTypes.FETCH_USER_DETAILS_SUCCESS]: (
+    state: AuthUserState,
+    action: ReduxAction<User>,
+  ) => {
+    return {
+      ...state,
+      username: action.payload.username,
+      email: action.payload.email,
+      id: action.payload.id,
+    };
+  },
+});
+
+export default authUserReducer;

app/client/src/reducers/entityReducers/index.tsx

@@ -9,6 +9,8 @@ import pageListReducer from "./pageListReducer";
 import jsExecutionsReducer from "./jsExecutionsReducer";
 import pluginsReducer from "reducers/entityReducers/pluginsReducer";
 import metaReducer from "./metaReducer";
+import authUserReducer from "./authUserReducer";
+import urlReducer from "./urlReducer";
 
 const entityReducer = combineReducers({
   canvasWidgets: canvasWidgetsReducer,
@@ -21,6 +23,8 @@ const entityReducer = combineReducers({
   jsExecutions: jsExecutionsReducer,
   plugins: pluginsReducer,
   meta: metaReducer,
+  authUser: authUserReducer,
+  url: urlReducer,
 });
 
 export default entityReducer;

app/client/src/reducers/entityReducers/urlReducer.ts

@@ -0,0 +1,35 @@
+import { createReducer } from "utils/AppsmithUtils";
+import { ReduxActionTypes, ReduxAction } from "constants/ReduxActionConstants";
+
+export type UrlDataState = {
+  queryParams: Record<string, string>;
+  protocol: string;
+  host: string;
+  hostname: string;
+  port: string;
+  pathname: string;
+  hash: string;
+  href: string;
+};
+
+const initialState: UrlDataState = {
+  queryParams: {},
+  protocol: "",
+  host: "",
+  hostname: "",
+  port: "",
+  pathname: "",
+  hash: "",
+  href: "",
+};
+
+const urlReducer = createReducer(initialState, {
+  [ReduxActionTypes.SET_URL_DATA]: (
+    state: UrlDataState,
+    action: ReduxAction<UrlDataState>,
+  ) => {
+    return action.payload;
+  },
+});
+
+export default urlReducer;

app/client/src/reducers/index.tsx

@@ -29,6 +29,8 @@ import { MetaState } from "./entityReducers/metaReducer";
 import { ImportReduxState } from "reducers/uiReducers/importReducer";
 import { HelpReduxState } from "./uiReducers/helpReducer";
 import { ApiNameReduxState } from "./uiReducers/apiNameReducer";
+import { AuthUserState } from "reducers/entityReducers/authUserReducer";
+import { UrlDataState } from "reducers/entityReducers/urlReducer";
 
 const appReducer = combineReducers({
   entities: entityReducer,
@@ -69,5 +71,7 @@ export interface AppState {
     pageList: PageListReduxState;
     plugins: PluginDataState;
     meta: MetaState;
+    authUser: AuthUserState;
+    url: UrlDataState;
   };
 }

app/client/src/sagas/ActionExecutionSagas.ts

@@ -1,4 +1,5 @@
 import {
+  Page,
   ReduxAction,
   ReduxActionErrorTypes,
   ReduxActionTypes,
@@ -77,7 +78,10 @@ function* navigateActionSaga(
 ) {
   const pageList = yield select(getPageList);
   const applicationId = yield select(getCurrentApplicationId);
-  const page = _.find(pageList, { pageName: action.pageNameOrUrl });
+  const page = _.find(
+    pageList,
+    (page: Page) => page.pageName === action.pageNameOrUrl,
+  );
   if (page) {
     AnalyticsUtil.logEvent("NAVIGATE", {
       pageName: action.pageNameOrUrl,

app/client/src/sagas/PageSagas.tsx

@@ -16,6 +16,7 @@ import {
   deletePageSuccess,
   updateCurrentPage,
   fetchPublishedPageSuccess,
+  setUrlData,
 } from "actions/pageActions";
 import PageApi, {
   FetchPageResponse,
@@ -61,6 +62,7 @@ import {
   getExistingActionNames,
 } from "./selectors";
 import { clearCaches } from "utils/DynamicBindingUtils";
+import { UrlDataState } from "@appsmith/reducers/entityReducers/urlReducer";
 
 const getWidgetName = (state: AppState, widgetId: string) =>
   state.entities.canvasWidgets[widgetId];
@@ -137,6 +139,8 @@ export function* fetchPageSaga(
     if (isValidResponse) {
       // Clear any existing caches
       clearCaches();
+      // Set url params
+      yield call(setDataUrl);
       // Get Canvas payload
       const canvasWidgetsPayload = getCanvasWidgetsPayload(fetchPageResponse);
       // Update the canvas
@@ -176,9 +180,15 @@ export function* fetchPublishedPageSaga(
     if (isValidResponse) {
       // Clear any existing caches
       clearCaches();
+      // Set url params
+      yield call(setDataUrl);
+      // Get Canvas payload
       const canvasWidgetsPayload = getCanvasWidgetsPayload(response);
+      // Update the canvas
       yield put(updateCanvas(canvasWidgetsPayload));
+      // set current page
       yield put(updateCurrentPage(pageId));
+      // dispatch fetch page success
       yield put(
         fetchPublishedPageSuccess({
           dsl: response.data.layouts[0].dsl,
@@ -415,6 +425,32 @@ export function* updateCanvasWithDSL(
   yield put(fetchActionsForPage(pageId));
 }
 
+function getQueryParams() {
+  const urlParams = new URLSearchParams(window.location.search);
+  const keys = urlParams.keys();
+  let key = keys.next().value;
+  const queryParams: Record<string, string> = {};
+  while (key) {
+    queryParams[key] = urlParams.get(key) as string;
+    key = keys.next().value;
+  }
+  return queryParams;
+}
+
+export function* setDataUrl() {
+  const urlData: UrlDataState = {
+    host: window.location.host,
+    hostname: window.location.hostname,
+    queryParams: getQueryParams(),
+    protocol: window.location.protocol,
+    pathname: window.location.pathname,
+    port: window.location.port,
+    href: window.location.href,
+    hash: window.location.hash,
+  };
+  yield put(setUrlData(urlData));
+}
+
 export default function* pageSagas() {
   yield all([
     takeLatest(ReduxActionTypes.FETCH_PAGE_INIT, fetchPageSaga),

app/client/src/selectors/dataTreeSelectors.ts

@@ -1,5 +1,9 @@
 import { createSelector } from "reselect";
-import { getActionsForCurrentPage } from "./entitiesSelector";
+import {
+  getActionsForCurrentPage,
+  getAuthUser,
+  getUrl,
+} from "./entitiesSelector";
 import { ActionDataState } from "reducers/entityReducers/actionsReducer";
 import { getEvaluatedDataTree } from "utils/DynamicBindingUtils";
 import { DataTree, DataTreeFactory } from "entities/DataTree/dataTreeFactory";
@@ -8,49 +12,24 @@ import * as log from "loglevel";
 import "url-search-params-polyfill";
 import { getPageList } from "./appViewSelectors";
 
-// TODO Commenting out for now as it is causing performance issues
-// function getQueryParams() {
-//   const urlParams = new URLSearchParams(window.location.search);
-//   const keys = urlParams.keys();
-//   let key = keys.next().value;
-//   const queryParams: Record<string, string> = {};
-//   while (key) {
-//     queryParams[key] = urlParams.get(key) as string;
-//     key = keys.next().value;
-//   }
-//   return queryParams;
-// }
-//
-// const getUrlParams = createSelector(
-//   getQueryParams,
-//   (queryParams: Record<string, string>): DataTreeUrl => {
-//     return {
-//       host: window.location.host,
-//       hostname: window.location.hostname,
-//       queryParams: queryParams,
-//       protocol: window.location.protocol,
-//       pathname: window.location.pathname,
-//       port: window.location.port,
-//       href: window.location.href,
-//       hash: window.location.hash,
-//     };
-//   },
-// );
-//
 export const getUnevaluatedDataTree = (withFunctions?: boolean) =>
   createSelector(
     getActionsForCurrentPage,
     getWidgets,
     getWidgetsMeta,
     getPageList,
-    (actions, widgets, widgetsMeta, pageListPayload) => {
+    getAuthUser,
+    getUrl,
+    (actions, widgets, widgetsMeta, pageListPayload, authUser, url) => {
       const pageList = pageListPayload || [];
       return DataTreeFactory.create(
         {
           actions,
           widgets,
           widgetsMeta,
           pageList,
+          authUser,
+          url,
         },
         withFunctions,
       );

app/client/src/selectors/entitiesSelector.ts

@@ -270,3 +270,6 @@ export const isActionDirty = (id: string) =>
   createSelector([getActionDirtyState], actionDirtyMap => {
     return id in actionDirtyMap && actionDirtyMap[id];
   });
+
+export const getAuthUser = (state: AppState) => state.entities.authUser;
+export const getUrl = (state: AppState) => state.entities.url;