perf: clean up header routes & replace useLocation

app/client/src/ce/pages/common/AppHeader.tsx

@@ -4,52 +4,44 @@ import { Route, Switch } from "react-router";
 import {
   VIEWER_PATH,
   BUILDER_PATH,
-  SETUP,
-  SIGNUP_SUCCESS_URL,
-  USER_AUTH_URL,
   BUILDER_PATH_DEPRECATED,
   VIEWER_PATH_DEPRECATED,
   ADMIN_SETTINGS_CATEGORY_PATH,
   VIEWER_CUSTOM_PATH,
   BUILDER_CUSTOM_PATH,
   BASE_URL,
-  CUSTOM_WIDGETS_EDITOR_ID_PATH,
-  CUSTOM_WIDGETS_EDITOR_ID_PATH_CUSTOM,
-  CUSTOM_WIDGETS_DEPRECATED_EDITOR_ID_PATH,
 } from "constants/routes";
+
 import Navigation from "pages/AppViewer/Navigation";
-import type { RouteComponentProps } from "react-router";
-import { Header as AppIDEHeader } from "pages/Editor/IDE/Header";
+import { Header as IDEHeader } from "pages/Editor/IDE/Header";
 
-export type Props = RouteComponentProps;
+const IDE_HEADER_PATHS = [
+  BUILDER_PATH_DEPRECATED,
+  BUILDER_PATH,
+  BUILDER_CUSTOM_PATH,
+];
 
-export const headerRoot = document.getElementById("header-root");
+const NAVIGATION_PATHS = [
+  VIEWER_PATH_DEPRECATED,
+  VIEWER_PATH,
+  VIEWER_CUSTOM_PATH,
+];
+
+const PAGE_HEADER_PATHS = [ADMIN_SETTINGS_CATEGORY_PATH, BASE_URL];
 
 export const Routes = () => {
   return (
     <Switch>
-      <Route component={PageHeader} path={ADMIN_SETTINGS_CATEGORY_PATH} />
-      <Route component={undefined} path={USER_AUTH_URL} />
-      <Route path={SETUP} />
-      <Route path={SIGNUP_SUCCESS_URL} />
-      <Route component={undefined} exact path={CUSTOM_WIDGETS_EDITOR_ID_PATH} />
-      <Route
-        component={undefined}
-        exact
-        path={CUSTOM_WIDGETS_EDITOR_ID_PATH_CUSTOM}
-      />
-      <Route
-        component={undefined}
-        exact
-        path={CUSTOM_WIDGETS_DEPRECATED_EDITOR_ID_PATH}
-      />
-      <Route component={AppIDEHeader} path={BUILDER_PATH_DEPRECATED} />
-      <Route component={Navigation} path={VIEWER_PATH_DEPRECATED} />
-      <Route component={AppIDEHeader} path={BUILDER_PATH} />
-      <Route component={AppIDEHeader} path={BUILDER_CUSTOM_PATH} />
-      <Route component={Navigation} path={VIEWER_PATH} />
-      <Route component={Navigation} path={VIEWER_CUSTOM_PATH} />
-      <Route component={PageHeader} path={BASE_URL} />
+      <Route path={IDE_HEADER_PATHS}>
+        <IDEHeader />
+      </Route>
+      <Route path={NAVIGATION_PATHS}>
+        <Navigation />
+      </Route>
+
+      <Route path={PAGE_HEADER_PATHS}>
+        <PageHeader />
+      </Route>
     </Switch>
   );
 };

app/client/src/pages/Editor/IDE/Header/EditorTitle.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 import { Popover, PopoverTrigger, PopoverContent } from "@appsmith/ads";
 
 import { createMessage, HEADER_TITLES } from "ee/constants/messages";
@@ -8,9 +8,9 @@ import { IDEHeaderEditorSwitcher } from "IDE";
 const EditorTitle = ({ title }: { title: string }) => {
   const [active, setActive] = useState(false);
 
-  const closeMenu = () => {
+  const closeMenu = useCallback(() => {
     setActive(false);
-  };
+  }, []);
 
   return (
     <Popover onOpenChange={setActive} open={active}>

app/client/src/pages/Editor/IDE/Header/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { memo, useCallback, useState } from "react";
 import {
   Flex,
   Tooltip,
@@ -70,14 +70,14 @@ import { useHref } from "pages/Editor/utils";
 import { viewerURL } from "ee/RouteBuilder";
 import HelpBar from "components/editorComponents/GlobalSearch/HelpBar";
 import { EditorTitle } from "./EditorTitle";
-import { useCurrentAppState } from "../hooks/useCurrentAppState";
 import { EditorState } from "ee/entities/IDE/constants";
 import { EditorSaveIndicator } from "pages/Editor/EditorSaveIndicator";
 import type { Page } from "entities/Page";
 import { IDEHeader, IDEHeaderTitle } from "IDE";
 import { APPLICATIONS_URL } from "constants/routes";
 import { useNavigationMenuData } from "../../EditorName/useNavigationMenuData";
 import useLibraryHeaderTitle from "ee/pages/Editor/IDE/Header/useLibraryHeaderTitle";
+import { identifyEntityFromPath } from "navigation/FocusEntity";
 
 const StyledDivider = styled(Divider)`
   height: 50%;
@@ -119,7 +119,7 @@ const HeaderTitleComponent = ({ appState, currentPage }: HeaderTitleProps) => {
   }
 };
 
-const Header = () => {
+export const Header = memo(() => {
   const dispatch = useDispatch();
 
   // selectors
@@ -134,7 +134,6 @@ const Header = () => {
   const isGitConnected = useSelector(getIsGitConnected);
   const pageId = useSelector(getCurrentPageId) as string;
   const currentPage = useSelector(getPageById(pageId));
-  const appState = useCurrentAppState();
   const isSaving = useSelector(getIsPageSaving);
   const pageSaveError = useSelector(getPageSavingError);
 
@@ -156,6 +155,7 @@ const Header = () => {
     FEATURE_FLAG.license_private_embeds_enabled,
   );
 
+  const { appState } = identifyEntityFromPath(location.pathname);
   const deployLink = useHref(viewerURL, {
     basePageId: currentPage?.basePageId,
   });
@@ -352,6 +352,4 @@ const Header = () => {
       <Omnibar />
     </>
   );
-};
-
-export { Header };
+});