chore: Callout to Banner component migration for Billing Banner (#27910)

app/client/src/ce/selectors/tenantSelectors.tsx

@@ -49,5 +49,8 @@ export const getIsFormLoginEnabled = (state: AppState): boolean =>
 export const getInstanceId = (state: AppState): string =>
   state.tenant?.instanceId;
 
+// eslint-disable-next-line
+export const shouldShowLicenseBanner = (state: AppState) => false;
+
 export const getHideWatermark = (state: AppState): boolean =>
   state.tenant?.tenantConfiguration?.hideWatermark;

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

@@ -1,5 +1,5 @@
 import React, { useState, useMemo, useEffect } from "react";
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation, useRouteMatch } from "react-router-dom";
 import { connect, useDispatch, useSelector } from "react-redux";
 import { getCurrentUser } from "selectors/usersSelectors";
 import styled from "styled-components";
@@ -22,7 +22,10 @@ import ProfileDropdown from "./ProfileDropdown";
 import { useIsMobileDevice } from "utils/hooks/useDeviceDetect";
 import MobileSideBar from "./MobileSidebar";
 import { getTemplateNotificationSeenAction } from "actions/templateActions";
-import { getTenantConfig } from "@appsmith/selectors/tenantSelectors";
+import {
+  getTenantConfig,
+  shouldShowLicenseBanner,
+} from "@appsmith/selectors/tenantSelectors";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import { Button } from "design-system";
 import { getSelectedAppTheme } from "selectors/appThemingSelectors";
@@ -30,12 +33,14 @@ import { getCurrentApplication } from "selectors/editorSelectors";
 import { get } from "lodash";
 import { NAVIGATION_SETTINGS } from "constants/AppConstants";
 import { getAssetUrl, isAirgapped } from "@appsmith/utils/airgapHelpers";
+import { Banner } from "@appsmith/utils/licenseHelpers";
 
 const StyledPageHeader = styled(StyledHeader)<{
   hideShadow?: boolean;
   isMobile?: boolean;
   showSeparator?: boolean;
   showingTabs: boolean;
+  isBannerVisible?: boolean;
 }>`
   justify-content: normal;
   background: var(--ads-v2-color-bg);
@@ -51,6 +56,7 @@ const StyledPageHeader = styled(StyledHeader)<{
     padding: 0 12px;
     padding-left: 10px;
   `};
+  ${({ isBannerVisible }) => isBannerVisible && `top: 40px;`};
 `;
 
 const HeaderSection = styled.div`
@@ -188,104 +194,111 @@ export function PageHeader(props: PageHeaderProps) {
   }, [location.pathname]);
 
   const isAirgappedInstance = isAirgapped();
+  const showBanner = useSelector(shouldShowLicenseBanner);
+  const isHomePage = useRouteMatch("/applications")?.isExact;
+  const isLicensePage = useRouteMatch("/license")?.isExact;
 
   return (
-    <StyledPageHeader
+    <>
-      data-testid="t--appsmith-page-header"
+      <Banner />
-      hideShadow={props.hideShadow || false}
+      <StyledPageHeader
-      isMobile={isMobile}
+        data-testid="t--appsmith-page-header"
-      showSeparator={props.showSeparator || false}
+        hideShadow={props.hideShadow || false}
-      showingTabs={showTabs}
+        isBannerVisible={showBanner && (isHomePage || isLicensePage)}
-    >
+        isMobile={isMobile}
-      <HeaderSection>
+        showSeparator={props.showSeparator || false}
-        {tenantConfig.brandLogoUrl && (
+        showingTabs={showTabs}
-          <Link className="t--appsmith-logo" to={APPLICATIONS_URL}>
+      >
-            <img
+        <HeaderSection>
-              alt="Logo"
+          {tenantConfig.brandLogoUrl && (
-              className="h-6"
+            <Link className="t--appsmith-logo" to={APPLICATIONS_URL}>
-              src={getAssetUrl(tenantConfig.brandLogoUrl)}
+              <img
-            />
+                alt="Logo"
-          </Link>
+                className="h-6"
-        )}
+                src={getAssetUrl(tenantConfig.brandLogoUrl)}
-      </HeaderSection>
+              />
-      <Tabs>
+            </Link>
-        {showTabs && !isMobile && (
-          <TabsList>
-            <Tab
-              className="t--apps-tab"
-              isSelected={matchApplicationPath(location.pathname)}
-              onClick={() => history.push(APPLICATIONS_URL)}
-            >
-              <div>Apps</div>
-            </Tab>
-
-            {!isAirgappedInstance && (
-              <Tab
-                className="t--templates-tab"
-                isSelected={
-                  matchTemplatesPath(location.pathname) ||
-                  matchTemplatesIdPath(location.pathname)
-                }
-                onClick={() => {
-                  AnalyticsUtil.logEvent("TEMPLATES_TAB_CLICK");
-                  history.push(TEMPLATES_PATH);
-                }}
-              >
-                <div>Templates</div>
-              </Tab>
-            )}
-          </TabsList>
-        )}
-      </Tabs>
-
-      {user && !isMobile && (
-        <div>
-          {user.username === ANONYMOUS_USERNAME ? (
-            <EditorButton
-              filled
-              intent={"primary"}
-              onClick={() => history.push(loginUrl)}
-              size="small"
-              text="Sign In"
-            />
-          ) : (
-            <ProfileDropdown
-              hideEditProfileLink={props.hideEditProfileLink}
-              name={user.name}
-              navColorStyle={navColorStyle}
-              photoId={user?.photoId}
-              primaryColor={primaryColor}
-              userName={user.username}
-            />
           )}
-        </div>
+        </HeaderSection>
-      )}
+        <Tabs>
-      {isMobile && !isMobileSidebarOpen && (
+          {showTabs && !isMobile && (
-        <Button
+            <TabsList>
-          isIconButton
+              <Tab
-          kind="tertiary"
+                className="t--apps-tab"
-          onClick={() => setIsMobileSidebarOpen(true)}
+                isSelected={matchApplicationPath(location.pathname)}
-          size={"md"}
+                onClick={() => history.push(APPLICATIONS_URL)}
-          startIcon="hamburger"
+              >
-        />
+                <div>Apps</div>
-      )}
+              </Tab>
-      {isMobile && isMobileSidebarOpen && (
+
-        <Button
+              {!isAirgappedInstance && (
-          isIconButton
+                <Tab
-          kind="tertiary"
+                  className="t--templates-tab"
-          onClick={() => setIsMobileSidebarOpen(false)}
+                  isSelected={
-          size="sm"
+                    matchTemplatesPath(location.pathname) ||
-          startIcon="close-x"
+                    matchTemplatesIdPath(location.pathname)
-        />
+                  }
-      )}
+                  onClick={() => {
-      {isMobile && user && (
+                    AnalyticsUtil.logEvent("TEMPLATES_TAB_CLICK");
-        <MobileSideBar
+                    history.push(TEMPLATES_PATH);
-          isOpen={isMobileSidebarOpen}
+                  }}
-          name={user.name}
+                >
-          userName={user.username}
+                  <div>Templates</div>
-        />
+                </Tab>
-      )}
+              )}
-    </StyledPageHeader>
+            </TabsList>
+          )}
+        </Tabs>
+
+        {user && !isMobile && (
+          <div>
+            {user.username === ANONYMOUS_USERNAME ? (
+              <EditorButton
+                filled
+                intent={"primary"}
+                onClick={() => history.push(loginUrl)}
+                size="small"
+                text="Sign In"
+              />
+            ) : (
+              <ProfileDropdown
+                hideEditProfileLink={props.hideEditProfileLink}
+                name={user.name}
+                navColorStyle={navColorStyle}
+                photoId={user?.photoId}
+                primaryColor={primaryColor}
+                userName={user.username}
+              />
+            )}
+          </div>
+        )}
+        {isMobile && !isMobileSidebarOpen && (
+          <Button
+            isIconButton
+            kind="tertiary"
+            onClick={() => setIsMobileSidebarOpen(true)}
+            size={"md"}
+            startIcon="hamburger"
+          />
+        )}
+        {isMobile && isMobileSidebarOpen && (
+          <Button
+            isIconButton
+            kind="tertiary"
+            onClick={() => setIsMobileSidebarOpen(false)}
+            size="sm"
+            startIcon="close-x"
+          />
+        )}
+        {isMobile && user && (
+          <MobileSideBar
+            isOpen={isMobileSidebarOpen}
+            name={user.name}
+            userName={user.username}
+          />
+        )}
+      </StyledPageHeader>
+    </>
   );
 }
 

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

@@ -2,7 +2,6 @@ import type { ReactNode } from "react";
 import React, { useMemo } from "react";
 import { Helmet } from "react-helmet";
 import styled from "styled-components";
-import { Banner } from "@appsmith/utils/licenseHelpers";
 import {
   getPageTitle,
   getHTMLPageTitle,
@@ -84,7 +83,6 @@ export function PageWrapper(props: PageWrapperProps) {
 
   return (
     <Wrapper isFixed={isFixed}>
-      <Banner />
       <Helmet>
         <title>{pageTitle}</title>
       </Helmet>