Merge branch 'fix/page-redirection' into 'release'

Page Redirection. Sidenav Styles.

- Fix page redirection, so that the application loads the default page on editor and viewer.
- Fix sidenav icons to use the letter icon as in designs.
- Fix editableText input component.

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

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

@@ -38,8 +38,8 @@ export const EditableText = (props: EditableTextProps) => {
     <EditableTextWrapper onDoubleClick={edit} isEditing={isEditing}>
       <BlueprintEditableText
         {...props}
-        disabled={false}
-        isEditing={true}
+        disabled={!isEditing}
+        isEditing={!!isEditing}
         onConfirm={onChange}
         selectAllOnFocus
       />

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

@@ -90,11 +90,7 @@ class AppViewer extends Component<
           <AppViewerHeader />
           <AppViewerBody>
             <AppViewerSideNavWrapper>
-              <SideNav
-                items={items}
-                iconSize={24}
-                active={this.props.currentDSLPageId}
-              />
+              <SideNav items={items} active={this.props.currentDSLPageId} />
             </AppViewerSideNavWrapper>
             <Switch>
               <Route

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

@@ -19,13 +19,12 @@ export default styled.div`
       padding: 0;
     }
     & li div.bp3-menu-item {
-      width: 100%;
       font-size: ${props => props.theme.fontSizes[3]}px;
       &.bp3-intent-primary {
         background: ${props => props.theme.sideNav.activeItemBGColor};
       }
-      & div {
-        line-height: ${props => props.theme.lineHeights[6]}px;
+      & > div {
+        display: inline-block;
       }
     }
   }

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

@@ -1,13 +1,12 @@
 import React, { useState } from "react";
 import styled from "styled-components";
-import { Menu, IconName, Button, Icon } from "@blueprintjs/core";
+import { Menu, Button } from "@blueprintjs/core";
 import SideNavItem, { SideNavItemProps } from "./SideNavItem";
-
+import LetterIcon from "components/editorComponents/LetterIcon";
 type SideNavProps = {
   items?: SideNavItemProps[];
   active?: string;
   headeroffset?: number;
-  iconSize?: number;
 };
 
 /* eslint-disable no-unexpected-multiline */
@@ -21,25 +20,23 @@ const SideNavWrapper = styled.div<{
       props.open
         ? props.theme.sideNav.maxWidth
         : props.theme.sideNav.minWidth}px;
-    transition: width 0.3s ease-in-out;
+    transition: width 0.1s ease-in;
     height: 100%;
     & ul {
       min-width: ${props => props.theme.sideNav.minWidth}px;
       overflow-y: auto;
+      & a {
+        text-decoration: none;
+        color: ${props => props.theme.colors.textOnDarkBG};
+      }
       & li > div {
         width: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
-        padding: 0;
+        padding: 0 ${props => (props.open ? props.theme.spaces[6] : 0)}px;
         height: ${props => props.theme.sideNav.navItemHeight}px;
         text-transform: capitalize;
-        & > div {
-          flex-grow: 0;
-          display: inline;
-          width: ${props => (props.open ? 100 : 0)}px;
-          color: ${props => props.theme.sideNav.fontColor};
-        }
         & > span {
           margin-right: ${props => (props.open ? props.theme.spaces[3] : 0)}px;
         }
@@ -64,7 +61,7 @@ const ToggleButton = styled(Button)<{
     height: ${props => props.headeroffset || 50}px;
     justify-content: flex-end;
     padding-right: ${props => props.theme.sideNav.minWidth / 2}px;
-    transition: width 0.3s ease-in-out;
+    transition: width 0.1s ease-in;
   }
 `;
 
@@ -74,16 +71,19 @@ export const SideNav = (props: SideNavProps) => {
     let items = sideNavItems;
     if (!items) {
       items = [
-        { id: "0", text: "", path: "", loading: true },
-        { id: "1", text: "", path: "", loading: true },
-        { id: "2", text: "", path: "", loading: true },
+        { id: "0", text: "", path: "", loading: true, showText: true },
+        { id: "1", text: "", path: "", loading: true, showText: true },
+        { id: "2", text: "", path: "", loading: true, showText: true },
       ];
     }
     return items.map(item => {
-      const icon = (
-        <Icon iconSize={props.iconSize} icon={item.icon as IconName} />
+      const icon =
+        item.text.length > 0 ? (
+          <LetterIcon text={item.text[0].toUpperCase()} />
+        ) : null;
+      return (
+        <SideNavItem key={item.id} showText={open} {...item} icon={icon} />
       );
-      return <SideNavItem key={item.id} {...item} icon={icon} />;
     });
   };
   const toggleCollapse = () => {

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

@@ -1,13 +1,24 @@
-import React from "react";
+import React, { ReactNode } from "react";
+import styled from "styled-components";
 import { NavLink, useRouteMatch } from "react-router-dom";
-import { MenuItem, Classes, IconName } from "@blueprintjs/core";
+import { MenuItem, Classes } from "@blueprintjs/core";
+
+const Content = styled.div<{ collapsed: boolean }>`
+  display: flex;
+  justify-content: ${props => (props.collapsed ? "center" : "flex-start")};
+  align-items: center;
+  & > div:first-of-type {
+    margin-right: ${props => (props.collapsed ? 0 : props.theme.spaces[5])}px;
+  }
+`;
 
 export type SideNavItemProps = {
   id: string;
-  icon?: IconName | JSX.Element;
+  icon?: ReactNode;
   text: string;
   path: string;
   loading: boolean;
+  showText?: boolean;
 };
 
 export const SideNavItem = (props: SideNavItemProps) => {
@@ -15,13 +26,19 @@ export const SideNavItem = (props: SideNavItemProps) => {
     path: props.path,
     exact: true,
   });
+  const menuItemContent = (
+    <Content collapsed={!props.showText}>
+      {props.icon}
+      {props.showText ? props.text : null}
+    </Content>
+  );
+
   return (
     <NavLink exact to={props.path}>
       <MenuItem
-        className={props.loading ? Classes.SKELETON : undefined}
-        icon={props.icon}
+        className={props.loading ? Classes.SKELETON : Classes.FILL}
         active={!!match}
-        text={props.text ? props.text : undefined}
+        text={menuItemContent}
         tagName="div"
       />
     </NavLink>

app/client/src/sagas/SagaUtils.ts

@@ -4,7 +4,7 @@ export const getDefaultPageId = (
 ): string | undefined => {
   let defaultPage: ApplicationPagePayload | undefined = undefined;
   if (pages) {
-    pages.find(page => page.isDefault);
+    defaultPage = pages.find(page => page.isDefault);
     if (!defaultPage) {
       defaultPage = pages[0];
     }