chore: Callout to Banner component migration for Billing Banner (#27910)
This commit is contained in:
Ankit Srivastava
GitHub
parent
e040d261ac
commit
9ae7257ece
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
hideShadow={props.hideShadow || false}
|
||||
isMobile={isMobile}
|
||||
showSeparator={props.showSeparator || false}
|
||||
showingTabs={showTabs}
|
||||
>
|
||||
<HeaderSection>
|
||||
{tenantConfig.brandLogoUrl && (
|
||||
<Link className="t--appsmith-logo" to={APPLICATIONS_URL}>
|
||||
<img
|
||||
alt="Logo"
|
||||
className="h-6"
|
||||
src={getAssetUrl(tenantConfig.brandLogoUrl)}
|
||||
/>
|
||||
</Link>
|
||||
)}
|
||||
</HeaderSection>
|
||||
<Tabs>
|
||||
{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}
|
||||
/>
|
||||
<>
|
||||
<Banner />
|
||||
<StyledPageHeader
|
||||
data-testid="t--appsmith-page-header"
|
||||
hideShadow={props.hideShadow || false}
|
||||
isBannerVisible={showBanner && (isHomePage || isLicensePage)}
|
||||
isMobile={isMobile}
|
||||
showSeparator={props.showSeparator || false}
|
||||
showingTabs={showTabs}
|
||||
>
|
||||
<HeaderSection>
|
||||
{tenantConfig.brandLogoUrl && (
|
||||
<Link className="t--appsmith-logo" to={APPLICATIONS_URL}>
|
||||
<img
|
||||
alt="Logo"
|
||||
className="h-6"
|
||||
src={getAssetUrl(tenantConfig.brandLogoUrl)}
|
||||
/>
|
||||
</Link>
|
||||
)}
|
||||
</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>
|
||||
</HeaderSection>
|
||||
<Tabs>
|
||||
{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>
|
||||
)}
|
||||
{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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user