feat: shift header dialogs if showing license bar

Author: arunjaindev

src/Shared/Components/Header/HeaderWithCreateButton/HeaderWithCreateButon.tsx

@@ -21,6 +21,7 @@ import { ReactComponent as DropDown } from '@Icons/ic-caret-down-small.svg'
 import { ReactComponent as ChartIcon } from '@Icons/ic-charts.svg'
 import { ReactComponent as AddIcon } from '@Icons/ic-add.svg'
 import { ReactComponent as JobIcon } from '@Icons/ic-k8s-job.svg'
+import { LicenseStatus } from '@Shared/Components/DevtronLicenseCard'
 import PageHeader from '../PageHeader'
 import { Modal, SERVER_MODE, URLS } from '../../../../Common'
 import { AppListConstants, ComponentSizeType } from '../../../constants'
@@ -35,9 +36,12 @@ export const HeaderWithCreateButton = ({ headerName }: HeaderWithCreateButtonPro
     const params = useParams<{ appType: string }>()
     const history = useHistory()
     const location = useLocation()
-    const { serverMode } = useMainContext()
+    const { serverMode, licenseData } = useMainContext()
     const [showCreateSelectionModal, setShowCreateSelectionModal] = useState(false)
 
+    const showingLicenseBar =
+        licenseData && licenseData && (licenseData.licenseStatus !== LicenseStatus.ACTIVE || licenseData.isTrial)
+
     const handleCreateButton = () => {
         setShowCreateSelectionModal((prevState) => !prevState)
     }
@@ -75,7 +79,7 @@ export const HeaderWithCreateButton = ({ headerName }: HeaderWithCreateButtonPro
 
     const renderCreateSelectionModal = () => (
         <Modal
-            rootClassName={`create-modal-wrapper
+            rootClassName={`create-modal-wrapper${showingLicenseBar ? '__with-bar' : ''}
                 ${window._env_.FEATURE_PROMO_EMBEDDED_BUTTON_TEXT ? 'create-modal-wrapper--try-devtron' : ''}`}
             onClick={handleCreateButton}
         >

src/Shared/Components/Header/HeaderWithCreateButton/HeaderWithCreateButton.scss

@@ -20,6 +20,11 @@
     top: 59px;
     overflow: hidden;
 
+    // Adding 28px for license bar/ announcement banner
+    &__with-bar {
+        top: 87px;
+    }
+
     .create-modal-child {
         padding: 10px 15px;
         display: flex;

src/Shared/Components/Header/PageHeader.tsx

@@ -34,6 +34,7 @@ import AnnouncementBanner from '../AnnouncementBanner/AnnouncementBanner'
 import { useMainContext, useTheme, useUserEmail } from '../../Providers'
 import { InfoIconTippy } from '../InfoIconTippy'
 import { IframePromoButton } from './IframePromoButton'
+import { LicenseStatus } from '../DevtronLicenseCard'
 
 const PageHeader = ({
     headerName,
@@ -49,8 +50,14 @@ const PageHeader = ({
     showAnnouncementHeader,
     tippyProps,
 }: PageHeaderType) => {
-    const { loginCount, setLoginCount, showGettingStartedCard, setShowGettingStartedCard, setGettingStartedClicked } =
-        useMainContext()
+    const {
+        loginCount,
+        setLoginCount,
+        showGettingStartedCard,
+        setShowGettingStartedCard,
+        setGettingStartedClicked,
+        licenseData,
+    } = useMainContext()
     const { showSwitchThemeLocationTippy, handleShowSwitchThemeLocationTippyChange } = useTheme()
 
     const { isTippyCustomized, tippyRedirectLink, TippyIcon, tippyMessage, onClickTippyButton, additionalContent } =
@@ -191,6 +198,8 @@ const PageHeader = ({
         <span className="fs-12 fw-4 lh-18 pt-1 pb-1 pl-6 pr-6 ml-8 cn-9 bcy-5 br-4">Beta</span>
     )
 
+    const showingLicenseBar = licenseData && (licenseData.licenseStatus !== LicenseStatus.ACTIVE || licenseData.isTrial)
+
     const renderIframeButton = () => <IframePromoButton />
 
     return (
@@ -267,7 +276,7 @@ const PageHeader = ({
             {showTabs && renderHeaderTabs()}
             {showHelpCard && (
                 <HelpNav
-                    className={`help-card__more-option ${window._env_.K8S_CLIENT ? 'k8s-client-view' : ''}`}
+                    className={`help-card__more-option${showingLicenseBar ? '__with-bar' : ''} ${window._env_.K8S_CLIENT ? 'k8s-client-view' : ''}`}
                     setShowHelpCard={setShowHelpCard}
                     serverInfo={currentServerInfo.serverInfo}
                     fetchingServerInfo={currentServerInfo.fetchingServerInfo}
@@ -289,7 +298,7 @@ const PageHeader = ({
                 )}
             {showLogOutCard && (
                 <LogoutCard
-                    className="logout-card__more-option mt-8"
+                    className={`logout-card__more-option${showingLicenseBar ? '__with-bar' : ''} mt-8`}
                     userFirstLetter={email}
                     setShowLogOutCard={setShowLogOutCard}
                     showLogOutCard={showLogOutCard}

src/Shared/Components/Header/pageHeader.css

@@ -17,6 +17,11 @@
 .help-card__more-option {
     top: 51px;
     right: 65px;
+
+    /* Adding 28px for license bar/ announcement banner */
+    &__with-bar {
+        top: 79px;
+    }
 }
 
 .help-card__more-option.k8s-client-view {
@@ -27,4 +32,9 @@
 .logout-card__more-option {
     top: 51px;
     right: 29px;
+
+    /* Adding 28px for license bar/ announcement banner */
+    &__with-bar {
+        top: 79px;
+    }
 }