fix: fix 404 crash happening during first load (#27229)

app/client/src/ce/utils/BusinessFeatures/brandingPageHelpers.tsx

@@ -3,11 +3,11 @@ import { default as UpgradeBanner_CE } from "ce/pages/AdminSettings/Branding/Upg
 import { default as UpgradeBanner_EE } from "@appsmith/pages/AdminSettings/Branding/UpgradeBanner";
 import React from "react";
 import {
-  useHtmlPageTitle as useHtmlPageTitle_CE,
+  getHtmlPageTitle as getHtmlPageTitle_CE,
   getPageTitle as getPageTitle_CE,
 } from "ce/utils";
 import {
-  useHtmlPageTitle as useHtmlPageTitle_EE,
+  getHtmlPageTitle as getHtmlPageTitle_EE,
   getPageTitle as getPageTitle_EE,
 } from "@appsmith/utils";
 
@@ -17,18 +17,22 @@ export const getUpgradeBanner = (isEnabled: boolean) => {
   } else return <UpgradeBanner_CE />;
 };
 
-export const getHTMLPageTitle = (isEnabled: boolean) => {
+export const getHTMLPageTitle = (isEnabled: boolean, instanceName: string) => {
   if (isEnabled) {
-    return useHtmlPageTitle_EE;
+    return getHtmlPageTitle_EE(instanceName);
   } else {
-    return useHtmlPageTitle_CE;
+    return getHtmlPageTitle_CE(instanceName);
   }
 };
 
-export const getPageTitle = (isEnabled: boolean) => {
+export const getPageTitle = (
+  isEnabled: boolean,
+  displayName: string | undefined,
+  titleSuffix: string | undefined,
+) => {
   if (isEnabled) {
-    return getPageTitle_EE;
+    return getPageTitle_EE(displayName, titleSuffix);
   } else {
-    return getPageTitle_CE;
+    return getPageTitle_CE(displayName, titleSuffix);
   }
 };

app/client/src/ce/utils/index.ts

@@ -11,7 +11,8 @@ export const addItemsInContextMenu = (
   return moreActionItems;
 };
 
-export const useHtmlPageTitle = () => {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const getHtmlPageTitle = (instanceName: string) => {
   return "Appsmith";
 };
 

app/client/src/pages/UserAuth/Login.tsx

@@ -45,6 +45,7 @@ import Container from "pages/UserAuth/Container";
 import {
   getThirdPartyAuths,
   getIsFormLoginEnabled,
+  getTenantConfig,
 } from "@appsmith/selectors/tenantSelectors";
 import Helmet from "react-helmet";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
@@ -93,8 +94,9 @@ export function Login(props: LoginFormProps) {
   const isBrandingEnabled = useFeatureFlag(
     FEATURE_FLAG.license_branding_enabled,
   );
-  const pageTitle = getHTMLPageTitle(isBrandingEnabled);
+  const tentantConfig = useSelector(getTenantConfig);
-  const htmlPageTitle = pageTitle();
+  const { instanceName } = tentantConfig;
+  const htmlPageTitle = getHTMLPageTitle(isBrandingEnabled, instanceName);
   const invalidCredsForgotPasswordLinkText = createMessage(
     LOGIN_PAGE_INVALID_CREDS_FORGOT_PASSWORD_LINK,
   );

app/client/src/pages/UserAuth/SignUp.tsx

@@ -45,6 +45,7 @@ import { getIsSafeRedirectURL } from "utils/helpers";
 import Container from "pages/UserAuth/Container";
 import {
   getIsFormLoginEnabled,
+  getTenantConfig,
   getThirdPartyAuths,
 } from "@appsmith/selectors/tenantSelectors";
 import Helmet from "react-helmet";
@@ -104,8 +105,9 @@ export function SignUp(props: SignUpFormProps) {
   const isBrandingEnabled = useFeatureFlag(
     FEATURE_FLAG.license_branding_enabled,
   );
-  const pageTitle = getHTMLPageTitle(isBrandingEnabled);
+  const tentantConfig = useSelector(getTenantConfig);
-  const htmlPageTitle = pageTitle();
+  const { instanceName } = tentantConfig;
+  const htmlPageTitle = getHTMLPageTitle(isBrandingEnabled, instanceName);
 
   const recaptchaStatus = useScript(
     `https://www.google.com/recaptcha/api.js?render=${googleRecaptchaSiteKey.apiKey}`,

app/client/src/pages/common/PageWrapper.tsx

@@ -1,14 +1,16 @@
 import type { ReactNode } from "react";
-import React from "react";
+import React, { useMemo } from "react";
 import { Helmet } from "react-helmet";
 import styled from "styled-components";
 import { Banner } from "@appsmith/utils/licenseHelpers";
 import {
-  getHTMLPageTitle,
   getPageTitle,
+  getHTMLPageTitle,
 } from "@appsmith/utils/BusinessFeatures/brandingPageHelpers";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
+import { getTenantConfig } from "@appsmith/selectors/tenantSelectors";
+import { useSelector } from "react-redux";
 
 export const Wrapper = styled.section<{ isFixed?: boolean }>`
   ${(props) =>
@@ -65,18 +67,26 @@ export type PageWrapperProps = {
 export function PageWrapper(props: PageWrapperProps) {
   const { isFixed = false, isSavable = false } = props;
   const isBrandingEnabled = useFeatureFlag(
-    FEATURE_FLAG.license_branding_enabled,
+    FEATURE_FLAG?.license_branding_enabled,
   );
-  const htmlPageTitleMethod = getHTMLPageTitle(isBrandingEnabled);
+  const tentantConfig = useSelector(getTenantConfig);
-  const titleSuffix = htmlPageTitleMethod();
+  const { instanceName } = tentantConfig;
 
-  const getPageTitleMethod = getPageTitle(isBrandingEnabled);
+  const titleSuffix = useMemo(
+    () => getHTMLPageTitle(isBrandingEnabled, instanceName),
+    [isBrandingEnabled, instanceName],
+  );
+
+  const pageTitle = useMemo(
+    () => getPageTitle(isBrandingEnabled, props.displayName, titleSuffix),
+    [isBrandingEnabled, props.displayName, titleSuffix],
+  );
 
   return (
     <Wrapper isFixed={isFixed}>
       <Banner />
       <Helmet>
-        <title>{getPageTitleMethod(props.displayName, titleSuffix)}</title>
+        <title>{pageTitle}</title>
       </Helmet>
       <PageBody isSavable={isSavable}>{props.children}</PageBody>
     </Wrapper>