From a1c7ecee29f99a51a5d073ac60034522b79a2a2f Mon Sep 17 00:00:00 2001
From: Dhruvik Neharia <dhruvik@appsmith.com>
Date: Mon, 8 May 2023 14:30:39 +0700
Subject: [PATCH 1/2] fix: Add app title in browser tab title when nav is set
 to side

---
 app/client/src/pages/AppViewer/Navigation/Sidebar.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/app/client/src/pages/AppViewer/Navigation/Sidebar.tsx b/app/client/src/pages/AppViewer/Navigation/Sidebar.tsx
index 536d007dc1a..a7e0232bbcb 100644
--- a/app/client/src/pages/AppViewer/Navigation/Sidebar.tsx
+++ b/app/client/src/pages/AppViewer/Navigation/Sidebar.tsx
@@ -15,6 +15,7 @@ import PrimaryCTA from "../PrimaryCTA";
 import { useHref } from "pages/Editor/utils";
 import { builderURL } from "RouteBuilder";
 import {
+  getCurrentPageDescription,
   getCurrentPageId,
   previewModeSelector,
 } from "selectors/editorSelectors";
@@ -37,6 +38,7 @@ import { getIsAppSettingsPaneWithNavigationTabOpen } from "selectors/appSettings
 import NavigationLogo from "@appsmith/pages/AppViewer/NavigationLogo";
 import MenuItemContainer from "./components/MenuItemContainer";
 import BackToAppsButton from "./components/BackToAppsButton";
+import HtmlTitle from "../AppViewerHtmlTitle";
 
 type SidebarProps = {
   currentApplicationDetails?: ApplicationPayload;
@@ -86,6 +88,7 @@ export function Sidebar(props: SidebarProps) {
   const isAppSettingsPaneWithNavigationTabOpen = useSelector(
     getIsAppSettingsPaneWithNavigationTabOpen,
   );
+  const pageDescription = useSelector(getCurrentPageDescription);
 
   useEffect(() => {
     setQuery(window.location.search);
@@ -151,6 +154,10 @@ export function Sidebar(props: SidebarProps) {
       primaryColor={primaryColor}
       sidebarHeight={calculateSidebarHeight()}
     >
+      <HtmlTitle
+        description={pageDescription}
+        name={currentApplicationDetails?.name}
+      />
       <StyledHeader>
         <div className="flex flex-col gap-5">
           <NavigationLogo logoConfiguration={logoConfiguration} />

From 000de57f90b740c836160fb4a79581b9435d0cdb Mon Sep 17 00:00:00 2001
From: Dhruvik Neharia <dhruvik@appsmith.com>
Date: Wed, 10 May 2023 18:17:39 +0700
Subject: [PATCH 2/2] fix: app title now shows up even for embedded apps

---
 .../src/pages/AppViewer/Navigation/Sidebar.tsx   |  7 -------
 .../Navigation/components/TopHeader.tsx          | 11 +----------
 app/client/src/pages/AppViewer/index.tsx         | 16 +++++++++++++++-
 3 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/app/client/src/pages/AppViewer/Navigation/Sidebar.tsx b/app/client/src/pages/AppViewer/Navigation/Sidebar.tsx
index a7e0232bbcb..536d007dc1a 100644
--- a/app/client/src/pages/AppViewer/Navigation/Sidebar.tsx
+++ b/app/client/src/pages/AppViewer/Navigation/Sidebar.tsx
@@ -15,7 +15,6 @@ import PrimaryCTA from "../PrimaryCTA";
 import { useHref } from "pages/Editor/utils";
 import { builderURL } from "RouteBuilder";
 import {
-  getCurrentPageDescription,
   getCurrentPageId,
   previewModeSelector,
 } from "selectors/editorSelectors";
@@ -38,7 +37,6 @@ import { getIsAppSettingsPaneWithNavigationTabOpen } from "selectors/appSettings
 import NavigationLogo from "@appsmith/pages/AppViewer/NavigationLogo";
 import MenuItemContainer from "./components/MenuItemContainer";
 import BackToAppsButton from "./components/BackToAppsButton";
-import HtmlTitle from "../AppViewerHtmlTitle";
 
 type SidebarProps = {
   currentApplicationDetails?: ApplicationPayload;
@@ -88,7 +86,6 @@ export function Sidebar(props: SidebarProps) {
   const isAppSettingsPaneWithNavigationTabOpen = useSelector(
     getIsAppSettingsPaneWithNavigationTabOpen,
   );
-  const pageDescription = useSelector(getCurrentPageDescription);
 
   useEffect(() => {
     setQuery(window.location.search);
@@ -154,10 +151,6 @@ export function Sidebar(props: SidebarProps) {
       primaryColor={primaryColor}
       sidebarHeight={calculateSidebarHeight()}
     >
-      <HtmlTitle
-        description={pageDescription}
-        name={currentApplicationDetails?.name}
-      />
       <StyledHeader>
         <div className="flex flex-col gap-5">
           <NavigationLogo logoConfiguration={logoConfiguration} />
diff --git a/app/client/src/pages/AppViewer/Navigation/components/TopHeader.tsx b/app/client/src/pages/AppViewer/Navigation/components/TopHeader.tsx
index d5af9ed7d74..2bc4c516878 100644
--- a/app/client/src/pages/AppViewer/Navigation/components/TopHeader.tsx
+++ b/app/client/src/pages/AppViewer/Navigation/components/TopHeader.tsx
@@ -9,11 +9,7 @@ import React from "react";
 import { useSelector } from "react-redux";
 import { builderURL } from "RouteBuilder";
 import { getSelectedAppTheme } from "selectors/appThemingSelectors";
-import {
-  getCurrentPageDescription,
-  getCurrentPageId,
-} from "selectors/editorSelectors";
-import HtmlTitle from "../../AppViewerHtmlTitle";
+import { getCurrentPageId } from "selectors/editorSelectors";
 import MobileNavToggle from "./MobileNavToggle";
 import ApplicationName from "./ApplicationName";
 import ShareButton from "./ShareButton";
@@ -62,7 +58,6 @@ const TopHeader = (props: TopHeaderProps) => {
     "properties.colors.primaryColor",
     "inherit",
   );
-  const description = useSelector(getCurrentPageDescription);
   const pageId = useSelector(getCurrentPageId);
   const editorURL = useHref(builderURL, { pageId });
 
@@ -73,10 +68,6 @@ const TopHeader = (props: TopHeaderProps) => {
       navColorStyle={navColorStyle}
       primaryColor={primaryColor}
     >
-      <HtmlTitle
-        description={description}
-        name={currentApplicationDetails?.name}
-      />
       <HeaderRow
         className="relative h-12 px-3 md:px-6"
         navColorStyle={navColorStyle}
diff --git a/app/client/src/pages/AppViewer/index.tsx b/app/client/src/pages/AppViewer/index.tsx
index 2584ec9d96e..e80ce15b1ed 100644
--- a/app/client/src/pages/AppViewer/index.tsx
+++ b/app/client/src/pages/AppViewer/index.tsx
@@ -17,7 +17,10 @@ import EditorContextProvider from "components/editorComponents/EditorContextProv
 import AppViewerPageContainer from "./AppViewerPageContainer";
 import { editorInitializer } from "utils/editor/EditorUtils";
 import * as Sentry from "@sentry/react";
-import { getViewModePageList } from "selectors/editorSelectors";
+import {
+  getCurrentPageDescription,
+  getViewModePageList,
+} from "selectors/editorSelectors";
 import { getThemeDetails, ThemeMode } from "selectors/themeSelectors";
 import { getSearchQuery } from "utils/helpers";
 import { getSelectedAppTheme } from "selectors/appThemingSelectors";
@@ -34,6 +37,9 @@ import { initAppViewer } from "actions/initActions";
 import { WidgetGlobaStyles } from "globalStyles/WidgetGlobalStyles";
 import { getAppsmithConfigs } from "@appsmith/configs";
 import useWidgetFocus from "utils/hooks/useWidgetFocus/useWidgetFocus";
+import HtmlTitle from "./AppViewerHtmlTitle";
+import type { ApplicationPayload } from "@appsmith/constants/ReduxActionConstants";
+import { getCurrentApplication } from "@appsmith/selectors/applicationSelectors";
 
 const AppViewerBody = styled.section<{
   hasPages: boolean;
@@ -80,6 +86,10 @@ function AppViewer(props: Props) {
   const branch = getSearchQuery(search, GIT_BRANCH_QUERY_KEY);
   const prevValues = usePrevious({ branch, location: props.location, pageId });
   const { hideWatermark } = getAppsmithConfigs();
+  const pageDescription = useSelector(getCurrentPageDescription);
+  const currentApplicationDetails: ApplicationPayload | undefined = useSelector(
+    getCurrentApplication,
+  );
 
   const focusRef = useWidgetFocus();
 
@@ -171,6 +181,10 @@ function AppViewer(props: Props) {
           fontFamily={selectedTheme.properties.fontFamily.appFont}
           primaryColor={selectedTheme.properties.colors.primaryColor}
         />
+        <HtmlTitle
+          description={pageDescription}
+          name={currentApplicationDetails?.name}
+        />
         <AppViewerBodyContainer
           backgroundColor={selectedTheme.properties.colors.backgroundColor}
         >