From 2ac009678e1f75f25e7ba3972644f39220be5ab1 Mon Sep 17 00:00:00 2001
From: Tejaaswini Narendra
 <67053685+tejaaswini-narendra@users.noreply.github.com>
Date: Thu, 23 Jul 2020 17:58:02 +0530
Subject: [PATCH] fix: Add home button on appviewer screen (#117)

* fix: Add home button on appviewer screen

* fix: styling

* fix: take application details as props
---
 app/client/src/icons/FormIcons.tsx            |  5 ++
 app/client/src/pages/AppViewer/index.tsx      | 14 +++++-
 .../AppViewer/viewer/AppViewerHeader.tsx      | 50 ++++++++++++++++++-
 .../src/pages/AppViewer/viewer/SideNav.tsx    | 11 ++--
 4 files changed, 73 insertions(+), 7 deletions(-)

diff --git a/app/client/src/icons/FormIcons.tsx b/app/client/src/icons/FormIcons.tsx
index 773d22267d..65b0d80d04 100644
--- a/app/client/src/icons/FormIcons.tsx
+++ b/app/client/src/icons/FormIcons.tsx
@@ -16,6 +16,11 @@ export const FormIcons: {
       <InfoIcon />
     </IconWrapper>
   ),
+  HOME_ICON: (props: IconProps) => (
+    <IconWrapper {...props}>
+      <Icon icon={IconNames.HOME} color={props.color} iconSize={props.height} />
+    </IconWrapper>
+  ),
   DELETE_ICON: (props: IconProps) => (
     <IconWrapper {...props}>
       <DeleteIcon />
diff --git a/app/client/src/pages/AppViewer/index.tsx b/app/client/src/pages/AppViewer/index.tsx
index f1c7448497..b69648ea35 100644
--- a/app/client/src/pages/AppViewer/index.tsx
+++ b/app/client/src/pages/AppViewer/index.tsx
@@ -77,6 +77,7 @@ class AppViewer extends Component<
 > {
   public state = {
     registered: false,
+    isSideNavOpen: true,
   };
   componentDidMount() {
     editorInitializer().then(() => {
@@ -88,6 +89,10 @@ class AppViewer extends Component<
     }
   }
 
+  toggleCollapse = (open: boolean) => {
+    this.setState({ isSideNavOpen: open });
+  };
+
   public render() {
     const { isInitialized, currentApplication } = this.props;
     const userPermissions = currentApplication?.userPermissions ?? [];
@@ -118,12 +123,19 @@ class AppViewer extends Component<
         <AppViewWrapper>
           <AppViewerHeader
             url={this.props.editorURL}
+            currentApplicationDetails={currentApplication}
             permissions={userPermissions || []}
             permissionRequired={PERMISSION_TYPE.MANAGE_APPLICATION}
+            open={this.state.isSideNavOpen}
           />
           <AppViewerBody>
             <AppViewerSideNavWrapper>
-              <SideNav items={items} active={this.props.currentDSLPageId} />
+              <SideNav
+                items={items}
+                active={this.props.currentDSLPageId}
+                open={this.state.isSideNavOpen}
+                toggleCollapse={this.toggleCollapse}
+              />
             </AppViewerSideNavWrapper>
             <Switch>
               <AppRoute
diff --git a/app/client/src/pages/AppViewer/viewer/AppViewerHeader.tsx b/app/client/src/pages/AppViewer/viewer/AppViewerHeader.tsx
index 2c3975c7d0..4860d66376 100644
--- a/app/client/src/pages/AppViewer/viewer/AppViewerHeader.tsx
+++ b/app/client/src/pages/AppViewer/viewer/AppViewerHeader.tsx
@@ -1,25 +1,54 @@
 import React from "react";
+import { Link } from "react-router-dom";
+import { noop } from "lodash";
 import styled from "styled-components";
 import StyledHeader from "components/designSystems/appsmith/StyledHeader";
+import { FormIcons } from "icons/FormIcons";
 import Button from "components/editorComponents/Button";
 import { EDIT_APP } from "constants/messages";
 import { isPermitted } from "pages/Applications/permissionHelpers";
+import { ApplicationPayload } from "constants/ReduxActionConstants";
+import { APPLICATIONS_URL } from "constants/routes";
+
 const HeaderWrapper = styled(StyledHeader)`
   position: fixed;
   top: 0;
   left: 0;
   background: white;
+  justify-content: space-between;
+`;
+
+const StyledHomeButton = styled.div<{
+  open: boolean;
+}>`
+  && a {
+    :hover {
+      text-decoration: none;
+    }
+    color: ${props => props.theme.colors.textDefault};
+  }
   display: flex;
-  justify-content: flex-end;
+  justify-content: flex-start;
+  padding-left: ${props =>
+    props.open ? props.theme.sideNav.maxWidth : props.theme.sideNav.minWidth}px;
 `;
 
 const StyledButton = styled(Button)`
   max-width: 200px;
+  display: flex;
+  justify-content: flex-end;
+`;
+
+const StyledApplicationName = styled.span`
+  font-size: 15px;
+  padding-left: 8px;
 `;
 type AppViewerHeaderProps = {
   url?: string;
+  open: boolean;
   permissionRequired: string;
   permissions: string[];
+  currentApplicationDetails?: ApplicationPayload;
 };
 
 export const AppViewerHeader = (props: AppViewerHeaderProps) => {
@@ -28,8 +57,27 @@ export const AppViewerHeader = (props: AppViewerHeaderProps) => {
     props.permissionRequired,
   );
 
+  const { currentApplicationDetails, open } = props;
+
   return (
     <HeaderWrapper>
+      {currentApplicationDetails && (
+        <StyledHomeButton open={open}>
+          <Link to={APPLICATIONS_URL}>
+            <FormIcons.HOME_ICON
+              height={20}
+              width={20}
+              color={"grey"}
+              background={"grey"}
+              onClick={noop}
+              style={{ alignSelf: "center", cursor: "pointer" }}
+            />
+            <StyledApplicationName>
+              {currentApplicationDetails.name}
+            </StyledApplicationName>
+          </Link>
+        </StyledHomeButton>
+      )}
       {props.url && hasPermission && (
         <StyledButton
           className="t--back-to-editor"
diff --git a/app/client/src/pages/AppViewer/viewer/SideNav.tsx b/app/client/src/pages/AppViewer/viewer/SideNav.tsx
index f2e93eb00b..d9f8e29066 100644
--- a/app/client/src/pages/AppViewer/viewer/SideNav.tsx
+++ b/app/client/src/pages/AppViewer/viewer/SideNav.tsx
@@ -7,6 +7,8 @@ type SideNavProps = {
   items?: SideNavItemProps[];
   active?: string;
   headeroffset?: number;
+  open: boolean;
+  toggleCollapse: (open: boolean) => void;
 };
 
 /* eslint-disable no-unexpected-multiline */
@@ -66,7 +68,7 @@ const ToggleButton = styled(Button)<{
 `;
 
 export const SideNav = (props: SideNavProps) => {
-  const [open, setopen] = useState(true);
+  const { open, toggleCollapse } = props;
   const renderItems = (sideNavItems?: SideNavItemProps[]) => {
     let items = sideNavItems;
     if (!items) {
@@ -88,15 +90,14 @@ export const SideNav = (props: SideNavProps) => {
       );
     });
   };
-  const toggleCollapse = () => {
-    setopen(!open);
-  };
 
   return (
     <SideNavWrapper open={open} headeroffset={props.headeroffset}>
       <ToggleButton
         headeroffset={props.headeroffset}
-        onClick={toggleCollapse}
+        onClick={() => {
+          toggleCollapse(!open);
+        }}
         icon={open ? "double-chevron-left" : "menu"}
         minimal
         open={open}