Merge branch 'fix/P1-issues' into 'release'

P1 issues

- Add invite users button to users page
- Stop breadcrumb from collapsing
- Org name is not editable
- debounce save pages

See merge request theappsmith/internal-tools-client!274

app/client/src/components/editorComponents/ResizableUtils.tsx

@@ -119,16 +119,16 @@ export const hasCollision = (
     props.rightColumn + (delta.width + position.x) / props.parentColumnSpace;
   const bottom =
     props.bottomRow + (delta.height + position.y) / props.parentRowSpace;
-
   if (maxBottomRow && bottom - top - 1 < maxBottomRow) {
     return true;
   }
+
   return isDropZoneOccupied(
     {
-      left,
-      top,
-      bottom,
-      right,
+      left: Math.round(left),
+      top: Math.round(top),
+      bottom: Math.round(bottom),
+      right: Math.round(right),
     },
     props.widgetId,
     occupiedSpaces,

app/client/src/components/propertyControls/ActionSelectorControl.tsx

@@ -10,7 +10,6 @@ import {
 import { DropdownOption } from "widgets/DropdownWidget";
 import { connect } from "react-redux";
 import { AppState } from "reducers";
-import { ActionDataState } from "reducers/entityReducers/actionsReducer";
 import styled from "styled-components";
 import ActionSelector from "./ActionSelector";
 import { RestAction } from "api/ActionAPI";

app/client/src/components/propertyControls/ColumnActionSelectorControl.tsx

@@ -4,7 +4,6 @@ import BaseControl, { ControlProps } from "./BaseControl";
 import { ControlWrapper, StyledPropertyPaneButton } from "./StyledControls";
 import { ControlType } from "constants/PropertyControlConstants";
 import { AppState } from "reducers";
-import { ActionDataState } from "reducers/entityReducers/actionsReducer";
 import { connect } from "react-redux";
 import { ActionPayload } from "constants/ActionConstants";
 import { FinalActionSelector } from "./ActionSelectorControl";

app/client/src/constants/routes.ts

@@ -4,6 +4,7 @@ export const ORG_URL = "/org";
 export const APPLICATIONS_URL = `/applications`;
 export const BUILDER_URL = "/applications/:applicationId/pages/:pageId/edit";
 export const USER_AUTH_URL = "/user";
+export const USERS_URL = "/users";
 
 export type BuilderRouteParams = {
   applicationId: string;

app/client/src/index.tsx

@@ -25,6 +25,7 @@ import {
   SIGN_UP_URL,
   BASE_LOGIN_URL,
   BASE_SIGNUP_URL,
+  USERS_URL,
 } from "constants/routes";
 
 const loadingIndicator = <Loader />;
@@ -35,6 +36,7 @@ const Applications = lazy(() => import("./pages/Applications"));
 const PageNotFound = lazy(() => import("./pages/common/PageNotFound"));
 const AppViewer = lazy(() => import("./pages/AppViewer"));
 const Organization = lazy(() => import("./pages/organization"));
+const Users = lazy(() => import("./pages/users"));
 
 appInitializer();
 
@@ -56,6 +58,7 @@ ReactDOM.render(
             <Switch>
               <ProtectedRoute exact path={BASE_URL} component={App} />
               <ProtectedRoute path={ORG_URL} component={Organization} />
+              <ProtectedRoute exact path={USERS_URL} component={Users} />
               <Route path={USER_AUTH_URL} component={UserAuth} />
               <Redirect exact from={BASE_LOGIN_URL} to={AUTH_LOGIN_URL} />
               <Redirect exact from={BASE_SIGNUP_URL} to={SIGN_UP_URL} />

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

@@ -126,7 +126,7 @@ export const EditorHeader = (props: EditorHeaderProps) => {
 
   return (
     <StyledHeader>
-      <StretchedBreadCrumb items={navigation} />
+      <StretchedBreadCrumb items={navigation} minVisibleItems={3} />
       <CustomizedDropdown {...pageSelectorData} />
       <LoadingContainer>
         {props.isSaving ? "Saving..." : "All changes saved"}

app/client/src/pages/common/CustomizedDropdown/OrgDropdownData.tsx

@@ -78,9 +78,9 @@ export const options = (
           content: "Members",
           onSelect: () =>
             getOnSelectAction(DropdownOnSelectActions.REDIRECT, {
-              path: "/org/users",
+              path: "/users",
             }),
-          active: history.location.pathname === "/org/users",
+          active: history.location.pathname === "/users",
         },
       ],
     },

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

@@ -2,7 +2,6 @@ import React from "react";
 import { Switch, Route, useRouteMatch, useLocation } from "react-router-dom";
 import { TransitionGroup, CSSTransition } from "react-transition-group";
 import PageWrapper from "pages/common/PageWrapper";
-import Users from "pages/users";
 import Settings from "./settings";
 import Invite from "./invite";
 import DefaultOrgPage from "./defaultOrgPage";
@@ -15,7 +14,6 @@ export const Organization = () => {
         <CSSTransition key={location.key} classNames="fade" timeout={300}>
           <Switch location={location}>
             <Route exact path={`${path}/settings`} component={Settings} />
-            <Route exact path={`${path}/users`} component={Users} />
             <Route exact path={`${path}/invite`} component={Invite} />
             <Route component={DefaultOrgPage} />
           </Switch>

app/client/src/pages/organization/settings.tsx

@@ -4,7 +4,6 @@ import { useHistory } from "react-router-dom";
 import { AppState } from "reducers";
 import { getCurrentOrg } from "selectors/organizationSelectors";
 import { ORG_INVITE_USERS_PAGE_URL } from "constants/routes";
-import EditableText from "components/editorComponents/EditableText";
 import PageSectionDivider from "pages/common/PageSectionDivider";
 import PageSectionHeader from "pages/common/PageSectionHeader";
 import { ReduxActionTypes } from "constants/ReduxActionConstants";
@@ -17,28 +16,12 @@ export type PageProps = {
 };
 
 export const OrgSettings = (props: PageProps) => {
-  const changeOrgName = (value: string) => {
-    if (props.org && value.trim().length > 0 && value !== props.org.name) {
-      props.changeOrgName(value);
-    }
-  };
-
   const history = useHistory();
 
   return (
     <React.Fragment>
       <PageSectionHeader>
-        <h2>
-          {props.org && (
-            <EditableText
-              defaultValue={props.org.name}
-              type="text"
-              isEditing={false}
-              onTextChanged={changeOrgName}
-              placeholder="Enter Organization Name"
-            />
-          )}
-        </h2>
+        {props.org && <h2>{props.org.name}</h2>}
       </PageSectionHeader>
       <PageSectionDivider />
       <PageSectionHeader>

app/client/src/pages/organization/users.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { useHistory } from "react-router-dom";
+import { ORG_INVITE_USERS_PAGE_URL } from "constants/routes";
+import PageSectionHeader from "pages/common/PageSectionHeader";
+import Button from "components/editorComponents/Button";
+
+export const OrgMembers = () => {
+  const history = useHistory();
+
+  return (
+    <React.Fragment>
+      <PageSectionHeader>
+        <h2>Users</h2>
+        <Button
+          intent="primary"
+          text="Invite Users"
+          icon="plus"
+          iconAlignment="left"
+          filled
+          onClick={() => history.push(ORG_INVITE_USERS_PAGE_URL)}
+        />
+      </PageSectionHeader>
+    </React.Fragment>
+  );
+};
+
+export default OrgMembers;

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

@@ -1,3 +1,28 @@
-export const Users = () => null;
+import React from "react";
+import { useHistory } from "react-router-dom";
+import { ORG_INVITE_USERS_PAGE_URL } from "constants/routes";
+import PageSectionHeader from "pages/common/PageSectionHeader";
+import Button from "components/editorComponents/Button";
+import PageWrapper from "pages/common/PageWrapper";
 
-export default Users;
+export const OrgMembers = () => {
+  const history = useHistory();
+
+  return (
+    <PageWrapper displayName="Users">
+      <PageSectionHeader>
+        <h2>Users</h2>
+        <Button
+          intent="primary"
+          text="Invite Users"
+          icon="plus"
+          iconAlignment="left"
+          filled
+          onClick={() => history.push(ORG_INVITE_USERS_PAGE_URL)}
+        />
+      </PageSectionHeader>
+    </PageWrapper>
+  );
+};
+
+export default OrgMembers;

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

@@ -7,7 +7,6 @@ import {
 import { WidgetProps } from "widgets/BaseWidget";
 import { ContainerWidgetProps } from "widgets/ContainerWidget";
 import { UpdateWidgetPropertyPayload } from "actions/controlActions";
-import { WidgetLoadingState } from "actions/widgetActions";
 
 const initialState: CanvasWidgetsReduxState = {};
 

app/client/src/sagas/PageSagas.tsx

@@ -32,6 +32,7 @@ import {
   takeLatest,
   takeEvery,
   all,
+  debounce,
 } from "redux-saga/effects";
 
 import { extractCurrentDSL } from "utils/WidgetPropsUtils";
@@ -162,7 +163,7 @@ export function* fetchPublishedPageSaga(
   }
 }
 
-export function* savePageSaga(savePageAction: ReduxAction<SavePageRequest>) {
+function* savePageSaga(savePageAction: ReduxAction<SavePageRequest>) {
   const savePageRequest = savePageAction.payload;
   try {
     const savePageResponse: SavePageResponse = yield call(
@@ -300,7 +301,6 @@ export default function* pageSagas() {
       ReduxActionTypes.FETCH_PUBLISHED_PAGE_INIT,
       fetchPublishedPageSaga,
     ),
-    takeLatest(ReduxActionTypes.SAVE_PAGE_INIT, savePageSaga),
     takeEvery(ReduxActionTypes.UPDATE_LAYOUT, saveLayoutSaga),
     takeLatest(
       ReduxActionTypes.UPDATE_WIDGET_PROPERTY,
@@ -310,5 +310,6 @@ export default function* pageSagas() {
     takeLatest(ReduxActionTypes.FETCH_PAGE_LIST_INIT, fetchPageListSaga),
     takeLatest(ReduxActionTypes.UPDATE_PAGE_INIT, updatePageSaga),
     takeLatest(ReduxActionTypes.DELETE_PAGE_INIT, deletePageSaga),
+    debounce(500, ReduxActionTypes.SAVE_PAGE_INIT, savePageSaga),
   ]);
 }